Saturday 28 December 2013

Cara merubah warna block di blog

Cara merubah warna block di blog. Block disini maksudnya, warna tulisan dan juga background pada saat kita klik tulisan lalu kita tahan dan tarik sehingga ada warna yang terlihat. Block biasanya digunakan untuk mengcopy tulisan yang ada diwebsite atau blog.

Block sederhananya berwarna biru langit di backgroundnya dan juga warna hitam ditulisannya. Disini kita akan mencoba merubah warna dari background dan warna tulisannya dengan warna yang kita inginkan. Contohnya seperti gambar dibawah ini.
Cara merubah warna block di blog
Seperti contoh gambar diatas. Background tulisan saat di block berwarna hitam dan juga warna tulisannya berwarna putih. Dan kamu bisa menggantinya dengan warna yang kamu inginkan. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
  1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
  2. Lalu klik edit HTML dan cari kode ]]></b:skin> lalu masukan kode berikut ini diatasnya.
  3. ::selection {background:#000000;color:#FFFFFF;}
    ::-moz-selection {background:#000000;color:#FFFFFF;}
    ::-webkit-selection {background:#000000;color:#FFFFFF;}
  4. Terakhir, Save template dan selesai.
Keterangan kode:
  • background:#000000; untuk warna background
  • color:#FFFFFF; untuk warna tulisan
  • jika ingin mengganti background dan warna tulisan gantilah ketiga kode diatas dengan kode warna yang sama
Contoh penggantian warna block background dan warna tulisan 
::selection {background:#107cde;color:#0000000;}
::-moz-selection {background:#107cde;color:#000000;}
::-webkit-selection {background:#107cde;color:#000000;}
Silakan diganti sesuai dengan warna yang kamu inginkan, dan silakan baca juga artikel saya yang lainnya yang berkaitan dengan warna seperti cara membuat background warna transparan atau cara membuat background gradient 2 warna dan juga artikel-artikel lainnya. Semoga artikel diatas bisa bermanfaat untuk anda.

Friday 27 December 2013

Cara mengatur spasi tulisan di blog

Tips dan Trik kali ini adalah tentang cara mengatur spasi tulisan di blog. Spasi atau jarak kosong antara kalimat pada baris atas dan juga baris bawah. Dan juga jarak kosong antara huruf satu dengan yang lainnya. Tujuannya agar tulisan diblog terlihat lebih rapi, dan lebih mudah untuk dibaca.

Contoh spasi atau jarak kosong antar baris kalimat:
Contoh jarak spasi antar baris
Terlihat jauh jarak antara tulisan ini dengan tulisan atas.
Dan contoh spasi atau jarak kosong antar huruf.
Contoh jarak spasi antar huruf
Jarak antara huruf satu dengan huruf yang lain.

Dari contoh diatas sudah jelas kan, perbedaan antara spasi atau jarak kosong antar baris kalimat dan antar huruf. Berikut ini adalah contoh penerapan pengaturan spasi tulisan pada bagian posting blog. Ikuti langkah-langkah dibawah ini.
  1. Silakan login ke blogger, lalu pada halaman dasbor pilih pengaturan Template.
  2. Lalu klik edit HTML dan cari kode ]]></b:skin> dan masukan kode berikut ini diatasnya.
  3. .post-body {
    line-height:1.8em;
    letter-spacing: 0.1px;
    }
  4. Save template, selesai.
Keterangan kode diatas.
  • .post-body { untuk mengatur tulisan di halaman posting blog
  • line-height:1.8em; untuk mengatur spasi antar baris kalimat
  • letter-spacing: 0.1px; untuk mengatur spasi antar huruf
Silakan diatur sendiri sesuai dengan keinginan anda, untuk menambahkan atau mengurangi jarak antar baris ganti  nilai line-height:1.8em; contoh: 2.8em dan untuk spasti antar huruf ganti nilai letter-spacing: 0.1px; contoh: 1px;

Kalau seperti contoh diatas. itu kode spasi antar barisnya saya atur menjadi 2.8em dan spasti antar hurufnya 5px. Untuk pengaturan keseluruhan tulisan dari halaman posting artikel blog saya ini. saya atur spasi antar barisnya menjadi line-height:1.6em; dan untuk spasti antar hurufnya letter-spacing: 0.1px;. Menurut saya sudah cukup enak dilihat tulisan di blog saya ini dengan pengaturan nilai 1.6em untuk baris kalimat dan 0.1 untuk spasi huruf.

Silakan dibaca juga artikel2 saya yang lainnya, seperti membuat pangkat atas12 dan bawah90 di artikel tips dan trik menulis di blog. Dan juga artikel saya yang lainnya. Terima kasih telah berkunjung ke blog saya, dan semoga artikel diatas bisa bermanfaat untuk anda.

    Thursday 26 December 2013

    Cara membatasi jumlah artikel di Label

    Cara membatasi jumlah artikel di label atau kategori. Membatasi yang berarti akan ada batas jumlah artikel yang akan kita tampilkan. Seperti halnya halaman awal blog, kita dapat membatasi jumlah posting menjadi 4 atau 5 sesuai dengan yang kita inginkan. Dengan cara mengatur jumlahnya di pengaturan Tata Letak bagian Posting.


    Bagaimana dengan halaman Label. Normalnya jika kita membuka halaman label, maka semua artikel dengan label yang sama akan terbuka. Tapi dengan menambahkan beberapa kode di URL dari label atau kategori kita dapat mengatur tampilan jumlahnya.

    Dari link diatas, anda akan melihat artikel2 dengan label desain blog, jumlahnya ada 8, dan dibawahnya ada page navigation yang bertuliskan beranda dan posting lama. Jika posting lama diklik maka akan terbuka artikel2 lainnya yang berlabel desain blog.

    Diblog ini jumlah artikel dengan label desain blog sudah mencapai 50an lebih, kalau tampilannya tidak dibatasi, maka artikel yang akan tampil saat dibuka sekitar 20an, diatur oleh blogger sendiri. Dan pasti lama membukanya. Contohnya bisa di klik di link ini Desain blog tanpa pengaturan batas jumlah tampilan. Langsung saja, Cara membatasi jumlah artikel di Label silakan ikuti langkah-langkah dibawah ini.
    1. Login ke blogger, lalu buka halaman blog kamu.
    2. Lalu klik salah satu label yang kamu miliki. Lalu copi URL di address bar dan pastekan ke Notepad.
    3. Selanjutnya tambahkan kode ?max-results=8 dibelakangnya. Contoh:
    4. http://fandrajuani.blogspot.com/search/label/Desain%20Blog

      dan tambahkan kode ?max-results=8 jadinya seperti dibawah ini.

      http://fandrajuani.blogspot.com/search/label/Desain%20Blog?max-results=8
    5. Sekarang, cara memasangnya di blog. contohnya di menu laman. Silakan ke pengaturan Laman > Laman Baru > Alamat Web > lalu masukan Alamat web (URL) dan beri judul sesuai dengan nama label. Save, Selesai.
    Ganti Kode 8 dari kode ?max-results=8 dengan jumlah yang diinginkan, misalkan 5 atau 4. Silakan diatur sendiri sesuai dengan keinginan. Itulah sedikti tips trik tentang Cara membatasi jumlah artikel di Label. Semoga bisa bermanfaat untuk anda.

      Tuesday 24 December 2013

      Cara membuat link terbuka di tab baru

      Kali ini saya akan coba bagikan kode HTML yang berfungsi untuk membuat semua link yang ada di blog terbuka ditab baru pada saat diklik. Dengan begitu pengunjung blog akan lebih mudah untuk membuka link2 yang ada diblog kita, jadi tidak perlu lagi klik kanan open link in new tab.

      Link adalah alamat url dari suatu halaman website, contohnya seperti ini fandrajuani.blogspot.com. Langsung saja kebagian inti, cara membuat link terbuka ditab baru. Ikuti langkah-langkah dibawah ini.
      1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
      2. Dan klik Edit HTML, lalu cari kode </head> gunakan Ctrl + F untuk memudahkan pencarian.
      3. Setelah ketemu, masukan kode berikut ini diatasnya.
      4. <base target='_blank'/>
      5. Terakhir, save template. Selesai.
      Mudahkan, dengan menambahkan kode <base target='_blank'/>, maka seluruh link yang ada di blog kita akan terbuka dihalaman atau tab baru ketika diklik. Selain untuk memudahkan pengunjung untuk membuka setiap link yang ada di blog, kode ini juga akan meningkatkan total tayangan laman dari blog kita. 

      Atau jika ingin membuat link terbuka ditab baru, tapi tidak disemua link di blog. Kamu bisa tambahkan kode target="_blank" atau target='_blank' di kode link HTML kamu. Contoh:
      <a href="http://fandrajuani.blogspot.com/p/blog-page_25.html" target="_blank" title="Profil">Profil</a>
      Hasilnya: Silakan klik link ini Profil

      Silakan dibaca juga artikel2 saya yang lainnya seputar seo seperti artikel tentang belajar seo untuk blogger pemula, tips dan mempercepat loading blog dan juga cara mempercepat loading blog lanjutan. Sedikit informasi seo kepanjangannya search engine optimization, fungsinya agar blog kita bisa masuk di halaman google search, jadi ketika ada yang mencari artikel yang berkaitan dengan judul artikel yang telah kita buat. 

      Maka blog kita akan muncul, walaupun tidak dihalaman pertama, bisa jadi dihalaman kedua dan seterusnya. Seiring waktu berjalan, jika artikel kita sudah sering dikunjungi. Maka nantinya akan masuk kehalaman pertama dari google search, sesuai dengan kata kunci yang dimasukan orang ke dalam mesin pencari google search. Terima kasih telah berkunjung dan semoga artikel diatas bisa bermanfaat untuk anda.

        Cara membuat google custom search diblog

        Cara membuat google custom search di blog, yang berfungsi untuk memudahkan pengunjung untuk mencari artikel yang ada diblog. Cara menggunakannya, masukan kata kunci tulisan ke dalam kotak search, lalu enter atau klik tombol search, maka artikel2 yang berhubungan dengan artikel yang dicari akan muncul. Contoh gambar kotak search google custom.

        Cara membuat google custom search diblog
        Seperti contoh gambar diatas, ada tulisan GoogleTM Pencarian Kustom didalam kotak penelusurannya. Untuk lebih jelasnya tentang cara membuat google custom search di blog. Ikuti langkah-langkah dibawah ini.
        1. Login ke blogger. Selanjutnya kunjungi situs ini https://www.google.com/cse/
        2. Lalu pada situs itu, Masukan alamat blog kamu. Dan atur languange nya ke bahasa indonesia(jika ingin seperti contoh gambar diatas) untuk bahasa inggris tulisannya kira-kira akan menjadi seperti ini GoogleTM Custom Search. Silakan diatur sesuai dengan yang diinginkan. Lalu klik Create.
        3. Cara membuat google custom search diblog
        4. Setelah itu klik get code dan copi kode scriptnya.
        5. Selanjutnya, kembali ke blogger. Pilih pengaturan Tata Letak > klik Tambahkan Gadget > HTML/Javascript dan pastekan kode script dari google tadi.
        6. Save dan tempatkan gadget sesuai dengan yang kalian inginkan. Selesai.
        Untuk merubah tampilan kotak google custom search, kunjungi lagi situs  https://www.google.com/cse/ lalu  klik search engine yang telah dibuat tadi, dan pada pilih Look and Feel. Nah disitu ada pengaturan Layout, Themes, Customize, dan Thumbnail silakan atur sesuai dengan yang dinginkan. Setelah selesai memodifikasi tampilannya, klik Save & Get Code dan pastekan lagi ke Gadget HTML/Javascript di pengaturan Tata Letak tadi. 

        Jika ingin hasil pencarian dari kotak seacrh google custom terbuka dihalaman tab baru. Pada pengaturan layout di situs google custom tadi, pilih Google Hosted dan pilih New Window. Jangan lupa disave dan ambil/copi kode scriptnya, dan pastekan kembali ke gadget HTML di blogger. Selesai. Semoga Bermanfaat.

          Sunday 22 December 2013

          Once Upon A Time

          With just 3 days before Christmas (how in the world did that happen?), I am sure there are many of you still on the lookout for last minute gifts.  If you have a child on your list who loves creative play and listening to stories, this gift I am about to write about was made for them.

          Yesterday, Quinn received one of the most adorable gifts from her bestie Liv and it has immediately become one of her favorites.  Storytime Toys has designed three toy house and story sets for your preschooler (young school age children will love these as well).  Quinn got the Three Little Pigs story but I ran out this morning and purchased the Hansel and Gretel set as well for her to open on Christmas morning.   She insisted on putting together the Three Little Pigs set as soon as we got home and played with it for hours.  The image below shows all three of the sets: Three Little PigsHansel and Gretel  and Goldilocks and The Three Bears.


          There are a ton of things to love about these sets, both for kids and their grownups.  For the kids, they are colorful and easy to manipulate.  Once they get the hang of putting the pieces together, they should be able to put them together on their own, or with just a little help from their big people.  They can follow the story provided in the book or they can make up their own stories.  For adults, each of the Storytime Toys sets is made of super durable materials that will take the abuse that your child(ren) are sure to give it.  They come with a sturdy box that you can store all the pieces in after your little storytellers are finished playing.  This is a bonus for all families who have more toys than they know what to do with, but an even bigger bonus to people like me who live in tiny apartments with WAY too much stuff.  Quinn was asking for a giant dollhouse from Santa this year, but we just don't have the square footage in our place for such a thing yet.  This is a great compromise for our household (especially since Quinn is a giant fan of fairytales).

          In addition to all of the pieces for the houses, including people and accessories, each set comes with a book with the story included.  This is a great way to work on improving focus and attentional skills and play skills in children who may struggle with that.  This is a toy that I think every single one of my speech therapy friends should have for their offices.  One of my favorite things about each book is that they with a couple of DIY activities related to the set.  For example, in the Three Little Pigs set, there are instructions to make mud puddles and picture frames to hang on the walls of the pigs houses.  I am sure that there are a bunch of other ideas that you can come up with on your own to go along with each of the stories.

          In addition to what has been mentioned already, the following occupational therapy goals can be worked on when playing with the Storytime Toys toy house and story sets:
          Improve Fine Motor Skills-putting the pieces of each of the houses together helps to work on improving both increasing grasp strength and in-hand manipulation skills.  There are some small pieces that need to be together which is great for encouraging children to use a fine pincer grasp during play.  I will be sure to remind the kids to use a fine pincer grasp when pulling the pieces apart after they are all done playing.
          Improve Bilateral Coordination Skills-in order to put these sets together, you will need to use both hands at the same time.  You may need to remind your child to hold one piece stable while putting the other pieces into place.
          Improve Visual Motor/Perceptual Skills-each set comes disassembled.  Putting them together is a great way to work on improving visual motor and visual motor skills.  The kits don't come with step by step instructions, but by looking at the picture on the box, it is easy to figure out how to put them together.  For your younger kids, they may need more assistance with this but be sure to try and get them to problem solve and figure it out on their own before doing it for them.  This could also be a great way to work on building a child's frustration tolerance when presented with more challenging activities.
          Improve Language Skills-like I have already mentioned, this toy set is perfect for all my speech therapist friends.  It is a great way to work on expanding a child's language and vocabulary skills.  The Three Little Pigs set is also great for working on breath control because you can have the kids work on blowing the houses down while following the story.  I am sure I am missing at least a million other speech and language goals that can be worked on with these sets.  Maybe if any of you out there reading this are speech therapists and want to comment on what goals you work on while using these sets, please message me and I will add any and all suggestions.
          Improve Social Skills-this is a great way for children to play together.  Not only can they put the sets together as a team, they can then act out the story after it is all put together.  I am excited to try this with one of my preschool social skills groups.  I love the idea of having them work together to put the whole thing together, but then to act out the story as a group.  I am already trying to brainstorm the fine motor or arts and craft project that can be done at the end so they can take it home and be able to tell their parents what they worked on during group.

          I am already trying to think about all the kids I can get these sets for.  I am thinking how nice these would be for some of my friends who have an older child and a preschooler....they older sibling could be the one to read the story and help the child put the houses together.  A great activity to encourage play skills at home especially for those parents who worry about their kids relying on electronics and television too much.

          So if any of you are still trying to figure out what to get that special little one in your life, I think this would be a perfect gift.  I have seen them in two stores so far, Little Things in Park Slope, Brooklyn and Tinker Toys in Woodstock, NY.  If you go to this link here, you will find a list of all the stores that sell them.  I know how convenient it is to buy things from Amazon, but remember what a difference each of your purchases make to all these independent toy stores.

          If you have any of these sets and want to share some craft activities to go along with them, please share them with us.  I love hearing from each of you and have gotten such great suggestions that I am able to use both at work and at home.  I am always a click away and check my email all the time!


          Saturday 21 December 2013

          Cara menuliskan rumus di microsoft word

          Kali ini saya akan coba bagikan artikel tentang Cara menuliskan rumus di microsoft office word, seperti rumus matematika dan lain-lainnya. Caranya cukup sederhana, kita hanya perlu memilih format rumus yang telah disediakan oleh microsoft word dan mengeditnya sesuai dengan yang kita inginkan. Untuk lebih jelasnya silakan ikuti langkah-langkah dibawah ini.
          1. Silakan buka program microsoft word, lalu klik Insert pada Tab atas disebelah HOME.
          2. Lalu klik Equation letaknya berada dipojok kanan atas. Contoh gambar:
          3. Cara menuliskan rumus di microsoft word
          4. Dan pilih salah satu format rumus lalu edit sesusi dengan yang kamu inginkan. Selesai.
          Untuk mengedit rumus, klik rumus lalu ganti dengan kode yang diinginkan, untuk menambahkan kode baru, klik rumus yang sudah dibuat. Lalu klik tab Design yang ada dipojok atas menu bar. dan cari kode rumus baru yang ingin dimasukan. Untuk memindahkan posisinya, blok rumus yang sudah dibuat > Cut > dan pastekan ketempat yang diinginkan. Seperti contoh gambar dibawah ini, rumus diletakan ditengah-tengah tulisan.

          Cara menuliskan rumus di microsoft word

          Jika ingin menempatkan rumus tidak ditengah2 tulisan kalimat seperti gambar diatas atau diletakan dibaris baru, klik rumus yang sudah dibuat, lalu klik HOME pada bagian atas kiri menu word dan klik paragraph pada bagian align, lalu pilih posisi yang diinginkan, selesai. Semoga Bermanfaat.

            Cara menghilangkan widget dihomepage

            Cara menghilangkan widget dihomepage atau halaman awal blog. Widget akan dihilangkan atau disembunyikan pada halaman homepage blog saja, widget tersebut hanya akan muncul di halaman posting blog. 

            Dengan begitu kita dapat menghemat ruang dari halaman homepage blog. Untuk lebih jelasnya tentang cara menghilangkan widget tertentu dihalaman awal blog, silakan ikuti langkah-langkah dibawah ini.
            Pertama yang harus dilakukan adalah menentukan widget mana yang akan kita sembunyikan dan Mengambil kode ID nya.
            Contoh: Widget dengan judul Random Post. Maka kita cari kode ID dari widget yang berjudul Random post. Caranya: Login ke blogger, pilih pengaturan template > klik edit HTML > Lalu cari kode Random Post(Gunakan Ctrl F untuk memudahkan pencarian). Seperti contoh gambar dibawah kode id dari widget Random Posts adalah HTML4
            Cara menghilangkan widget dihomepage
            Setelah menemukan kode ID dari widget yang akan disembunyikan. Sekarang cari kode </head> lalu masukan kode berikut ini diatas </head>
            <style type='text/css'>
            <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            #HTML4{display:none;}
             </b:if> </b:if> </style>
            Terakhir Save template, selesai.
            Kode #HTML4 adalah kode ID dari widget yang akan disembunyikan dan kode display:none berfungsi untuk menyembunyikan widgetnya. Widget tersebut akan hilang dari halaman awal blog, dan akan muncul pada halaman posting blog.

            Silakan mencoba dengan widget2 yang lainnya. Yang terpenting adalah kita harus mencari terlebih dahulu kode id dari widget yang akan disembunyikan dari halaman awal blog, lalu meletakannya diatas </head> dengan format kode seperti diatas. Selesai.

            Wednesday 11 December 2013

            Cara membuat tabel diblog

            Cara membuat tabel diblog. Akan kita mulai dari Tabel sederhana terlebih dahulu.
            Silakan buka entri baru, lalu klik pada bagian HTML disebelah Compose.
            Selanjutnya ketikan kode berikut ini.
            <table>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            </tr>
            </table>
            Setelah itu klik bagian Compose, Maka hasilnya akan menjadi seperti ini.
            123
            Selanjutnya membuat tabel 2 baris
            <table>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            </tr>

            <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            </tr>
            </table>
            Hasilnya
            123
            456
            Dari contoh diatas, kita dapat melihat bahwa kode tr digunakan untuk membuat tabel ke bawah, sedangkan kode td digunakan untuk tabel kesamping. Jadi jika ingin menambahkan jumlah tabel, silakan tambahkan kode tr dan kode td sesuai dengan keinginan.
            Selanjutnya membuat Tabel dengan warna background, lebar tabel serta warna tulisan dengan cara menambahkan kode bgcolor="red" border="1" style="color: white; width: 400px;" pada bagian <table>. Contoh:
            <table bgcolor="red" border="1" style="color:white;width:400px;">
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            </tr>
            <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            </tr>
            </table>
            Hasilnya
            123
            456
            Sekarang kita coba menggunakan tabel dengan judul diatasnya, dan juga mengatur lebar disetiap judul tabel. Tambahkan kode <th>Judul</th> Contoh:
            <table bgcolor="red" border="1" style="color: white;">
            <tbody>
            <tr>
            <th width="40">No</th>
            <th width="400">Nama</th>
            <th width="400">Kelas</th>
            </tr>
            <tr>
            <td>1</td>
            <td>Fandra Juani</td>
            <td>3</td>
            </tr>
            <tr>
            <td>2</td>
            <td>Juani Fandra</td>
            <td>6</td>
            </tr>
            </table>
            Hasilnya
            NoNamaKelas
            1Fandra Juani3
            2Juani Fandra6
            Bisa juga dengan menggunakan background yang berbeda. Contoh:
            <table bgcolor="white" border="1" style="color: black;">
            <tr>
            <th bgcolor="blue" width="40">No</th>
            <th bgcolor="green" width="400">Nama</th>
            <th bgcolor="red" width="400">Kelas</th>
            </tr>
            <tr>
            <td>1</td>
            <td>Fandra Juani</td>
            <td>3</td>
            </tr>
            <tr>
            <td>2</td>
            <td>Juani Fandra</td>
            <td>6</td>
            </tr>
            </table>
            Hasilnya
            NoNamaKelas
            1Fandra Juani3
            2Juani Fandra6

            Untuk mengatur posisi tulisan kamu bisa gunakan Tool Alignment yang ada dipilihan tool pada saat kita menulis di entri. Sebenarnya masih banyak kode dengan fungsi lain yang dapat digunakan untuk membuat tabel diblog, insyaallah nanti akan saya coba buat diartikel lainnya. Silakan dicoba sendiri dan Semoga bisa bermanfaat untuk anda.

            Tuesday 10 December 2013

            Kids Can Be Comics Too!

            Many of my blog posts are directed towards the preschoolers that I see.  I can't seem to stop myself when I see great toys for preschoolers because I have a preschooler of my own at home and can get double usage out of the toys that I purchase.  This doesn't mean that I am not constantly on the lookout for great toys and activities for my school age children.  Last week, I picked up the most amazing activity after I saw a Facebook post by Norman & Jules, my favorite toy store in Park Slope.  I was sold by just seeing the picture for the mu Magnetic Comic Strip Kit that they posted.  I couldn't get there fast enough and when I did, I was delighted to see that there were two kits.  I quickly purchased both the Original and the Aquamarine series and rushed off to see my 9 year old who was going to love them.

            There are so many things to love about this toy.  I love anything that requires a child to use their imagination; more importantly, I love a toy that requires imagination AND no electronics.  I feel like so many kids depend on electronics these days and while I do use them during my sessions with kids, I like to do as much hands on work as possible.  Many of the older kids that are on my caseload are seeing me to work on handwriting and organizational skills so it is much more important that work on the iPad is kept to a minimum.  These magnetic comic strip kits are a perfect way to work on handwriting, organizational skills and other executive functioning goals.  They can be used on a fridge or any other magnetic surface but can also be used on the floor or a table.  

            Each kit comes with over 20 different magnets.  There are also blank magnets and speech bubble magnets included in each kit so the comic creator can add their own pictures and write their story out.  Depending on the age and skill level of the child you are working with, you can come up with specific requirements for their comic strip.  For example, you might tell a child that they need to use 8 magnets that are provided and then use a certain number of blank magnets and speech bubbles.  For those school age children who have difficulty with organizing his/her work and thoughts, giving them those specific instructions might help them be more successful with this activity.  I have already tried it with some of my kids and have noticed that when I let them do what they want without any direction from me, they have more difficulty focusing and keeping their story flowing.  Like many of us, simple directions and guidelines will often guide us to be more successful in almost all of our work.

            Here are a few more occupational therapy goals that can be worked on using the mu Magnetic Comic Strip kits:
            Improve Grasping Skills-this is a great activity to work on handwriting and for those kids who have a poor grasp but love comics, can be easily tricked into working on holding that marker the correct way if they are doing something fun.  While each set comes with their own dry erase marker, I also would have these smaller sized dry erase markers on hand; remember that sometimes the shorter a writing instrument is, the more likely you will see an expected grasp.
            Improve Organizational Skills-so many of the school age kids I work with are struggling with organizing their work.  They have fantastic, I mean REALLY fantastic ideas, but get so distracted that they don't get their point across the way they intended to.  Sometimes they are so anxious to just get it finished and share it that they forget to focus on the important details that keep a story flowing.  Try and have the children you are working with pick out a certain number of magnets before even beginning and then have them talk through their idea before they even begin writing and drawing.  With time, you can take away some of the prep work but to begin with, it is important to help guide our kids and give them good organizational skills that they can not only use with this activity but with their homework and schoolwork.
            Improve Graphomotor Skills-this is a great activity to work on both handwriting and drawing skills. In addition to having a variety of awesome magnets, you have 4 blank magnets and 2 speech bubbles to fill in on your own.  When I have used these, I have asked that the child be sure to write a certain amount of sentences and draw a certain number of pictures.  They must make sure that whatever they draw relates to the magnets that they have chosen.  For many of my older kids, they are so worried about being perfect and right that they avoid most drawing and handwriting activities.  I find that when they are given specific instructions in addition to being able to be creative, they can be more successful.
            Improve Upper Extremity Strength-I often have children with decreased upper extremity/hand strength work on a raised surface to work on strengthening those muscles.  It tends to get harder to ask a 8 or 9 year old to work on an easel because they think it is childish.  Have the children you are working with put these on the fridge while standing up....make them put their magnets up as high as they can without it being a strain.  They will be so busy creating that they won't even realize that they are working on building up those arm muscles!
            Improve Social Skills-this is a great activity for a dyad or small group of kids to do together.  They can come up with a story as a team and each be designated one speech bubble and two blank magnetic squares.  The most important thing is that they work together to come up with a story and do all they can to stick to the story at hand so that when they are putting it all together at the end that it makes sense.  This may require compromise and flexibility...something that so many of the kids we work with struggle with.  

            As I mentioned earlier, I purchased my sets at Norman & Jules in Park Slope.  If you can't get to the store in person, then be sure to check them out online.  I promise you that you will find more than you intended if you spend enough time in their store or on their website!  In addition to having an amazing selection of toys, books and craft sets, they donate a portion of all their yearly sales to The March of Dimes in honor of their daughter and her friends who were all born prematurely.

            I would love to hear from you and am only a click away.  I love the idea of using comics for my older kids who need to work on handwriting, drawing and executive functioning skills.  Do any of you have any other great create your own comic kits to share with me and my readers?    I love hearing from all of you and really appreciate all your comments and suggestions.  They not only help me but also benefit all the kids I work with!







            Tuesday 3 December 2013

            Cara merubah tampilan dan posisi tanggal di blog

            Artikel kali ini saya akan coba bagikan cara merubah tampilan tanggal diblog dengan menambahkan kode css, serta merubah posisi tanggal ke bagian bawah judul posting atau bisa juga kita pindahkan ke sebelah kanan judul posting.

            Cara merubah tampilan dan posisi tanggal blog

            Seperti contoh gambar diatas, tampilan tanggal sudah saya modifikasi jadi berwarna putih dengan background warna biru, serta posisinya yang berada disebelah kanan judul posting blog. Cara membuatnya, ikuti langkah2 dibawah ini.
            1. Login ke blogger, ke pengaturan tata letak > desainer template > tingkat lanjut > tambahkan Css. Lalu masukan kode ini kedalamnya.
            2. h2.date-header{
              margin:3px 0px 0px 0px;
              float: right;
              z-index: 99;
              background-image: -moz-linear-gradient(center top , #107cde 40%, #004d94 100%);
              box-shadow:0px 10px 10px #aaaaaa;}
            3. Terapkan ke blog, selesai.
            Keterangan kode:
            • margin: untuk mengatur spasi atas(3px) kanan(0px) bawah(0px) kiri(0px) tanggal.
            • float: right; menempatkan tanggal diposisi kanan sebelah judul posting.
            • z-index: 99; gunanya agar tanggal terlihat.
            • background-image: fungsinya untuk mengatur warna background tanggal
            • box-shadow: warna bayangan diluar kotak tanggal.

            Selanjutnya adalah menempatkan tanggal dibawah judul posting dengan posisi sebelah kanan, contohnya seperti gambar dibawah ini.


            Cara merubah tampilan dan posisi tanggal blog

            Cara membuatnya, ikuti langkah-langkah dibawah ini:
            1. Login ke blogger, kepengaturan template. Klik edit HTML dan cari kode dibawah ini.
            2. <b:if cond='data:post.dateHeader'>
              <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
              </b:if>
            3. Kamu akan menemukan 3 kode yang sama dengan kode diatas, Cut atau potong kode yang pertama. Lalu pastekan di Notepad.
            4. Selanjutnya cari kode <div class='post-header-line-1'/>. Setelah ketemu, pastekan kode dari langkah 1 tadi ke bawah <div class='post-header-line-1'/>.
            5. Save template Selesai.
            Catatan: ada 2 kode <div class='post-header-line-1'/> yang ada ditemplate, pilih yang kedua. Lalu pastekan kode dari langkah 1 kebawahnya. Jangan lupa juga untuk mengatur kode css dari tampilan tanggalnya, seperti yang tertera di Keterangan kode. Khusus untuk kode float:right; jika kamu ingin menempatkan tanggal disebelah kiri dibawah judul posting. ganti kode float:right; dengan kode float:left;.

            Semoga Bermanfaat.

                Saturday 30 November 2013

                Cara membuat tombol sosial media share diblog

                Cara membuat sosial media share, seperti facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share dapat kita tempatkan dibawah judul posting atau dibawah posting. Dan dapat juga ditempatkan diwidget HTML/javascript di bagian sidebar blog.
                Cara membuat tombol sosial media share
                Cara membuat sosial media share di blog, ikuti langkah-langkah dibawah ini.
                1. Login ke blog, lalu pilih pengaturan Template.
                2. Klik edit HTML dan cari kode </head> lalu masukan kode berikut ini diatasnya.
                3. <script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
                  <script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
                4. Save template. Selesai.
                Setelah menempatkan kode script. Sekarang kita akan coba memasukan kode share di bagian2 blog, seperti di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya seperti dibawah ini.
                Sosial media share dibawah judul posting
                1. Ke pengaturan template, klik edit hmtl dan cari kode <div class='post-header-line-1'/>
                2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 lalu masukan kode share button ini dibawah nya.
                3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
                  <p align='left' class='kode-share-buttons'>
                  <keterangan>Bagikan Artikel >>></keterangan>
                  <span class='st_facebook_hcount' displayText='Facebook'/>
                  <span class='st_plusone_hcount' displayText='Google +1'/>
                  <span class='st_twitter_hcount' displayText='Tweet'/>
                  <span class='st_pinterest_hcount' displayText='Pinterest'/>
                  <span class='st_digg_hcount' displayText='Digg'/>
                  <span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
                  <span class='st_fblike_hcount' displayText='Facebook Like'/>
                  </p></b:if>
                4. Silakan gunakan kode share yang kalian inginkan, dan untuk tulisan Bagikan Artikel >>> Kamu bisa ganti dengan kata yang kamu inginkan. Setelah itu save template, selesai.
                Sosial media share dibawah posting
                1. Ke pengaturan template, klik edit hmtl dan cari kode <data:post.body/>
                2. Kode <data:post.body/> ada 3,  piih yang nomor 3 lalu masukan kode share button dibawah nya.
                3. Kode kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
                4. Save template, selesai.
                  Sosial media share di widget atau sidebar
                  1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
                  2. Lalu masukan kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
                  3. Save gadget/widget, lalu tempatkan sesuai dengan yang kalian inginkan, selesai.
                  Dan yang terakhir adalah menambahkan  kode css untuk menambah tampilan dari tombol sosial media share. Caranya.
                  1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan kode ini kedalmnya.
                  2. .kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
                    keterangan {color:#000;font-weight:bold;margin-right:20px;}
                  3. Terapkan ke blog selesai.
                  Semoga Bermanfaat.

                  Friday 29 November 2013

                  Cara membuat icon sendiri dengan mudah

                  Tutorial kali ini saya akan coba bagikan tips dan trik tentang cara membuat icon sendiri dengan mudah, menggunakan program microsoft office PowerPoint. Icon atau lambang gambar biasanya digunakan untuk logo website atau blog, ada juga untuk icon disebelah tulisan menu, bahkan digunakan juga sebagai menu.

                  Contohnya seperti gambar dibawah ini:

                  Cara membuat icon sendiri dengan mudah
                  Cara membuat icon sendiri dengan mudah
                  Cara membuat icon sendiri dengan mudah






                  Gambar diatas adalah hasil dari pembuatan icon di PowerPoint, yang disave dalam format PNG, agar background icon tetap transparant. Untuk lebih jelasnya tentang cara pembuatan icon di microsoft PowerPoint. Ikuti langkah - langkah dibawah ini.
                  1. Silakan buka program PowerPoint. Lalu pilih bagian Insert.
                  2. Selanjutnya pilih tulisan Shape dan pilih bentuk gambar yang kita inginkan.
                  3. Setelah gambar nya sudah ada, klik gambar tersebut dan pilih Format dibagian atas bar powerpoint.
                  4. Lalu edit gambar itu sesuai dengan yang kita inginkan.
                  5. Untuk menyimpan gambar, klik Kanan gambar tersebut dan pilih Save as picture lalu save dalam format PNG. Selesai.
                  Contoh gambar icon yang saya buat. Icon pertama menggunakan satu gambar awan dan Icon kedua menggunakan 2 gambar gambar awan dan matahari.

                  Cara membuat icon sendiri dengan mudah

                  Cara membuat icon sendiri dengan mudah




                  Untuk membuat icon dengan 2 gambar, silakan buat 2 gambar di powerpoint, lalu blok ke 2 gambar setelah itu baru Save As Picture. Selesai. Jika kamu ingin menggunakan icon dengan ukuran yang sama, kamu bisa gunakan photoshop, caranya bisa dilihat di artikel cara membuat icon untuk website.

                  Untuk mencoba hasil gambar yang telah kamu buat diblog. Kamu bisa baca artikel mengganti tulisan beranda posting lama baru yang letaknya dibawah posting dengan gambar. Tapi sebelumnya upload terlebih dahulu gambar kamu ke blog dan ambil urlnya, caranya baca di cara upload dan ambil url gambar.

                  Itulah sedikit tips dan trik dari saya dalam membuat icon sendiri dengan mudah menggunakan program microsoft office PowerPoint yang dapat digunakan untuk mendesain icon blog atau website anda sendiri. Semoga bisa bermanfaat untuk anda.

                  Thursday 28 November 2013

                  Cara merapikan tulisan hasil copi internet

                  Cara merapikan tulisan hasil copi internet di microsoft word dengan menggunakan program notepad. Jika kita mencopi tulisan dari internet/website atau blog orang, lalu langsung kita pastekan ke microsoft word. Maka format tulisan dari internet pun akan ikut masuk ke microsoft word. Seperti contoh gambar dibawah ini. Sebelum dan sesudah dirapikan.

                  Cara merapikan tulisan hasil copi internet

                  Dari gambar diatas kita bisa melihat, tulisan hasil copian internet jika langsung kita pastekan di microsoft word, maka tulisan aslinya pun akan ikut ke microsoft word. Berbeda dengan hasil copian internet jika sudah di pindahkan ke program notepad, lalu baru kembali ke microsoft word. Maka format tulisan akan sama yaitu format font Calibri dengan ukuran 11, tidak ada format lain. Sehingga memudahkan kita untuk merapikannya. 

                  Langsung saja kebagian utama. Cara merapikan tulisan hasil copi internet.
                  1. Pertama, silakan copi tulisan yang ada diinternet. Diwebsite atau diblog orang. Selanjutnya pastekan di Microsoft word.
                  2. Dari hasil copian di microsoft word, copi tulisan yang akan dirapikan.
                  3. Lalu pastekan ke program Notepad(Start > All Program > Accessories > Notepad)
                  4. Setelah itu copi tulisan yang ada dinotepad, dan pastekan kembali ke Microsoft Word. Selesai.
                  Kekurangan dari format ini adalah notepad tidak membaca gambar, jadi yang terbaca hanya tulisan saja. Bagaimanapun bentuk format tulisan dari sebuah tulisan, jika sudah masuk ke notepad. Maka tulisan tersebut akan berformat font Calibri ukurannya 11. Jadi istilahnya notepad ini gunannya untuk menetralisir format tulisan. 

                  Memang tidak sepenuhnya rapi, masih harus dirapikan sendiri tulisan di microsoft word. Tapi setidaknya format2 tulisan yang berwarna-warni dari link2 blog orang akan hilang. Jadi tidak harus mengganti warna link satu persatu dimicrosoft word. Semoga Bermanfaat.

                  Wednesday 27 November 2013

                  Cara membuat background warna transparan

                  Background warna transparan, yang berarti background dengan menggunakan warna transparan, tetapi background aslinya juga terlihat. Jadi background awal juga terlihat, misalkan background awal kita menggunakan gambar, dan background warna transparan kita warnanya hitam. Maka warna transparan hitam dengan background gambar juga akan terlihat.

                  Cara membuat background warna transparan

                  Seperti contoh gambar diatas,background dasar yang digunakan adalah background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini adalah beberapa kode warna background yang dapat digunakan untuk membuat background warna transparant.

                  background:rgba(0,0,0, 0.3);
                  background:rgba(0,0,0, 0.8);
                  Sebelumnya saya jelaskan sedikit tentang kode diatas.
                  • Ketiga kode awal digunakan untuk mengatur kode warna. kode warna 0,0,0 adalah warna dasar Hitam.
                  • Untuk kode terakhir 0.3 dan 0.8 digunakan untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar kode terakhir, maka akan semakin hitam. Kode terakhir ini hanya sampai kode 1. Contoh:0,0,0, 1.
                  Untuk mengganti dengan warna lain, kamu bisa coba kode dibawah ini.

                  Untuk warna merah - background:rgba(204,0,0, 0.6);
                  Untuk warna pink - background:rgba(204,0,204, 0.8);
                  Untuk warna biru - background:rgba(0,0,204, 0.8);
                  Untuk warna Hijau - background:rgba(0,204,0, 0.8);
                  Untuk warna Kuning - background:rgba(204,204,0, 0.8);
                  Untuk warna Orange - background:rgba(255,102,0, 0.8);
                  Dan masih banyak lagi warna yang lainnya. Untuk melihat kode warna, kamu bisa lihat diphotoshop, lalu klik pada bagian set foreground color(gambar kotak untu ganti warna). Lalu lihat kode pada bagian RGB nya.

                  Cara membuat background warna transparan

                  Seperti contoh gambar diatas, pertama klik dulu bagian kotak yang sudah saya beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 kode RGB yang bertanda kotak merah itu untuk digunakan diwebsite.
                  Dan yang terakhir adalah cara penerapannya di blogger. Sebagai contoh kita akan coba mengedit pada bagian halaman posting blog. Caranya ikuti langkah-langkah dibawah ini.
                  1. Login ke blogger, pada halaman Dasbor pilih pengaturan Tata Letak.
                  2. Selanjutnya klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode halaman posting ke dalamnya.
                  3. .post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
                  4. Dan lihat perubahannya, background nya itu saya beri warna hijau, dengan ketebalan warna 0.5 hasilnya seperti gambar dibawah ini.
                  Cara membuat background warna transparan

                  Untuk mengatur bagian lainnya, coba kamu baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa kode bagian blog yang dapat kamu gunakan. Semoga Bermanfaat.

                  Tuesday 26 November 2013

                  Keep Those Little Turkeys Busy This Thanksgiving!


                  Here's wishing you and yours a very happy and healthy Thanksgiving.  And for those of you who celebrate Hanukkah, may it be a joyous one.

                  I am thankful for all of you for reading and following my blog.  I hope that I have been able to add some fun to your lives with my suggested toys, games and apps.  

                  As Thanksgiving day approaches, I know we are all busy planning our meals and getting ready for friends and family to come and spend the day with us.  Need something to keep your little turkeys occupied while prepping for the Thanksgiving Feast?  Here are a few activities that you can easily prepare for them before hand
                  Instead of using this picture, use blank card
                  stock and have them write a name and add
                  a Thanksgiving sticker

                  1.  Thanksgiving Placecards-Do you have a child who needs to work on handwriting?  Put them in charge of making the Thanksgiving placecards.  Provide them with a list of names to copy and some stickers to decorate the placecards with.  
                  *works on improving graphomotor, grasping, visual perceptual and organizational skills.  Better than all that though is how proud your little one will feel when they look around the table and see everyone sitting behind the placecard they created especially for them

                  2.  Create a Thanksgiving Thankful Tree-have your kids cut out leaves (that you have already drawn out on construction paper) and have them write down what they are thankful for.  Give your children the job of going around to all of your guests and having them write down what they are thankful for as well.  Using Crayola Window Markers, draw a tree on a large window or a glass door and have your children tape them on the tree.  
                  *works on improving graphomotor, grasping, visual motor/perceptual skills, improves speech and language skills (asking people to fill out their leaves) and improves organizational skills


                  I love this traditional hand Thanksgiving
                  turkey....brings back so many
                  early memories 
                  3.  Handprint Thanksgiving Turkey-I vividly remember this arts and craft project from my childhood and since becoming an OT, I have done it with my kids at work year after year.  Depending on the age and skill level of the child, I change the expectations.  For my younger children, I will trace their hand and assign a color for each finger/feather.  For my older children, I make they trace their own hand and then figure out what colors they want to use.  They can cut the handprint and then glue it onto a piece of paper.  If you have a houseful of guests coming and need your little ones occupied for a bit, give them each a handful of names and ask them to make them special holiday cards that they can hand out to your guests as they arrive.
                  *works on fine motor, coloring, cutting, graphomotor, bilateral coordination and visual motor/perceptual skills

                  I love these napkin rings made from empty
                  toilet paper tubes.  They use buttons but you can
                  use any odds and ends kind of materials to
                  make something special for your guests.
                  4.  Homemade Napkin Rings-if you have some empty paper towel and toilet paper rolls lying around, reuse and recycle them to make some homemade napkin rings for your Thanksgiving table.  The possibilities are endless and you can let your children's imagination run wild by providing them with the correct supplies.  Use stickers, markers, buttons, glue, tissue paper, etc. to create unique and special napkin rings for each of your guests.
                  *works on improving fine motor, grasping, graphomotor, bilateral coordination and visual motor/perceptual skills.  Again, your children will feel so proud when they look around that table filled with all the people they love



                  Again, I wish you and yours a very happy and healthy holiday season.  I can already feel the excitement in all of the children I work with and look forward to the upcoming weeks.  Do you have any wonderful holiday craft ideas to share with me or my readers?  I know we are all looking for ways to keep our kids involved in the holiday season and would love to hear from my readers with any ideas they would like to share with me.  I am just a click away and can't wait to test out some of the great ideas you have!

                  Cara buat kotak bayangan diblog

                  Cara membuat kotak bayangan diblog. Maksudnya adalah kita dapat membuat bayangan pada kotak yang ada diblog seperti pada bagian sidebar, posting, header dan juga pada bagian lain-lainnya. Contoh kotak bayangan seperti dibawah ini.



                  Untuk cara menerapkannya ke blog, kita coba edit pada bagian sidebar blog yang ada disebelah kanan/kiri blog. Caranya ikuti langkah-langkah dibawah ini.

                  1. Login keblogger, lalu kepengaturan Tata Letak.
                  2. Selanjutnya klik Desainer Template > Tingkat lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
                  3. .sidebar .widget {box-shadow: 0px 15px 15px #1780dd;}
                  4. Maka hasilnya akan seperti contoh kotak bayangan diatas.
                  5. Dan klik Terapkan ke blog, untuk menyelesaikan editan.

                  Berikut ini beberapa contoh kode box-shadow atau kotak bayangan yang dapat anda gunakan diblog.




                    box-shadow: 0px 0px 15px #1780dd;


                    box-shadow: 5px 5px 5px#1780dd;




                    box-shadow: -5px -5px #1780dd;



                    box-shadow: inset 0 0 10px;



                    box-shadow: 5px 5px 5px 5px #1780dd;















                    Silakan dicoba sendiri diblog anda, dengan menggunakan kode2 diatas. Untuk mengedit pada bagian yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara membuat tulisan bayangan diblog disana ada kode2 bagian dari blog, yang dapat anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog menggunakan kode box-shadow atau kotak bayangan yang dapat digunakan diblog. Semoga bisa bermanfaat untuk anda.

                    Monday 25 November 2013

                    Cara membuat background gradient 2 warna

                    Background gradient fungsinya untuk membuat background warna dengan menggunakan 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Jadi misalkan kita ingin menggunakan warna putih dan biru dibackground blog kita. Maka kita dapat mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya seperti dibawah ini.


                    Background 1 warna dengan menggunakan warna biru.



                    Warna Biru Saja

                    Background 2 warna dengan menggunakan warna biru dan putih.



                    Warna Biru dan Putih

                    Selanjutnya adalah cara membuat dan menerapkannya diblog. Sebagai percobaan kamu bisa coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode background posting berikut kedalamnya.
                    .post{
                    background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}
                    Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.


                    Berikut jenis2 pengaturan warna gradient 2warna yang dapat kita gunakan.


                    Atas - Bawah
                    background: -moz-linear-gradient(top , #ffffff, #1780dd);


                    Kiri - Kanan
                    background: -moz-linear-gradient(left , #ffffff, #1780dd);


                    Warna Berhenti putih-biru-putih-biru-putih
                    background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);


                    Warna Berhenti putih-biru-putih-biru-putih dengan persen%
                    background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);


                    Warna putih dikiri-kanan dan biru ditengah
                    background: -moz-radial-gradient(circle, #1780dd, #ffffff);


                    Posisi dan Ukuran
                    background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);
                    Ukuran: 80% untuk warna putih dan 20% untuk warna biru
                    Posisi: closest-corner pada bagian atas bisa diganti dengan kode
                    closest-side
                    closest-corner
                    farthest-side
                    farthest-corner
                    contain
                    cover
                    Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda agar terlihat lebih menarik. Untuk cara penggunaan dibagian lain, seperti pada bagian header, sidebar atau keseluruh body halaman blog, kamu bisa baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada kode dari bagian2 blog, yang dapat kamu gunakan untuk diberi background 2 warna seperti contoh diatas.
                    Catatan: Gradient 2 warna ini tidak bisa dilihat di browser google chrome, sebabnya saya belum tau, jika sudah tau saya akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga bisa bermanfaat untuk anda.

                    Sunday 24 November 2013

                    Menu gambar dengan posisi sembarangan

                    Menu gambar dengan posisi sembarangan. Maksudnya adalah membuat menu menggunakan gambar, dengan posisi gambar yang tidak beraturan. Gambar bisa ditempatkan diatas, bawah, kanan, kiri sesuai dengan yang kita inginkan. Contohnya seperti dibawah ini.


                    • kumpulan Tutorial Desain Blogger
                    • kumpulan Tips dan Trik Blogspot
                    • Fandra Juani Contact
                    • Daftar Tutorial Desain Blog
                    • profil fandra juani









                    Cara membuatnya, ikuti langkah-langkah dibawah ini.

                    1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
                    2. Dan klik Tambahkan Gadget di bawah header atau disidebar. Dan pilih HTML/Javascript.
                    3. Selanjutnya copi kode HTML dibawah ini, dan pastekan didalam Gadget HTML/Javascript tadi.
                    4. <div id="satu1">
                      <ul>
                      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
                      </ul>
                      </div>

                      <div id="dua2">
                      <ul>
                      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
                      </ul>
                      </div>

                      <div id="tiga3">
                      <ul>
                      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
                      </ul>
                      </div>

                      <div id="empat4">
                      <ul>
                      <li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html" title="Daftar isi"><img alt="Daftar Tutorial Desain Blog" height="74" src="https://lh5.googleusercontent.com/-nwLpXSpn5gU/Uo5XUDFOgkI/AAAAAAAABW8/7TUzv5rBcFk/s133/Daftar%2520Isi.PNG" title="Daftar isi" width="133" /></a></li>
                      </ul>
                      </div>

                      <div id="lima5">
                      <ul>
                      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
                      </ul>
                      </div>
                    5. Selanjutnya, simpan HTML/Javascript.
                    Keterangan kode:
                    • Silakan isi URL Menu dengan URL/Halaman web anda.
                    • Silakan isi URL dari Gambar dengan URL dari gambar anda.
                    • Contoh URL bisa dilihat di div id="empat4

                    Setelah itu ke tahap pengaturan posisi gambar, caranya klik Desainer Template(masih pada pengaturan Tata Letak). Lalu Klik Tingkat Lanjut > Tambahkan Css. Dan masukan kode CSS dibawah ini kedalamnya.

                    #satu1{background:transparent;margin:-10px 0px 0px -100px;float:left;}
                    #satu1 ul{list-style:none}

                    #dua2{background:transparent;margin:-40px 0px 0px 0px;float:left;}
                    #dua2 ul{list-style:none}

                    #tiga3{background:transparent;margin:-10px 0px 0px 0px;float:right;}
                    #tiga3 ul{list-style:none}

                    #empat4{background:transparent;margin:40px -390px 0px 0px;float:right;}
                    #empat4 ul{list-style:none}
                    #empat4 img{position:relative;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .4s ease-in-out}
                    #empat4 img:hover{-o-transform:scale(1) rotate(720deg);-moz-transform:scale(1) rotate(720deg);-webkit-transform:scale(1) rotate(720deg)}

                    #lima5{background:transparent;margin:-40px -160px 0px 0px;float:right;}#lima5 ul{list-style:none}

                    Keterangan Kode:

                    • margin:40px -390px 0px 0px; fungsinya untuk mengatur gambar ke posisi yang kita inginkan, formatnya kode tersebut adalah 40px(atas) -390(kanan) 0px(bawah) 0px(kiri).
                    • float:right;  dan float left fungsinya untuk memudahkan kita menempatkan gambar ke bagian kiri atau kanan
                    • #empat4 img{ dan #empat4 img:hover{ kode tambahan agar gambar berputar ketika disentuh mouse.
                    Atur posisi dari gambar tersebut sesuai dengan yang kalian inginkan.  Setelah selesai mengatur posisi gambar, baru lah klik Terapkan Ke Blog, Selesai.

                    Dengan memasukan kode Css ke bagian Tambahkan Css, kita dapat melihat perubahan posisi gambar secara langsung, ketika kita merubah nilai dari kode Css. Contoh gambar penempatan kode Css didalam ruang Tambahkan Css.
                    Menu gambar dengan posisi sembarangan

                    Silakan baca juga artikel tentang cara membuat menu blog dengan gambar, yang dapat dijadikan pilihan dalam pembuatan menu gambar diblog. Semoga bisa bermanfaat untuk anda.

                      Friday 22 November 2013

                      Cara membuat menu HTML dan Css

                      Cara membuat menu html dan css serta cara mengisi menu tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa menu terdiri dari kode HTML sebagai pokok utama dari menu dan CSS sebagai penghiasnya. Akan saya coba jelaskan sedikit demi sedikit.

                      Kode dasar HTML dari sebuah menu, kira-kira seperti ini.

                      <div id="menu">
                      <ul>
                      <li><a href="URL alamat web">Beranda</a></li>
                      </ul>
                      </div>
                      Maka hasilnya akan menjadi seperti ini.
                      • Beranda
                      Selanjutnya kita coba tambahkan menu yang lainnya. Seperti Profil, Contact, dan Daftas isi.
                      <div id="menu">
                      <ul>
                      <li><a href="URL alamat web">Beranda</a></li>
                      <li><a href="URL alamat web">Profil</a></li>
                      <li><a href="URL alamat web">Contact</a></li>
                      <li><a href="URL alamat web">Daftas Isi</a></li>
                      </ul>
                      </div>
                      Maka hasilnya akan menjadi seperti ini.
                      • Beranda
                      • Profil
                      • Contact
                      • Daftar Isi
                      Dari contoh diatas, setiap menu mempunyai kode sendiri.
                      Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
                      Jadi jika ingin menambahkan menu lagi, kita dapat menambahkan kode dengan format
                      <li><a href ="URL address">Nama menu yang akan dibuat</a></li>

                      Dari kode HTML menu diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bagian CSS/Penghias menu. Dari kode CSS inilah kita dapat membuat menu menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar tulisan dan lain-lainnya. Kode Css akan berjalan sesuai dengan kode HTML yang kita buat.

                      Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, lalu masukan kode HTML dan CSS kedalamnya Dengan format seperti dibawah ini.
                      <style>
                      kode Css
                      </style>
                      kode html
                      Lalu Save, selesai.

                      Lanjut ke bagian Css. Seperti contoh kode HTML diatas. Kita membuat menu dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:
                      #menu { background:#eee;border:1px solid #444444;}
                      Maka hasilnya akan menjadi seperti ini.

                      Selanjutnya menghilangkan bullet list. Tambahkan kode #menu ul {list-style:none;} Maka hasilnya akan menjadi seperti ini.

                      Mengatur jarak antar tulisan. Tambahkan kode #menu ul li {padding:5px;} hasilnya.

                      Mengatur warna,ukuran,tebal tulisan tambahkan kode Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:

                      Mengatur warna tulisan ketika disentuh mouse. tambahkan kode #menu ul li a:hover{color:#aaa;} Hasilnya.


                      Jadi kode keseluruhan dari kode HTML dan CSS diatas adalah seperti ini.

                      <style>
                      #menu { background:#eee;border:1px solid #444444;}
                      #menu ul {list-style:none;}
                      #menu ul li {padding:5px;}
                      #menu ul li a{color:#000;font-size:12px;font-weight:bold;}
                      #menu ul li a:hover{color:#aaa;}
                      </style>

                      <div id="menu">
                      <ul>
                      <li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
                      <li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
                      <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
                      <li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
                      </ul>
                      </div>


                      Sekarang ke tahap pembuatan menu horizontal. Kode HTML nya sama seperti cara diatas, yang berbeda hanyalah kode Css nya kita tambahkan kode float;left pada bagian #menu ul li {padding:5px;float;left; } dan juga kode height:40px; pada bagian #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:

                      <style>
                      #menu { background:#eee;border:1px solid #444444;height:40px;}
                      #menu ul {list-style:none;}
                      #menu ul li {padding:5px;float;left}
                      #menu ul li a{color:#000;font-size:12px;font-weight:bold;}
                      #menu ul li a:hover{color:#aaa;}
                      </style>

                      <div id="menu">
                      <ul>
                      <li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
                      <li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
                      <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
                      <li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
                      </ul>
                      </div>

                      HASILNYA



                      Dari contoh2 diatas, kita dapat melihat perbedaan antara menu horizontal dan vertical terletak pada kode Cssnya sedangkan kode HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu tentang dasar pembuatan menu menggunakan kode HTML dan Css, yang dapat anda kembangkan sendiri sesuai dengan keinginan anda. Semoga Bermanfaat.

                      Wednesday 20 November 2013

                      These Blocks are Golden!

                      I don't really blog about things that I haven't personally tried but with the holidays about a week away and people looking for gifts, I felt it necessary to share this idea.  Yesterday on Facebook, many of my friends, most of them being moms of girls, posted this video.  It's an amazing 2 minutes of creativity and fun and if you haven't seen it, I highly recommend putting the volume up really loud and watching it now!  I watched this video and was instantly convinced to buy these for my own girl.  I can't wait to play these with Quinn once she opens them on Christmas morning.  I will post a full review after that but in the mean time, here is some information for you.  I have a feeling that after this video, these will be selling out so get them now!

                      I had heard about Goldie Blox last year from my sister Kara, a mother of two girls herself.   I am sure many moms of girls out there can agree that Legos and other building toys are great but almost always geared towards boys.  Goldie Blox are created by Debbie Sterling, an engineer who was bothered by how few women there were in the field.  She decided that she wanted to change that and became obsessed with creating a building toy that would introduce young girls to the world of engineering at a young age.  I think she has succeeded!

                      As a mother of a creative and spirited little girl who wants to be a butterfly or a violin when she grows up, I love the idea of introducing her to a world of possibilities when it comes to choosing a career path that makes her happy.  Whether she becomes a butterfly or an engineer, I just want her to know that she can be whatever she wants to be as long as she works hard.

                      As on occupational therapist, I love there is a toy I can bring into my office and play with my girls who lack confidence and a belief that they can be whatever they want to when they grow up.  In addition to working on a million occupational therapy goals, I believe these construction toys will build self-esteem and confidence in these amazing little girls I work with.  Some of the goals that can be worked on are building fine motor strength and coordination, improve visual motor and visual perceptual skills, improve motor planning and improve bilateral coordination skills.  The best part of this is that they can have fun while working on those skills.

                      Below, you will see a couple more pictures and the toy description taken right from the Goldie Blox website.  I will be back after Christmas with a complete review and talk more about the specific occupational therapy goals that can be focused on but I was too excited about this product after watching the wonderful video that I had to share.  I can't wait to see what Quinn comes up with when playing with them.  I can already picture hours of fun and building ahead of us this winter.

                      Happy building friends!  If you have used the Goldie Blox, I would love to hear from you and about your experiences working with kids who have fine motor or visual motor/perceptual/spatial issues.  Do you have suggestions on how to make this a successful activity for them?   I am always a click away and loving hearing from you all!



                      At GoldieBlox, our goal is to get girls building. We’re here to help level the playing field in every sense of the phrase. By tapping into girls' strong verbal skills, our story + construction set bolsters confidence in spatial skills while giving young inventors the tools they need to build and create amazing things.

                      In a world where men largely outnumber women in science, technology, engineering and math...and girls lose interest in these subjects as early as age 8, GoldieBlox is determined to change the equation. Construction toys develop an early interest in these subjects, but for over a hundred years, they've been considered "boys' toys". By designing a construction toy from the female perspective, we aim to disrupt the pink aisle and inspire the future generation of female engineers.
                      We believe there are a million girls out there who are engineers. They just might not know it yet. We think GoldieBlox can show them the way.