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 materi postingan kali ini, di postingan kali ini akan membahas Cara Membuat Widget Facebook Like Box Sliding di blog namun disini sedikit ditambahkan arahan Google Plus Follower jadi lebih berwarna sliding widgetnya.
Kebanyakan arahan yang dipasang oleh sahabat blogger masih menggunakan Jquery biar efek show hidenya mampu berjalan nantinya, nah di postingan kali ini agak sedikit berbeda aku mengunakan arahan CSS3 tanpa menggunakan arahan Jquery, menyerupai yang sudah kita ketahui bersama salah satu yang berperan dalam lambatnya loading blog yah arahan Jquery ini sumbernya, kita akan ganti arahan Jquery-nya menggunakan arahan CSS3 biar loading blog menjadi enteng.
Penggunaan arahan CSS3 ini terbilang simple dan sederhana hanya dipakai untuk membentuk ikon FB like box dan G+ Follower saja didalam postingan kali ini, oke pribadi saja buat sahabat yang mau mencobanya mari kita simak bersama.
Langkah Pertama
Silahkan sahabat salin arahan CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau di </style>
Langkah Ke Dua
Agar Facebook like nya dapat berfungsi diharapkan pemasangan arahan Javascript SDK Facebook dan Javascript Google Plus yang sudah valid HTML5 menyerupai arahan dibawah ini silahkan sahabat salin dan letakkan dibawah arahan <body> dan diatas arahan </body>
Javascript SDK Facebook
Silahkan sahabat simpan dibawah arahan <body>
Java Script Google Plus Follower
Silahkan sahabat simpan diatas arahan </body>
Jika sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.
Langkah Ke Tiga
Silahkan sahabat salin arahan HTML dibawah ini untuk Sosial Box nya lalu letakkan di atas arahan </body>
Perhatikan arahan yang ditandai dbalikcom untuk facebook dan 111632413681186402712 untuk G+ Follower. Dan final silahkan di SAVE dan selamat mencoba.
.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 diharapkan pemasangan arahan Javascript SDK Facebook dan Javascript Google Plus yang sudah valid HTML5 menyerupai arahan dibawah ini silahkan sahabat salin dan letakkan dibawah arahan <body> dan diatas arahan </body>
Javascript SDK Facebook
Silahkan sahabat simpan dibawah arahan <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 = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>Java Script Google Plus Follower
Silahkan sahabat simpan diatas arahan </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 sahabat salin arahan HTML dibawah ini untuk Sosial Box nya lalu letakkan di atas arahan </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 arahan yang ditandai dbalikcom untuk facebook dan 111632413681186402712 untuk G+ Follower. Dan final silahkan di SAVE dan selamat mencoba.
Comments