Minahsmk1

Sunday, 8 June 2014

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
Cara Membuat 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>
Silahkan ganti teks yang berwarna biru 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.
.
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 = &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>

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'/>
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.
Previous
Next Post »

28 komentar

Munawir Alfikri delete 8 June 2014 at 17:55

Sah!!! bukan maen lagiii tutorial nye

Rismawan N delete 8 June 2014 at 18:07

keren sekali tutorialnya :) makasih sist , dan salam kenal

siti aminah delete 8 June 2014 at 21:50

haha ngambil dari blog KompiAjaib

siti aminah delete 8 June 2014 at 21:51

iya sama-sama gan, mksih juga udh mau berkunjung di blog saya ini

ali imron delete 9 June 2014 at 12:54

kira 2 berpengaruh pada loading ndak ya mbak ,salam kenal

Rismawan N delete 9 June 2014 at 17:14

iya sama-sama juga :) semoga berkah ya :D

siti aminah delete 9 June 2014 at 19:26

iya, amin :)

siti aminah delete 9 June 2014 at 19:48

kurang tau juga, tp kayakny enggak deh.
salam kenal juga mas. mkasih atas kunjungannya di blog saya yang sederhana ini :)

Heri Assidiqi delete 10 June 2014 at 06:20

Bagus juga nih widgetnya jadi bisa ngirit tempat :)

siti aminah delete 10 June 2014 at 10:52

iya mas biar nggak terlalu rame templatenya

Dyah Ayu Rahmawati delete 10 June 2014 at 12:44

wah mbak mina jago banget yah main blognya.. ijin belajar juga yah :)
oh iya mbak saya like fanspagenya sama add friend gplusnya, like back fp sm gplus saya ya thanks slm knl :)

Firman Ardyansyah delete 10 June 2014 at 17:25

cukup simple juga ya, tapi kayanya loading blog mengurang :)

siti aminah delete 10 June 2014 at 22:16

nggak jago-jago juga mba, masih dlm tahap belajar juga.
oh iya udh saya like fanspagenya sma udh saya follow G+nya
salam kenal juga dan mksih udh mau mampir mba

siti aminah delete 10 June 2014 at 22:55

mungkin benar kta mas terjadi pengurangan loading tapi kyaknya pengurangannya tidak terlalu drastis/tidak terlalu membebani

Mas Nazar delete 11 June 2014 at 12:54

Hehehe keren mba ... :D bagus banget seperti di blog ini yah? :D

siti aminah delete 11 June 2014 at 13:00

iya mas :)

Chikita Nawaristika delete 11 June 2014 at 22:59

lhakok bisa terhapus postingannya? :O
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 . :)

siti aminah delete 12 June 2014 at 03:45

haha biasa mbak lagi mumet ngerjain tugas kimia plus blom baca materi ujian untuk bsok. sampai2 nggak fokus lagi, alhasil salah hapus deh.

udh aku add friends g+ nya malah sebelum mbak minta, kalau fp nya apa namanya mbak?

Chikita Nawaristika delete 12 June 2014 at 07:47

emang kamu masih sekolah kah? atau kuliah?
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' :)

Fathoni Muhammad delete 12 June 2014 at 10:43

Jadi lebih keren box Google+ dan like fanspage nya jika diberi efek sliding kayak gini. :D Simple gan tapi tetep keren. Hehehe...

siti aminah delete 12 June 2014 at 12:58

masih sekolah kelas 2 SMK, sip lah mbak mksih atas sarannya :)

Oke mbak saya like Fpnya :)

siti aminah delete 12 June 2014 at 13:01

dan juga dapat mengemat tempat pada template agar tidak kelihatan begitu rame :D

Chikita Nawaristika delete 12 June 2014 at 13:25

weits, udah ada magang belom? :D

really?? makasih yaaaa . :)

siti aminah delete 12 June 2014 at 13:35

Udh mbak :) bulan januari lalu

Chikita Nawaristika delete 12 June 2014 at 14:06

weh? udahan? cuma 3 bulan yah? atau cuma 6 bulan? :O

siti aminah delete 12 June 2014 at 21:13

3 bulan doank magangnya mbak

queenara putri delete 19 June 2014 at 22:28

keren demonya..jenis sliding seperti ini memang lebih simpel. jadi widgetnya tidak menuh - menuhin sidebar

siti aminah delete 20 June 2014 at 00:06

hmz iya sist. makasih atas kunjungannya

Silahkan tuliskan komentar sobat dan mohon jangan menampilkan link aktif

 
Back To Top