Cara Membuat Efek Shadow Dibawah Widget

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.