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.

Tuesday, 19 November 2013

Cara merubah bullet list diposting blog

Cara merubah tampilan bullet list diposting blog menggunakan gambar. Bullet list atau tanda bulat-bulat yang ada diposting blog akan kita ganti dengan menggunakan gambar, agar terlihat lebih stylish. Contoh gambar lihat dibawah ini.

Cara merubah bullet list diposting blog
Bagaimana??anda tertarik untuk mengganti bullet list diblog anda dengan gambar. Jika tertarik, silakan ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Selanjutnya kepengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. 
  2. Lalu copi kode berikut dan pastekan kedalam kotak tambahkan Css.
  3. .post ul {
    list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOlAfcffmJhXhXWarW8G4pI-Ys7_rUEJkQgOVHtsyKnDuT391UkuNPD_zUwLP1e8A9dHVjKJ2S8lINSn9ay8CckbesBHA6OEit83mGz8WZOFqrvmNrbceeoClE0byesEwWUuEg1DkhR35/s12/bullet%2520list.gif);}
  4. Selanjutnya Klik terapkan ke blog, selesai.
Keterangan Kode:
  • .post ul { kode untuk mengatur bullet list diposting blog.
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOlAfcffmJhXhXWarW8G4pI-Ys7_rUEJkQgOVHtsyKnDuT391UkuNPD_zUwLP1e8A9dHVjKJ2S8lINSn9ay8CckbesBHA6OEit83mGz8WZOFqrvmNrbceeoClE0byesEwWUuEg1DkhR35/s12/bullet%2520list.gif merupakan kode url dari gambar yang akan dijadikan bullet list diposting blog.
Jika ingin menggunakan gambar sendiri, silakan buat gambar yang akan dijadikan bullet list diprogam gambar, buatlah gambar dengan ukuran yang kecil, misalnya 16x16, seperti contoh gambar diatas, gambar bullet list yang saya gunakan ukurannya 12x10. Untuk cara merubah ukuran gambar, kalian bisa baca di artikel cara membuat icon untuk website menggunakan photoshop.

Agar tidak memberatkan loading blog, buatlah gambar dengan format Gif. Karena dengan menggunakan format Gif, ukuran gambar bisa dibawah 1kb, seperti contoh gambar, itu ukurannya hanya 873byte. Satu lagi kelebihan format gif, background gambar transparant. Jadi yang terlihat hanya bagian yang berwarna saja.

Setelah selesai membuat gambar, upload gambar dan ambil Url nya. Caranya bisa baca di artikel cara upload dan ambil url gambar. Dan gunakan url tersebut ke dalam kode .post ul { list-style(url gambar kamu sendiri);}. Selesai. Semoga bisa bermanfaat untuk anda.

    Sunday, 17 November 2013

    Cara membuat author dibawah posting blog

    Cara membuat author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih mudah untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar bisa lihat dibawah ini.

    Cara membuat author dibawah posting blog
    Untuk lebih jelasnya tentang cara membuat author dibawah posting blog. Ikuti langkah-langkah dibawah ini.
    1. Login keblogger, pilh pengaturan template.
    2. Klik edit HTML dan cari kode <data:post.body/> lalu masukan kode ini dibawahnya.
    3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='gambar'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0u7lnfi51yzllYAbNwxQQOpQIrvHsP_cbyBk-FY6BsaM5XIubIHfT_VnIldZGxmncsklEvRYMd4Bc_HJFBalnueMElK1kUrppHJLzMQEOjK6R2Ou7ho2zMa4EL8HqRWi6J9sSxE903yK/s361/Fandra%2520Juani.jpg'/>

      <div class='Penulis'>
      <span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

      <div class='keterangan'>
      <span>Ada Pertanyaan tentang artikel diatas, silakan masukan komentar dibawah. </span>

      <div class='terimakasih'>
      <span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
      <div style='clear:both;'/>
      </div></div></div></div></b:if>
      <div style='clear: both;'/>
      </div>
    4. Kode <data:post.body/> di template blog, biasanya ada 3, masukan kode langkah 2, di bawah kode <data:post.body/>, ketiga2nya.
    5. Selanjutnya, cari kode ]]></b:skin> lalu masukan kode ini didalamnya.
    6. .gambar {
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0kfjyybC_RacWwQljTPeU9EzeMZooBhZSgZzzwvPIq_kfxOea83GXNDCaAj2waViawJnl-hNZihYJDFxLHMxcngmA3ko6kGhOioTQH4WFnPZll6srOSOFdSP1zL9TqWseGIohUO2VqCk/s1600/gt.jpg) repeat-x top center;
      box-shadow:0px 1px 10px #aaaaaa;
      border:2px solid #eeeeee;
      padding:0;
      margin:10px 0;
      font:bold 12px Arial,Sans-Serif;height:100px;}

      .gambar img{
      width:70px;
      height:70px;
      margin:10px;
      float:left;
      padding:4px;
      background:#ffffff;
      border:1px solid #dddddd;
      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;}

      .gambar img:hover{
      -o-transform: scale(1) rotate(720deg);
      -moz-transform: scale(1) rotate(720deg);
      -webkit-transform: scale(1) rotate(720deg);}

      .Penulis{
      float:left;
      margin:10px 0px 0px 0px;
      text-shadow: 2px 2px 5px #107cde;
      font-weight:bold;color:white;}
      d{font-size:180%;color:DarkCyan}
      g{color:red}
      h{color:blue}
      i{color:#ee3e80}
      j{color:pink}
      k{color:black}
      l{font-size:180%;color:violet}
      m{color:DarkCyan}
      n{color:blue}
      o{color:pink}
      r{color:red}

      .Penulis a{
      text-transform:uppercase;
      font-family:Ravie;
      font-size:12px;
      text-shadow:2px 2px 5px #1780dd;
      font-weight:bold;padding:0}

      .keterangan{
      padding:15px 0px 0px 0px;
      color:white;font:italic 12px Arial, Sans-Serif;
      text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

      .terimakasih{
      margin:13px 0px 0px 150px;
      font:italic 12px Arial, Sans-Serif;color:black;
      text-shadow: 2px 2px 5px #ffffff;}
    7. Save template, selesai.
    Keterangan kode langkah 2: 
    • Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
    • Penulis isi dengan nama kamu, tulisannya saya buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.
    Keterangan kode langkah 4: 
    • Gambar untuk memberikan background disemua tulisan. Height nya saya atur 100px bisa anda ganti sesuai dengan keinginan anda.
    • .gambar img{ untuk mengatur ukuran gambar profil author dan juga tambahan kode gambar berputar.
    • .gambar img:hover{ gambar akan berputar ketika disentuh mouse. Penjelasannya baca di artikel cara membuat gambar berputar diblog
    • .Penulis a{ untuk mengatur font atau jenis tulisan nama author.
    • .keterangan{ jika menggunakan keterangan yang panjang. Hapus kode float:left; yang ada di kode .Penulis{ agar keterangan tetap berada disamping gambar profil.
        Silakan diubah sesuai dengan keinginan anda sendiri. Dan baca juga artikel tentang cara membuat tanda penulis dikotak komentar blog, agar terlihat berbeda dengan komentar dari pengunjung, sehingga orang bisa membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.

          Saturday, 16 November 2013

          Modifikasi baca selengkapnya versi Blogger

          Cara modifikasi baca selengkapnya versi blogger. Baca selengkapnya fungsinya untuk memotong artikel pada tampilan awal blog. Jadi pada halaman awal, tidak semua tulisan dari artikel kita akan terlihat, yang terlihat hanya pada bagian awalnya saja. Penggunaannya cukup mudah, kita hanya menekan tombol Insert Jump Break pada saat kita menulis artikel(dientri). Untuk lebih jelasnya, kamu bisa baca di artikel cara membuat read more diblog.

          Dan kali ini kita akan merubah tulisan baca selengkapnya versi blogger dengan menambahkan kode css didalamnya. Contohnya seperti gambar dibawah ini.

          Modifikasi baca selengkapnya versi Blogger
          Langsung saja, cara modifikasi tulisan baca selengkapnya versi blogger. Ikuti langkah-langkah dibawah ini.
          1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
          2. Lalu klik edit HTML dan cari kode <div class='jump-link'>. Dan ganti dengan kode dibawah ini.
          3. <div class='jump-link' style='text-align: right;border:1px solid #dddddd;background:#eeeeee;box-shadow:0px 5px 5px #aaaaaa;margin:5px 0px 0px 450px;padding:5px;background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%);'>
          4. Selanjutnya, save template. Selesai.
          Keteranga kode:
          • style='text-align: right; untuk mengatur tulisan baca selengkapnya disebelah kanan.
          • border:1px solid #dddddd; untuk mengatur border kotak baca selengkapnya.
          • background:#eeeeee; warna backgroundnya.
          • box-shadow:0px 5px 5px #aaaaaa; warna bayangan kotak.
          • margin:5px 0px 0px 450px; untuk mengatur lebar dan panjang kotak baca selengkapnya.
          • padding:5px; untuk mengatur tulisan didalam kotak.
          • background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%); untuk mengatur warna background atas dan bawah kotak baca selengkapnya.
          Selesai sudah cara modifikasi baca selengkapnya versi blogger, yang dapat anda jadikan pilihan untuk mengatur tampilan blog anda. Silakan dimodifikasi sendiri sesuai dengan tampilan yang kalian inginkan. Jika ingin membuat baca selengkapnya secara auto/otomatis. Kamu bisa baca di artikel cara membuat auto reamore diblog. Semoga Bermanfaat.

            Friday, 15 November 2013

            Cara membuat contact form di posting blog

            Cara membuat contact form di blogger, pada halaman posting atau laman blog. Contact form ini fungsinya Untuk memudahkan pengunjung menghubungi kita. Dengan mengisikan nama, email dan juga pesan yang ingin disampaikan ke penulis melalui kotak form yang telah disediakan. Pesan yang dikirimkan, akan masuk ke alamat email yahoo kita, yang kita gunakan diblog. Jadi tinggal buka yahoo dan lihat apakah ada pesan yang masuk dari kontak blogger.

            Cara membuat contact form di blog

            Gambar diatas adalah contoh contact form yang akan kita buat. Caranya ikuti langkah-langkah dibawah ini.
            Langkah pertama : Membuat contact form dihalaman posting atau laman blog.
            1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak
            2. Lalu klik tambahkan Gadget > Gadget Lainnya > lalu pilih Formulir Kontak > Dan letakkan dibagian sidebar paling bawah.
            3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel baru atau buat dilaman > Laman baru > Laman Kosong. Dan Copi kode dibawah ini lalu pastekan dibagian HTML(disebelah compose).
            4. <form name='contact-form'>
              <div>Nama Kamu:</div>
              <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

              <div>Email:</div>
              <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

              <div>Pesan:</div>
              <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p>
              <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

              <div style='text-align: center; max-width: 450px; width: 100%'>
              <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
              <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div>
              </form>
            5. Terakhir beri judul, dan Publikasikan. Selesai.
            Langkah kedua : Merubah tinggi dan panjang dari form nama, email, pesan.
            1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
            2. /* untuk mengatur ukuran form name dan email*/
              .contact-form-name, .contact-form-email {
              max-width: 300px;
              width: 100%;
              }
              /* untuk mengatur ukuran form pesan*/
              .contact-form-email-message {
              max-width: 300px;
              width: 100%;
              }
            3. Lalu terapkan ke blog, jika ingin merubah tingginya tambahkan kode height:100px;. Silakan diatur sendiri.
            Langkah ke 3 : Menghilangkan Contact Form di halaman Blog.
            1. Ke pengaturan Template > Edit HTML > Dan klik Lompat ke Widget > Pilih ContactForm1.
            2. Selanjutnya, buka semua kode, dan hapus beberapa kode didalamnya(hanya kode dibagian ContactForm1 bagian lain jangan dihapus). Sampai yang tertinggal hanya kode dibawah ini
            3. <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
                  <b:includable id='main'>
                <b:include name='quickedit'/>
              </b:includable>
                </b:widget>
            4. Setelah itu, cari kode ]]></b:skin> dan tempatkan kode dibawah ini, fungsinya untuk menghilangkan sisa dari widget contact form dihalaman blog.
            5. #ContactForm1 {
              height: 0px;
              visibility: hidden;
              display: none;
              background:transparent;
              box-shadow:none;}
            6. Save temlate, selesai.
            Widget contact form tetap akan ada di blog kita. Tapi hanya di bagian tata letak saja, pada halaman blog tidak akan terlihat. Jika ingin menambahkan background gambar didalamnya, kamu baca di artikel cara membuat background dihalaman posting. Semoga bisa Bermanfaat untuk anda.

                  Thursday, 14 November 2013

                  Cara merubah tampilan kotak komentar blog

                  Cara merubah tampilan kotak komentar blog, agar terlihat lebih rapi. Dengan cara menambahkan background, box-shawod, warna, serta ukuran dari tulisan yang ada didalam komentar blog. Contohnya seperti gambar dibawah ini.

                  Cara merubah tampilan kotak komentar blog

                  Untuk lebih jelasnya tentang cara merubah tampilan kotak komentar blog. Ikuti langkah-langkah dibawah ini.
                  1. Login ke blogger, pili pengaturan Tata Letak > Desainer Templates.
                  2. Lalu pilih Tingkat Lanjut > Tambahkan Css
                  3. Dan masukan kode ini kedalamnya.
                  4. .comments h4 {Color:#0b5394;margin:0;}
                    .comments {
                    border:1px solid #cccccc;
                    margin:0px 10px 20px 10px;
                    padding:10px;
                    box-shadow:0px 1px 10px #aaaaaa;
                    background:#ffffff;
                    background-image: -moz-linear-gradient(center top , #fff 0%, #f3f3f3 100%);}

                    .comments .comments-content {
                    background:transparent;
                    margin:-20px 0px -50px 0px;
                    font-size:13px;
                    text-align:left;}

                    .comments .comments-content .user a{
                    color:#1780dd;
                    font-size:14px;
                    font-weight:700;}

                    .comments .comment-replies .comment-thread{
                    border:1px solid #dddddd;
                    box-shadow:1px 1px 1px #bbbbbb;
                    background-image: -moz-linear-gradient(center top , #fff 0%, #e6e6e6 100%);
                    margin:0px 0px 0px 12px;}

                    .comments .continue{border-top:none;}  
                    .comments .comments-content .comment {margin:0px 0px -10px 0px;}
                    .comments .comments-content .datetime{
                    font-size:11px;
                    margin:3px 0px 0px 0px;
                    float:right;font-weight:700;}
                  5. Save template, Selesai.
                  Keterangan Kode:
                  • .comments h4 { untuk mengatur warna tulisan dari jumlah komentar. 
                  • .comments { untuk mengatur warna background dari seluruh kotak komentar blog. 
                  • .comments .comments-content { untuk mengatur warna, ukuran tulisan dari isi komentar, dan jarak tinggi komentar blog. 
                  • .comments .comments-content .user a{  untuk mengatur warna dari seluruh nama yang ada dikotak komentar. 
                  • .comments .comment-replies .comment-thread{ untuk mengatur warna background dari komentar balasan. 
                  • .comments .continue{ untuk mengatur tombol Balas. 
                  • .comments .comments-content .comment { untuk mengatur jarak antar komentar balasan. 
                  • .comments .comments-content .datetime{ untuk mengatur warna dan posisi tanggal.
                  Silakan baca juga artikel yang terkait dengan desain kotak komentar blog. Seperti cara membuat tanda penulis dikotak komentar blog. Dan juga cara menggantu tulisan poskan komentar dengan gambar. Dan juga artikel-artikel lainnya. Semoga Bermanfaat.

                    Wednesday, 13 November 2013

                    Cara membuat tulisan 2 baris dalam satu kotak excel

                    Cara membuat tulisan 2 baris dalam satu kotak excel. Pada dasarnya, saat kita menulis diexcel dengan kata yang panjang, maka tulisan tersebut akan memerlukan banyak kotak colomn kesamping. Agar terlihat rapi, kita dapat membagi tulisan tersebut menjadi 2 row, row atas dan row bawah. Tapi jika membagi kata menjadi 2 row, kita memerlukan waktu yang lama, dan agak sedikit susah membaginya. 

                    Berikut ini adalah cara mudah membuat tulisan yang panjang menjadi 2baris hanya dalam satu kotak excel. Contohnya seperti dibawah ini.

                    Cara membuat tulisan 2 baris dalam satu kotak excel

                    Untuk lebih jelasnya tentang cara membuat 2baris dalam satu kotak excel. Ikuti langkah-langkah dibawah ini.
                    1. Pertama buka program excel kamu. Lalu tulis seperti contoh gambar dibawah ini.
                    Cara membuat tulisan 2 baris dalam satu kotak excel
                    2. Selanjutnya, klik tanda Wrap Text pada menu atas excel. Contoh gambar.
                    Cara membuat tulisan 2 baris dalam satu kotak excel
                    3. Setelah itu atur lebarnya sesuai dengan yang kalian inginkan, selesai.

                    Silakan dibaca juga artikel lainnya tentang excel, seperti cara  cara print banyak kotak diexcel, atau cara menuliskan mata uang rupiah dimicrosoft excel. Dan juga artikel-artikel lainnya. Semoga bermanfaat.