Membuat Threaded Comments Pada Blok Komentar Blogspot Versi I

Saturday, December 7, 2013

Browse Manual » Wiring » blogspot » blok » comments » i » komentar » membuat » pada » threaded » versi » Membuat Threaded Comments Pada Blok Komentar Blogspot Versi I

Membuat Threaded Comments Pada Blok Komentar Blogspot Versi I

Tahu kan Threaded Comments? Itu lho, rangkaian komentar yang bisa dibalas. Nah, mengenai "makhluk" ini entah bermula dari siapa, soalnya begitu banyak blogger yang sudah memuat tulisan ini dengan cara copy paste tanpa menyebutkan sumbernya (hehehe...). Akibatnya, kesalahan penyebutan banyaknya kode yang harus diganti pun sama (padahal cuma satu, hehehe...).

Sebenarnya jika sobat rajin gonta-ganti template, banyak template sekarang yang sudah menambahkan kode HTML untuk Threaded Comments, seperti template WP Zine. Kalau Threaded Comments-nya tidak berfungsi, hal itu dikarenakan setelan komentarnya tidak disetel ke bentuk tersemat, karena Threaded Comments ini hanya bisa berfungsi apabila setelan komentar dibuat tersemat di bawah entry.

Jadi jika mau menambahkan Threaded Comments ini, terlebih dahulu harus mengubah setelan komentar menjadi tersemat. Selanjutnya, seperti biasa:

Dari halaman Dasbor, pilih Template - Edit HTML(untuk amannya, lakukan duplikasi template terlebih dahulu).
Beri tanda centrang pada Expand Template Widget.

Kemuadian cari kode :


<b:include data=post name=comments/>

yang terletak antara kode-kode berikut:


<b:if cond=data:blog.pageType == &quot;item&quot;>
<b:include data=post name=comments/>
</b:if>

Selanjutnya ganti kode yang berwarna merah dengan kode ini:


<!--Threaded Komentar-->
<b:if cond=data:post.showThreadedComments>
<b:include data=post name=threaded_comments/>
<b:else/>
<b:include data=post name=comments/>
</b:if>
<!--/Threaded Komentar-->

Setelah itu save, jika hanya ingin membuat Threaded Comments saja.

template

Jika ingin tampilan Threaded Comments ini lebih keren, seperti pada blog Anasta Love ini, lakukan hal berikut:

Ubah CSS #comments h4 dengan ini (tidak penting):


#comments h4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVutm5FHK1JF_pMmbDgGL9M4Il9DViP1ZNJQZNAlK_sy_nW6s9Qg4mo7J6DoD2Qwf2VV5R6Fe06xVNh4L2iA8pOs21Q-_HDzXZwghyphenhyphenmKp1u5JgMPG6j7N2cPQlaXzkxwe9v0np3CDwxJk/s1600/commentposts.png) no-repeat;
padding-left:37px; margin:0; 
font-size:14px; font-weight:bold; 
line-height:32px; text-align:justify; 
}

Setelah itu tambahkan CSS berikut (penting!):


/*=== 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:
Boleh ditempatkan dimana saja asal di atas kode ]]<>/b:skin>.
Untuk mudahnya, tambahkan saja setelah atribut CSS untuk #comments h4 tadi atau di bawah CSS untuk komentar.

Selanjutnya jika ingin tampilan avatar container-nya menarik, tambahkan CSS berikut di bawah CSS tadi (lumayan penting):


/*=== 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWH8nAwNSIU7TdWu-VSuyWdJX72UyWfOXWyGdStzJKODTqA1zxXCqb6-u-_yIUhwPWj7AlzzDaqbz28osWsPV1LlIkYFB7AgvEr3f-5bQG9v1Z1Akb49nQAJ2zswSJiaSaKWUg5Nho81Y/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;
}

Save hasilnya lalu ucapkan Alhamdulillah...

Silahkan test sendiri Threaded Comments-nya. Menarik kan?

Ok, segitu aja sob. Semoga bermanfaat .....

Nusa Tujuh

Saturday, December 7, 2013

Membuat Threaded Comments Pada Blok Komentar Blogspot Versi I

No comments:

Post a Comment