Widget Komentar + Efek Animasi Blogspot

Widget Komentar Efek Animasi Blogspot, MaxTrick akan berbagi Tips dan Trick bagaimana membuat widget untuk menampilkan komentar komentar di blog agan. Disini MaxTrick berbagi Widget komentar dengan dilengkapi 2 tema, yaitu Light Theme + Dark Theme, tinggal pilih mana yang paling sobat blogger suka.

Widget Komentar + Efek Animasi Blogspot

Kriteria Post Hari Ini :

Goal : Membuat Widget Komentar yang Menampilkan Komen Komen Di Blog
Tujuan : Meningkatkan Popular Site di pandangan Visitor Blog
Fitur : Dilengkapi dengan 2 Theme, dan tidak memberatkan akses Blog kita

Tutorial :

1. Pertama-tama masuk ke setting Layout Blogger (Tata Letak) :

Note : Lihat Gambar sebelah untuk lebih jelas

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script>
<div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
id_containrc:"#rcentcomnets",
animatedRecentcomments:true,
numComments:10,
url_blog:"URL_blogmu",
adminBlog:"nama_akun blogger/google+"
});
});
//]]>
</script>

NB: Jika di template anda sudah ada jQuery library maka kode ini :

Themes (CSS)

Widget Komentar Efek Animasi Theme

Selanjutnya ke Blogger > Settings > Template.

NB: BackUp terlebih dahulu Template Anda lalu klikEdit HTML > Proceed.

Kemudian letakkan salah satu kode CSS di bawah sebelum ]]></b:skin>.

Dark Theme :

.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black}
ul#kmtranimasi p{margin:15px 0 0}

Light Theme :

.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white}
ul#kmtranimasi p{margin:15px 0 0}

NB: Sebaiknya file JS disimpan di google code anda sendiri. Jika ingin tahu cara menyimpannya di google code silahkan ke tutorial Menyimpan file di Google Code.

Bila merasa keksusahan dalam setting Tag Heading ini, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot.

Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua
How To Order to us To Setting Your Tag Heading :

Just comment in post below and said that you want to order.

Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^