Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Widget Follower Accordion Pada Blog

Widget Follower Accordion Blogger Membuat Widget Follower Accordion Pada Blog – berbicara mengenai layout blog memang tak lepas dari coding, karena memang coding yang melatar belakangi suatu tampilan blog. Pada pembahasan kali ini saya kembali akan membahas tentang widget follower yang terdapat pada blog. Lantas follower yang bagaimana lagi yang akan saya bahas pada topik ini. Di dalam suatu blog biasanya terdapat widget follower dari blogger sendiri, ada juga widget google+ follower dan adapula widget facebook like box yang berarti ini follower facebook fanspage. Dari ketiga jenis widget follower tersebut pada tutorial ini akan kita bahas agar ketiga-tiganya widget tampil dalam satu accordion secara berurutan atau bisa dikatakan widget ini saya gabungkan kedalam satu tag label follower pada blog. Caranya juga cukup mudah dan bahkan lebih singkat daripada menggabungkan komentar blogger, facebook dan twitter. Seperti apa langkah lebih jelasnya untuk menggabungkan follower blogger, google+ dan facebook? Berikut tutorialnya untuk Membuat Widget Follower Accordion Pada Blog.

1. Login ke akun blogger.
2. Langkah berikutnya Copy kode berikut ini lalu klik Tata Letak > Tambah Widget > HTML/Javascript kemudian paste kode disitu.
- Untuk memasang agar di sidebar, berikut kodenya:
<style>
#accordion-evolutions { position:relative; margin:auto; } #accordion-follower { height:auto; width:290px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; margin:auto; } #accordion-button { height:40px; width:312px; background-image:url('https://lh3.googleusercontent.com/-N6cDy2pw-1E/Ug41wbR7QlI/AAAAAAAAGAA/7_qF0-1tfzg/h46/follow_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#accordion-button").click(function(){ if ($("#accordion-follower").is(":hidden")){ $("#accordion-follower").slideDown("slow"); } else{ $("#accordion-follower").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#accordion-follower").slideUp("slow")', 2000); }
</script>

<div id="accordion-evolutions">
<div id="accordion-follower">
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-7w5ths5ahnit"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#000000';
skin['ENDCAP_BG_COLOR'] = '#e9fbe9';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['ALTERNATE_BG_COLOR'] = '#transparent';
skin['CONTENT_BG_COLOR'] = '#transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-7w5ths5ahnit',
   site: '10916685731781888212' },
  skin);
</script>

</br>

<div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
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>

</br>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fandestyle&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowTransparency="true"></iframe>
</div>
<div id="accordion-button"></div>
</div>
- Untuk memasang agar melayang di sudut atas kanan blog, berikut kodenya:
<style>
#accordion-evolutions { position:fixed; top: 0; right:20px; float:right; } #accordion-follower { height:auto; width:290px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; } #accordion-button { height:40px; width:312px; background-image:url('https://lh3.googleusercontent.com/-N6cDy2pw-1E/Ug41wbR7QlI/AAAAAAAAGAA/7_qF0-1tfzg/h46/follow_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#accordion-button").click(function(){ if ($("#accordion-follower").is(":hidden")){ $("#accordion-follower").slideDown("slow"); } else{ $("#accordion-follower").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#accordion-follower").slideUp("slow")', 2000); }
</script>

<div id="accordion-evolutions">
<div id="accordion-follower">
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-7w5ths5ahnit"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#000000';
skin['ENDCAP_BG_COLOR'] = '#e9fbe9';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['ALTERNATE_BG_COLOR'] = '#transparent';
skin['CONTENT_BG_COLOR'] = '#transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-7w5ths5ahnit',
   site: '10916685731781888212' },
  skin);
</script>

</br>

<div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
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>

</br>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fandestyle&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowTransparency="true"></iframe>
</div>
<div id="accordion-button"></div>
</div>
Keterangan:
Ganti kode yang berwarna merah dengan ID widget follower blog anda, caranya lihat disini.
Ganti 104093787575230359634 dengan ID google+ anda.
Ganti andestyle dengan ID facebook/fanspage anda.

3. Langkah terakhir klik Simpan.

Berlangganan artikel via email

