KODE IKLAN DFP 1 Widget G+ Followers Dan Facebook Like Box Sliding | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Widget G+ Followers Dan Facebook Like Box Sliding

    KODE IKLAN 200x200
    KODE IKLAN 336x280
     Followers Dan Facebook Like Box Sliding Widget G+ Followers Dan Facebook Like Box Sliding

    Widget G+ Followers Dan Facebook Like Box Sliding. Hasil hunting blogwalking ternyata masih banyak juga yang memasang Widget Facebook Like Box Sliding, cukup menarik juga sih untuk dijadikan bahan postingan kali ini, di postingan kali ini akan membahas Cara Membuat Widget Facebook Like Box Sliding di blog namun disini sedikit ditambahkan kode Google Plus Follower jadi lebih berwarna sliding widgetnya.

    Kebanyakan kode yang dipasang oleh sobat blogger masih menggunakan Jquery agar efek show hidenya bisa berjalan nantinya, nah di postingan kali ini agak sedikit berbeda saya mengunakan kode CSS3 tanpa menggunakan kode Jquery, seperti yang sudah kita ketahui bersama salah satu yang berperan dalam lambatnya loading blog yah kode Jquery ini sumbernya, kita akan ganti kode Jquery-nya menggunakan kode CSS3 agar loading blog menjadi enteng.

    Penggunaan kode CSS3 ini terbilang simple dan sederhana hanya dipakai untuk membentuk ikon FB like box dan G+ Follower saja didalam postingan kali ini, baiklah langsung saja buat sobat yang mau mencobanya mari kita simak bersama.

    Langkah Pertama
    Silahkan sobat salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau di </style>

    .socialbox{     position:fixed;     top:100px;     right:-286px;     height:250px;     width:285px;     background:#efefef;     border:1px solid #bbb;     border-right:0;     transition:all 400ms ease-in-out;     border-radius:0 0 0 3px; } .fbicon-box{     width:30px;     height:35px;     position:absolute;     top:-1px;     left:-30px;     background:#405D9B;     border-radius:3px 0 0 3px;     color:#fff;     font-family:Arial;     font-size:30px;     font-weight:700;     text-align:center;     padding-top:2px; } .socialbox:hover{     right:0;     z-index:2; }  .socialbox2{     position:fixed;     top:145px;     right:-279px;     height:230px;     width:258px;     background:#efefef;     border:1px solid #bbb;     border-right:0;     transition:all 400ms ease-in-out;     border-radius:0 0 0 3px;     padding:10px; } .gpicon-box{     width:30px;     height:32px;     position:absolute;     top:-1px;     left:-30px;     background:#DD4B39;     border-radius:3px 0 0 3px;     color:#fff;     font-family:Georgia;     font-size:20px;     font-weight:700;     text-align:center;     padding-top:5px; } .socialbox2:hover, .socialbox2:active{     right:0; } 


    Langkah Ke Dua
    Agar Facebook like nya dapat berfungsi diperlukan pemasangan kode Javascript SDK Facebook dan Javascript Google Plus yang sudah valid HTML5 seperti kode dibawah ini silahkan sobat salin dan letakkan dibawah kode <body> dan diatas kode </body>

    Javascript SDK Facebook
    Silahkan sobat simpan dibawah kode <body>

    <div id='fb-root'/> <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.async=true;   js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;   fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

    Java Script Google Plus Follower
    Silahkan sobat simpan diatas kode </body>

    <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>

    Jika sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.


    Langkah Ke Tiga
    Silahkan sobat salin kode HTML dibawah ini untuk Sosial Box nya lalu letakkan di atas kode </body> 

    <div class="socialbox">     <div class="fbicon-box">f</div>     <div class="fb-like-box" data-href="https://www.facebook.com/dbalikcom" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div> </div> <div class="socialbox2">     <div class="gpicon-box">g+</div> <div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/111632413681186402712" data-source="blogger:blog:followers" data-width="260"></div> </div>

    RESULT

    Perhatikan kode yang ditandai dbalikcom untuk facebook dan 111632413681186402712 untuk G+ Follower. Dan selesai silahkan di SAVE dan selamat mencoba.

    Sumber https://www.dibalikseo.com
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2