Cara Memodifikasi Widget Follower Google Friend Connect

Tutorial blog kali ini akan berbagi mengenai Cara Memodifikasi Widget Follower Google Friend Connect blog. Jika Anda mengikuti tutorial blog yang lalu mengenai cara membuat blog gratis di blogger blogspot, maka Ketika blog Anda sudah jadi, dan Anda baru saja menambahkan Widget Follower Google Friend Connect maka widget Follower ini akan muncul pada sidebar blog Anda, namun masih dalam keadaan default. Nah terkadang template yang kita gunakan kurang srek, macing, atau apalah istilahnya sehingga diperlukan sedikit sentuhan untuk memodifikasi Widget Follower Google Friend Connect blog seperti mengubah warna, ukuran, lebar maupun tinggi dari Widget Follower blogspot

Jika saat ini Anda sedang jungkir balik mencari referensi mengenai bagaimana sich sebenarnya Cara Memodifikasi Widget Follower Google Friend Connect blog, berarti Anda sudah berada di tempat yang tepat karena sebentar lagi kita akan sama sama mengobrak abrik Widget Follower Google Friend Connect blog agar tampilannya bisa serasi dengan template blog kita.

Beberapa hari yang lalu saya lagi blogwalking, ngesot kesana kemari untuk silaturahmi ke sesama blogger. Saya juga sempat kemarin jungkir balik bersama search engine google untuk lihat lihat tutorial blog terbaru. Dari sekian banyak blog yang saya tempati bertamu ternyata banyak juga yang membahas mengenai cara memodifikasi widget follower friend connect blogspot.

Di bawah ini beberapa langkah yang bisa Anda ikuti mengenai bagaimana Cara Memodifikasi Widget Follower Google Friend Connect blog

1. Kita harus mencari Kode Default dari Widget Follower Google Friend Connect pada blog, caranya yaitu Jika Anda mengikuti tutorial blog yang lalu mengenai Cara Memasang Widget Follower Google Friend Connect blog maka Anda pastinya sudah memberikan nama pada Widget Follower blog Anda kan ?
   
   Jika nama Widget Follower blog Anda adalah “Follower” maka yang nanti Anda cari adalah “Follower”. Kalau judul dari Widget follower blog saya adalah “My Best Friend” maka jika saya ingin memodifikasi Widget Follower blog saya maka yang saya cari adalah kata “My Best Friend” yaitu dengan cara membuka halaman Home Page atau Single Page dari blog saya kemudian Klik kanan pada area kosong lalu memilih View Page Source (Anda harus menggunakan Browser Mozilla Firefox agar bisa melihat View Page Source). Untuk lebih jelasnya Anda bisa melihat screenshoot di bawah ini
   
   
   
2. Setelah Halaman Page Sourcenya sudah terbuka, silahkan Anda mencari Judul dari Widget Follower Google Friend connect Anda masing masing. Gunakan CTR+F pada keyboard untuk memudahkan pencarian atau membaca postingan terdahulu dalam blog ini mengenai Cara Tercepat dan Mudah Mencari Kode HTML Pada Template Blog
3. Jika Anda sudah menemukan Judul Widget Follower Google Friend connect blog Anda, silahkan Anda mencari kode yang mirip seperti kode di bawah ini
4. <div id="div-1sk20sa7h2h58" style="width:275px;border:1px solid #fff;"> </div> <!-- Render the gadget into a div. --><script type="text/javascript">var skin = {}; skin['BORDER_COLOR'] = 'transparent'; skin['ENDCAP_BG_COLOR'] = 'transparent'; skin['ENDCAP_TEXT_COLOR'] = '#666666'; skin['ENDCAP_LINK_COLOR'] = '#1da7e7'; skin['ALTERNATE_BG_COLOR'] = 'transparent'; skin['CONTENT_BG_COLOR'] = 'transparent'; skin['CONTENT_LINK_COLOR'] = '#1da7e7'; skin['CONTENT_TEXT_COLOR'] = '#666666'; skin['CONTENT_SECONDARY_LINK_COLOR'] = '#1da7e7'; skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#999999'; skin['CONTENT_HEADLINE_COLOR'] = '#1da7e7'; skin['NUMBER_ROWS'] = '4'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderMembersGadget( { id: 'div-1sk20sa7h2h58', site: '14583073876035996987' }, skin); </script></div>



