Effect Shadow Di Bawah Sidebar Blog

kevinservis TIPS BLOG 28 Mar 2013

Sobat sedang membaca artikel tentang Effect Shadow Di Bawah Sidebar Blog.yang kami publikasikan pada 23 Maret 2013 Silahkan tinggalkan jejak di kolom Komentar untuk mempermudah Mahfid Mayanto berkunjung kembali ke blog sobat.

S

ebenarnya ada bagian draf yang harus Kang Mahfid publikasikan ,tapi biarlah saya tunda dulu ,mengingat teman adalah segala galanya maka aku penuhi dulu permintaan teman yang pingin tahu cara membuat Effect Shadow Di Bawah Sidebar Blog,
kalau belum jelas silahkan sobat lihat pada bagian sidebar blog ini atau lihat screenshoot di samping .Sebelum nya sedikit info saja buat sobat yang akan melakukan trik ini ,akan lebih jelas /bagus jika warna background sidebar/sidebar berwarna putih atau transparent dengan bagian body berwarna background #fff (putih/white).
Oke untuk sobat yang ingin pasang trik ini silahkan ikuti tutorialnya yang akan saya jabarkan secara lengkap seperti di bawah ini

1. Loggin ke blogger  dengan ID sobat
2. Saat ada di dasboard pilih template >>Edit Html >> ingat download lengkap dulu template untuk menjaga kemungkinan salah dalam pengeditan..
3. Expand Template Widget 
4. Cari kode ]]></b:skin> taruh kode css berikut tepat di atas nya (gunakan Ctrl + F untuk mempermudah pencarian) berikut kode nya :

#shadow2 {   background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivPOwdA0VLaqtyQokXBKpCsgfW0hw_Rxd1LW9OAK1TTlpG86I8XuI41VsR6BKbZa0up975mkAQGKf7he5x2YN5NgXcJTgOdlXZszHEgk2tDVXAluSSQLIAqye6f7rIiaoQCGbfMHrVDec/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent;   height: 20px;   width: 300px; }

5. Nah kode Css nya sudah di pasang sekarang penempatan shadownya untuk hal ini saya contohkan yang akan di beri shadow adalah Resent Post seperti gambar di atas maka gunakan Crtl + F cari kode Resent Post maka contoh kode nya kurang lebih akan seperti di bawah ini 

<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div style='overflow:auto; width:auto;height:200px;'>
  <div class='widget-content'>
    <data:content/>
  </div></div>
<div id='shadow2'/>


6. Perhatikan kode yang diseleksi berwarna pink adalah nama widget yang akan di beri effect shadow,sedangkan kode yang diseleksi berwarna kuning adalah tambahan saja agar widget sidebar ada fungsi scroll nya ,jadi jika sidebar sobat tidak menggunakan fungsi scroll maka kode ini tidak akan ada (disarankan pasang fungsi scroll agar widget sidebar tidak terlalu panjang)
7. Nah untuk kode yang berwarna merah adalah kode shadow hasil dari pemanggilan kode Css di atas .
8. Jadi kesimpulan nya jika sobat akan menggunakan kode ini pada widget yang lain seperti Popular Post ,kolom komentar ,widget follower,dll lakukan hal yang sama seperti di atas dan letak kan kode    <div id='shadow2'/></div>   tepat setelah kode penutup </div> seperti contoh di atas ,tapi ingat karena pengeditan langsung pada Template lakukan Preview terlebih sebelum template di Save .