Hello all blogger.... !!
Lama gak nongol buat berbagi inspirasi tentang blogger, hari ini saya kembali lagi menuliskan sesuatu yang masih berkaitan dengan widget / gadget atau kolom yang dibikin miring. Dalam tulisan terdahulu mengenai bagaimana membuat gadget profile menjadi miring, sekarang dalam tulisan ini saya akan memberikan tips bagaimana membuat kolom dibawah header menjadi miring. contohnya ya seperti blog milik saya ini, dimana kolom pencarian dan kolom follower yang dibuat miring dan ditambahkan background yang dapat di ganti sesuai selera.
Untuk kode script HTML dan CSS-nya adalah resmi milik css-trick.com yang saya copy kemudian dimodifikasi sedemikian rupa sehingga seperti kolom dibawah header menjadi miring milik saya ini.
Oke, kita lanjut ke proses kerjanya :
Langkah awal, masuk ke editor HTML blog sobat, kemudian cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat sebelum kode diatas tadi :
ini adalah kode dari css-trick.com yang telah di modifikasi sedikit. Jangan lupa untuk mengganti tulisan yang berwarna merah diatas dengan background milik anda.
kemudian tambahkan script code miring dibawah ini tepat dibawah kode dari css-trick.com tadi
Langkah berikutnya adalah dengan menjepitkan kode berikut ini pada script code kolom dibawah header milik anda
Simpan hasil edit HTML ini dengan mengklik Simpan, kemudian lihat hasilnya.
Itulah cara mudah dan gak neko-neko tentang bagaimana membuat miring kolom di blog anda dengan tambahan background.....
any question, silahkan tinggalkan di kolom komentar!.
Lama gak nongol buat berbagi inspirasi tentang blogger, hari ini saya kembali lagi menuliskan sesuatu yang masih berkaitan dengan widget / gadget atau kolom yang dibikin miring. Dalam tulisan terdahulu mengenai bagaimana membuat gadget profile menjadi miring, sekarang dalam tulisan ini saya akan memberikan tips bagaimana membuat kolom dibawah header menjadi miring. contohnya ya seperti blog milik saya ini, dimana kolom pencarian dan kolom follower yang dibuat miring dan ditambahkan background yang dapat di ganti sesuai selera.
Untuk kode script HTML dan CSS-nya adalah resmi milik css-trick.com yang saya copy kemudian dimodifikasi sedemikian rupa sehingga seperti kolom dibawah header menjadi miring milik saya ini.
Oke, kita lanjut ke proses kerjanya :
Langkah awal, masuk ke editor HTML blog sobat, kemudian cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat sebelum kode diatas tadi :
.inner-border {
background: url(ISI DENGAN URL GAMBAR MILIK ANDA);
color: #fff;
margin: 15px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: inline;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
background: url(ISI DENGAN URL GAMBAR MILIK ANDA);
color: #fff;
margin: 15px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: inline;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
ini adalah kode dari css-trick.com yang telah di modifikasi sedikit. Jangan lupa untuk mengganti tulisan yang berwarna merah diatas dengan background milik anda.
kemudian tambahkan script code miring dibawah ini tepat dibawah kode dari css-trick.com tadi
-moz-border-radius-topright: 90px 60px;
-moz-border-radius-bottomleft: 90px 60px;
border-bottom-left-radius:60px 60px;
border-top-right-radius: 90px 60px;
-webkit-box-shadow: -21px 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
-moz-border-radius-bottomleft: 90px 60px;
border-bottom-left-radius:60px 60px;
border-top-right-radius: 90px 60px;
-webkit-box-shadow: -21px 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
Langkah berikutnya adalah dengan menjepitkan kode berikut ini pada script code kolom dibawah header milik anda
<div class="inner-border">
DISINI ADALAH KUMPULAN SCRIPT CODE KOLOM DIBAWAH HEADER MILIK ANDA
</div>Simpan hasil edit HTML ini dengan mengklik Simpan, kemudian lihat hasilnya.
Itulah cara mudah dan gak neko-neko tentang bagaimana membuat miring kolom di blog anda dengan tambahan background.....
any question, silahkan tinggalkan di kolom komentar!.
