Pasang Widget Keren Stay Connect (Social Bookmark dan Berlangganan)

Alhamdulillah, Kamu Klik posting lagi nih.. :) pada kesempatan yang baik ini, Kamu Klik bakal ngasih widget keren lagi hehe.. seperti beberapa widget keren lainnya yang sudah Kamu Klik posting. Widget kali ini bernama Widget Stay Connect. Penasaran seperti apa widget stay connect ini ?  Okelah, saya jelaskan.. widget stay connected adalah widget dengan deretan tombol follower social bookmark, feed burner serta tombol untuk berlangganan via email. Widget stay connected dapat diletakkan pada sidebar, kalau bisa paling atas supaya mudah dilihat. Widget ini cukup keren pemirsaa, gak kaya widget berlangganan via email bawaan blogger yang tampilannya standard :p  Jadi widget stay connected ini semuanya dikumpulkan dalam 1 kotak sehingga lebih menghemat tempat di sidebar.

Seperti apa bentuknya ? Silakan bisa dilihat pada gambar dibawah:


Cara pemasangannya juga mudah sob ^^ yakni tinggal ikuti langkah-langkahnya dibawah. hehe..

Cara membuat widget stay connected :
  • Seperti biasa kamu harus Login ke dashboard blogger kamu.
  • Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
  • 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://lh4.googleusercontent.com/-u3si_YxFoT0/TnmfA71Ti3I/AAAAAAAABko/arZLNvC3FYs/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://lh3.googleusercontent.com/-jT8QzFy-KSI/Tm4p0phqRgI/AAAAAAAABj8/KPTvV-olBL8/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://lh4.googleusercontent.com/-ZHFQc5UGc-4/Tm4pz25KtrI/AAAAAAAABjs/ykSqq-7_Cxg/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://lh5.googleusercontent.com/-u8h2YKsGKG8/Tm4pzhlMcxI/AAAAAAAABjo/d2K0pt5s7fc/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://lh5.googleusercontent.com/-tgUo6jJLTLc/Tm4pz30v3_I/AAAAAAAABjw/exmBwVnYG20/s800/googleplusicon.png" /></a>
    </td>
    <td style="padding-right:4px;">
    <a href="http://www.stumbleupon.com/share?url=URL BLOG KAMU" target="_blank" title="Stumble Upon">
    <img style="width:25px; height:25px;" src="https://lh6.googleusercontent.com/-nOR8LFZyycM/Tm4p0IKX74I/AAAAAAAABj0/jiOzaKPJLQ8/s800/stumbleupon_icon.png" /></a>
    </td>
    <td style="padding-right:4px;">
    <a href="http://technorati.com/faves?sub=addfavbtn&add=URL BLOG KAMU" target="_blank" title="Add To Technorati">
    <img style="width:25px; height:25px;" src="https://lh5.googleusercontent.com/-K92vEbfSOsk/Tm4p0RT1xLI/AAAAAAAABj4/tyehcalfAxM/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=0&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></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?uri=FEEDNAME">
    <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>
    Get this <a href="http://kamu-klik.blogspot.com/2012/02/widget-berlangganan-keren-stay-connect.html" target="_blank"><blink>widget</blink></a></div>
  • Lalu kamu Save / Simpan.

Panduan mengedit widget stay connected :
  • 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 (untuk cara mendaftar, silakan cari di google dgn kata kuncu 'Cara mendaftar feedburner) buatlah judul feed blog anda sama dengan title blog. Misalnya untuk blog ini saya berikan nama feednya “Kamu-Klik”.
  • Ganti TWITTER-NAME dengan nama akun twitter anda.
  • Ganti FACEBOOK-URL dengan alamat fan page atau boleh juga profil Facebook anda.
  • Ganti GOOGLE-PLUS-URL dengan nama akun Google +1 anda.
Naa.. bagaimana sobat ? mudah kan ? kalau ada pertanyaan silakan komen dibawah yaa ^^
Yap, demikian postingan ini, semoga bermanfaat.. selamat mencoba :D