Assalamu'alaikum, kawan kali ini saya akan share sebuah trik terbaru, dan saya yakin, belum ada yang posting seperti ini di indonesia, kalau pun ada, itu juga bisa dihitung, lantas apa si yang akan saya share disini, saya akan share cara membuat komentar berurutan diblogger, lantas apa yang dimaksud komentar berurutan, maksudnya adalah, kamu memiliki fitur replay pada komentar yang ada pada blogger kamu.
Tapi yang membedakan dari trik-trik selama ini, yaitu "trik membuat tombol replay", seperti komentar yang saling berkesinambungan, yang biasanya fitur ini terdapat pada kotak komentar pada wordpress, jommla, atau pun pada forum-forum, atau mudahnya seperti pada komentar facebook atau google plus, yap, bila kamu sudah paham , sekarang kita coba membuat komentar berurutan diblogger.
Update Membuat Komentar Berurutan Di Blogger :
klik >> disini
Contoh hasil penerapan trik ini :
Berikut ini langkah-langkah membuat komentar berurutan diblogger.
1. Backup terlebih dahulu template kamu.
2. Pada dashbor kamu klik template >> Edit HTML >> Proceed.
3. Kamu ceklist Expand Widget Templates.
4. Sekarang kamu cari kode berikut.
5. Save template kamu.
Pada langkah ini kamu sekarang sudah mempunyai fitur replay komentar yang berurutan, dan setelah kode ini tertanam, maka dari pihak blogger otomatis akan menambahkan kode pelengkap, yang kamu bisa mengedit model yang kamu inginkan.
Nah sekarang bila kamu mau mempunyai fitur replay, seperti yang saya punya, maka kode diatas kamu rubah, menjadi seperti ini.
>> Trik ini masih baru, mungkin akan ada bug, bila ada mohon dikabarkan.
>> Trik ini hanya bisa pada template blogger.
Tapi yang membedakan dari trik-trik selama ini, yaitu "trik membuat tombol replay", seperti komentar yang saling berkesinambungan, yang biasanya fitur ini terdapat pada kotak komentar pada wordpress, jommla, atau pun pada forum-forum, atau mudahnya seperti pada komentar facebook atau google plus, yap, bila kamu sudah paham , sekarang kita coba membuat komentar berurutan diblogger.
Update Membuat Komentar Berurutan Di Blogger :
klik >> disini
Contoh hasil penerapan trik ini :
Berikut ini langkah-langkah membuat komentar berurutan diblogger.
1. Backup terlebih dahulu template kamu.
2. Pada dashbor kamu klik template >> Edit HTML >> Proceed.
3. Kamu ceklist Expand Widget Templates.
4. Sekarang kamu cari kode berikut.
<b:if cond='data:blog.pageType == "item"'><b:include data='post' name='comments'/></b:if>
Catatan >> kode diatas ada dua, ganti semua.
Kamu rubah jadi seperti ini.
Kamu rubah jadi seperti ini.
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Pada langkah ini kamu sekarang sudah mempunyai fitur replay komentar yang berurutan, dan setelah kode ini tertanam, maka dari pihak blogger otomatis akan menambahkan kode pelengkap, yang kamu bisa mengedit model yang kamu inginkan.
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
<b:includable id='threaded_comment_css'>
<style>
/*START of Blogger Threaded Comments By MBT*/
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
/*End of Blogger Threaded Comments By MBT*/
</style>
</b:includable>
Catatan :
>> Trik ini masih baru, mungkin akan ada bug, bila ada mohon dikabarkan.
>> Trik ini hanya bisa pada template blogger.
>> Kamu bisa edit warna aplikasi komentar ini.
- Untuk mengubah background Tombol Jawab dalam kamu edit 1F9EE5
- Untuk mengubah background tombol mouse hover Balas di mode edit 5AB1E2
- Untuk mengubah warna font dari teks Balasan edit ffffff
- Untuk mengubah warna background Balas komentar edit EBF5FE
Thank you mas joy, semoga tutorial ini bermanfaat.
BalasHapusini bisa yah mas.. q kmrin dah coba tak gak bisa. aku akan coba pakai ini yah.. bismiilah
BalasHapussubhanallah.. cara ini paling jitu.. syukron jiddan yah...
BalasHapusaku bisa mmpir kesini dan langsung praktek
syukran, insya Allah tutorial ini ada updatenya.
HapusTrik yang bagus . comment back yah ^^.
BalasHapusSama-sama, terima kasih kunjungannya.
Hapusane behasil gan :D lanjutkan gan
BalasHapus