Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box -
Anda dapat membuat floating widget atau widged tersembunyi , yang terdiri atas widged facebooke, twetter dan gogle friend conect melayang dan tersembunyi...
3 buah widget melayang yang digabung dalam 1 gadget ini
Oke dari pada kelamaan, saya langsung berikan petunjuk cara membuatnya...
.png "http://sikkahoder.blogspot.com/") |
| ini contoh hasilnya |
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/AVvXsEg3w2ZfJd8OWsMsYahHODtIeR6ndYTunX9_qr39aZ2LzhHT07fQu9dNsHOqSKdQ0OkwNJLEjR4V5zKhtqc_xa9wHeXSUd-_RB32SWbeV2lDyqd7IgJTZwSwN3wbkznOjHpQSlzFeZzQ9AEv/');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/AVvXsEiOXtKsO6o9xfyMnWydftxOYZkUAlJGH4b0atOorG8qT1jJjSdbNLAGtDlsXu65xij4GxqwQ0HYt2VBRYdI5xwD_DD7By5XMPYYEGMMUHpQ-qGOeygimeOxPMTt4buWtH9TfpJNaqxkPW9H/');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/AVvXsEjXzmn_jrJwHJbR368exVR5nxNuqSBvY3nj3HGblpNcpob5MXW_YX_k1xNEfmLUO98UOnO7AMM3i7R7_CbEXhp0upG7SAk47qrtQNWTaMU_uI_bMnkD6mziFLfrFB1jIpRnEeJlyR1Epwz6/');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/AVvXsEiPyM319mWmaq4O8DqNsoby__TxnXo7NtcsC3mvsT7aWuejP80imsFylzyDDN2cddvoJWz9fcvJ65wsitTtgO11ryy-tOuzW6asBHejAfNpRp547cJ2ZUvqnDAYbtAUSfEOh21DdfEZwBH8/');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/AVvXsEj7SixRXNItlKLKsWnNjZRMlcDp9iZl05IDAv588BTXhDeBuLPMPkpvfD7DXawIrXY6twfQJPGErCIwgd8V7fkLMi5CLWLAGnt9w7nArEh9R2w0QEr7q_59e483AAsebhw_OIH06YqlF0Fb/');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/AVvXsEjFDU_bdGXM9_2NKtq4_FvfpbP4VpAB6RvWbSUKniuhxzCbBMNHZ4ecmuyoL8m3U2wF2DA6gR9rZp20mOsG3HQ2-ecCxDnRQpqFOcu3vQMoupJfCSs2-y96nG_aHQnM6b9LbwPIvePJl8Tg/');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 dibawah ini :
<style type="text/css">
.barrightblogger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3w2ZfJd8OWsMsYahHODtIeR6ndYTunX9_qr39aZ2LzhHT07fQu9dNsHOqSKdQ0OkwNJLEjR4V5zKhtqc_xa9wHeXSUd-_RB32SWbeV2lDyqd7IgJTZwSwN3wbkznOjHpQSlzFeZzQ9AEv/');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/AVvXsEiOXtKsO6o9xfyMnWydftxOYZkUAlJGH4b0atOorG8qT1jJjSdbNLAGtDlsXu65xij4GxqwQ0HYt2VBRYdI5xwD_DD7By5XMPYYEGMMUHpQ-qGOeygimeOxPMTt4buWtH9TfpJNaqxkPW9H/');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/AVvXsEjXzmn_jrJwHJbR368exVR5nxNuqSBvY3nj3HGblpNcpob5MXW_YX_k1xNEfmLUO98UOnO7AMM3i7R7_CbEXhp0upG7SAk47qrtQNWTaMU_uI_bMnkD6mziFLfrFB1jIpRnEeJlyR1Epwz6/');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/AVvXsEiPyM319mWmaq4O8DqNsoby__TxnXo7NtcsC3mvsT7aWuejP80imsFylzyDDN2cddvoJWz9fcvJ65wsitTtgO11ryy-tOuzW6asBHejAfNpRp547cJ2ZUvqnDAYbtAUSfEOh21DdfEZwBH8/');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/AVvXsEj7SixRXNItlKLKsWnNjZRMlcDp9iZl05IDAv588BTXhDeBuLPMPkpvfD7DXawIrXY6twfQJPGErCIwgd8V7fkLMi5CLWLAGnt9w7nArEh9R2w0QEr7q_59e483AAsebhw_OIH06YqlF0Fb/');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/AVvXsEjFDU_bdGXM9_2NKtq4_FvfpbP4VpAB6RvWbSUKniuhxzCbBMNHZ4ecmuyoL8m3U2wF2DA6gR9rZp20mOsG3HQ2-ecCxDnRQpqFOcu3vQMoupJfCSs2-y96nG_aHQnM6b9LbwPIvePJl8Tg/');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('@rayhanzhampiet').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=http://www.facebook.com/pages/Share-With-Irfan-Blogs/322414587773378&width=24
0&colorscheme=light&connections=15&stream=false&header=false&height=320" style="border: none; height: 320px;
overflow: hidden; width: 240px;background: #fff;"></iframe>
</div>
</div>