pasang iklan

Widget Most Commented for Blogger

Di Kumpulan Cara, Tips dan Trik, Widget
Widget Most Commented for Blogger – Merupakan sebuah widget yang berfungsi untuk menampilkan postingan atau artikel yang paling banyak memiliki komentar. Widget Most Commented for Blogger sama dengan Popular Post, Random Post, Recent Post, dan Related Post. Widget ini dapat digunakan sebagai Navigasi atau sekedar untuk mempercantik tampilan sebuah blog. Widget yang akan saya coba bagikan adalah widget warna warni, yang dapat mempercantik tampilan sebuah blog. Widget ini juga dapat berguna untuk meningkatkan Pageviews blog anda, lumayan bukan?? Postingan ini sebenarnya melanjutkan tentang postingan widget yang berjudul Simple Subscription Widget for Blogger

Bagaimana Cara Membuat Widget Most Commented for Blogger?

Saya akan coba memberikan Tutorialnya, Kode berikut saya ambil dari Help Blogger
1. Login ke Blogger
2. Masuk ke Edit HTML
3. Tekan CTRL + F dan cari kode </Group>

4. Jika tidak ada, silahkan cari kode ini <b:skin><![CDATA[
    Letakkan kode berikut dibawahnya

<Group description=”Most Commented” selector=”.most-commented”>
<Variable name=”most.commented.background1″ description=”background color1″ type=”color” default=”#fa4242″ value=”#ee377a”/>
<Variable name=”most.commented.background2″ description=”background color2″ type=”color” default=”#ee6107″ value=”#fcad37″/>
<Variable name=”most.commented.background3″ description=”background color3″ type=”color” default=”#f0f” value=”#f8e000″/>
<Variable name=”most.commented.background4″ description=”background color4″ type=”color” default=”#ff0″ value=”#c7e93d”/>
<Variable name=”most.commented.background5″ description=”background color5″ type=”color” default=”#0ff” value=”#5ebded”/>
</Group> 

5. Lalu cari  ]]></b:skin> Copy Paste kode berikut tepat diatas kode tersebut

 .comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

6. Simpan Template Anda.

7. Selanjutnya silahkan anda ke Tata Letak (Layout), Pilih Tambahkan Gadget (Add a Gadget), Javasript/HTML.

8. Silahkan Copy Paste kode dibawah ini ke dalam kotak Javasript/HTML

<script type=”text/javascript”>
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,””).split(/s+/).slice(0,n-1).join(” “)
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = “‘” + feed.value.items[i].link + “‘”;
var postTitle = feed.value.items[i].title;
var postthumbnail = “<img src=”+feed.value.items[i].postthumbnail+” />”;
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = ‘<div class=”most-commented”><ul><li><div class=”comment-count”>’ + postComments + “</div>” + postthumbnail + “<a href=”+ postURL + ‘”>’ + postTitle + “</a>”  + ‘<p>’ +stripTags(postDescription,10)+’…</p>’ + ‘</li></ul></div>’;
 document.write(postList);
     }
 }
 </script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://ksplestari.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json”
type=”text/javascript”></script><span style=”font-size: 80%; float:left;”><a href=”http://ksplestari.blogspot.com/2014/12/widget-most-commented-for-blogger.html”>Most Commented Posts</a></span> 

 9. Silahkan anda ganti Nama blog yang saya warnai biru dengan url blog anda.

10. Jika anda ingin tampilannya lebih sederhana, tanpa Thumnails dan Post Snippets. Gunakan kode dibawah ini :

 <script type=”text/javascript”>
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,””).split(/s+/).slice(0,n-1).join(” “)
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = “‘” + feed.value.items[i].link + “‘”;
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = ‘<div class=”most-commented”><ul><li style=”margin-bottom: 10px”><div class=”comment-count”>’ + postComments + “</div>” + “<a href=”+ postURL + ‘”>’ + postTitle + “</a>”  + ‘</li></ul></div>’;
 document.write(postList);
 }
 }
 </script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://ksplestari.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json”
type=”text/javascript”></script>
<span style=”font-size: 80%; float:left;”><a href=”http://ksplestari.blogspot.com/2014/12/widget-most-commented-for-blogger.html”>Most Commented Posts</a></span>

Hasilnya akan seperti di bawah ini :

