Blog Personal tentang tips Blogging dan Internet Marketing

Cara Membuat Recent Comment + Thumbnail

Cara Membuat Recent Comment + Thumbnail. Pada postingan yang lalu sudah diterangkan bagaimana Cara membuat Recent Comment yang paling mudah dan cepat loadingnya dengan menggunakan bawaan dari Blogspot. Kali ini akan diterangkan Cara membuat Recent Comment yang dilengkapi dengan Thumbnail. Thumbnail itu artinya potongan gambar atau foto, yang tentunya disini adalah gambar atau foto pemberi komentar.

Banyak postingan di internet yang telah menjelaskan bagaimana Cara membuat Recent Comment dengan Thumbnail, tapi tidak ada salahnya juga saya memperkaya atau memperbanyak artikel ini dengan tujuan semoga dengan banyaknya postingan Cara membuat Recent Comment dengan Thumbnail akan memudahkan pencarian artikel ini.

Saya tertarik sekali dengan Cara membuat Recent Comment dengan Thumbnail dari W2Blogging yang manis seperti yang digunakan di Bengkel Blog ini. Jika sobat ingin langsung ke sumbernya boleh saja, atau bisa langsung di sini. Ok, berikut langkah-langkahnya.

Cara membuat Recent Comment dengan Thumbnail
  1. Login ke Blog anda > Pilih Design
  2. Kemudian Tambahkan gadget (Add a gadged) > lalu masukkan kode script berikut ini:
    <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 = 5,
    showAvatar = true,
    avatarSize = 40,
    roundAvatar = true,
    characters = 40,
    showMorelink = false,
    moreLinktext = "More »",
    defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
    <script type="text/javascript" src="http://bengkel-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
  3. dan simpan. Selesai

Sedikit penjelasan untuk Recent Comment dengan Thumbnail ini :
numComments = 5
showAvatar = true
avatarSize = 40
roundAvatar = true
characters = 40
showMorelink = false

numComments = 5, akan menampilkan komentar sebanyak 5, di sini dapat dicustom sesuai keinginan sobat silahkan suka-suka maunya berapa komentar yang akan ditampilkan.

showAvatar = true, akan menampilkan Avatar sobat, kalau tidak mau ditampilkan diset "false".

avatarSize = 40, akan menampilkan ukuran Avatar. 40 sesuai dengan yang ada diblog saya. Silahkan sobat mencobanya sesuai keinginan.

roundAvatar = true, akan menampilkan frame bundar. Jika sobat tidak suka dengan frame bundar atau lingkaran, bisa sobat set "false" akan menampilkan frame square atau kotak.

characters = 40, akan menampilkan 40 character pertama sebagai cuplikan komentar yang akan ditampilkan.

showMorelink = false, tidak menampilkan link ke postingan tapi kalau sobat mau menampilkan link ke postingan tersebut harus diset "true".

Ok, semoga bermanfaat.
Ayo Like Facebooknya
Tag : Blogging

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara Membuat Recent Comment + Thumbnail
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar

Back To Top