Bloggger Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)
Asalamualaikum.Wr.Wb.
- Setelah saya Update tentang Free Download Template SEO Friendly
Terbaru 2012 dan template itu sangat menarik karena sama seperti
tempate Kertas Kecil Kita ini. Kali ini saya akan share lagi tentang
Widget 3 in 1 Floating yang sangat menarik dan Efektif ini kepada
kalian semua. Widget 3 in 1 floating yang menurut saya merupakan salah
satu widget blogger terbaik di tahun 2012 ini. 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, sekarang waktunya kita bedah bersama sama Widget ini dalam Tips
dan Trik NgeBlog Kertas Kecil Kita ini.
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).
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/AVvXsEgynL6Vo7EvdUMBv9sxay_jrie3XBZr4S534h9_Gbu0TsmGAVYLo2oXymIPs3ux3HUX2r09kN1ufMgpHsUAms9s4tW0592r3pieuVBSqqgfvwFT2jPVQfbgkUbSbrGF2Q6qq5puj5J5fknJ/');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/AVvXsEhcCF5yI0jdupB90NPF1s7PfNQsyodAvRjXwRuxTqbIWmIIwEgSrv6OyUt991-R6hy0eTiTe5pha6cTp2vYWR8lwf-TwmZ9mrEvafwLUF4guFKdduc4VHX4e7_hFKuH9sf_kqbKjwYJNo60/');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/AVvXsEjSp_IjtXieZy2hrG229IrqxVG3P7uk_027Pg512s9l0xL0ctvJvcuFO9-HQtwsTpeISWh_jSw-3CeSoOPthrA-YHf5X13GW0gll0EMUwVKDFJByVgv4I0tuNjdj5ZUwTPhTuk2VXFCTZX7/');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/AVvXsEiUj6u05iH4IFyBbNuKrqOT0BClsaZFhT6F3X3t0ETM6Upu81d9AzaICzppvDRJ4awO7cDnYF6i0huIRzBymIiE04j-xxeUgQQpgrdMGqbPH9yqzEqhYHJTcWouY7jtjept34YbW-xH8lwK/');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/AVvXsEiz0C2f2b3M-hOiw3B0Tno-HrGQubOqJEcMls7q8eguUkV0q-QdNlLWM-2lbknDXsMKByrtSXbpJRsbMufmyUlKuAqPPpje5WLlTVxZKawpOYv4eIPtraA0c7O47ZNqQDEJu7vwBeeBy3EG/');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/AVvXsEgnxgg2THJALCSbNRBO97UIzdbjGZitPT1mnYByLSovPKZVv5FJPB8a0PHQmbFqXJ5G19TA9GxmV-QuyIm7xEWI56x2t_4DSjVByMrAfUtt28-gebCfqTLDYkscAaff7tmK3DJe4fp2BHvi/');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/AVvXsEgynL6Vo7EvdUMBv9sxay_jrie3XBZr4S534h9_Gbu0TsmGAVYLo2oXymIPs3ux3HUX2r09kN1ufMgpHsUAms9s4tW0592r3pieuVBSqqgfvwFT2jPVQfbgkUbSbrGF2Q6qq5puj5J5fknJ/');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/AVvXsEhcCF5yI0jdupB90NPF1s7PfNQsyodAvRjXwRuxTqbIWmIIwEgSrv6OyUt991-R6hy0eTiTe5pha6cTp2vYWR8lwf-TwmZ9mrEvafwLUF4guFKdduc4VHX4e7_hFKuH9sf_kqbKjwYJNo60/');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/AVvXsEjSp_IjtXieZy2hrG229IrqxVG3P7uk_027Pg512s9l0xL0ctvJvcuFO9-HQtwsTpeISWh_jSw-3CeSoOPthrA-YHf5X13GW0gll0EMUwVKDFJByVgv4I0tuNjdj5ZUwTPhTuk2VXFCTZX7/');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/AVvXsEiUj6u05iH4IFyBbNuKrqOT0BClsaZFhT6F3X3t0ETM6Upu81d9AzaICzppvDRJ4awO7cDnYF6i0huIRzBymIiE04j-xxeUgQQpgrdMGqbPH9yqzEqhYHJTcWouY7jtjept34YbW-xH8lwK/');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/AVvXsEiz0C2f2b3M-hOiw3B0Tno-HrGQubOqJEcMls7q8eguUkV0q-QdNlLWM-2lbknDXsMKByrtSXbpJRsbMufmyUlKuAqPPpje5WLlTVxZKawpOYv4eIPtraA0c7O47ZNqQDEJu7vwBeeBy3EG/');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/AVvXsEgnxgg2THJALCSbNRBO97UIzdbjGZitPT1mnYByLSovPKZVv5FJPB8a0PHQmbFqXJ5G19TA9GxmV-QuyIm7xEWI56x2t_4DSjVByMrAfUtt28-gebCfqTLDYkscAaff7tmK3DJe4fp2BHvi/');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-3587425820990824703" style="width:250px;border:1px solid #ff0000;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ff0000';
skin['ENDCAP_BG_COLOR'] = '#ffffff';
skin['ENDCAP_TEXT_COLOR'] = '#ff0000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#000000';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_HEADLINE_COLOR'] = '#ff0000';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-3587425820990824703',
site: '12625880981379543615' },
skin);
</script>
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('KertasKecilKita').start();
</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%2Fpages%2FKertas-Kecil-Kita%2F252332308146760&width=250&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=286045748116584" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:290px;" 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 :
- Cara Menambahkan Google Friend Connect Pada Blog
- Cara Menambahkan Facebook Likd Box Connect Pada Blog
- Cara Menambahkan Twitter Update Pada Blog
Bloggger Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)
Reviewed by angga dottart
on
September 27, 2013
Rating:
Reviewed by angga dottart
on
September 27, 2013
Rating:
No comments