Membuat Widget Follower Accordion Pada Blog

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdIQaGmGNE5iPu7rztEjrCXWxbZwlbwPFRxYZsk85X-qoJDgcqwqB8R8HfXIjdqn49xSMrWqftuH-k1O1gcPOEYOXidu_w0f3cJOuiMv7e1GHqL5Pmls2Ct8erq1wUREdzJZDlVfAEo0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdIQaGmGNE5iPu7rztEjrCXWxbZwlbwPFRxYZsk85X-qoJDgcqwqB8R8HfXIjdqn49xSMrWqftuH-k1O1gcPOEYOXidu_w0f3cJOuiMv7e1GHqL5Pmls2Ct8erq1wUREdzJZDlVfAEo0/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.