5. Kode di atas merupakan kode Default dari blog saya. Kita perlu mencari kode di atas karena ada 2 Id yang kita butuhkan untuk memodifikasi Widget Follower blog kita nantinya yaitu Id Follower dan Id Profil Blogger kita. Perhatikan pada bagian terakhir Kode di atas, akan ada id: 'div-1sk20sa7h2h58' dan site: '14583073876035996987', Ke dua Id itulah yang kita butuhkan untuk memodifikasi Widget Follower blog. Tapi jangan gunakan Id saya, gunakan Id blog Anda masing masing
6. Jika Anda sudah mendapatkan Id Follower blog dan Id profil blog Anda, maka langkah selanjutnya adalah menambahkan Gadget baru ke sidebar blog Anda dengan cara memilih Tata letak seperti screenshoot di bawah ini
   
   
   
7. Jika sudah, silahklan Anda pilih Add atau tambahkan Gadget seperti screenshoot di bawah ini
   
   
   
8. Bagaimana ? Sudah ? Jika sudah , silahkan tambahkan Javascript/HTML kemudian Copy paste Code di bawah ini ke dalam Javascript/HTML tadi

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><!-- Define the div tag where the gadget will be inserted. --><div id="div-1sk20sa7h2h58" style="width:275px;border:1px solid #fff;"> </div> <!-- Render the gadget into a div. --><script type="text/javascript">var skin = {}; skin['BORDER_COLOR'] = 'transparent'; skin['ENDCAP_BG_COLOR'] = 'transparent'; skin['ENDCAP_TEXT_COLOR'] = '#666666'; skin['ENDCAP_LINK_COLOR'] = '#1da7e7'; skin['ALTERNATE_BG_COLOR'] = 'transparent'; skin['CONTENT_BG_COLOR'] = 'transparent'; skin['CONTENT_LINK_COLOR'] = '#1da7e7'; skin['CONTENT_TEXT_COLOR'] = '#666666'; skin['CONTENT_SECONDARY_LINK_COLOR'] = '#1da7e7'; skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#999999'; skin['CONTENT_HEADLINE_COLOR'] = '#1da7e7'; skin['NUMBER_ROWS'] = '4'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderMembersGadget( { id: 'div-1sk20sa7h2h58', site: '14583073876035996987' }, skin); </script>

Mari kita sama sama perhatikan Kode di atas

• Silahkan Anda ganti id: 'div-1sk20sa7h2h58 dengan Id follower blog Anda
• Silahkan Anda ganti site: '14583073876035996987 dengan Id Profil blog Anda
• Untuk mengubah lebar Widgetnya, silahkan Anda ganti width:275px sesuai dengan lebar yang Anda inginkan
• Untuk mengubah jumlah baris follower yang dimunculkan, silahkan lihat skin['NUMBER_ROWS'] = '4'; Ganti angka 4 sesuai dengan jumlah baris follower yang Anda inginkan muncul
• Untuk mengubah border atau garis pinggir dari widget follower blog, silahkan Anda ganti kode warna HTML pada kode di atas dengan Kode Warna HTML yang Anda inginkan
• Jika semuanya sudah beres, simpan dan lihat haslinya

Bagaimana ? Apakah Widget Follower Google Friend Connect blog Anda sudah serasi dengan template blog Anda atau sudah sesuai dengan yang Anda inginkan ?

Semoga tutorial blog sederhana ini mengenai Cara Memodifikasi Widget Follower Google Friend Connect blog ini dapat memberikan setetes manfaat kepada sahabat blogger lainnya yang ingin memodifikasi tampilan Widget Follower blognya, seperti mengubah Ukuran, warna, maupun jumlah baris followernya

Terus ciptakan karya terindah lewat jemari Anda melalui postingan demi postingan yang berkualitas untuk memajukan dunia blogging di Indonesia. Saya tunggu karya terindah Anda !

Happy Blogging dan Salam SUKSES !

Dengan memasukan alamat email Anda dibawah ini, berarti Anda akan dapat kiriman artikel terbaru dari www.hayardin.com di inbox E-mail anda

Enter your email address:


Delivered by FeedBurner

Lokasi:

Berbagi :