 |
| Recent Comments |
Widget Recent Comments With Avatar Round Image
Dengan widget ini sobat bisa melihat dengan mudah recent comments dari pengunjung/koment terakhir yang ditinggal kan pengunjung. Terlebih mungkin pengunjung yang lain yang datatang ke blog atau website anda.
Cara Pasang Recent Comments Dengan Mudah
Berikut ini adalah cara pasang recent comment di Blog sobat. Sering kali kita menemukan cara yang sukar untuk memasang widget ini. Tetapi kali ini saya mencoba meringkas CSS code nya kedalam Java Script. So, sobat tidak perlu lagi mengedit HTML nya. Yang perlu sobat lakukan adalah perhatikan dan lakukan lah langkah-langkah berikut ini.
Cara pasang widget diblog di blogger
Perhatikanlah langkah-langkah berikut ini Sob... :D
- Masuk ke Design >> Page Layout >> Add a Gadget
- Perhatikanlah langkah 1>2>3 dan seterusnya.
 |
| Page Element Layout |
- Klik >> Add a Gadget >> HTML/JavaScript
 |
| Pengaturan Penambahan JavaScript |
- Lalu masukannlah Code HTML dan CSS code yang saya berikan dibawah ini ke dalam kolom NO. 6.
- Jangan lupa untuk memberi nama pada Kolom No. 5
- Dan Langkah terakhir SAVE.
Berikut ini adalah Kode HTML and JavaScript Untuk Recent Comments :
<style type="text/css">
ul.ady_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}
.ady_recent_comments li {
background: none !important;
margin: 0 0 6px !important;
padding: 0 0 6px 0 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
}
.ady_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;
}
.ady_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}
.ady_recent_comments li span {
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxthtxvZV8bn-2qJgA0NC0QWNgwDqSm3aTDfYY3rqV-i_s-XmdxbVG-1cqUauV4p31lrAIF6RO0T5z1nkB5zpJ52qn3OhLvHLTCmmnT6QF87HZfyBMot0rrrRsg5RTQccJjhyW0gFe6Q0/s1600/icon+recent+comment.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://recent-commets.googlecode.com/files/recent-commets-kinghtmlcode.js"></script>
<script type="text/javascript" src="http://kinghtmlcode.com/feeds/comments/default?alt=json&callback=ady_recent_comments&max-results=5"></script>
Pengaturan Recent Comments :
- http://kinghtmlcode.com >> gantilah dengan alamat url blog sobat.
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxthtxvZV8bn-2qJgA0NC0QWNgwDqSm3aTDfYY3rqV-i_s-XmdxbVG-1cqUauV4p31lrAIF6RO0T5z1nkB5zpJ52qn3OhLvHLTCmmnT6QF87HZfyBMot0rrrRsg5RTQccJjhyW0gFe6Q0/s1600/icon+recent+comment.png >> gantilah dengan url Untuk Avatar Standar yang sobat ingin kan.
- 5 >> gantilah jumlah No. tersebut yang berfungsi untuk mengganti berapa banya jumlah comments yang anda ingin terbitkan di widget tersebut.
Notice : Sobat bisa memindahkan/atau mengatur posisi recent comment yang sobat telah buat di page element layout dengan Drag mouse sobat dan bisa dipindahakn ke halaman lain. Jika sobat menemui masalah silakan tinggalkan comment dibawah, pasti saya akan membalas komentar sobat, Terimakasih Semoga Bermanfaat.
:.
Comments
Post a Comment