Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2 -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Comments, Artikel Blogger Tutorials, Artikel CSS, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2
link : Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2
Gambar dibawah ini

Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2

Tutorial kali ini sebagaimana janji saya pada postingan Mengaktifkan Threaded Comments Pada Custom Templates Blogger, bahwa saya juga akan mengetengahkan cara memodifikasi tampilan threaded comments blogger baik modifikasi atau custumize threaded comments yang ada menggunakan penambahan atau edit CSS atau dengan penambahan script.

Mengapa kita perlu memodifikasi tampilan threaded comment yang ada karena tampilan defaulth threaded comments blogger sangat simple seperti image berikut:

 

Maka kali ini dengan sedikit penambahan CSS kita akan merubah tampilan diatas. Ikutilah langkah-langkah berikut:

Modifikasi Threaded Comment Blogger Versi Pertama

• Setelah login ke akun anda, pada sdasbor klik menu template >> edit HTML
• Sekarang cari kode ]]></b:skin> (Gunakan control F untuk memudahkan pencarian)
• Tambahkan semua kode kode CSS berikut diatas kode ]]></b:skin>

Untuk menambahkan border pada kolom komentar tambahkan CSS berikut:

.comment-block {border:1px solid #666;border-radius:8px;padding: 3px;}

Modifikasi reply comments tambahkan CSS berikut:

.comment-actions {

margin-right: -2px;

margin-top: -15px;

font-size: 10px;

text-transform: uppercase;

float: right;

border: 1px #DDD solid;

padding: 3px;

line-height: 1em;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.comment-actions:hover {

background: black;

color: white;

}

Sekarang modifikasi image avatar komentator tambahkan CSS berikut:

.avatar-image-container img{border-radius:20px;background: url("http://cdn1.iconfinder.com/data/icons/crystalproject/32x32/apps/personal.png") no-repeat scroll center center;

}

Sekarang reply button dibawah post komentar tambahkan CSS berikut:

.continue{

width: 45px;

font-size: 10px;

text-transform: uppercase;

border: 1px #DDD solid;

padding: 3px;

line-height: 1em;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.continue:hover {

background: black;

color: white;

}

Terakhir modifikasi dropdown reply comments tambahkan CSS berikut:

.thread-count{

font-size: 10px;

text-transform: uppercase;

border: 1px #DDD solid;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

color: #999;

}

.thread-count:hover {

background: black;

color: white;

}

Sekarang setelah mengikuti semua langkah-langkah diatas, tampilan threaded comments anda akan seperti image berikut:

Modifikasi Threaded Comments Blogger Versi kedua

• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

/*=== Threaded Comments ===*/
.comments .comments-content .icon.blog-author {
background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/
background-repeat: no-repeat;
width:38px;
height:20px;
}
.comments .comments-content .loadmore a {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 2px;
}
.comments .continue {
margin-top:2px;
border-top: 2px solid silver;
}
.comments .comments-content .datetime a{
float: right;
font-size:10px;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#FAFAFA url(url comment) top repeat-x;
margin:5px auto 0;
padding:5px 5px;
border:1px solid silver;
}
.comment-actions a {
padding:2px 5px;
margin-right:10px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
font: 11px sans-serif;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
background: #EDEDED;
background: linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -webkit-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -o-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -ms-linear-gradient( center top, white 20%, #E5E5E5 100% );
}
.comment-actions a:hover {
text-decoration: none !important;
background: #CCC;
background: linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -moz-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -webkit-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -o-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -ms-linear-gradient(center top,#EEE 20%,#CCC 100%);
}
.comments .avatar-image-container {
margin-left:0px;
}
Catatan:

• Selanjutnya untuk membuat tampilan avatarnya menarik, tambahkan CSS berikut di bawah CSS tadi :

/*=== BOX Avatar dan Blank Avatar ===*/
.avatar-image-container {
box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
-webkit-box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
}
.avatar-image-container img {
background:url(https://lh5.googleusercontent.com/-roM2Sm4S9xk/UEtqddiMo4I/AAAAAAAAIQ8/oSOxOIGl5og/s1600/blog-anonim.png);
width:35px; height:35px; border:none;
}
.avatar-image-container img:hover {
transform:scale(1.2) rotate(360deg); -ms-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg);
transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s;
}

• Simpan pekerjaan anda. Maka hasilnya tampilan threaded comments blogger versi kedua ini seperti image berikut;

Demikian tutorial memodifikasi threaded comments blogger versi 1 dan 2. InsyaAllah pada kesempatan lain akan saya posting cara memodifikasi threaded comments blogger dengan penambahan script. Semoga bermanfaat!

Demikianlah Artikel Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2

Sekianlah artikel Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2 dengan alamat link https://trikmitos.blogspot.com/2012/10/modifikasi-tampilan-threaded-comments.html