Cara Membuat Recent Post Dengan Avatar

Oleh Unknown

Tuesday 2 July 2013

Bagikan :

Tweet

Cara Membuat Recent Post Dengan Avatar Di Blog - Mungkin bagi sebagian blogger sudah tau dengan script dan tutorial Membuat Recent Comment. Tapi disini saya hanya ingin berbagi kepada blogger yang belum tau dengan Script dan Tutorial ini. Widget recent post ini sangat berguna untuk Admin maupun pengunjung dan widget ini juga tidak terlalu memakan tempat.

Widget Recent Comment adalah widget yang memunculkan komentar terbaru di suatu postingan. Widget ini juga mempermudah untuk Admin blog yang ingin mengecek apabila ada suatu komentar baru. Dan widget ini ramah terhadap blog karena tidak membuat loading blog berat.

• Login Ke Blogger
• Klik Tata Letak
• Klik Tambah Gadget >> Edit HTML/Javascript
• Masukkan kode berikut

<div style="overflow:auto;width:auto;height:200px;border:1px solid #ccc; padding:10px; margin:0 auto;background:transparent;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_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;} .w2b_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;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_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 = 10,
showAvatar     = true,
 avatarSize      = 35,
 roundAvatar   = true,
characters       = 250,
defaultAvatar  = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://koran-artikel.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>

• Simpan

Keterangan :

Kode yang berwarna PINK adalah Tinggi dari widget Recent Comment
Kode yang berwarna KUNING adalah Jumlah Komentar yg akan ditampilkan
Kode yang berwarna MERAH adalah Gambar Avatar yg akan ditampilkan
Kode yang berwarna HIJAU adalah Maximal kata yg akan ditampilkan
Kode yang berwarna BIRU adalah URL Blog sobat

Itulah Tutorial Cara Membuat Recent Post Dengan Avatar. Terima kasih sudah membaca artikel ini, semoga bermanfaat dan menambah wawasan kita dalam dunia blogger.

Tag : Tutorial Blog