Cara Membuat Efek Shadow Dibawah Widget

Mestiqui.com kali ini akan membagikan tips untuk mempercantik / memperkeren tampilan blog Anda dengan membuat efek shadow dibawah widget, sehingga widget blog akan terlihat lebih hidup.

Sebenarnya cara ini sudah lama, tetapi baru saya bagikan kali ini, karena saya baru ingat. Saya pernah menerapkan efek shadow dibawah widget di blog mestiqui.com, tetapi sekarang saya tidak menggunakannya lagi.

Dan siapa tahu jika Anda tertarik membuat efek shadow dibawah widget ini, Anda bisa menggunakannya di blog Anda, agar blog Anda akan terlihat berbeda dengan yang lain.

Untuk melihat demo efek shadow dibawah widget, Anda bisa melihat gambar di awal artikel atau Anda bisa melihat demo gambar berikut ini :

Widget blognya menjadi terlihat berbeda bukan ?? karena memang widget blognya menjadi seperti ditekuk dari bawah, terlihat lebih unik :D. Nah, jika Anda tertarik membuat efek shadow dibawah widget blog, Anda bisa menerapkan caranya dibawah ini.

Cara Membuat Efek Shadow Dibawah Widget

1. Login ke Blogger > Dashboard > Template > Edit HTML.

2. Letakan kode dari mestiqui.com berikut ini di atas ]]></b:skin>

#mestiquidow{background:url("http://1.bp.blogspot.com/-Ap3YXeZvalg/UrK-RkalKQI/AAAAAAAACB8/ZKu9Pd-XtHA/s1600/mestiquicomshadows.png") no-repeat scroll center center transparent; height: 20px; width: 300px; }

3. Simpan template.

Nah, bukan hanya sampai di langkah diatas, Anda tinggal pilih dahulu widget yang ingin diberi efek shadow, Misalnya saya ingin memilih widget 'recent post' yang ingin diberi efek shadow, kurang lebih bentuk kode recent post 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>

4. Tambahkan kode <div style='overflow:auto; width:auto;height:200px;'> dan </div> serta <div id='mestiquidow'/>. Dan kodenya kira-kira kode diatas akan menjadi 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='mestiquidow'/>

Anda bisa mengatur heightnya sesuai dengan ukuran widget blog Anda, lalu simpan template.

Dengan beberapa langkah diatas, Anda suda hbisa membuat efek shadow dibawah widget, dan tampilan blog Anda akan terlihat lebih menarik lagi.

Tweet