logo blog

Membuat Efek Shadow Di Widget Sidebar Blog


1. Login Ke Blogger Sobat

Catatan ARUL Blogspot
2. Pilih Template > Edit HTML

Catatan ARUL

3. Cari kode ]]></b:skin> (gunakan Ctrl + F) untuk mempermudah pencarian dan taruh kode css berikut tepat di atas nya berikut kode nya :
#shadow2{background:url("http://1.bp.blogspot.com/-PBxSNjm7MZo/USTU7cuB7SI/AAAAAAAAXNY/PhCRSShhNss/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent;   height: 20px;   width: 300px; }
4. Bila sobat sudah memasang kode berikut diatas  kode ]]></b:skin>. Sekarang penempatan shadownya . dan untuk hal ini saya akan contohkan satu widget yang akan diberi efek shadow , misalnya adalah adalah Popular Post seperti gambar di atas maka gunakan Crtl + F cari kode Popular Post  , jadinya maka kurang lebih kodenya akan menjadi seperti dibawah 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'/>

5. NOTE : Perhatikan kode yang diseleksi berwarna Merah adalah nama widget yang akan di beri effect shadow,sedangkan kode yang diseleksi berwarna Biru adalah tambahan saja agar widget sidebar ada fungsi scroll nya ,jadi jika sidebar sobat tidak menggunakan fungsi scroll maka kode ini bisa untuk menggunakan funsigsi scrool. Bila  tidak ingin dengan fungsi scrool tambahkan height:200px;'> misalnya jadi height:500px;'>


6. Untuk Kode Berwarna Orange adalah  penutup kode diatas
7. Jadi 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 Pratinjau / Backup  terlebih sebelum mengedit template.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

Copyright © 2012. Rahasia - All Rights Reserved | Template Created by Kompi Ajaib