Widget Recent Comments (Komentar Terakhir) Pada Blogger

Jika beberapa jam yang lalu saya membagikan bagaimana caranya membuat TOP Commentators, kali ini saya akan bagikan widget yang digunakan untuk melihat orang yang terakhir kali berkomentar pada postingan kita. kira2 gambarnya seperti diatas loh ! yap nama widget ini adalah Komentar Terakhir atau Recent Commentators.

Langkah2nya :

1. Masuk Akun Blogger kalian.

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript.

3. Copas kode javascript dibawah ini.

<script style=text/javascript src=http://hzndi.googlecode.com/files/hzndi-recentcomments.js></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://hzndi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><div><small>^ <a href=http://hzndi.blogspot.com/2012/02/widget-recent-comments-komentar.html>Dapatkan Widget Ini</a><a href=http://hzndi.blogspot.com/ target=_blank title=recent comments widget> by Hzndi</a></small></div>

*Note :

• a_rc = 5 --> Angka 5 menunjukan jumlah tampilan komentator yang akan ditampilkan. bisa kamu ganti sesuai keinginan kamu.
• o_rc = 100 --> Angka 100 menunjukan jumlah karakter huruf yang akan ditampilkan, kamu bisa menggantinya dengan 50,53 atau berapapun sesuai yang kamu mau.

4. Save Template.

Read more »

Install Widget Top Commentators di Blogger

Mumpung lagi ada koneksi internet, saya akan membagikan cara bagaimana sih caranya membuat Top commentators pada blog. Jika kamu bingung apa itu Top commentators, widget Top commentators adalah widget yang akan menampilkan komentar pengunjung yang paling banyak. Ikuti langkah2 mudah dibawah ini oke :D

1. masuk akun Blogger.

2. Klik Rancangan --> Elemen Laman --> Tambah gadget kemudian Pilih Edit HTML.

3. Copas kode javascript dibawah ini :

<a href="http://hzndi.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a></a><script type='text/javascript'>
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&

EntertheURL=http://hzndi.blogspot.com&number=5&Nametobeexcluded=NamaBlogKamu"></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://hzndi.blogspot.com/>Top Comments</a> <a href=http://hzndi.blogspot.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wS6hZvdgsT7wYJwNlGvEqcGQ80Q2JKKjOa_h53U1clHG6bcGyzdfCr5CGOg5zh8_GsOCujh9uowdBRE5O6haQao1HI2eT1q9rJTsJJ4UJjk1vpCk1KouDsml_POnJF0WJuUftazKdvy3/s320/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;}
</style>

4. Simpan Template kamu.Mudah sekali bukan ?

*Note :

• Ganti hzndi.blogspot.com dengan nama blog kamu
• 5 adalah jumlah komentator yang akan ditampilkan, kamu bisa ganti sesuai keinginan kamu.
• NamaBlogKamu diganti dengan nama blog kamu lah :D hehe

Read more »

Membuat 3 Kolom Footer Pada Blog Secara Manual

 

Pernah kah kalian melihat sebuah blog dengan 3 kolom footer dibawahnya seperti tampilan blog diatas ? nah pada tutorial kali ini saya akan membahas bagaimana cara membuatnya di blogger. atau jika kamu males membuatnya, kamu bisa langsung download berbagai macam template di premiumbloggertemplates.com, disana templatenya juga mantep2 sob !. ikuti langkah2 dibawah ini :

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Centang Expand Widget Template. Oh iya jangan lupa di back up yah template blog kamu.

3. Cari kode ini ]]></b:skin> kemudian kamu copas kode dibawah ini dan letakan SEBELUM/DIATAS kode ]]></b:skin> tadi.

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434; }
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;        float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;        width: 32%;        text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;         text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; }
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

4. Setelah itu cari lagi kode </body> , Copas lagi kode dibawah ini dan letakan DIATAS/SEBELUM kode </body>.

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

5. Simpan Template kamu dan Lihat hasilnya :D 

*Note : kamu bisa mengedit kode warna yang berwarna biru, dibawah ini adalah penjelasannya.

• background: # 333434; adalah latar belakang widget footer kamu ganti #333434 dengan kode warna yang kamu inginkan.
• width: 960px; ini adalah lebar widget. 
• background: # fff; dan width: 32%; adalah warna latar belakang dan lebar dari tiga kolom di mana widget ditambahkan. 
• color: # 0084ce; Ini adalah Warna Judul pos widget yang kamu tambahkan.
• font: bold 14px Arial, Tahoma, Verdana; adalah jenis font yang digunakan.
• border-bottom: 3px solid # 0084ce; Edit ini untuk mengubah ketebalan, gaya dan warna perbatasan yang muncul di bagian bawah Judul Pos.
• border-bottom: 1px dotted # ccc; Editing ini akan mengubah ukuran, gaya dan warna perbatasan yang muncul di bawah link. 

 

Read more »