Ini adalah salah satu kotak blogger untuk menampilkan pesan khusus anda. Kotak yang satu ini benar-benar berbeda dengan yang lain. Seluruh desain kodenya baru. Dua bagian kotak yang berbeda lengkap dikenalkan. Effect Hover ditambahkan didalamnya. Kotak ini di buat untuk menambahkan beberapa paragraph/kalimat maupun tulisan secara bersamaan. Jadi jika memang anda seseorang yang kreatif dan menggunakan kotak ini, bloga anda dapat melihat dan menyaksikan traffic secara nyata. Jadi, mari kita mulai dan langsung praktek di TKP..:)
- Masuk ke akun blogger anda
- Klik Template -> Edit HTML
- Cari kode ]]></b:skin> (CTR + F)
- Kemudian tambahkan kode berikut tepat diatas kode ]]></b:skin>
.pcgbox{
text-align:center;
width:75%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
.pcgbox:hover{
color:#333;
box-shadow: 0 0 10px 12px rgba(0,0,0,.35);
}
.pcgbox h1{
border-bottom: 2px dashed #fa0a0a;
margin:-20px -20px 0px -20px;
padding:20px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
background-image: url('http://findicons.com/files/icons/2146/realistik_reloaded/48/error.png');
background-repeat: no-repeat;
background-position: 50px center;
}
.pcgbox h1:hover{
color:#ff0088;
}
Gunakan kode berikut untuk menggunakan kotak ini pada postingan blog anda.
<div align="center">
<div class="pcgbox" id="pcgbox" style="display: block;">
<h1>
PESAN PENTING !</h1>
Sesungguhnya beruntunglah orang yang mensucikan jiwanya, dan merugilah orang yang mengotori jiwanya.
</div>
</div>
</div>
Ganti teks yang berwarna merah dengan isi teks yang anda suka.
Happy blogging..!
Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 03.34
0 komentar: