Bubbles Threaded Comments Untuk Blog

Pada postingan kali ini saya akan share cara membuat Bubbles Threaded Comments di blog agan mungkin Bubbles Threaded Comments ini bisa menjadi pilihan jika agan bosan dengan tampilan komentar blog agan yang masih standar untuk menerapkannya diblog agan silahkan ikuti langkah dibawah ini...

Masuk blog agan terlebih dahulu
pilih menu template
kemudian gunakan ctrl + f dan segera temukan kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

/* Start Comment Style Code http://pengembarabiru.blogspot.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:arial;line-height:15px;font-size:14px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#ADE8E6;border:1px solid #fff;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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 a{color:#0E6284;font-family:coda;font-size:16px }
.comments .comments-content .icon.blog-author { border-color : transparent #990000 transparent transparent;border-style : solid;border-width: 10px; display:block;width : 0;bottom:0;right:0;height : 0;position : relative;float:right;top:0}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#ECF3F7;border-bottom:1px solid #ccc;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;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 .avatar-image-container{float:left; overflow:hidden; border:#fff solid 1px; padding:4px;box-shadow:1px 1px 5px rgba(1, 1, 1, 0.1);background:#f5f5f5;}
.comments .avatar-image-container img{width:48px}
.comments .comment-block{background:#f5f5f5;padding:0; margin-left:48px; border:#fff solid 1px;box-shadow:1px 1px 5px rgba(1, 1, 1, 0.1);}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* End Comment Style Code http://pengembarabiru.blogspot.com */

Jika sudah silahkan simpan template agan dan lihat hasilnya..
selamat mencoba semoga bermanfaat...

Read More

Modifikasi Popular Post Agar Lebih Menarik

Pada postingan ini saya akan share mengenai cara memodifikasi popular post agan kelihatan menarik diblog untuk caranya pemasangannya sangat mudah untuk lebih lengkapnya silahkan ikuti langkah dibawah ini..

Masuk blog agan
pilih menu Tata letak/add gadged
lalu pilih Entri Populer
untuk pengaturannya perhatikan gambar dibawah ini

Setelah itu klik simpan
Selanjutnya pilih menu template/edit html
gunakan ctrl+ f untuk menemukan kode  ]]></b:skin>
Bila sudah ketemu letakan kode dibawah ini tepat diatas tag  ]]></b:skin>

/*--- Popular Post Style EMP-BLOG Start --- */
 class="tr_bq">
.popular-posts ul{padding:0px; 0px; 0px; 0px;}
.popular-posts ul li {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzXnHbgqfa7MoKBQZF_jumJ_Nr3gT3I9k57lHR-Egpe_XZT100L-1RS9a1Qcqdmtmq-p3rXNI3tBGfuRCAB2kkOEdFD9kBhX0pjvd6s09vZEipDjShKfzgwXAqvUIYO6uHy0M2LpAfK53/s769/blogtariff.com-rd1.jpg) no-repeat 2px;
margin:0px 0px 5px 0px;
padding:5px 5px 5px 30px !important;
border: 1px solid #C2C0C0;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
list-style-type: none;
}
.popular-posts ul li:hover {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxja-mK4e8SujGuygLnNMO8KWRpfHTNFBB-pDlPESZDzDyoKOp-nZARcrJPIajWeLLWhtBg64n_h43nTdp217P3KCAJoD-EDJUrG6aXTv80yk0Q93N9WNCkGiX86ewWEf1vTKWRFk1Ivp4/s769/blogtariff.com-rd2.jpg) no-repeat 2px;
border:1px solid #FE0B0B;
}

.popular-posts ul li a:hover {
text-decoration:none;
color:#0419F7;
}
/*--- Popular Post Style EMP-BLOG End--- */

Silahkan sesuaikan warna agar terlihat serasi dengan blog agan..
Jika sudah silahkan simpan template agan dan lihat hasilnya
Selamat mencoba semoga bermanfaat...

Read More

Membuat Efek Avatar Menghilang pada Box Komentar

Assalamualaikum pada kesempatan ini saya akan share mengenai cara membuat efek avatar menghilang pada box komentar,,maksudnya efek menghilang disini adalah avatar pada box komentar blog tidak akan terlihat melainkan avatar tersebut hanya akan terlihat jika disorot Nah untuk Demonya bisa anda lihat di box komentar blog ini...jika anda tertarik menggunakannya silahkan ikuti langkah dibawah ini..

Masuk blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl+f untuk memudahkan pencarian anda
jika sudah ketemu letakan css dibawah ini diatas tag ]]></b:skin>

.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container { visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}
.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container {visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}

Langkah terakhir silahkan simpan template anda dan lihat hasilnya..
Selamat mencoba semoga bermanfaat...

Read More