S
ebenarnya ada bagian draf yang harus Kang Mahfid publikasikan ,tapi biarlah saya tunda dulu ,mengingat teman adalah segala galanya maka aku penuhi dulu permintaan teman yang pingin tahu cara membuat Effect Shadow Di Bawah Sidebar Blog,kalau belum jelas silahkan sobat lihat pada bagian sidebar blog ini atau lihat screenshoot di samping .Sebelum nya sedikit info saja buat sobat yang akan melakukan trik ini ,akan lebih jelas /bagus jika warna background sidebar/sidebar berwarna putih atau transparent dengan bagian body berwarna background #fff (putih/white).
Oke untuk sobat yang ingin pasang trik ini silahkan ikuti tutorialnya yang akan saya jabarkan secara lengkap seperti di bawah ini
- Loggin ke blogger dengan ID sobat
- Saat ada di dasboard pilih template >>Edit Html >> ingat download lengkap dulu template untuk menjaga kemungkinan salah dalam pengeditan..
- Expand Template Widget
- Cari kode ]]></b:skin> taruh kode css berikut tepat di atas nya (gunakan Ctrl + F untuk mempermudah pencarian) berikut kode nya :
- Nah kode Css nya sudah di pasang sekarang penempatan shadownya untuk hal ini saya contohkan yang akan di beri shadow adalah Resent Post seperti gambar di atas maka gunakan Crtl + F cari kode Resent Post maka contoh kode nya kurang lebih akan seperti di bawah ini
- Perhatikan kode yang diseleksi berwarna pink adalah nama widget yang akan di beri effect shadow,sedangkan kode yang diseleksi berwarna kuning adalah tambahan saja agar widget sidebar ada fungsi scroll nya ,jadi jika sidebar sobat tidak menggunakan fungsi scroll maka kode ini tidak akan ada (disarankan pasang fungsi scroll agar widget sidebar tidak terlalu panjang)
- Nah untuk kode yang berwarna merah adalah kode shadow hasil dari pemanggilan kode Css di atas .
- Jadi kesimpulan nya 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 Preview terlebih sebelum template di Save .
#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; }
<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 != ""'>
<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'/>
Judul Artikel :Effect Shadow Di Bawah Sidebar Blog
25 komentar
Dengan adanya bayangan widget akan tambah lebih hidup. akan saya coba untuk diterapkan di widget foot, semoga berhasil.
keren,ni bng info
oh jai itu toh yng namanya Efek shadow sow. aq kira itu box shadow sow. wah ane perlu belajar dulu,ni di sini trmksih genk infonya
Silahkan sob
Sama Sama sob
hehehehe apanya yang sama bos xixixi. kopinya dah dingin gak di minum bos hahaha
Langsung mumpung masih hangat
mas kalau buat dislide gimana biar kelihata pas/rapi karena ukuran slide panjangnya 570 sedangkan ukuran efek shadow 300.....
gunakan pada kode cssnya berikut:
#shadow1 {
background: url("http://karina-project.googlecode.com/files/shadow1.png") no-repeat scroll center center transparent;
height: 20px;
width: 570px;
}
dan pemanggilan nya gunakan ini : <div id="shadow1"></div>
terima kasih mas........
oh'a mas ada gambar shadow yang lain ngak mas....
http://4.bp.blogspot.com/-FePkOajMbd8/T656LNNmKSI/AAAAAAAAGEE/Vcpgql7qqXQ/s1600/shadow1.png
makasih mas :-bd ,padahal mau yang banyak dipertannyakan...tapi coba belajar sendiri takut ngerepotin :)
artikel yg bagus, mampir jg gan ke blog ane.
Bila mau warna selain hitam ada gan disini...
http://peaceblogberbagi.blogspot.com/2013/04/kumpulan-warna-shadows-di-bawah-sidebar.html
^_^
sebenarnya bisa saja sob hanya tinggal di mainin di photosop saja
Iy mas.... :D
ijin copy + praktek om....!
Kalo mau pasang di permalink atas koq g bisa ya om, kayak punya om di atas ???
mas :-bd bagaimana bila membuat efek shadows yNG ukuran nya besar......
saya pake ps..dengan format png sesuaikan dengan ukuran main-wrapper
gini mas :-bd saya mau pake 2 ukuran ada yang kecil dan ukuran besar... seperti kompi ajaib bagaimana codenya... ?
untuk ukuran kecilnya sudah saya jelaskan di atas sedangkan untuk besar nya kita hanya menambahkan background saja kedalam kode css misal yang ada pada shadow related post yang ada di blog ini kode awal nya kaya gini :
#related{width:100%;border-bottom:medium none;margin:0 auto;padding:0 0 35px}
jika kita ingin menambahkan shadow maka kita hanya menambahkan kode background saja maka jadinya kaya gini :
#related{background:url(http://1.bp.blogspot.com/-6gpuAyYJG4s/USRbfeSaZGI/AAAAAAAAXMA/Tif2cNgh2us/s1600/frame_shadow+copy.png)no-repeat scroll center bottom transparent;width:100%;border-bottom:medium none;margin:0 auto;padding:0 0 35px}
kode di atas hanya contoh saja pada intinya kita hanya menambahkan kode background ...
m'kasih y info'a
follow ya
http://aditmination.blogspot.com/
Wah keren banget mas :D
Posting Komentar
Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>