Home » Blogger Hack » CSS Kotak Pesan Untuk Postingan Blogger

CSS Kotak Pesan Untuk Postingan Blogger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul CSS Kotak Pesan Untuk Postingan Blogger. Dengan artikel CSS Kotak Pesan Untuk Postingan Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci CSS Kotak Pesan Untuk Postingan Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel CSS Kotak Pesan Untuk Postingan Blogger selengkapnya:

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.

CSS Message Boxes Blogger Template

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;http://4.bp.blogspot.com/_5rlxf3T9Z9U/SsIXnWAiPmI/AAAAAAAADbw/PNPR20ioK_g/heart_32.png&#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;http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXp7bJEAI/AAAAAAAADb4/c0XYyhY-DXg/home_32.png&#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;http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXsMD87MI/AAAAAAAADcA/hx_l4F3pcLQ/lightbulb_32.png&#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;http://4.bp.blogspot.com/_5rlxf3T9Z9U/SsIeeYeesFI/AAAAAAAADcw/yVE6xvr9S_U/user_32.png&#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;http://3.bp.blogspot.com/_5rlxf3T9Z9U/SsIX0rlYZ9I/AAAAAAAADcY/YE6Y2Nev0to/rss_32.png&#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;http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXyk9CJRI/AAAAAAAADcQ/BJZBSRCq7tQ/pencil_32.png&#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;http://3.bp.blogspot.com/_5rlxf3T9Z9U/SsIX4ODWwwI/AAAAAAAADcg/p8D5a_X72Qo/tools_32.png&#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;http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIX7-C1GYI/AAAAAAAADco/5XubUJ34o2c/warning_32.png&#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;http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXkQfrW9I/AAAAAAAADbo/EsSD0I42srs/comment_user_32.png&#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;http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXuytpYfI/AAAAAAAADcI/I4Tm0W5gDQk/lock_32.png&#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;http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXiIlQU2I/AAAAAAAADbg/b3ERrIS-idI/address_book_32.png&#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 :

Menu HTML pada postingan Blog

Kode HTML Kotak Pesan :

Fave D-Copy Blog

<div class=”fave_css “>
Tempatkan teks Anda disini
</div>
Beranda D-Copy Blog
<div class=”beranda_css “>
Tempatkan teks Anda disini
</div>
Ide D-Copy Blog
<div class=”ide_css “>
Tempatkan teks Anda disini
</div>
Penulis D-Copy Blog
<div class=”penulis_css “>
Tempatkan teks Anda disini
</div>
RSS D-Copy Blog
<div class=”rss_css “>
Tempatkan teks Anda disini
</div>
Pena D-Copy Blog
<div class=”pena_css “>
Tempatkan teks Anda disini
</div>
Kunci Edit D-Copy Blog
<div class=”kunciedit_css “>
Tempatkan teks Anda disini
</div>
Peringatan D-Copy Blog
<div class=”peringatan_css “>
Tempatkan teks Anda disini
</div>
Komentar D-Copy Blog
<div class=”komentar_css “>
Tempatkan teks Anda disini
</div>
Terkunci D-Copy Blog.jpg
<div class=”terkunci_css “>
Tempatkan teks Anda disini
</div>
Buku D-Copy Blog
<div class=”buku_css “>
Tempatkan teks Anda disini
</div>

 Selesai.

Terima kasih, semoga bermanfaat.


Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul CSS Kotak Pesan Untuk Postingan Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

0 komentar:

Poskan Komentar