Cara Membuat Box Sliding Widget G+ Follower dan Like Fanspage Facebook
Gara-gara postingannya terhapus. lalu bikin postingan ulang lagi, (aduh-aduh...). mana mau bikin tugas Kimia lagi. Ya, sudahlah... saya akan membagikan postingan yang baru saja saya buat dan terhapus, pada postingan ini saya akan membagikan cara membuat Box Sliding Widget G+ Follower dan Like Fanspage Facebook yang terpasang di blog saya ini. cara ini saya dapatkan dari blog KompiAjaib. Dengan Box Sliding Widget G+ Follower dan Like Fanspage Facebook ini kita dapat menghemat tempat di template blog kita dan agar template di blog kita tidak terlihat terlalu rame.
berikut Cara Box Sliding Widget G+ Follower dan Like Fanspage Facebook
Cari kode ]]></b:skin> atau </style>, pilih salah satu, cari kodenya dengan menekan CTRL + F dan simpan kode dibawah ini diatas kode ]]></b:skin> atau </style> tadi
Kemudian tambahkan kode HTML di bawah ini di atas kode </body>
Silahkan ganti teks yang berwarna biru dengan URL profil Facebook dan profil Google+ Anda
Cari kode <body> lalu simpan kode Javascript Facebook dibawah ini di bawah kode <body>
Lalu simpan kode Javascript G+ di bawah. Diatas kode </body>
Kemudian pastikan bahwa blog Anda sudah menggunakan jquery library seperti di bawah ini (versi yang lain).
Apabila blom terpasang silahkan copy kode di atas dan pastekan sebelum </head>
Perhatian : Pemasangan jQuery, hanya boleh ada 1 dalam template. Tidak boleh lebih, karena dapat mengakibatkan beberapa script tidak akan bekerja. Apabila ingin mengganti dengan yang terbaru, cukup ganti link-nya saja.
Dan Jika sudah selesai silahkan di save.
berikut Cara Box Sliding Widget G+ Follower dan Like Fanspage Facebook
Cari kode ]]></b:skin> atau </style>, pilih salah satu, cari kodenya dengan menekan CTRL + F dan simpan kode dibawah ini diatas kode ]]></b:skin> atau </style> tadi
.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:#efefef;
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;
}
Kemudian tambahkan kode HTML di bawah ini di atas kode </body>
<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/minahsmk" 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/u/0/114006854257331565363/" data-source="blogger:blog:followers" data-width="260"></div>
</div>
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.
.Cari kode <body> lalu simpan kode Javascript Facebook dibawah ini 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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>Lalu simpan kode Javascript G+ di bawah. 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>Kemudian pastikan bahwa blog Anda sudah menggunakan jquery library seperti di bawah ini (versi yang lain).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Perhatian : Pemasangan jQuery, hanya boleh ada 1 dalam template. Tidak boleh lebih, karena dapat mengakibatkan beberapa script tidak akan bekerja. Apabila ingin mengganti dengan yang terbaru, cukup ganti link-nya saja.
Dan Jika sudah selesai silahkan di save.
Komentar
salam kenal juga mas. mkasih atas kunjungannya di blog saya yang sederhana ini :)
oh iya mbak saya like fanspagenya sama add friend gplusnya, like back fp sm gplus saya ya thanks slm knl :)
oh iya udh saya like fanspagenya sma udh saya follow G+nya
salam kenal juga dan mksih udh mau mampir mba
tapi tetep rinci kok, mantep deh, hehe..
eh,iya, aku udah like fp sama add friends g+ kamu, bila berkenan like sama add aku juga yah, makasi . :)
udh aku add friends g+ nya malah sebelum mbak minta, kalau fp nya apa namanya mbak?
makanya lain kali tugasnya diberesin dulu ya, jangan disambi biar ndak semrawut . :D
oh ya?? eh iya ini baru cek, makasih yaaa . :)
itu di widget footer yang bawahnya profil G+ kan ada, hehe..
kalau nama FP nya 'Ocehan Chiprut' :)
Oke mbak saya like Fpnya :)
really?? makasih yaaaa . :)