Jangan takut jatuh, karena yang tidak pernah memanjatlah yang tidak pernah jatuh. Jangan takut gagal, karena yang tidak pernah gagal hanyalah orang-orang yang tidak pernah melangkah. Jangan takut salah, karena dengan kesalahan yang pertama kita dapat menambah pengetahuan untuk mencari jalan yang benar pada langkah yang kedua.

Daftar Isi

Home Tutorial Blog Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

Monday, July 15, 2013

Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

Diterbitkan
Tags



Widget 3 in 1 floating merupakan salah satu widget blogger terbaik di tahun 2012 ini. Widget 3 in 1 ini berupa 3 buah widget melayang yang digabung dalam 1 gadget. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like, berikut tutorialnya:














Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :
1.      Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
2.      Copy script master widget dibawah ini dan paste pada gadget.
<style type="text/css">.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWltkbbLQA3iRAy0_sNuwXCB0drhQhvKAtmrfXzt4DkpJTaWlFbg_3LNbvX7Izbf_lOw1KypqL1-q1TvW6UJQmDU7S1rGroVph8q_jNqA26BS7bG9ibpn2c5LSayVWFVmHw2S8dR7hrulL/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhse1ONGgNzQWGMmkMrzFhAdTEFC-FTSzE9I-BPzG9Q6uluGBccKTdF6VvePlL90Q1QX206O6yQrtP5BbdSZ760MuSSMZTh9T9SBGuBwZ7PlnaQzhlHLWILxGuuvtjjWjsi_1TGLa71s82C/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}.barconteblogger{margin:5px 0 0 47px}.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD16KMk6x7vqeSiWoUv19QjFWL6YacCoYR3wvZ5fBGuNoUriu8WrAfB6GNLknWIcRRzMiOqBgLYea9ZImQ9x6_QM8tV1y9Yyvblut_PKFzxSxGaxE_J8mlkPtyaf2F1jdpCS5jGhDYPk3R/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz7PJuqR-vBB_BmkdCYktURiR7u4DkswttqZYrSAsuFN7YPSithi2Z3WO1qBpR0f6nEMwgLX_rUn4Tjtd_ho9CHMiGkLtm5g8gNjdtLHNU2hdcwmpflEcocnqK4-w760tzdzUeLGUDnVty/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}.barcontetwitter{margin:5px 0 0 47px}.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJhkO-KQt6rTeUnocFgyB31hKkpCzjjZfGOBbj6cGf9YK6ddU0PAmwkf2nlr0_MRu6c0VO9R-_TG83tVdaPq5X-BdyjPklSZsBHzmcloX-sD2qaZ1qh1n2p6Rey9u0orXpDRCQyHxhO_4a/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyhzF63IxzHu-yawGCREgfTFAMo0xbGS9d5ythWx5Lgt4AbQyBIX2tbdXgfQh1wX7IBl3Z9p_3L1C3WuHxRXBdjqi9wCjKRRRFPfBpiKJibjx1EN6N2uJcUA1k2gZ5byqOwtDi6bx6VXP/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}.barcontefacebook{margin:5px 0 0 47px}</style><div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger">CONTENT BLOGGER HERE</div></div><div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter">CONTENT TWITTER HERE</div></div><div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook">CONTENT FACEBOOK HERE</div></div>

3.      Kustomisasi widget :
  • Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
  • Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
  • Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.
