Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts

Friday, October 25, 2013

Cara Memasang Widget Twitter Updates di Blog

Cara Memasang Widget Twitter Updates di Blog - Kali ini saya akan membahas Cara Memasang Widget Twitter Updates di Blog. untuk contohnya sobat bisa lihat gambar dibawah ini :


Widget ini berfungsi untuk menampilkan status twitter kita. Nah, jika sobat tertarik dengan widget tersebut, langsung saja lihat tutorialnya dibawah ini :

1. Login ke Blogger sobat.
2. Pilih Menu Rancangan => Tata letak => Tambah Gadget => HTML/JavaScript
3.Pilih menu Unggulan

 

4. Lalu pilih Twitter Updates

 

5. Kemudian atur judul, ketinggian, Twitter username, dll

 

6. Terakhir Klik Simpan 


Mudahkan Cara Memasang Widget Twitter Updates di Blog???

Selamat mencoba :)





 

ReadFull Article ..

Cara Membuat Widget Popular Post Berdasarkan Komentar


Cara Membuat Widget Popular Post Berdasarkan Komentar - Kali ini yang akan saya bahas adalah Cara Membuat Widget Popular Post Berdasarkan Komentar. Biasanya kalau widget popular post yang biasa itu berdasarkan pageviews (jumlah posting yang dilihat) Tapi, kali ini popular postnya berdasarkan jumlah komentar, jadi artikel yang mempunyai komentar terbanyak akan menjadi popular post.

Berikut Tutorialnya :

