healthy and wealthy

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Jumat, 29 Agustus 2014

Cara Membuat Widget Recent Coment

Cara Membuat Widget Recent Coment - kali ini saya akan berbicara tentang baagaimana cara nya membuatnya ? cara ini merupakan upaya untuk mempercantik tampilan blog .

Widget recent comment adalah salah satu widget yang terpenting ada di blog, karena itu menunjukkan post yang sedang banyak dibicarakan oleh para pengunjung blog.

Ini adalah caranya :

Login ke akun blogger sobat.
Pergi ke Tata Letak >> Tambah Gadget >> HTML/ Javascript
Simpan Kode di bawah ini

<style> /*recentcoment without admin*/ ul.sakahayang_comments{ list-style:none; margin:0; padding:0; overflow:hidden; list-style-type:none} .sakahayang_recent_comments li{ width: auto; list-style-type:none; float:none; height:auto; overflow:hidden; background:#fff; border-bottom: 1px solid #e0e0e0; margin:0 0 5px; padding:5px; } .sakahayang_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .sakahayang_recent_comments li {-moz-transition: border 0.3s ease-in-out;-ms-transition: border 0.3s ease-in-out;-o-transtion: border 0.3s ease-in-out;-webkit-transition: border 0.3s ease-out; transition: border 0.3s ease-in-out;;padding: 2px 5px 2px 5px;text-align: left;background:#F6F6F6;border-left: 4px solid #CDCDCD;border-top:1px solid #FFF; border-bottom:1px solid #D5D5D5; border-right:1px solid #CDCDCD; cursor: pointer;} .sakahayang_recent_comments li:hover {background:#D1D2D1;border-left: 15PX SOLID #0099CC;} .sakahayang_recent_comments li span{ margin-top:4px; color:#666; display:block; font-size:12px; font-style:italic; line-height:1.4} </style> <div style=height:250px;width:auto;border:1px solid #ccc;overflow:auto;><script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 10, showAvatar = true, avatarSize = 30, roundAvatar = true, characters = 150, defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSktiUP-SVj3QsmJJi2LySsaMrBY9O6QxiTXxZesHbjSC3PVadmAG4aJ5bSy0ZViPg388mYMHwNU6MenYhdEoD61UOR_Y9jn_T4aqFvhQNEQ7Bno3RUUx6mPdXbGP2gmFruQZJQT6V5s/s400/anon5.png", hideCredits = true; maxfeeds=20, adminBlog=Aan medianto; //]]> </script> <script type="text/javascript" src="http://kangismet.googlecode.com/files/recentcommentsnoadmin.js"></script> <script type="text/javascript" src="http://kib-banjar.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=20"></script> </div>

Perhatikan kode diatas, edit sesuai dengan selera sobat.

numComments = 10, (jumlah komentar yang di tampilkan) showAvatar = true, avatarSize = 30, (ukuran Gravatar dalam pixel) roundAvatar = true, characters = 150, (jumlah karakter yang akan ditampilkan) defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSktiUP-SVj3QsmJJi2LySsaMrBY9O6QxiTXxZesHbjSC3PVadmAG4aJ5bSy0ZViPg388mYMHwNU6MenYhdEoD61UOR_Y9jn_T4aqFvhQNEQ7Bno3RUUx6mPdXbGP2gmFruQZJQT6V5s/s400/anon5.png", (url gravatar) hideCredits = true; maxfeeds=20,(feed yang di load, harus sama dengan max feeds) adminBlog=Aan medianto; (nama tampilan admin)

Ganti kib-banjar.blogspot.com dengan url blog sobat, ganti max-results=20, harus sama dengan max feed.

Yang terakhir Klik Simpan.

Mudahkan cara nya ? itu adalah tutorial singkan tentang Cara Membuat Widget Recent Coment.

ReadFull Article ..