Cara Membuat Stay Connected Widget

Jumat, 09 Maret 2012

 Widget dengan deretan tombol follower social bookmark, feed burner serta tombol untuk berlangganan via email ini biasa disebut dengan widget stay connected. Kenapa disebut seperti itu ? Ya karena pada bagian atas widget ada tulisan Stay Connected, gitu aja koq repot sih hi hi. Soalnya saya sendiri bingung mau mendefinisikannya dalam bahasa Indonesia seperti apa. Widget stay connected dapat diletakkan pada sidebar, kalau bisa paling atas supaya mudah dilihat. Biasanya widget berlangganan via feed burnerdan berlangganan via email bawaan blogger dibuat terpisah dengan widget social bookmark. Nah pada widget stay connected ini semuanya dikumpulkan dalam “1 rumah” sehingga lebih menghemat tempat di sidebar.

Cara membuat widget stay connected :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKiCk8nXEkfHX3C7jCs2jdGMHd_MOUxZiToEx6zlYXRRSXc6Ijw8GsAq-m6r7l1qz3RDdzBNsdoGu18mpSK6R6HwR1RTqUTku1Q0t6EJmA-BgZ0YS4Axtzeu4ij0JtY4yVz1DDpHoOUVc/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-NAME" target="_blank" title="Follow Me On Twitter">

<img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo3VFivLp9X_fcRKa_etDfnqOv3rABHL76NEhYhhc_lKwQQOj_3E18FSZUDs45zz5vFCIewajJY1k1LJIbb3fPvgFxgb2QNoWy2rHLKnYt_9Ht6ZM87bpf9uzszN1sh-e8mjmbFgieSQ/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/AVvXsEhIk2Bk6qyaNsAn6mFueSwXe05BgtifYpjJhFlZM0kwyBfozSSld-ZcwGBhd6CRkkRNca966AtNm4091FDcmXBeOkA7NePD8Q73wLwfeYttkCapRXTZ4ki3tb3kJODxWMQTfwpytJJSwzs/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/AVvXsEju-V4vWeCMrKZuRYjT-_k5WkTrZIvXvNczxVwLs2Xir9J4IVOSD3nrkJHSY7IzUAnAyTlFty0cibv6QbgTCNkpX-P2DfJ9nNqYCb2AHSNP0Y2XXCaO9GWAXTU7WfBYubWtn9nVNwTONMI/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/AVvXsEjdCnoyIWIOMwOavCy70GYF6i6VU2UkmOdVJrNBdjeM_Rgn1Lr9g7JpAgcb728nryb0QsfXtqbmPoLTunfTpGuC3ebwNac4FNHk-fe7epPW9wA5oZauePJkCsn8Q2btAIjYE4-5ucsAOuo/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/AVvXsEirJcRxCX1908sW7h4c23aUXtLuYEt4SJXxg4lGhB2LoKcJ1a7U6qWG2PgdvKGPyuWjz5NzcBlDNPSOMTIM0UI23rdbiUTAi7WhAT43N7Ggp775zAE1NTHlPcd2NF-CuM3pE8rN3xugGmA/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/AVvXsEgfvLceXi2Fdzy-9pyjXBxr3gvJnjFxGNzmGvMB1N3VoNP6mT3hptmf2FGTnzPVorhvf6Ebi6Kwrk4C4nb7Bl51A6FaCrbT0veI9A8lSrLDVkhVOFAWVRmtUknSUSq4mitPWInOV_UBIkU/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>

4.       Save / Simpan.

Cara mengedit script widget stay connected (kustomisasi) :

1.       Ganti FEEDNAME dengan nama/judul feed blog anda yang sudah terdaftar pada layanan Feedburner. Kalau anda belum memiliki akun di Feedburner maka mendaftarlah lebih dulu dan supaya mudah diingat, buatlah judul feed blog anda sama dengan title blog. Misalnya untuk blog ini saya berikan nama feednya “ShareWithIrfan”.

2.       Ganti TWITTER-NAME dengan nama akun twitter anda.

3.       Ganti FACEBOOK-URL dengan alamat fan page atau boleh juga profil Facebook anda.

4.       Ganti GOOGLE-PLUS-URL dengan nama akun Google +1 anda.

5.   Dan yang terakhir, ganti HOMEPAGE-URL dengan alamat homepage blog anda