CSS Kotak Pesan Untuk Postingan Blogger

CSS Kotak Pesan Untuk Postingan Blogger - D-Copy Blog | Hai sobat Blogger, tutorial kali ini kita akan membahas kotak pesan menggunakan perpaduan antara CSS dan thumnail icon yang keren dan simple untuk Anda gunakan sobat dan juga untuk menarik perhatian pengunjung Anda agar betah berlama-lama di blog Anda. Jadi akan langsung saja coba.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML
3. Cari kode dibawah ini :

]]></b:skin>

    4.  Pastekan kode dibawah, diatas pada kode diatas :

/*Kotak Pesan Oleh D-Copy Blog*/
.fave_css, .beranda_css, .ide_css, .penulis_css, .rss_css, .pena_css, .kunciedit_css, .peringatan_css, .komentar_css, .terkunci_css, .buku_css {
border: 1px solid
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.fave_css {
color: #00529B;
background-color: #BDE5F8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYd6d4gXRrPT0qt6fls3cNKKoDyk0YNVC-v9_JnZQ0a-uomw0o0wpB0vAfXcAjMTsg3Lh5fJ8XyPYXYDR8QvcGc15T_W3ym5gzPbSly5jAGC4FjnLsxq2TQCQ46y9dVhE528NC3zrFEHI/&#39;);
}
.beranda_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXB6gEl0NhYLCJebdDX5siPoHvK76RTfU5cKBNmsIHtXx4XzwTJ1AWbGR5NzS4Fp74RjV-PkMP7tdT4mWd5txuOfyCyVSKzmGb4ytC-qelGFZ7kLlXOY30Ht0ehY5loZUY_SYviVBwgg4/&#39;);
}
.ide_css {
color: #9F6000;
background-color: #FEEFB3; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBN1DmBo8s9Dfz3xxE4ET4CH0a57RBELM9PrSZQLGvaN_rqfc_CM8KGeON-L5Mpt4rHoqUyRj9jFIhhGzSyDm0z0TWqEGcBuNRwaJQaTrdNdbJRrcorSZg0VZlM5cK6yfblpve7VhUd6I/&#39;);
}
.penulis_css {
color: #2E2D2D;
background-color: #A1C2C7; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm4OqYhbYi1yEKZIMSqIWGF-c7gkTJYbIuXXWzcrrZ-DwabaHbUljM3LsIOWIOUVXXu9qGMVar0dpyhryZg6k0Ie42FUi9NpdzEeByscuIJhCPB7-qp2Yw0M-UO4lWXZfJOxVXmCyJ8A/&#39;);
}
.rss_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm8YcKJR3fLSEwz0ll_jbJ3OsZDoQdZDIMNUGdbBIWluCXXvk_Wsl7ttUx05Y1dV-4grP2sByrt6cs9SEJVh_DQlRyTyKWHTl3ptGL6TIHFO-Wrbje1d2ptnysxoqgDAA657w3ldPDpFc/&#39;);
}
.pena_css {
color: #2E2D2D;
background-color: #C8E0C8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikQdKtDs4LCQkcjpp3_d6z-uDI2H2Kax0Mo2VgMoJ9i61MdRSBCHjE6ioGioBE7vqrBERzmQqYpatAdU-c3MfkBC4QvZjis6ajhFbX-c79L5fi2PY1YzADoXJuckGsJhQo_PxLvDftyGE/&#39;);
}
.kunciedit_css {
color: #554529;
background-color: #F1C983; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjy19x22q1OLjukqNAKlsL-Bf9c4HCaZKl2RLGbLMYsfSeoPhrRjfeoBrZDGmGZNlYe9fytenY1Y1u5-mAFV6CoxDOKt-QcjQWaC9If4fCJ87wK0fqMuaItKEL2dUxzyUskPVpTZvxnRU/&#39;);
}
.peringatan_css {
color: #2E2D2D;
background-color: #D25F66; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMzgOeRE2kmkkfZWwq7tz3uJuvszojC864VD3xXbiyYxP6zT0POQFF8Yz6bHcMqq3xm1nVSnlidPa4Nwbo5oxCVx1brFufbPbe_Vncqmk_JJ9jVbAcrBLmgemeAoV49Bm7W2A5AN3xpE/&#39;);
}
.komentar_css {
color: #2E2D2D;
background-color: #A6C8D2; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcszigGZOFeT91OGDndqVF9ViD14LYU7hTvOQCggd4QjgyjY-W0PtXXFPCNO6SVB-qU6f5eyjAuaVuKvbqneHofK7NA1FEg0L7zJjsGh2fXCP6u75tafCzdWfEXR39jX4GjOtkRD5yyHs/&#39;);
}
.terkunci_css {
color: #2E2D2D;
background-color: #FFBABA; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WGDuzWosvDn4NI7z3c2uuvG6mXrvkB_urDOMFzlFh_78D1r9-_fJJRFtaWzw_4JqroUtVZbftrdgU_p3cGPF6i4qSpZiJCHOexL3OHy6sdtPcdDZpM1Rt8rimPe64pCZpWAK0Mchv98/&#39;);
}
.buku_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUAsPEpb9ogSULIIHL6b3qkLvh6OYp0ns9sY9mJ55f3qlb7U8ZQRlmRxtAowfkmnPGeWXKsXiweSYx6mwtNOhEcbGI5BXVgOCk_8xEmGAgndy8nh8Cet8ZIq-V7RaNzxQQ_XGvXQqkORk/&#39;);
}
/*END Kotak Pesan Oleh D-Copy Blog*/

   5.  Save template Anda.
   6.  Pada menu HTML di postingan Anda, buat kotak CSS yang Anda inginkan :

Kode HTML Kotak Pesan :

<div class=”fave_css “>
Tempatkan teks Anda disini
</div>

<div class=”beranda_css “>
Tempatkan teks Anda disini
</div>

<div class=”ide_css “>
Tempatkan teks Anda disini
</div>

<div class=”penulis_css “>
Tempatkan teks Anda disini
</div>

<div class=”rss_css “>
Tempatkan teks Anda disini
</div>

<div class=”pena_css “>
Tempatkan teks Anda disini
</div>

<div class=”kunciedit_css “>
Tempatkan teks Anda disini
</div>

<div class=”peringatan_css “>
Tempatkan teks Anda disini
</div>

<div class=”komentar_css “>
Tempatkan teks Anda disini
</div>

<div class=”terkunci_css “>
Tempatkan teks Anda disini
</div>

<div class=”buku_css “>
Tempatkan teks Anda disini
</div>

 Selesai.

Terima kasih, semoga bermanfaat.