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

Kotak / Box Tukar Link

Cara Praktis Membuat Box Link Exchange/Tukar Link: "

Beberapa hari lalu salah satu sahabat Pelajaran Blog merisaukan tentang bagaimana cara membuat box/form ataupun text area untuk tukar link/link exchange.,jadi,tidak ada salahnya jika saya menuliskan artikel tentang bagaimana cara membuat text area link exchange/tukar link ini,meskipun sebelumnya saya pernah memposting artikelserupa tapi sudah saya hapus. Tidak lepas dari belajar menghias blog,budaya tukar link sangat dibutuhkan dalam dunia blogging/perseoan. Karena seperti yang anda tahu,semakin banyak inbound link,maka akan semakin baik blog kita di mata search engine/mesin pencari.Ok! biar langsung kelar,kita langsung ke topiknya ya :D Cara ini sangat sederhana sekali,anda tinggal menempatkan kode yang nanti saya berikan,kedalam Add New Widget/Elemen baru pada Blog anda.Pertama,copy kode berikut ini: <textarea rows="3" cols="17" style="width: 252px; height: 83px; color: Black; background-color: white;" readonly>&lt;a href="http://pelajaran-blog.blogspot.com/' target='_blank' title='Pelajaran Blog Cara Membuat Form Link Exchange/Tukar Link."&gt;&lt;img src="http://4.bp.blogspot.com/_n7xseT2-HDU/SexX_80mVsI/AAAAAAAAASk/SHTp-cL2Tq4/s200/Pelajaran+Blog.gif' border='0' alt='Pelajaran Blog Cara Membuat Form Link Exchange/Tukar Link."&gt;&lt;/a&gt;</textarea> Keterangan: ’http://pelajaran-blog.blogspot.com/’ ganti sesuai dengan alamat blog anda. ’http://4.bp.blogspot.com/_n7xseT2-HDU/SexX_80mVsI/AAAAAAAAASk/SHTp-cL2Tq4/s200/Pelajaran+Blog.gif’ gantilah dengan URL Image yang ingin ditampilkan. ’Pelajaran Blog Cara Membuat Form Link Exchange/Tukar Link.’ gantilah dengan Diskripsi Blog anda. Gimana? sudah sangat jelas sekali ya. Semoga bermanfaat ya :D Baca Juga Yang Ini Membuat Tex Area (3 Macam) Menghias Text Area pada Blog Membuat Text Area blok Otomatis

Read more > Kotak / Box Tukar Link