G+ Followers Dan Facebook Like Box Sliding Widget

G+ Followers Dan Facebook Like Box Sliding Widget

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

56 Comments Add Comment

Akhirnya Dapat Pertamax Juga :-bd
Komen Dulu Baru Nyimak =D

Balas

wah keren sob ... mantaapp ,,

Balas

mantaaap gan
saya bisa request membuat ada icon kecil di sebelah label

Balas

dapat yg ke-5 deh.....tipsnya sambungan dari yang kemarin ya kang....kang Adhy..kira-kira widget ini responsive gak??

Balas

Reques Kang... kalo Twitter pake tampilan foto followernya gmana ya, mkasih sbelumnya...

Balas

Makin kreatif aja nih kang Adhy. Lagi suka yg sliding-sliding-an ya kang..

Balas

Hehehehe silahkan mas :)

Balas

Makasih mas :)

Balas

Itu pakai font awesome mas :) coba cari di kang Ismet mas.

Balas

Dari pengalaman saya, untuk fb like box dan g+ followers ini bisa menyesuaikan sendiri sesuai device-nya mas :)

Balas

Dulu sudah pernah ada tapi scriptnya sudah tidak bekerja lagi, nanti saya coba cari mas :)

Balas

Hehehehe iya mas :)

Balas

G+ kalau Followernya udah mencapai 1000 orang.
sekarang bisa dapet duit ya mas dari Iklan.
tapi kayaknya baru berlaku di AS aja ya.

sip deh, mantap deh buat artikel slidingnya. he he

Balas

Pantesan Kang tiap dpet tutorialnya ga prnah bkerja... mkasih Kang infonya...

Balas

perlu di coba nih mas, terima kasih infonya

Balas

saya masih suka yg biasa saja mas.... :)
boleh juga tutornya untuk belajar,tak save ya mas...thanks

Balas

lebih simple dan menghemat ruang ya kang..hatur nuhun :)

Balas

jadi ngirit tempat ya mas kalau bisa sembunyi gitu :hehe

Balas

main jquery terus kayaknya mas adhy... mengapa tidak di modif agar di scroll kebawah dan muncul sendiri mas, agar modelnya seperti reomendasi hehe...

Balas

Ohh gitu ya? baru tahu saya :) boleh dicoba kayaknya

Balas

Sama-sama mas :)

Balas

Silahkan mas Reo :)

Balas

Iya mas buat ngirit tempat :)

Balas

Hehehehe iya kang :)

Balas

Justru yang ini enggak pakai jquery sis :) hanya pakai CSS3 tujuannya biar tidak menjadi beban loading blog. Nah kalau yg discroll ke bawah baru muncul itu sepertinya blm bisa hanya pakai css3 tapi harus pakai jquery.

Balas

Wah jadi keliatan keren ya kang, walaupun pala saya rada mulai nyut-nyutan pas liat kodenya yang banyak pisan, tapi saya tertarik banget pengen coba nie kang, mudah-mudahan bisa mempraktekannya, thanks ya :)

Balas

Sebenarnya kedenya sedikit mas, itu karena dijejerin ke bawah jadi kelihatan banyak heheheh :)

Balas

Keren kang, lebih suka yg sliding dari pada pop up yg cenderung pemaksaan... jadi gk makan tempat juga.

Balas

Keren Mas Adhy.Lebih Simple Dan Tidak Memberatkan Blog Dan Elegant Tentunya :D

Balas

Betul mas, sampai saat ini saya juga masih kurang suka sama blog yang pakai pop up like box :)

Balas

Betul mas karena ini tidak menggunakan jquery untuk sliding-nya maka ini menjadi lebih ringan :)

Balas

tampak simple & rapi. dan mudah juga cara pemasangannya. mau dicoba diblog saya mas :)

kalo boleh tau, mas buat animasi /screenshoot nya kayak diatas makek apa ya >_< ??

Balas

maaf mas...! kalau tampil di halaman mobile (menggunakan template responsif dan nonresponsif) fitus slidenya ngak berfungsi dan kalau diklick juga ngak ada efeknya (jika ponsel tersebut tidak memiliki adobe flash player).
kalau saya riques yang versi mobile bisa diklick boleh ngak mas?

Balas

Itu pakai software LICEcap mas, penangkap aktivitas layar menjadi gif animasi. Ini software freeware.

Balas

Betul mas, untuk ponsel yang tidak memiliki adobe flash player harus menggunakan jquery.

Balas

Malu pajang G+ sama FB Kang Adhy, maklum follower dan teman masih minim banget. Thks

Balas

ampe kaget...kirain kang adhy suka iseng juga nyomot pertamax dirumahnya sendiri... =)D

Balas

saya mah mau liat demo facebook like sliding nya dulu ah...boleh yah

Balas

Wah saya ketinggalan berita tutorial Kang Adhy yang bagus ini
Dengan menggunakan script ini tidak terlalu memakan beban loading
Yah Kang Adhy, saya coba Kang makasih atas berbaginya :)

Balas

Ikt nyimak artikelnya Kang Adhy disini kebetulan saya
Belum pajang nih widget facebook dan google plus nya
Ijin praktek Kang Adhy makasih yah atas berbaginya :)

Balas

wih keren sekali kang adhy,boleh dicoba ah.. oiya tombol share articlenya keren kapan2 dibagikan yah :D hehe

Balas

hehehe, tpi fungsinya dipajangkan biar bnyk mas.. :)

Balas

Keren pasti ya kalau blog dipasangi sliding widget ini.

Balas

gan kalo yang 3 versi ada gan? twitter followers, g followers sama facebook likenya.
tolong dibuatkan ya gan. please

Balas

Saya coba praktekin dulu sob, thank's for share ...

Balas

postingan-postingan dari kang adi keren-keren semuanya |o| saya sedot ilmunya kang hehehe =)D pokonya sukses terus buat kang adhy

Balas

owh iya kang gimana cara menambahkan untuk code twiter nya supaya ada dibawah code google,,,, makasih kang sebelummya :)

Balas

Iya kang seperti itu karena ini tidak menggunakan jquery :)

Balas

Hehehee iya mas :)

Balas

Dicoba aja hehehehe :)

Balas

twitter followers-nya scriptnya sudah ga jalan, nanti kalau ada saya tambahkan :)

Balas

Makasih atas apresiasinya :)

Balas

Perbesar angkanya untuk top-nya, yang kedua kan top:145px, coba untuk yang ketiganya top:190px

Balas

Wah cocok nih untuk blog Box Makanan saya.
Trims mas...

Balas

Keren Widgetnya Ijin Share ya Mas :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×