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 - Loggin ke blogger dengan ID sobat
- Saat ada di dasboard pilih template >>Edit Html >> ingat download lengkap dulu template untuk menjaga kemungkinan salah dalam pengeditan..
- Expand Template Widget
- Cari kode ]]></b:skin> taruh kode css berikut tepat di atas nya (gunakan Ctrl + F untuk mempermudah pencarian) berikut kode nya :
- 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
- 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)
- Nah untuk kode yang berwarna merah adalah kode shadow hasil dari pemanggilan kode Css di atas .
- 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 .
#shadow2 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYg6elItTjlPu7EBKxoYJzW2uHFCunp5_Y_5N-sENWXvM2rR9PffPUiVE44LNZSFSOUTF9gyy3LEsRja2MF7syczgDIEAJ6GL0gj-Rpx3_KC3w9CLH_wMU_uXZm80KedQxy88He-nTSIk/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent; height: 20px; width: 300px; }
<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 != ""'>
<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'/>
Sumber:artikel: http://www.fullblogdesign.com/2013/03/effect-shadow-di-bawah-sidebar-blog.html#ixzz2UsINuewR
Coba game flash ini :D 
