Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box

By: akanewpro 0 komentar

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/AVvXsEi_4z4T9AXxVLcZmG4HwO-FHpXdXeN0C4WOnNwqPH66JVxg7lFcY3qXIjogVxbbcylUJr4bvxHysZVZfaMY9StOPQx9xAhdOgdphTTnrRUYFE2q9QWfwWfnXCGXK3O459ly4esLRRuNb5la/');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/AVvXsEiS24i4RGnIzDZt4-o_lMGnGfdKs53e3x1Ov1r18x1qEtgOQqghE2xuTEDul1Pnjb8b97reUyyucFXk_bgCzXbHenk4tCN4-2wqVi_ana1Wn0HaPnofMlmb_V3iGXw-YqIyRyvxqCYUxDC8/');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/AVvXsEhLkIL1kB1oJ_cehaunPT7M87_74p0LYsjh6WX_oow7A9DIuNBgilxWm_6-WDY2-jznqVsfx_Xb0RMjW7D-B66jE6z_rgtBMFqa-vwnktCsHmMy5HmS7PSl82QknMBkTqASXWAdihb_UbYH/');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/AVvXsEhKg2NGUNKKAmwcX6_HxpeQzZ7fkniy5QprO4ZvQtJ9lQyAOm4T03N6vHgfSd5TCnG1PUnds5tFhqQP4kZ2sHV9oYwSFi7Fgx1aXKZaXZEwaaO7-Z6uP9pD4F2ldwNxyoztA93xCU7-w65H/');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/AVvXsEh7lZwsCcIfpWpAIdQ4Wmo93mEbyy6SjM4N85p-kq5hXrATIB1KFEPbhDyTt-JE9bzfM1Zh1bXLSy0G82f-aq6OF5CT5tJaxikJXI7vfCKBBmcrTWmcT9J-wRU4umrcH7UKaz1iT0gSohJb/');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/AVvXsEh1UB4cMncWh4SO7zH-F0GgLM3x_7Qg7Y2_unR0Ef0YY0AGU7bN62syBbZ4ECdOGjgrNA3ptz0nEkrGkVXMyv5-YObGvEvOrjfdrkiBkDib9TDZpdnkxu6rmpxh8uEVAg93IfJuEBG6PH6F/');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.

Source : http://kertas-kecilkita.blogspot.com/2012/02/cara-membuat-widget-3-in-1-melayaang.html