4.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :
<style type="text/css">.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWltkbbLQA3iRAy0_sNuwXCB0drhQhvKAtmrfXzt4DkpJTaWlFbg_3LNbvX7Izbf_lOw1KypqL1-q1TvW6UJQmDU7S1rGroVph8q_jNqA26BS7bG9ibpn2c5LSayVWFVmHw2S8dR7hrulL/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhse1ONGgNzQWGMmkMrzFhAdTEFC-FTSzE9I-BPzG9Q6uluGBccKTdF6VvePlL90Q1QX206O6yQrtP5BbdSZ760MuSSMZTh9T9SBGuBwZ7PlnaQzhlHLWILxGuuvtjjWjsi_1TGLa71s82C/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}.barconteblogger{margin:5px 0 0 47px}.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD16KMk6x7vqeSiWoUv19QjFWL6YacCoYR3wvZ5fBGuNoUriu8WrAfB6GNLknWIcRRzMiOqBgLYea9ZImQ9x6_QM8tV1y9Yyvblut_PKFzxSxGaxE_J8mlkPtyaf2F1jdpCS5jGhDYPk3R/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz7PJuqR-vBB_BmkdCYktURiR7u4DkswttqZYrSAsuFN7YPSithi2Z3WO1qBpR0f6nEMwgLX_rUn4Tjtd_ho9CHMiGkLtm5g8gNjdtLHNU2hdcwmpflEcocnqK4-w760tzdzUeLGUDnVty/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}.barcontetwitter{margin:5px 0 0 47px}.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJhkO-KQt6rTeUnocFgyB31hKkpCzjjZfGOBbj6cGf9YK6ddU0PAmwkf2nlr0_MRu6c0VO9R-_TG83tVdaPq5X-BdyjPklSZsBHzmcloX-sD2qaZ1qh1n2p6Rey9u0orXpDRCQyHxhO_4a/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyhzF63IxzHu-yawGCREgfTFAMo0xbGS9d5ythWx5Lgt4AbQyBIX2tbdXgfQh1wX7IBl3Z9p_3L1C3WuHxRXBdjqi9wCjKRRRFPfBpiKJibjx1EN6N2uJcUA1k2gZ5byqOwtDi6bx6VXP/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}.barcontefacebook{margin:5px 0 0 47px}</style><div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger"><!-- Include the Google Friend Connect javascript library. --><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-1eachdy04rk9r" style="width: 100%; "></div><!-- Render the gadget into a div. --><script type="text/javascript">var skin = {};skin['FONT_FAMILY'] = 'Times';skin['BORDER_COLOR'] = '#2F4F4F';skin['ENDCAP_BG_COLOR'] = '#696969';skin['ENDCAP_TEXT_COLOR'] = '#FFFFFF';skin['ENDCAP_LINK_COLOR'] = '#FFFFFF';skin['ALTERNATE_BG_COLOR'] = '#FFFAF0';skin['CONTENT_BG_COLOR'] = '#A9A9A9';skin['CONTENT_LINK_COLOR'] = '#ffe938';skin['CONTENT_TEXT_COLOR'] = '#FFFFFF';skin['CONTENT_SECONDARY_LINK_COLOR'] = '#ffe938';skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#FFFFFF';skin['CONTENT_HEADLINE_COLOR'] = '#FFFFFF';skin['NUMBER_ROWS'] = '2';google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);google.friendconnect.container.renderMembersGadget( { id: 'div-1eachdy04rk9r',   site: '14040825616302983573' },  skin);</script></div></div><div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter"><a class="twitter-timeline" href="https://twitter.com/AnditiaNurroni" data-widget-id="327441789516644352">Tweets by @AnditiaNurroni</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></div><div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FChangeLivesWithCreativity%3Fskip_nax_wizard%3Dtrue&amp;width=200&amp;height=320&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23008E00&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:320px;" allowTransparency="true"></iframe> </div></div>

5.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.
catatan : Bila anda masih bingung atau kesulitan untuk mengetahui kode ID Google Friend Connect (GFC), Facebook Like Box, dan Twiter Update berikut ini tutorialnya :
Sumber

Artikel Terkait

Andimensi

Diruang yang sederhana ini, saya mencoba berkarya meskipun hanya di dunia maya.

Next Post
Previous Post

Silahkan tambahkan komentar Anda, Semoga dapat sama-sama membangun. Terima kasih.
EmoticonEmoticon

Subscribe to: Post Comments (Atom)

Video

loading videos
Loading Videos...