45 Response to "Membuat Widget Follower Accordion Pada Blog"

Manteb mas css widgetnya,,,,tambah komplit aja

Balas

Pertamax nih mas hehehehe

Balas

keren sekali gan widgednya kapan-kapan akan saya coba gan :)

Balas

Kita sama sama keduluan sama mas samsury gan hehe :)

Balas
avatar
Anonymous

Mantap dah untuk tampil keren dan menghemat tempat...

Balas

Mantab banget nih, akan aku coba di blog aku kak.

Oh iya, Templatenya TOP abis, warna ijo aku suka.

Balas

ijin nyimak sob, meski nggak mudeng-mudeng.. :)

Balas
avatar
Anonymous

wah accordion lagi nih, keren. ^_^

Balas
avatar
Anonymous

wah widgetnya sangat membantu nih. ^_^

Balas

perasaan kemarin sudah nulis ginian mas, apa ini ada update lagi, bikin blog jadi berat apa tidak mas ?

Balas
avatar
Anonymous

Kalau yang widget satu ini memang sengaja saya pasang mas karena sangat mengganggu juga pada proses loading blog.

Balas
avatar
Anonymous

Asik nihh ... kapan kapan mau saya pasang ah.... biar keren

Balas
avatar
Anonymous

ane ikut komen & praktekin makasih yah tutornya,

Balas

wahh ada demonya ndak ya mas?

Balas
avatar
Anonymous

wahh keren, makasih massssss

Balas

Mantap artikel nya Mas.. idzin simak salam sukses Mas
http://karristaent.blogspot.com

Balas

widget ini sangat penting untuk ng'bantu artikel kita terlihat di efbi, twitter dan lainnya. punya desa widgetnya sedang error tuh....sip ilmunya kang

Balas

ada ladi nih tutor baru,bikin penasaran aje nih jadi ingin mencoba kang bro heuheu

Balas

silahkan mang Yono,biar tambah keren blognya hehe

Balas

nggak berat Cak Gus,,paling nambah 2 gram hehehe

Balas

mangga atuh dicobian mang, raos pisan :)

Balas

jangan lupa dicatet mbak Maya, besok kan ujiannya :)

Balas

mangga atuh kang dicobi...

Balas
avatar
Anonymous

Boleh juga mas Andes, bikin tampilan lebih simple namun tetap keliatan keren, makasih tutorialnya :)

Balas

ijo lumut dilawan hehe

Balas

mayan lah kalau memang nambah 2 gram, berarti ada peningkatan

Balas

Wah sepertinya layak juga untuk diuji coba. Hmmm. Indahnya. Apaka ini akan menyebabkan loading Blog menjadi berat? Jika tidak ada pengaruhnya saya akan cobakan di blog experiment saya dahulu sebelum diapplikasikan di blog saya sebenarnya. Thanks ya sudah sharing

Balas
avatar
Anonymous

tambah keren deh followeers ane

Balas
avatar
Anonymous

valid ndak bang?

Balas
avatar
Anonymous

izin praktek bang

Balas

memang perlu dipraktekkan biar keliatan hasilnya :)

Balas
avatar
Anonymous

wah selamet yah mas sekarang followersnya udah pada keren hehe semua...

Balas

tutor keren mas...
oh ya mas mohon bantuan nya liat templat anemas...kalo ada yg hars di benahin
thx
salam knal

Balas

aduh komentar apa yah,,
selalu mati gaya klo mampir kesini :D

Balas

lengkap sekali sobat infonya

Balas

gmpng tinggal minum obat kuat biar gk mati gaya hahah

Balas

silahkan di coba saja sob-sob semua .. gratis ini ko

Balas

menampilkan tiga wiget follower secara bersamaan..sepertinya menarik...nanti saya coba...jumatan dulu ya....salam :-)

Balas

Kaya nya hemat Bahan bakar Kang Ruly heheheheheh

Balas

Datang lagi di artikel yang bermanfaat ini simak lagi Mas Andes

Balas
avatar
Anonymous

hiii Mbak Iin komentar apa aja Mbak asal sesuai topik
Mas BL Kalau Ubi termasuk Obat kuat gak ya hhhhh ?

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Widget Follower Accordion Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode