Cara membuat efek shadow atau efek bayangan pada sidebar blog

Postingan saya kali ini adalah permintaan salah satu sobat blogger yaitu tentang bagaimana cara membuat dan menambahkan efek shadow atau efek bayangan pada sidebar blog. 
Untuk sobat yang ingin menambahkan trik ini silahkan ikuti tutorialnya berikut ini.

Langkah-langkahnya: 

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Edit HTML

  

• Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Kopi dan pastekan kode css berikut tepat diatas kode  ]]></b:skin>

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

CARA MENAMBAHKANNYA PADA SIDEBAR?

Untuk contoh saya akan menambahkan efek shadow pada gadget/widget recent comment:

<b:widget id='HTML11' locked='false' title='Recent Comment' 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 class='widget-content'>
    <data:content/>
  </div>
 <div id='shadow2'/>
</b:includable>
   </b:widget>

-Kode yang disorot wana orange adalah nama widget/gadget
-Kode yang disorot warna merah adalah kode shadow hasil dari pemanggilan kode css diatas
-Letakan kode shadow setelah tag </div> 

• Jadi jika anda ingin menambahkan efek shadow pada gadget yang lain seperti popular post, widget follower atau yang lainnya tinggal menambahkan kode <div id='shadow2'/> setelah tag </div> 
• Simpan template...selesai.

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 17.24