Membuat Widget facebook tweet dan google Melayang Di blog
Untuk tutorial kali ini saya akan membagikan widget Facebook Like, Twitter Tweet, Google +1 (plus one) button, and LinkedIn Share Yang muncul di kiri blog anda seperti di blog saya ini.
Langkah langkah membuat floating Facebook Like, Twitter Tweet, Google +1 (plus one) dan tombol LinkedIn Share Di kiri blog anda adalah:
1. Log in Akun blogger kamu.
2. Klik Design.
3. Klik Edit HTML.
4. Cari kode <head>
5. Copy Kode ini:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
6. Pastekan dibawah <head>
7. Klik tombol Save/simpan Template.
8.Klik Rancangan, Dan pilih Edit tata letak.
9. Klik Add a Gadget Di sidebar atau apapun yang ada di halaman Rancangan .
10. Windows baru akan muncul.Pilih HTML/JavaScript.
11. Klik Tombol tambah (+) Di sebelah HTML/JavaScript.
Pilih tombol warna Floating Share yang kamu ingin pakai di blog.Ada 8 Warna yg tersedia.
12. Klik Warna yang kamu suka:
- Silver
- Red
- Blue
- Black
- Green
- Orange
- Yellow
- White
13. Copy kode Warna yang kamu suka.
14. Pergi Ke HTML/JavaScript window.
15. Paste Kode Ke kotak.
16. Tinggalkan Kotak Dengan Title/Judul Kosong.
17. Klik Tombol Save/Simpan.
Sekarang Lihat Blog Anda.Puas?? Jika ada pertanyaan,silahkan Komentar di bawah posting ini.
Code Tema Silver:
<!-- Floating social media buttons by www.howbler.com --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
Code Tema Merah:
<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border:1px solid #B31919;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.htmll" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
#floatingbuttons{background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border:1px solid #B31919;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.htmll" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
Code Tema Biru:
<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border:1px solid #1E4A8A;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
#floatingbuttons{background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border:1px solid #1E4A8A;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
Code Tema Hitam:
<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#333;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);border:1px solid #222;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
#floatingbuttons{background:#333;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);border:1px solid #222;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
Code Tema Hijau:
<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#80A81C;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);border:1px solid #739619;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
#floatingbuttons{background:#80A81C;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);border:1px solid #739619;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
Code Tema Orange :
<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#C15F24;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);border:1px solid #B35319;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
#floatingbuttons{background:#C15F24;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);border:1px solid #B35319;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id=floatingbuttons title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement(SCRIPT), s1 = document.getElementsByTagName(SCRIPT)[0]; s.type = text/javascript; s.async = true; s.src = http://widgets.digg.com/buttons.js; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src=http://platform.twitter.com/widgets.js type="text/javascript"></script><div class=floatbutton id=facebook><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class=floatbutton id=google+1><g:plusone size="tall"></g:plusone></div><div class=floatbutton id=twitter><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class=floatbutton id=linkedin><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
Code Tema Kuning
<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{
visit link download
#floatingbuttons{