2. Klik Tata Letak
3. Klik Add GADGET
4. ADD HTML/JavaScript
5. Copy Kode Berikut Ini :
<style type="text/css">
.barrightblogger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGyHWcUUq_lgZeCOnbtuHkFmyv99V1RX4euwizyRVw7lpmxjh6DVboiutqgVLLFQrm4twI7nTSrBgsgC4bck-tQ5h5ypuRO9EGEtyeU4IuESB1xJm3flpK-vieGLAdxac6wBeW_PNFSGpd/');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/AVvXsEjXz6cR7KE9fJrcOa5lVBYsnjCtk0y5EWTlmP1eIcvB-cxYxU1mCbQE6ZOHbnb29tu9ods1xBLY1H8dyX-qsIeEWsC4GGCEX1h8XjUWJHEjAYmHRur7uuAV5CpINQoG2KG8cZBdfXNbRhWW/');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/AVvXsEjffUuSAvyn61UNfPqBMZ2ji4OtI9pSxlCBk370e_SVA_9T3G4OKfvnNXbIdDgfjQn5xhah6mtwdjXcZB-le1FmMKBwXX6G6CLrdmtHFNzlbn9gaTJr37Y4r48hg7aKw9C642SvHAPJlRH_/');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/AVvXsEhuSANWlJP2hwhzlauJaOkHZAZugMesW_AtaRWREEOqpzhV3fP__xi0j8Bocqy1FQvDNY1R4gWX8YrVBwCVJdfD5EIURpOHRsmKD-_jAPEntQzGOk5UC1LZNz6UrFZ9WU_lN93bWbG9w2Jq/');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/AVvXsEgMjnCxitMUmj4By-WlUYSHsxwFB77uBhBWjt_XXA7ObFCf75Qe7dGQfABTaqFG88fUFFZFiIzxnMVsll8FVK37NMaW6SzXhF926Rr0WxXpg9masjvA_pAXjw3JqQueLbxrGLX2fJeQqGDd/');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/AVvXsEgujBcmpxOjzxVizgDZqkdiz29WzFnKKZQIFNKAk5ZpbY2gZfhjwOakNvSV7Y7f4n-_f2JVJ9DpHXDGL2hTvXj7ft0xexSoI_TXtxC8umztFlkVIB0Av-WTebOnzDj48_iElaoklRnKd6zK/');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-5705219719496776630" 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('@mbahcip2').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/TrickTipsBlog&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>
6. Selesai
Note :
-Ganti Kode Yang Berwarna Biru Dengan Kode ID Blogger Sobat
-Ganti Kode Yang Berwarna Kuning Dengan Kode Twitter Sobat
-Ganti Kode Yang Berwarna Merah Ganti Dengan Kode FB Sobat (Bukan Akun Tapi Halaman FB)
Sumber : http://www.rayhanzhampiet.com/2011/12/widget-google-friend-connect-twitter.html
1 Comments
