Home  ·  About  ·  Privacy  ·  Contact  ·  Cbox

Membuat Tombol Fan Page dan Follow Twitter Melayang


Beberapa cara dapat dilakukan agar pengunjung blog menyukai atau bergabung pada Fan Page dan Twitter Anda. Salah satunya adalah membuat Fan Page tersembunyi disamping blog, tapi pada kesempatan ini kami akan membahas cara yang lain yaitu cara membuat tombol Fan Page dan follow Twitter melayang di Blog.
Berikut langkah cara membuat tombol fan page dan twitter melayang :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript.
<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">Silahkan Bergabung Bersama Komunitas Kami</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Infoblog_ID/121738271193251?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=Infoblog_ID&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>
Keterangan :
Tulisan yang berwarna hijau adalah judul dari widget Fan Page.
Tulisan yang berwarna merah adalah URL Fan Page blog Anda.
Tulisan yang biru adalah username dari akun Twitter Anda.
4. Kemudian Simpan.

Jika Anda hanya ingin menampilkan Fan Page saja, maka hapus kode berikut :
<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=Infoblog_ID&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
Nah, kini Anda mempunyai Fan Page dan follow Twitter melayang pada blog. Semoga dapat membantu!

26 komentar:

  1. Artikel disini banyak yang menarik, mkasih gan.
    follback ya gan :)) ane member #147
    http://itsenggot.blogspot.com

    ReplyDelete
  2. tapi klo blognya ada slidernya itu fan page nya ketutupan.. gmana solusinya ?

    ReplyDelete
  3. Thanks Gan Atas Infonya, http://malesbangetbukanya.blogspot.com/

    ReplyDelete
  4. Min Kalo User Name Twitter Itu Apa?
    Gimana Caranya?
    Maklum Baru Bisa Hihihih :)

    ReplyDelete
    Replies
    1. username itu nama akun twitter Anda, contoh kalo pnya sya @Infoblog_ID

      Delete
  5. thanks gan widgetnya. udah jadi nih

    kunjung ya ke habibullahaf.blogspot.com

    ReplyDelete
  6. gan kalo cuma mw tampilin twitternya gmna

    ReplyDelete
  7. terimakasih banyak ya gan,

    follow back ya : http://ngunduhapk.blogspot.com

    ReplyDelete
  8. Replies
    1. plugin twitternya gak nampak gan diterapkan di blog sederhana saya www.siupi-server.blogspot.com

      Delete
  9. wah mantap nih...

    kunjungi juga http://primacheat311.blogspot.com

    ReplyDelete
  10. thx u bro, untuk infonya
    kunjungi juga ya http://motoridex.blogspot.com/

    ReplyDelete
  11. oke boss mantap nanti dicoba deh kunbal ya hehe www.mahadewapulsa.com

    ReplyDelete
  12. wah keren artikelnya gan....
    Bermanfaat banget (y)

    ReplyDelete
  13. kren artkelnya bung
    http://wapzic.com

    ReplyDelete
  14. terimakasih banyak sob sangat membantu sekali..

    http://landongobatherbal.com/obat-herbal-kanker-lambung/

    ReplyDelete
  15. makasi deh udah bantu saya

    http://informasi-kesehatan-terupdate.blogspot.com/

    ReplyDelete
  16. the information is really useful for me ....
    and I wait for your next information is even better,,,,
    Thank you ...

    Also visit our website ⇛ motor | mobil | otomotif | modifikasi

    ReplyDelete
  17. Thanks Gan Atas Infonya, http://monixtuma.com/

    ReplyDelete
  18. kalo fan page ama twitter nya d ganti ama yg lain kyak instagram ama line gmna kak??

    ReplyDelete
  19. Saya baru buat blog masih bingung kode fan Page dimana bisa didapatkan

    ReplyDelete
  20. Saya baru buat blog masih bingung kode fan Page dimana bisa didapatkan

    ReplyDelete

 
Copyright © . Info Blog Indonesia · Powered by Blogger