Blog Cara

Gerbang Pengetahuan

Latest News :
Loading...
» » Cara Membuat Widget Pada Blog

Cara Membuat Widget Pada Blog

Oleh
komentar blogPada postingan kali ini Blog Cara akan membahas tentang Cara Membuat Widget Pada Blog. Widget ini dibuat oleh pemilik blog mybloggertricks.com dengan menggunakan script yang sudah ada dari yahoo. Dengan style yang cukup elegan dan dilengkapi bubbles yang berisi angka jumlah komentar, widget ini sangat bagus untuk ditampilkan pada blog anda.
Widget ini sangat bermanfaat untuk memicu pengunjung agar ikut berdiskusi pada posting yang paling banyak di komentari. Alhasil, posting lama anda akan selalu terupdate karena ada komentator yang baru. Perlu diingat bahwa halaman yang terupdate pada blog anda biasanya disukai mesin pencari, bahkan walaupun posting tersebut dibuat sudah lama.

Nah, untuk menambahkan widget daftar posting paling banyak di komentari ini, silahkan ikuti langkah-langkah dibawah :
1.  Login ke Dashboard blogger > Pilih Blog > Layout
2. Klik Add a Gadget
3. Pilih HTML/JavaScript
4. Masukkan kode di bawah ini :

<style>
.commentbubble {
background: #292D30;
width: 49px;
float: left;
margin: 2px 20px 35px 0px;
font-weight: bold;
font-size: 1.3em;
text-align: right;
font-family: georgia,Helvetica;
padding: 0px 0px 5px 0px;
text-align: right;
color: #FFF;
text-shadow: 4px 1px #202022;
position: relative;
top: 5px;}
.commentbubble:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 0px;
top: 100%;
border-width: 5px 8px;
border-style: solid;
border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
top: 34px;
right: 6px;
}
</style><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; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:2em; "> <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://cara-blog12.blogspot.com
&ShowHowMany=6
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

Keterangan Kode :

  • Sebelum di tambahkan ke widget baru, sebaiknya pastekan dulu kode di atas ke notepad, agar menghapus semua style font yang terbawa dari blog ini.
  • Ganti http://cara-blog12.blogspot.com dengan URL blog anda
  • Pada bagian ShowHowMany=6, ganti angka 6 sesuai dengan jumlah posting yang ingin anda tampilkan.
  • Kode yang saya highlight dengan warna kuning, itu adalah kode warna untuk bubble yang berisi jumlah komentar tiap posting. Silahkan ganti sesuai dengan selera anda.
  • Ganti kode #dedede  Jika anda ingin mengganti warna garis titik-titik dibawah setiap judul posting.
5. Klik save, dan widget sudah ditambahkan.

Sekian postingan Blog Cara pada kesempatan kali ini, mudah-mudahan bisa bermanfaat...

Tag : Tutorial
0 Komentar untuk "Cara Membuat Widget Pada Blog"

Back To Top -->