Olengk Blogs

Sharing pengalaman | Berita terbaru | Download Free Software | Tutorial

Membuat Kotak Facebook Like Melayang

Membuat Kotak Facebook Like Melayang, Setelah ada Request dari salah satu teman blogger kuncir261 yang tanya cara bikin Kotak Facebook like seperti di blog ini.



Ok berikut Step-step Membuat Kotak Facebook Like Melayang :


  • Pertama Backup terlebih dahulu template anda, untuk menghindari hal-hal yangg tidak di inginkan

  • Pertama,pergilah ke Dashboard blogger anda,selanjutnya pilih Tata Letak dan kemudian pilih tab Edit HTML.

    Pelajaran Blog Membuat Permalink Blogger


  • Seperti biasa,jangan lupa contreng tulisan Expand Widget Templates ya :D



  • Berikutnya,cari kode </head> (gunakan Ctrl+F untuk membantu pencarian),setelah ketemu kode tersebut,pestekan kode tersebut tepat di atasnya.
    <script type='text/javascript'>
    if(document.location.protocol==&#39;http:&#39;){
    var Tynt=Tynt||[];Tynt.push(&#39;d4Ara8Zx0r4BC1acwqm_6l&#39;);Tynt.i=
    {&quot;ap&quot;:&quot;Read more:&quot;};
    (function(){var
    s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://tcr.tynt.com/ti.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)
    [0];h.parentNode.insertBefore(s,h);})();
    }
    </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(window).bind(&quot;load&quot;, function() {
    // animasikan nilai top saat halaman telah selesai dimuat
    $(&#39;#kotak-pesan&#39;).animate({top:&quot;190px&quot;}, 1000, &quot;easeOutBounce&quot;);
    // hilangkan kotak pesan saat tombol (x) diklik $(&#39;a.close&#39;).click(function() {
    $(this).parent().slideUp(800, &quot;easeOutBounce&quot;);
    return false;
    });
    });
    </script>


  • Pratinjau terlebih dahulu siapa tahu nanti ada eror
  • Jika tidak ada eror silahkan SAVE Lalu Step Kedua
  • Selanjutnya,add New Widget lalu pilih [HTML/Javascript] pastekan kode berikut

    <div id="kotak-pesan" style="top: 190px; ">
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=111400035628478";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <b>Bantu Kita Dengan Follow n' Tekan Tombol Like, <br />Trims :D
    </b><br /><br />
    <div class="g-plusone"></div>
      <!-- kode dari google+ -->
    <script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>

    <a class='twitter-follow-button' data-show-count='false'
    href='https://twitter.com/olengk_ady'>Follow @olengkblogs</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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}
    (document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script> <br /><br />

    <div class="fb-like-box" data-href="http://www.facebook.com/olengkblogs" data-width="300" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div> <a class="close" href="#">×</a></div>

  • Ganti kode berwarna biru dengan Milik anda sendiri
  • Lalu Klik SIMPAN dan lihat hasilnya :D
Sekian tutorial singkat Cara Gampang Membuat ToolTip di Blogspot, semoga bermanfaat ..
Jika ada pertanyaan silahkan tinggalkan komentar :D

    Anda baru saja membaca artikel yang berkategori blogspot / Tips / Trik dengan judul Membuat Kotak Facebook Like Melayang. Anda bisa bookmark halaman ini dengan URL http://olengkblogs.blogspot.com/2012/08/membuat-kotak-facebook-like-melayang.html. Terima kasih!
    - Monday, August 6, 2012

    1 Komentar untuk "Membuat Kotak Facebook Like Melayang"

    Anonymous said...

    ok... banget.
    makasih infonya..
    tp hasilnya gk melayang