G+ Followers Dan Facebook Like Box Sliding Widget

Postingan ini merupakan kelanjutan dari postingan sebelumnya untuk menambahkan Google+ Followers widget pada Facebook Like Box Sliding widget yang kemarin kita buat. Kode CSS Google+ Followers dan Facebook Like Box Sliding widget ini sebenarnya sama hanya penambahan sedikit untuk widget yang berada di atas.

Di sini kita menambahkan kode z-index untuk widget yang kita simpan di sebelah atas pada hover-nya sehingga ketika widget yang atasnya di-hover, maka ikon widget yang bawahnya tidak menghalangi. Untuk lebih jelasnya silahkan lihat gambar gif di bawah ini.


G+ Followers Dan Facebook Like Box Sliding Widget


Penempatan kode-kode CSS dan HTML sama dengan penempatan kode-kode untuk Sliding Facebook Like Box pada postingan sebelumnya.

Kode CSS 
Kode CSS ini sudah saya gabungkan untuk kode Facebook Like Box dan Google+ Followers-nya, jadi bagi yang sudah memasang Sliding Facebook Like Box dari postingan sebelumnya silahkan ganti dengan kode CSS di bawah ini.


.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;
}

Kode HTML
Untuk kode HTML juga sama, jika Anda sudah memasang Sliding Facebook Like Box dari postingan sebelumnya silahkan ganti dengan kode HTML-nya dengan kode HTML di bawah ini.


<div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/kompiajaib" 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/+AdhySuryadi" data-source="blogger:blog:followers" data-width="260"></div>
</div>

Silahkan ganti URL profil Facebook dan profil Google+ di atas dengan URL profil Facebook dan profil Google+ Anda.

Kemudian silahkan tambahkan javascript SDK facebook dan javascript Google+ di bawah ini. Jika ternyata di blog Anda sudah terdapat kode-kode ini silahkan lewati langkah ini.

Javascript Facebook 
Simpan di bawah 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>

Javascript Google+
Simpan di atas 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>

Kemudian jangan lupa silahkan pastikan blog Anda sudah menggunakan jquery library seperti di bawah ini (berapa pun versinya).


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

Selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments