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

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

wah accordion lagi nih, keren. ^_^

Balas

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

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

Balas

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

Balas

ane ikut komen & praktekin makasih yah tutornya,

Balas

wahh ada demonya ndak ya mas?

Balas

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

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

tambah keren deh followeers ane

Balas

izin praktek bang

Balas

memang perlu dipraktekkan biar keliatan hasilnya :)

Balas

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

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