Membuat Widget Postingan Paling Banyak Dikomentari

Membuat Widget Postingan Paling Banyak Dikomentari – Sekian lamanya update artikel di blog ini, sampai-sampai saya hampir lupa password login ke akun google saya sendiri. Walaupun sibuk dengan urusan di dunia nyata, kali ini saya ingin melowongkan waktu sejenak di dunia maya, yang postingan kali ini berhubungan dengan widget blogspot. Spesifiknya tentang Membuat Widget Postingan Paling Banyak Dikomentari, atau dalam bahasa inggris Widget of Most Comments, kurang lebih seperti itu bunyi judul besarnya.

Widget ini bisa dibilang cukup bermanfaat demi kelangsungan blog. Agar blog tentunya lebih seo friendly. Ditambah lagi tidak banyak menggunakan javascript, yang katanya orang-orang javascript itu membawa malapetaka pada loading blog. Contoh dari widgetnya dapat dilihat langsung pada sidebar blog. Berminat untuk membuat widget ini? Ikuti tutorial berikut:

Langkah 1 : Simpan kode css di bawah ini
/* Most Commented Widget */
.commentbubble {background: #016e78;width: 40px;float: right;margin-top:7px;margin-left:10px;font-weight: bold;font-family: georgia,Helvetica;font-size:1.3em;padding:2px 5px 5px;color: #FFF;position: relative;border-radius:2px;text-align:center }
.commentbubble:after {content: ' ';position: absolute;width: 0;height: 0;right: 0;top: 100%;border-width: 5px 8px;border-style: solid;border-color: #016e78 #016e78 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);top: 29px;right: 6px;}
#sidebar ul {background:#33adb8;  margin: 0 !important;  padding:0 !important;border-radius:2px  }
#sidebar ul li {list-style: none;border-bottom: 1px dashed #dedede;padding:13px 20px 11px !important; line-height:1.7em;min-height:45px }
#sidebar a:link, #sidebar a:visited, #sidebar a:active {font-size:15px; color:#fff;font-weight:bold;}

Langkah 2 : Kopi paste kode ini pada widget HTML/Javascript lalu simpan.
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ul style="list-style:none; ">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = + feed.value.items[i].commentcount;
var pList = '<li style="clear:both"> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ;
document.write(pList);
//to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.bungfrangki.com
&ShowHowMany=7
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

Pada langkah 1 sesuaikan kode cssnya dengan kode css sidebar blog anda.
Pada langkah 2 ganti nama blog www.bungfrangki.com dengan nama blog anda dan angka 7 ganti dengan jumlah yang ingin ditampilkan.

Sekian tutorial ini, semoga bermanfaat.

Source : http://www.mybloggertricks.com/2014/05/most-commented-posts-widget-for-blogger.html

Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

13 komentar

  1. Profil:https://www.blogger.com/profile/05182724595664477867
    caranya tidak begitu sulit ya bung cukup mecopy edit dan modifikasi sesuai keingian dan kehendak :D
    • Profil:https://www.blogger.com/profile/13162875744493565460
      betul sekali :D
  2. Profil:https://www.blogger.com/profile/17709242066690693656
    Wah design baru nihhhh ...
    Mantapzz mas
    • Profil:https://www.blogger.com/profile/13162875744493565460
      haha...
      udah bosan sama tampilan lama
  3. Profil:https://www.blogger.com/profile/07282631341677755263
    Nyoba kang ah :D
    • Profil:https://www.blogger.com/profile/13162875744493565460
      toduwolo :D (silahkan)
  4. Profil:
    keren bro ,mantap banget tutorial nya
  5. Profil:https://www.blogger.com/profile/16796960264074869387
    makin jos ada desain templatenya mas :-d
    • Profil:https://www.blogger.com/profile/13162875744493565460
      ah templatenya biasa ko kang...
      sederhana aja :)
  6. Profil:https://www.blogger.com/profile/14169669868895104332
    keren postingannya, sangat bermanfaat. kunjungi balik ya. www.ilmugadget.com
    • Profil:https://www.blogger.com/profile/13162875744493565460
      Siap siap siap
Tempat berkomentar, diskusi dan lain-lain