Membuat Effect Moz Webkit di Widget

Bagaimana menampilkan efek webkitmoz ?
Pertanyaan diatas mengacu pada tampilan sebuah efek dibawah header blog ini. agar lebih mudah memahami maksudnya sebagai contoh, silahkan click disini

Now, bagaimana cara membuat ini? Mari kita praktekkan bersama-sama!
Sebelum kita mulai, saya akan mempraktekkan cara ini menggunakan kolom dibawah header!. artinya semuanya terserah kepada teman-tema sekalian untuk mencobanya di sidebar atau yang lainnya.

kemudian, pertanyaan selanjutnya adalah : apakah sobat mempunyai 1 (satu) atau lebih kolom dibawah header ?
Jika belum, maka dalam tulisan ini kita akan langsung mempraktekkan cara menambahkan kolom dibawah header.

Langkah Pertama

1. Masuklah ke Design HTML blog anda
2. Klik Edit HTML

MEMBUAT 2 KOLOM  DIBAWAH HEADER

Tekan Ctrl+F untuk mencari kode ]]></b:skin>
setelah ditemukan, kemudian masukan script dibawah ini tepat diatas kode tadi

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Selanjutnya cari kode <div id='main-wrapper'> kemudian letakan kode dibawah ini diatas kode tadi

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Pembuatan 2 Kolom dibawah header selesai.

Selanjutnya kita akan memasang effect Webkit agar tampilannya seperti milik saya.

Hapus Kode Script langkah pertama membuat kolom diatas, atau seperti kode dibawah ini

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

kemudian ganti dengan kode script dibawah ini

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
background:#f5ede3;
margin:5px 10px 0px 10px;
float: center;
text-align:right;
border:0px solid #C0C0C0;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
border: 0 none !important;
}

.box-column {
text-shadow:1px 1px 1px #111 !important;
color:#eee !important;
padding:7px !important;
margin:0 10px 10px 0px !important;
overflow: visible !important;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
border: 0 none !important;
-webkit-border-top-left-radius:80px;
-webkit-border-bottom-right-radius:80px;
-moz-border-radius-topleft:80px;
-moz-border-radius-bottomright:80px;
border-top-left-radius:80px;
border-bottom-right-radius:80px;
}
.box-column:hover{
-webkit-border-top-left-radius:40px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-bottomright:40px;
border-top-left-radius:40px;
border-bottom-right-radius:40px;
}
.box-column img{
border: 0 none !important;
-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
box-shadow:0 0 8px rgba(0,0,0,0.5);
padding:3px !important;
}
.box-column .even{
margin-right:0 !important;
}
.box-column {background:#89A8C2 !important}

catatan : ganti kode warna yang bercetak Red / Merah diatas dengan warna yang anda inginkan

Save template anda dan lihat hasil kerja anda!.