Cara Menambahkan Gaya Warna-Warni Pada Komentar Blogger Dengan CSS

Rabu, 07 Agustus 2013 | komentar (1)

Menambahkan Gaya Warna-Warni adalah cara untuk menghiasi komentar agar lebih menarik untuk dipandang. Gaya Warna-warni pada komentar ini dibuat dengan menambahkan kode pelengkap yaitu CSS, dengan adanya kode CSS ini anda dapat mengkreasikan blog atau website anda, salah satu menghiasi komentar ini. Dengan menghiasi komentar ini pengunjung juga lebih tertarik untuk berkomentar. Contohnya bisa di lihat disini!!!

Komentar Gaya Warna-warni ini mempunyai beberapa fitur seperti, Memberikan gaya latar warna pada nama, tombol Balas(reply), dan tanggal, dan mempunyai fungsi yaitu, jika latar berwarna orange berarti pengunjung, dan jika latar berwarna ungu muda berarti pemilik blog, dan sebagai pelengkap yaitu font.

Cara Menambahkan Gaya Warna-Warni Pada Komentar Blogger Dengan CSS



  • Silahkan Masuk Ke Akun Blogger Anda.
  • Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template anda, --> Setelah itu, Klik Tombol Edit HTML.
  • Cari Kode ]]></b:skin> dengan menekan CTRL+F.
  • Masukan Kode berikut ini diatas kode ]]></b:skin> :
<!-- Start Colorful Stylish Comments -->
@font-face {
     font-family: 'Philosopher';
 font-style: normal;
 font-weight: 400;
 src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

.comment .avatar-image-container {
     border: 1px solid #B6B6B6;
 max-height: 70px !important;
 margin-top: -5px;
 width: 70px !important;
 position: relative;
 z-index: 50;
}

.comment .comment-block {
     margin-left: 75px !important;
}

.comment .comment-header {
     background: none repeat scroll 0 0 #A9F5D0;
 color: #333;
 font-size: 15px;
 font-weight: bold;
 margin-left: 60px;
}

.comment .comment-header a {
     color: white !important;
 text-decoration: none;
}

.comment .comment-content {
     background: none repeat scroll 0 0 #FEFFF9;
 border-bottom: 2px solid #E6E6E6;
 font-size: 14px;
 margin: 0 0 30px;
 padding: 5px 5px 10px 10px;
}

.comment .comment-actions a {
     background: none repeat scroll 0 0 #DDD;
 color: #333;
 display: inline-block;
 line-height: 1;
 margin: 0 3px;
 padding: 3px 6px !important;
 text-decoration: none;
}

.comment .comment-actions a {
     background: none repeat scroll 0 0 #DDD;
 color: #333;
 display: inline-block;
 line-height: 1;
 margin: 0 3px;
 padding: 3px 6px !important;
 text-decoration: none;
}

.comment-header cite {
     background: none repeat scroll 0 0 #DF7401;
 border: 1px solid white;
 color: white;
 padding: 2px 20px;
 position: relative;
 z-index: 99;
 margin-left: -20px;
}

cite.blog-author {
     background: none repeat scroll 0 0 #8181F7 !important;
}
.icon.blog-author {
     display: none !important;
 background: url("") no-repeat scroll 0 0;
 margin-left: 90px;
 width: 60px !important;
 height: 60px !important;
 position: absolute;
 right: 5px;
 bottom: 5px;
 top: 10px;
}

.comment .comment-header {
     color: #333;
 font-size: 15px;
 font-weight: bold;
}

.comment .avatar-image-container img {
     border: medium none !important;
 height: 70px !important;
 width: 70px !important;
 max-height: 70px !important;
 max-width: 70px !important;
}

.comment .comment-actions a {
     background: none repeat scroll 0 0 #DDD !important;
 color: #333 !important;
 display: inline-block !important;
 line-height: 1 !important;
 margin: 0 3px !important;
 padding: 3px 6px !important;
 text-decoration: none !important;
 font-size:16px;
}

.comment .comment-actions a:hover {
     background: #CCC !important;
 text-decoration: none !important;
}

.comments {
     font-family: 'Philosopher', arial, serif !important;
 font-size: 1em;
 color: black;
}

.comments .continue a {
     display: block !important;
 font-weight: bold !important;
 padding: .5em !important;
 color:#E34600;
 font-size:16px;
}

.comments .continue a:hover {
     color:#4D3123;
 text-decoration:none;
}

.item-control {
     display: none !important;
}

.comments .continue {
     border-top: 2px solid transparent !important;
}
<!-- End Colorful Stylish Comments -->

  • Kemudian, Klik Tombol Simpan Template.


Selamat Mencoba,
Salam Sukses,
Share this article :

+ komentar + 1 komentar

Poskan Komentar

Kumpulan Tips Menarik Merupakan Blog DOFOLLOW Yang dapat memberikan BACKLINK Gratis Kepada Pengunjung Hanya denga Meninggalkan KOMENTAR. Silahkan Tinggalkan Jejak Anda (KOMENTAR) Terimakasih!!!

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. kumpulan tips menarik - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger