Membuat Shadow / Bayangan Border Widget

Membuat Sebelah Kanan dan Kiri Border Widget Memiliki Border Berbayang / Shadow

Menciptakan Shadow / Bayangan Border Widget Unik

Pernah sobat melihat sebuah background atau semacam border widget yang memiliki efek seperti banyangan?

Kurang lebih akan tampak seperti dibawah ini sob:

Lihat di SINI untuk contoh Live-nya

Membuat Shadow / Bayangan Border Widget - caranya sangat mudah gan,pertama,sobat letakkan barisan kode css berikut diatas kode skin:

.headerright {position: relative;height: 255px;width: 302px;border:1px solid #BABABA;margin: 5px 5px 0px 0px;padding: 5px 5px 0px 5px;font-weight: bold;background-color: #D2D2D2;-moz-box-shadow: inset 0 1px 1px #eeeeee;-ms-box-shadow: inset 0 1px 1px #eeeeee;-o-box-shadow: inset 0 1px 1px #eeeeee;-webkit-box-shadow: inset 0 1px 1px #eeeeee;box-shadow: inset 0 1px 1px #eeeeee;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}.headerright:before, .headerright:after {z-index: -1;position: absolute;content: "";bottom: 15px;left: 10px;width: 50%;top: 50%;max-width:300px;background: rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);}.headerright:after {-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);transform: rotate(3deg);right: 10px;left: auto;}

a.mrpujiajadeh {width:123px;height125px;}div.i125 a.mrpujiajadeh {background:#e7e7e7;width:125px;height:125px;line-height:100%;}div.lebarbox a {width:302px;}div.lebarbox a, div.i125 a {display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}div.lebarbox img, div.i125 img {border:0;clear:right;}html > body div.lebarbox a.mrpujiajadeh {width:302px;height:255px;}div.lebarbox a.mrpujiajadeh, div.i125 a.mrpujiajadeh {color:#666;font-weight:bold;font-size:12px;/*border:1px solid #BABABA;*/text-align:center;}div.lebarbox a.mrpujiajadeh {background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .06), rgba(255, 255, 255, 0.1) 40px);background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .06), rgba(255, 255, 255, 0.1) 40px);width:302px;height:60px;line-height:480%;-moz-box-shadow: inset 0 1px 1px #EEE;-ms-box-shadow: inset 0 1px 1px #EEE;-o-box-shadow: inset 0 1px 1px #EEE;-webkit-box-shadow: inset 0 1px 1px #EEE;box-shadow: inset 0 1px 1px #EEE;}div.lebarbox a.mrpujiajadeh:hover, div.i125 a.mrpujiajadeh:hover {/*border:1px solid #999;*/background:#ddd;color:#333;}

Setelah itu,untuk menerapkannya pada widget,sobat tinggal membubuhkan kode berikut:

<div class="headerright floatR" id="headerright">
<div class="lebarbox"><a class="mrpujiajadeh">
Di Sini Letak Kode Html/Text/Javascript Anda
</a></div></div>

Selamat Mencoba Ya :D

Read more > Membuat Shadow / Bayangan Border Widget

Membuat Gambar Postingan Melayang / Memiliki Bayangan

Cara Membuat Gambar seolah Melayang Mempunyai Bayangan Jika beberapa waktu lalu sudah share masalah membuat gambar always on top alias selalu berada di pojok,kali ini adalah membuat melayang atau seolah-olah mempunyai bayangan dari gambar pada posting yang kita miliki. Untuk contohnya,sobat sudah dapat melihat sendiri bayangan yang berada dibelakang gambar setiap posting kami. Kami sangat berterima kasih kepada http://i30.tinypic.com/1qsh1h.jpg,karena dengan 'meminjam' url tersebut gambar pada setiap posting kami mempunyai bayangan,hihihi.. Caranya mudah alias gampang banget,tinggal merubah beberapa kode saja dan hasilnya dapat langsung sobat lihat. Langkah dan Cara Membuat Gambar Posting Mempunyai Bayangan / Berbayang Nah,untuk caranya bisa sobat ikuti langkah berikut ini: Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini. Gb.1 Selanjutnya pilih tab Edit Html (Gb.2). Gb.2 Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3). Gb.3 Nah,setelah itu cari kode : .post img { (Gunakan Ctrl+F) Biasanya dibawahnya akan ada kode tambahan untuk cssnya,seperti: .post img { padding:4px; border:1px solid #cccccc; } Nah,tinggal ganti kode tersebut dengan kode berikut: .post img { background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom; padding: 5px 10px 10px 5px; } Setelah itu simpan template dan lihat hasilnya :D Specially thax for http://i30.tinypic.com/1qsh1h.jpg

Read more > Membuat Gambar Postingan Melayang / Memiliki Bayangan