1. Login ke Account Blogger sobat
2. Pilih Rancangan, Klik Edit HTML, lalu centang Expand Template Widget
3. Cari kode</head>, bila sudah Copy kode dibawah ini tepat diatas kode </head>
<style type=text/css>
.mostcoment {background:#fff;}
.mostcoment ul li{font-size:1em;line-height:15px;padding:3px 0 6px 12px;border-bottom:1px dotted #ccc;}
.mostcoment a:link,.mostcoment a:visited{font-size:12px;font-weight:bold;color:#000;text-decoration:none}
.mostcoment li a:hover{color:#ff9900;}
</style>
4. Simpan Template
5. Kembali sobat masuk ke Rancangan, Elemen laman, lalu pilih Tambah Gadget
6. Copy kode dibawah ini di HTML/Javascript


<div class="mostcoment">
<!-- Popular posts with comment count Start -->
<script type="text/javascript">
function getYpipePP(feed) {
document.write(<ul style="">);
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 + " Comments)";
var pList = "<li>" + "<a href="+ href + " target="_blank"> + pTitle;
document.write(pList);
document.write(pComment); //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://.blogspot.com
&ShowHowMany=5
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
<!-- Popular posts with comment count End --></div>
Keterangan: Ganti yang warna merah dengan url blog sobat
Yang warna biru adalah jumlah popular post yang akan ditampilkan

7. Simpan. dan lihat hasilnya :)
ReadFull Article ..

Cara Membuat Widget Stay Connected di Blogger

Cara Membuat Widget Stay Connected di Blogger - Pada kesempatan kali ini saya akan berbagi bagaimana cara membuat widget stay connected di blogger. Widget stay connected ini mempunyai beberapa tombol follower seperti jejaring sosial facebook, twitter, RSS feed beserta tombol untuk berlangganan via email. Widget ini dapat di letakkan di sidebar blog, kalau bisa di letakkan dipaling atas sidebar supaya lebih mudah dilihat pengunjung. 




Nah, berikut tutorialnya :


1. Silahkan Sign in ke blogger kamu
2. Masuk ke Dashboard, Tata letak, lalu Klik Tambah Gadget
3. Letakkan kode dibawah ini di HTML/JavaScript


<style>
#news-letter{clear:both;padding-top:10px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV2rFllY_WXM9__DPKUm3vwq2nYpTt_ergyXyCbbLh4Kky1z9-_x7dyp-wWdl1y85b0xMPilIN9iDSu9u8WOVvSrkHPb3HL0IxPls6RAAW2xR7BbnUl5qLrw8FAviPbhefpjieyKB7OHs/s800/mail-box.png) no-repeat;}
.news-headline{position: relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;}
</style>
<div class="news-headline" color:#333;>
Read latest headlines in your favorite news  reader
</div>
<center>
<table border="0">
<tr>
<td style="padding-right:4px;">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" title="Follow Me On Twitter">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3jmNCVdwoZaTBj5HXbupUccxsyHENCCwas2P5z0BWiI5z_9v8KdfCA4vYKWxaA5JkhIy0pDlaDGPcleDyqidib6LrK8fAtbjyNwR07W5gwJaWJ6BTmms9ZVPeVLiz-9ljiu1j6BFl97Q/s800/twitt.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://feeds.feedburner.com/FEEDNAME" target="_blank" title="Subscribe Via RSS">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4xCrXTfjz2zT7vK4pJZzBzDo5riSA9V9Ig7b1vxvQJrUBCwhUffCwSOigwvS3zpCDo1c-ubQ3A_q66ut9irhbgeLlBEz3NcvOOgdmFF3OAhwb5jgUpXsbZ0vNx3xU39I5YTvv5_koA5Q/s800/Feed-icon_128.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="FACEBOOK-URL" target="_blank" title="Find Us On Facebook">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcb6CWn6yFYZQUYceqmWyeklP-x1aUDCOcBsT9VaSIAGbCM1ynBS6rj14RqbdjMI7k1cp2z5ppoJysa-B4W_a0VgjKp-HgBrRbP0kf1Sbm1-wRCYbqXV5rjPbXYsiWNZasooBmCnnLSm8/s800/Facebook_icon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="GOOGLE-PLUS-URL" target="_blank" title="Add me on Google+">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwrPYANMj6_j3O4DZdXemb7IiuyjOAitQx5N6bQoxeHVQdjIiVUO6NBsNU6CdFD51IuNwf5X-wfxd3DDcADwqsXkH4kwW6L8lpCKROuIWSb0piCdZJU4W_gxMfKFOmmTXr85mmTmXkDkI/s800/googleplusicon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://www.stumbleupon.com/share?url=HOMEPAGE-URL" target="_blank" title="Stumble Upon">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRI0WoIm_cU63GsKTCD83LA-WnHB1GqX9JmWEzA1g2Iu2eYxKNxc_KT8R516AG50IDOSIMpog_ofFlFCohdikwej3Emg0ifnyB5Elv290qRM6gIIKRuc5Phvxyn24yuhMuRj2SSopVto/s800/stumbleupon_icon.png" /></a>
</td>
<td style="padding-right:4px;">
<a href="http://technorati.com/faves?sub=addfavbtn&add=HOMEPAGE-URL" target="_blank" title="Add To Technorati">
<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixHl1XeRGw2l-2fSTtKX7ijNx7jE3ay366vr-FguxCSL14MGO29Kr-LtnIipgPcTokNB-T2W80Khmch8qAaPiaCRR8iDqStkof-VoENjVS-qXKEHuKh4cGOWaGCs0QNq7fjszVO9hgsqM/s800/Technorati-icon.png" /></a>
</td>
<td>
<td style=padding-top:-2px;>
<a href="http://feeds.feedburner.com/FEEDNAME"><img src="http://feeds.feedburner.com/~fc/FEEDNAME?bg=000000&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0; padding-top:5px" alt="Fellow Readers" /></a>
</td>
</td>
</tr>
</table>
</center>           
<div id="news-letter">
<span class="msg-box"></span>
<b>Sign up for our email news letter</b>
<form onsubmit="window.open(http://feedburner.google.com/fb/a/mailverify?uri=FEEDNAME, popupwindow, scrollbars=yes,width=550,height=520);return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<p><input type="text" valign="middle" name="email" value="Enter your email address" size="25" maxlength="100" onfocus="this.value = ;" style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);" gtbfieldid="2"/>
<input type="hidden" value="FEEDNAME" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Sign Up" id="submit"/>
</p>
</form>
</div>
 
Keterangan :  Ganti TWITTER-USERNAME dengan username twitter kamu
Ganti FACEBOOK-URL dengan url facebook kamu
Ganti GOOGLE-PLUS-URL dengan url google plus kamu
Ganti HOMEPAGE-URL dengan url blog kamu
dan yang terakhir, ganti FEEDNAME dengan nama/id feedburner kamu.

4. Simpan Template.
 
Itulah langkah-langkah Membuat Widget Stay Connected di Blogger.
Semoga berhasil dan Semoga bermanfaat :D
 
ReadFull Article ..