Membuat Efek Shadow Kiri Kanan Pada Widget

Membuat Efek Shadow Kiri Kanan Pada Widget - Saya bingung memberi judul apa di posting ini , tapi yangjelas ini adalah artikel yang bakal ngasih tau caranya membuat efek bayangan yang keren .

Untuk contohnya bisa dilihat dibawah ini .

Sudah paham maksudnya ? Sekarang mari kita membuatnya .

Untuk langkah awal kita siapkan dulu Cssnya .

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

Bedanya dalam membuat efek Shadow ini adalah bukan dengan Css yang bikin bingung , karena Efek bayangan yang dihasilkan adalah dari gambar .

Letakkan Css tadi diatas ]]></b:skin>
Kemudian simpan template .

Masih di Mode Edit HTML template , sekarang kita cari eidget yang ingin diberi bayangan .
Misal saja disini yang akankita beri efek bayangan adalah Widget Artikel terbaru .
Cari dengan mengunakan ctrl+f .
Maka akan ketemu kode seperti 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 class='widget-content'>
    <data:content/>
  </div>

Yang kita lakukan sekarang adalah menambahkan kode <div style='overflow:auto; width:auto;height:200px;'> dan </div> <div id='shadow2'/>

Maka hasil akhirnya kira kira seperti 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'/>

Sekarang simpan template dan lihat perubahannya .

Jika ada kendala silahkan sampaikan di komentar dibawah .
Dan selesai sudah tutorial kali ini untuk Membuat Efek Shadow Kiri Kanan Pada Widget yang semoga membantu anda .