Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Menambahkan Gaya Warna-Warni Pada Komentar Blogger Dengan CSS

by Irsyad Aslam , at 6/15/2013 , has 2 komentar
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.

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,



Your-BelajarBLOG
Irsyad Aslam
About
Cara Menambahkan Gaya Warna-Warni Pada Komentar Blogger Dengan CSS - written by Irsyad Aslam , published at 6/15/2013, categorized as Trik Blogger , Widget . And has 2 komentar
2 komentar Add a comment
Cool..., inovasi baru mas. udah di coba tadi mantep.keep inovations
Ok Sip,
Makasih Kang.


Salam Sukses,



Your-BelajarBLOG
Delete
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger