Kamis, 11 Juli 2013

Cara Membuat Widget Follower Blog Tampil di Postingan

widget follower blog valid html5Cara Membuat Widget Follower Blog Tampil di Postingan – dari mayoritas blogger mungkin lebih mempertanyakan bagaimana untuk membuat widget follower blog agar valid HTML5, namun tutorial tersebut saya yakin pasti sudah banyak blogger yang membahas dan apabila mencari di search engine juga sudah dapat dipastikan pada halaman serp akan menampilkan banyak blog yang menyediakan tutorial tersebut. Namun pada tutorial ini widget follower blog tidak Cuma valid HTML5 saja, melainkan juga agar dapat ditampilkan kedalam posting blog. Kenapa bisa begini dan apa manfaat dari widget follower di pasang kedalam posting blog? Ini bukan hanya untuk membuat agar follower blog valid HTML5, melainkan dapat diketahui pada screenshot dibawah ini:
widget follower blog valid html5Setelah tahu kegunaan maupun manfaat dari widget follower blog valid HTML5 dan oleh sebab kemungkinan lain yakni untuk mengirit widget pada sidebar maupun footer blog, maka berikut adalah tutorial untuk Cara Membuat Widget Follower Blog Tampil di Postingan dengan langkah yang cukup mudah.

1. Login ke akun blogger.
2. Lalu copy kode berikut ini:

<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'] = '#transparent';
skin['ENDCAP_BG_COLOR'] = '#transparent';
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>

Keterangan:
Pada skin['NUMBER_ROWS'] = '2'; angka 2 disitu adalah jumlah baris follower yang akan di tampilkan.
Ubah tulisan warna merah dan ubah juga tulisan yang berwarna biru untuk menyesuaikan warna dengan template blog anda, agar lebih praktis dan sama dengan widget follower yang sudah ada sebelumnya silahkan pada halaman blog anda tekan CTRL+U atau bisa juga dengan klik kanan mouse lalu pilih View Page Source. Selanjutnya akan tampil pop up dari page source blog anda, disitu tinggal anda cari kode sebagai contoh pada blog saya seperti berikut ini:
widget follower blog valid html5

<div id="div-7w5ths5ahnit"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#000000';
skin['ENDCAP_BG_COLOR'] = '#000000';
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>

Agar mempermudah pencarian gunakan CTRL+F lalu ketik nama judul widget follower yang sudah ada. Selanjutnya tinggal samakan saja kode-kodenya.

Langkah terakhir untuk memasang widget follower kedalam posting blog maka paste kode tersebut kedalam area posting mode HTML, bukan Compose.

Sampai disini selesai untuk membuat widget follower blog tampil di postingan dan valid HTML5, dan widget lama yang terdapat di sidebar maupun footer bisa di hapus. Sedangkan nantinya apabila ingin merubah kembali widget follower untuk di pasang kedalam sidebar blog lagi, maka langkahnya seperti bisa pada saat akan menambah widget yakni klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian Simpan.

Tidak ada komentar:

Posting Komentar