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/AVvXsEi68m_E7Wux99g6yoEbymipVZnclKpPtUTK4JOqbWG40k5Zcw6NveQWRleQ-vdTQLoPTavLbNrp5wtlVTEPQOu5ih3GliJmAvlU29i8h51t9s2EqwhIjqKhyphenhyphenB7iPMIy92Lxub6ePhKOCaQ/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/AVvXsEghlBZ9kFHgb3BHM4ZzLOtcGep_3D_gt_kNT_MzcVInUmDu-Y_DCPiB1HS9bf3KX7YQPLVies0_n6bZFO30JDQ2gMmCkc512bPOffsHxdK8D3RH_Pezk-21lZ1O0ND9Jf10sROYDQOmReY/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/AVvXsEhITHBfBoNry10VC1ugu9yc7gtZdBwBiLQUe-xLg7Ks2tO7-iaoHLZRcl88qYcYlv1SsmiJoYNVIDi5vX3UtZAEUt8eGU6t-Vmweef9QfuIFENA949_FNhFZ-GFoJUJ2C7Le_Lc4Ht1Hck/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/AVvXsEg6QUesxm42446mAVUx7EOCQdq3B3RqkqMXpbuTBSv_7V5-NY0IR56tZ3jqJKyIsQsW9z7KCxHh5wAj9BkZV_1mIHqXNOfPEb6T6rwRsZm3U_XHxqi0FH6L8YEHqMFjRbyUESsVc6rLwFE/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/AVvXsEiLdP6KTbYBCxeU-GJnALUv3wBHI68BNMHORpe5h9-f6SBWMd62GkYoxw-oEHinxEyGBQSNE0vHR2jxByT4wWLSwGlSvKUlkvpzwuVtbtGqKiUx_JNtKi2D2zObHynY3sDJnYhsHMonkX8/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/AVvXsEj51p0mFeTI0tUxsMiILPXAra-jSrQ2tEuBNA4_f4idj3Zt-h74m1yAx3hCSs7FlW9Oxmtc7hJW6ghRUIDYTiZ61BWl6IYfx9zumc4hCUyB7Iwp-K9r6XB9GwaTcMRYm4ikn-nl2MjzSO0/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/AVvXsEjC49ZQ8HjaDvChZZPTOakkrVDBOA1AZzZLkJtbJKrfzWsgybMhqyRPwzJXRnk-JQ6m8i0IlKcNpHQlZtJ6Dzjzir74Wii-2q8VmtZjPu06TcP-0q6TJ-pJ4PX4146MGwi37FUoInSAbSk/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

 

Share this post