yang digabung dalam 1 gadget ini merupakan sequel jilid 2 dari posting saya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadget ini memuat widget follower blogger (Google Friend Connect), widget update status Twitter dan widget Facebook Like Box sekaligus !! 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 ini akan kita bedah bersama (hiks..!) dalam tips blogging kali ini.
<style type="text/css">.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8PxHC1zNOPz9EsR_bAxHGKhlWOTKHO39Y6wOiAXK8ChIs76JBYvFM7b9FYM3Rbwo6GhsjlHB2BnfFsoMttFp4yXuQJKuRi6TIM3eAmWwsL_snIZNgYpUmYOU1IiQmICyCgrWNn83vD2D/');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/AVvXsEhFFrcxpmS-A1T_3NONnWGW0LKoST8APqLps9ldEiMH8GT0TvTYust-wG7o8UOwVfgpY_SXhsIPiLus0ylSe3HVQOttJeDDPG2zyVRWwW0vOjBYrPLwUpDa2mR-Iq8bBe_3e28z5xuIt9lw/');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/AVvXsEgug5GeI_zocEEl7jbdy9N3kCsHhuv6Zvtjfz92nKrtQAWM0hGEaYaD6x7Ypcrbm_as4exZTkq30MTxnKMUQWo-lamIx49H1B8OUirlee1yzcqxVwSkQpVFGdYcS-l_1mkO7phhw2HOF6w6/');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/AVvXsEj9tieNYTpLGJUgY4_SwvBeJgDrD7sHeg7hLkXCNRtqYTbPiihi7UCaYp0f_415eKOjntCtpA4BYhmmgftBsFnpmqVdqxLrClltcellRHK8_dxcZ7CxBD13mC2T8dQd2aYo6Ropq3EdjcY3/');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/AVvXsEhQDvqzm5bX0JhaV64at1MxtVs7_aU7NDwT9qF8AoeMne8RGX45QW9iTYSGSM8rM_LM3KBhWJGOqDXulUbhoWarKGrwZCVUaHdEGkGOPWThh44VVpZktze9IDNBUizyBYe1KS08NorakyGA/');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/AVvXsEhG4yjyGbze92cYTms5jRYZo-ErsfzNCTF86RXLsa70uaP-uF0vlXb77WOwtnIWS_wRTIK1VXKVwWucXIQGE9-HxFC82RUw167hch8wGNLQa-5suEECft32afooX6LRGlQqdMJGFTZv63In/');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>
- 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.
<style type="text/css">.barrightblogger{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8PxHC1zNOPz9EsR_bAxHGKhlWOTKHO39Y6wOiAXK8ChIs76JBYvFM7b9FYM3Rbwo6GhsjlHB2BnfFsoMttFp4yXuQJKuRi6TIM3eAmWwsL_snIZNgYpUmYOU1IiQmICyCgrWNn83vD2D/');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/AVvXsEhFFrcxpmS-A1T_3NONnWGW0LKoST8APqLps9ldEiMH8GT0TvTYust-wG7o8UOwVfgpY_SXhsIPiLus0ylSe3HVQOttJeDDPG2zyVRWwW0vOjBYrPLwUpDa2mR-Iq8bBe_3e28z5xuIt9lw/');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/AVvXsEgug5GeI_zocEEl7jbdy9N3kCsHhuv6Zvtjfz92nKrtQAWM0hGEaYaD6x7Ypcrbm_as4exZTkq30MTxnKMUQWo-lamIx49H1B8OUirlee1yzcqxVwSkQpVFGdYcS-l_1mkO7phhw2HOF6w6/');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/AVvXsEj9tieNYTpLGJUgY4_SwvBeJgDrD7sHeg7hLkXCNRtqYTbPiihi7UCaYp0f_415eKOjntCtpA4BYhmmgftBsFnpmqVdqxLrClltcellRHK8_dxcZ7CxBD13mC2T8dQd2aYo6Ropq3EdjcY3/');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/AVvXsEhQDvqzm5bX0JhaV64at1MxtVs7_aU7NDwT9qF8AoeMne8RGX45QW9iTYSGSM8rM_LM3KBhWJGOqDXulUbhoWarKGrwZCVUaHdEGkGOPWThh44VVpZktze9IDNBUizyBYe1KS08NorakyGA/');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/AVvXsEhG4yjyGbze92cYTms5jRYZo-ErsfzNCTF86RXLsa70uaP-uF0vlXb77WOwtnIWS_wRTIK1VXKVwWucXIQGE9-HxFC82RUw167hch8wGNLQa-5suEECft32afooX6LRGlQqdMJGFTZv63In/');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-5280101236238054965" style="width:225px;border:1px solid #cccccc;"></div><!-- Render the gadget into a div. --><script type="text/javascript">var skin = {};skin['BORDER_COLOR'] = '#cccccc';skin['ENDCAP_BG_COLOR'] = '#ff9900';skin['ENDCAP_TEXT_COLOR'] = '#333333';skin['ENDCAP_LINK_COLOR'] = '#0000cc';skin['ALTERNATE_BG_COLOR'] = '#ffffff';skin['CONTENT_BG_COLOR'] = '#ffffff';skin['CONTENT_LINK_COLOR'] = '#0000cc';skin['CONTENT_TEXT_COLOR'] = '#333333';skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';skin['CONTENT_HEADLINE_COLOR'] = '#333333';skin['NUMBER_ROWS'] = '5';google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);google.friendconnect.container.renderMembersGadget({ id: 'div-5280101236238054965',site: '13497557564014853740' },skin);</script></div></div><div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter"><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 2,interval: 30000,width: 220,height: 220,theme: {shell: {background: '#333333',color: '#ffffff'},tweets: {background: '#333333',color: '#f3f5f0',links: '#eb9f07'}},features: {scrollbar: true,loop: false,live: false,behavior: 'all'}}).render().setUser('@geafernando37').start();</script></div></div><div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook"><iframe allowtransparency="true" frameborder="0" scrolling="no"src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/cr.seven.9&width=240&colorscheme=light&connections=15&stream=false&header=false&height=320" style="border: none; height: 320px;overflow: hidden; width: 240px;background: #fff;"></iframe></div></div>
ini. Blogger sejati tidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIE FOREVER selamanya.
0 komentar:
Posting Komentar