Membuat Widget Like Box Pop Up Extra Twitter Follower

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

 Assalamu'alaikum, Selamat sore! Jumpa lagi dengan saya Diki PTA. Pada kesempatan ini saya akan share cara membuat widget pada blogger. Widget blogger sekarang sangat beragam dan sangat keren tentunya, terlepas dari itu semua tetap saja fungsi utama widget adalah fungsinya, seperti widget yang akan saya share kali ini yaitu widget like box pop up (mencul di tengah-tengah halaman blog) seperti gambar di samping. Apa yang membuat beda dari widget ini? Jawabannya yaitu adalah ada extra tombol follow Twitter, ini pasti akan membuat keuntungan lebih bagi kita ^^

Kelebihan lainya yaitu ukurannya lumayan ringan sehingga loading blog tidak akan terganggu menjadi lama, tertarik ingin mencobanya? Lalu bagaimana cara memasang widget tersebut? Berikut caranya :

1. Login ke Blogger.com tentunya pakai akun sobat sendiri ya ^^ hehe...
2. Masuk ke 'TATA LETAK' 
3. Klik 'TAMBAHKAN GADGET' Pilih 'HTML/JAVA SCRIPT'
4. Pastekan kode berikut ini :
   
   

   <style type='text/css'>
   /* Message Box */
   #box-message {
   position:fixed !important;
   position:absolute;
   top:-1000px;
   left:50%;
   margin:0px 0px 0px -182px;
   width:300px;
   height:auto;
   padding:16px;
   background:#fff;
   font:normal Dosis, Georgia, Serif;
   color:#111;
   border:2px solid #333;
   -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
   }
   #box-message a.close {
   position:absolute;
   top:-10px;
   right:-10px;
   background:#fff;
   font:bold 16px Arial, Sans-Serif;
   text-decoration:none;
   line-height:22px;
   width:22px;
   text-align:center;
   color:#111;
   border:2px solid #333;
   -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -webkit-border-radius:22px;
   -moz-border-radius:22px;
   border-radius:22px;
   cursor:pointer;
   }
   #twitterx {
   background: #EEF9FD;
   padding: 10px;
   text-align:center;
   border: 1px solid #C7DBE2;
   border-top: 0;
   }
   </style>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   <script type='text/javascript'>
   $(window).bind("load", function() {
   // Animate Top Value When Page Loaded Completed
   $('#box-message').animate({top:"50px"}, 1000);
   // Remove Mailbox When Close Button On Click
   $('a.close').click(function() {
   $(this).parent().fadeOut();
   return false;
   });
   });
   </script>
   <div id='box-message'>
   <!-- HTML Start -->
   <center><a class="murub">LIKE ATAU FOLLOW PLEASE!!!</a></center>
   <center>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/ALAMAT FANS PAGE ANDA?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
   </center>
   <!-- HTML End -->
   <br/>
   <div class="twitter">
   <!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=ALAMAT TWITTER ANDA &amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
   <a class='close' href='#'>&times;</a>
   </div>

   
   
5. Klik SAVE, dan silakan di preview.

CATATAN :

|| Ganti tulisan berwarna 'LIKE ATAU FOLLOW PLEASE' dengan kata-kata yang lain tanpa tanda kutip ( ' ), misalkan : Ayo Dong Likenya Mana? Follow Juga Ya?

|| Ganti tulisan 'ALAMAT FANS PAGE ANDA' dengan alamat fans page facebook anda tanpa tanda kutip ( ' ) misalkan : alamat FP saya www.facebook.com/DikiPradiptaTriAtmojoBlog Jadinya seperti ini :

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/DikiPradiptaTriAtmojoBlog?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center> 

|| Ganti Tulisan 'ALAMAT TWITTER ANDA' dengan alamat twitter anda tanpa tanda kutip ( ' ), misalkan : alamat twitter saya www.twitter.com/@DikiPTA Jadinya seperti ini :

<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=DikiPTA &amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

Kekurangan widget ini juga ada kok, karena sesuatu itu tidak ada yang sempurna bukan? kekurangannya yaitu :

• Widget ini akan tetap muncul, walaupun sudah di Like. Agak sedikit mengganggu sih, tetapi kalau mau menghilangkannya tinggal klik tanda X tanpa menunggu beberapa detik selanjutnya.

DAN ingat jangan samapai salah masukkan alamatnya ya, atau masukkan alamat punya saya :D nanti saya yang untung jadinya! Nah, saya rasa cukup sudah perjumpaan kita kali ini. Membuat Widget Like Pop Up dengan Extra Twitter Follower  tidak susah bukan? Tetap semangat pantang menyerah, jumpa lagi lain waktu dengan tips yang unik dan keren pastinya lain waktu. ^^ Arigatou ... Wassalamu'alaikum!