11. Untuk menambahkan “Komentar” setelah jumlah komentar, silahkan ganti kode

 <div class=”comment-count”>’ + postComments + “</div>”

Dengan kode

<div class=”comment-count”>’ + postComments + ” comments” + “</div>”

12. Simpan Template anda. Selesai.

Bagaimana, Cukup mudah bukan?? Demikian sahabat, postingan tentang Widget Most Commented for Blogger ini, kiranya dapat bermanfaat. Kiranya dengan widget ini dapat meningkatkan Pageviews blog anda. Terima kasih..
Baca Juga:   Stabilkan Jaringan dan Koneksi Data HP Selular
  1. author

    Saud Karrysta2 tahun yang lalu

    Bagus dan menarik nih Mas Widget Most Commented nya saya belum prnah coba ijin pakai ya Mas terima kasish sudah berbagi

    Balas
  2. author

    Saud Karrysta2 tahun yang lalu

    Bagus dan menarik nih Mas Widget Most Commented nya saya belum prnah coba ijin pakai ya Mas terima kasish sudah berbagi

    Balas
  3. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mas Saud, Silahkan di coba Mas Saud. Terima Kasih Kembali Mas Saud atas kunjungan dan pertamaxnya.. 🙂

    Balas
  4. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mas Saud, Silahkan di coba Mas Saud. Terima Kasih Kembali Mas Saud atas kunjungan dan pertamaxnya.. 🙂

    Balas
  5. author

    Saud Karrysta2 tahun yang lalu

    Widget nya sangat anggun dengan warna warni, bisa membuat tampilan blog jadi berwarna.. blog saya bisa jadi hidup nih Mas KL, Terima kasih lagi ya Mas?

    Balas
  6. author

    Saud Karrysta2 tahun yang lalu

    Widget nya sangat anggun dengan warna warni, bisa membuat tampilan blog jadi berwarna.. blog saya bisa jadi hidup nih Mas KL, Terima kasih lagi ya Mas?

    Balas
  7. author

    Saud Karrysta2 tahun yang lalu

    Baik Mas, terima kasih kembali salam.. semoga widget yang Mas bagikan ini seantiasa bermanfaat buat seluruh sahabat yang menggunakanya 🙂

    Balas
  8. author

    Saud Karrysta2 tahun yang lalu

    Baik Mas, terima kasih kembali salam.. semoga widget yang Mas bagikan ini seantiasa bermanfaat buat seluruh sahabat yang menggunakanya 🙂

    Balas
  9. author

    Rama Banten RB2 tahun yang lalu

    mantep nihh izin coba kang… keren widgetnya

    Balas
  10. author

    Rama Banten RB2 tahun yang lalu

    mantep nihh izin coba kang… keren widgetnya

    Balas
  11. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mas Saud. Saya sendiri pasang widget ini mas.. Terima kasih kembali Mas Saud… 🙂

    Balas
  12. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mas Saud. Saya sendiri pasang widget ini mas.. Terima kasih kembali Mas Saud… 🙂

    Balas
  13. author

    KOPERASII LESTARI2 tahun yang lalu

    Amin, terima kasi Mas Saud.. 🙂

    Balas
  14. author

    KOPERASII LESTARI2 tahun yang lalu

    Amin, terima kasi Mas Saud.. 🙂

    Balas
  15. author

    KOPERASII LESTARI2 tahun yang lalu

    Silahkan Mas Rama. Mas Senior ini hehehehe

    Balas
  16. author

    KOPERASII LESTARI2 tahun yang lalu

    Silahkan Mas Rama. Mas Senior ini hehehehe

    Balas
  17. author

    Wahyu Eka Prasetiyarini2 tahun yang lalu

    bagus juga nih widget nya bisa berwana warni getu ya, sayang nya saya nggak bisa pakai widget tsb 😀

    Balas
  18. author

    Wahyu Eka Prasetiyarini2 tahun yang lalu

    bagus juga nih widget nya bisa berwana warni getu ya, sayang nya saya nggak bisa pakai widget tsb 😀

    Balas
  19. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mbak, Widget ini hanya untuk blogger.. 😉

    Balas
  20. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mbak, Widget ini hanya untuk blogger.. 😉

    Balas

Tinggalkan pesan "Widget Most Commented for Blogger"

fifteen − 2 =

Baca Juga×

Top