Membuat widget like dan follow melayang

Anak Indonesia, kali ini kita akan membahas bagaimana cara membuat widget like facebook dan follow twitter yang melayang pada saat blog anda pertama kali terbuka, cara ini cukup membantu untuk menambah jumlah like di page anda dan follow di twitter anda, untuk mempercantik tampilan blog anda juga bisa. Saya akan memberikan gambar contoh dari widget yang akan kita buat.

Nah, gambar di atas adalah widget like yang akan di hasilkan jika anda telah mengikuti hal - hal yang akan saya beritahukan di bawah ini. Langsung aja kita ke cara membuatnya.

• Login dulu ke blogger
• Buka dashbor blogger anda dan pilih tata letak
• Setelah tata letak anda buka pilih tambah widget
• Klik HTML/Javascript 
• Masukkan script di bawah 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">Tiap 1 Like anda adalah semangat saya :)</a></center>
    <center>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/pages/Anak-indonesia/1446790622232042?ref=hl" width="250" show_faces="true" border_color="" stream="false" header="true">
    </fb:like-box></center>
    <!-- HTML End -->
    <br/>
    <div class="twitter">
    <!-- Twitter --> <a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/syaifulsm">Ikuti @SyaifulSM</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>
    <a class='close' href='#'>&times;</a>
    </div>

• Setelah memasukkan script di atas , simpan.
• Atur letaknya dan Simpan setelan.
• Terakhir lihat blog anda apakah sudah bertambah widgetnya.

Catatan:

Jika belum muncul ubah letak widgetnya hingga berhasil, Gantilah warna merah dengan kata - kata anda sendiri, untuk yang berwarna biru ganti dengan link page facebook anda dan yang berwarna hijau ganti dengan link twitter anda.

Sekian tutorial blog dari saya, semoga bisa di praktekkan dan bermanfaat bagi yang membacanya. Jika ada yang ingin di tanyakan silahkan berkomentar di bawah. Jangan lupa dilarang SARA dan Negatif. Sekian dan Terima Kasih