Posted by jalupangna at 11.22
Read our previous post
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..:)
CARA MENAMBAHKAN KODE CSS
- Silahkan masuk ke akun blogger anda
- Klik Template -> Edit HTML
- Cari kode ]]></b:skin> (CTRL + F untuk memudahkan pencarian)
- Kemudian tambahkan kode dibawah ini 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;
}
CARA MENERAPKANNYA DI BLOG
Gunakan kode HTML berikut pada postingan blog anda.
Ganti isi pesan dengan pesan yang anda suka.
Happy blogging..!
Anda menyukai artikel di atas? Silahkan share dengan teman anda.
Tidak ada komentar:
Posting Komentar
Konversi Kode di Sini!