Langsung ke konten utama

Cara Membuat Facebook Likebox & Twitter Melayang di Blog

Oke sob. kali ini saya akan berbagi tutorial cara membuat Facebook Likebox & Twitter Melayang di Blog, Ke Istimewaan Like Box ini daripada lain adalah sudah ada Twitternya jadi sobat nggak usah ribet-ribet bikan likebox Followers ataupun Burung Twitter.
Oke Langsung aja, Dan berikut Caranya :


Lanjuut ,..

  1. Login dulu ke akun Blogger Sobat.
  2. Buka Tata Letak.
  3. Klik Tambah Gadget.
  4. Lalu, Pilih HTML/Java Script
  5. Lalu Masukin kode Java Script dibawah ini kedalam kotak yang telah di sediakan.

    <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">Jangan Lupa Like Ya ^_^</a></center>
    <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Scholovers-blogger/257118684424929&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=Scho_Lovers&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
    <a class='close' href='#'>&times;</a>
    <br />
    <div style="text-align:center">
    <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://fauzischolovers.blogspot.com/2013/05/cara-membuat-facebook-likebox-twitter.html"> widget! </a></span>
    </div>
    </center></div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (50-gb.offsetWidth).toString() + "px";
    </script>

    </div>
Untuk kode yang berwarna :
  • Merah    : bisa diganti dengan kata-kata lain seperti : Like, Like ya, Jangan Di Like. dll :D
  • Biru        : diganti dengan alamat/URL Fanspage Facebook Sobat.
  • Magenta : diganti dengan Username Twitter sobat.
Lanjut KeTutornya sob :

   6. Klik Save/Simpan.
   7. Silahkan sobat lihat tampilan blog sobat. Sudah ada Like-Boxnya .Mudahkan

Sekian, Semoga bermanfaat. Terima Kasih.
Good Luck ^_^ 

Komentar

Postingan populer dari blog ini

Cara Membuat Blog

Assalamu'alaikum Warahmatullahi Wabarakatuh Selamat datang di blog baru saya. Yang pertama saya akan lakukan adalah memberi tahu Cara Membuat Blog . Posting ini saya dapat dari http://terbarux.blogspot.com/2013/07/cara-membuat-blog.html . Berikut Cara Membuat Blog dengan mudah dan gratis di Blogspot.

Cara Memasang Widget Animasi Bergerak Naruto

Cara membuat animasi naruto bergerak di pojok blog -  Wah ,, kembali lagi neh permathic blog mencoba untuk mengshare kepada para sahabat semua mengenai cara membuat  widget animasi bergerak  di pojok blog. Namun permathic pada kesempatan kali ini akan memberikan  animasi  animasi khusus seputar naruto. Hehehe.. maklum saya kan penggemar berat naruto, lagi pula  animasi naruto  dkk ini sangat keren dan menarik loh.. dan sangat pass jika di jadikan  pernak pernik penghias blog  anda.. nah dari pada berpanjang lebar, langsung saja saya berikan tips cara memasangnya. Cara Memasang Widget Animasi Bergerak Naruto Login ke dasbor blog anda Pilih rancangan Pilih Tambah Gadget

10 Rahasia & Trik Situs Google Yang Unik

Written by Lentera Merah Ada hal unik dan menarik dibalik situs Google, sebuah situs mesin pencari yang paling populer di dunia. Sekedar untuk saling berbagi pengetahuan, kami akan sebutkan beberapa hal unik tersebut. Jika selama ini anda mengira google hanya bisa digunakan untuk mendapatkan dan menjaring berbagai informasi, ternyata lebih dari itu.. Situs google juga bisa membuat kita tersenyum dengan hal - hal konyol yang mungkin tidak pernah anda bayangkan sebelumnya. Apakah itu..?? 1. Situs Google miring (Google.com)