Wednesday, May 2, 2012
setelah saya merilis widget Always Connection dan Widget Daftar isi otomatis
Kali ini saya akan bagikan kode Widget Share Melayang Lengkap Ala Jalz...Yups Widget multi share yang saya modifikasi sendiri sehingga cukup banyak sobo yang muat XD
Sobo?? apa itu Sobo??
Sobo adalah Social Bookmark dimana kita bisa sosialisasi blog kita lewat sobo...kalo cuma lewat google jg gak mungkin blog kita dikenal kan :P
Trus Gimana pasangnya??
Langsung aja..
1.Login Blogger
2.Langsung melangkah ke Elemen halaman (Page element/elemen laman)
3.Klik Tambah Gadget
4.Tambahkan script Java/HTML
5.Tambahkan kode berikut
Done~
Sebagai Keterangan saya tambahkan sendiri ya ^_^ biar chingudeul bisa modifikasi sendiri :P
<style>
#floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #mbtsidebar { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmO7nNbkFnZAix00cD_hNBBVg0igBSUQAG0fAbc1jtTZuRfH-Ych_sGP8oSz7i0bN2rBBf7GfRZhiYkzm5YvaViudMQlzJLqZASsvlBSN1E4SzuvTJvnstXrCeZfq0_z39Q4TJlnX3rY/s1600/tumblr_lzmvy3MLMq1qav8v0o1_100.jpg'); border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:100px; margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0"><tbody>
<tr> <td style="padding: 5px 0px 0px 0;"><a class="twitter-share-button" data-count="vertical" data-lang="en" data-related="anywhereTheJavascriptAPI" data-via="twitter.com/kajihoon" href="https://twitter.com/share">Tweet</a><script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script> </td> </tr>
<tr> <td style="padding: 5px 0 2px 0;"><a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script> </td> </tr>
<tr> <td style="padding: 5px 0px 0px 0px;"><script src="http://apis.google.com/js/plusone.js" type="text/javascript">
{lang: 'en-US'}
</script> <g:plusone expr:href="data:post.url" size="Tall"> </g:plusone></td> </tr>
<tr> <td><div style="font-size: 10px; font-weight: bold; line-height: 0px; text-align: center;">
</div><a class="addthis_button_compact" href="http://addthis.com/bookmark.php?v=250&pub=xa-4b0dc7c014519abc">Share it</a>
<a href="http://jalz-cassieast.blogspot.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zFzuZdziqkKHUX4UkTmRhzBbch7qtH5-58npnxNGDVqHTDvV8nLTMeQuMrV9s4dtZb2zGk4ypwvLaVvdfF1uMWUu4_H-sZHzjPljsG92zUXyUh6hvTyEfn8hR8_dnB7w1F_Fp2pHlMs/s1600/aa.jpeg" width="80" /></a></td></tr>
</tbody></table>
</div>
</div>
#floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #mbtsidebar { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmO7nNbkFnZAix00cD_hNBBVg0igBSUQAG0fAbc1jtTZuRfH-Ych_sGP8oSz7i0bN2rBBf7GfRZhiYkzm5YvaViudMQlzJLqZASsvlBSN1E4SzuvTJvnstXrCeZfq0_z39Q4TJlnX3rY/s1600/tumblr_lzmvy3MLMq1qav8v0o1_100.jpg'); border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:100px; margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0"><tbody>
<tr> <td style="padding: 5px 0px 0px 0;"><a class="twitter-share-button" data-count="vertical" data-lang="en" data-related="anywhereTheJavascriptAPI" data-via="twitter.com/kajihoon" href="https://twitter.com/share">Tweet</a><script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script> </td> </tr>
<tr> <td style="padding: 5px 0 2px 0;"><a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script> </td> </tr>
<tr> <td style="padding: 5px 0px 0px 0px;"><script src="http://apis.google.com/js/plusone.js" type="text/javascript">
{lang: 'en-US'}
</script> <g:plusone expr:href="data:post.url" size="Tall"> </g:plusone></td> </tr>
<tr> <td><div style="font-size: 10px; font-weight: bold; line-height: 0px; text-align: center;">
</div><a class="addthis_button_compact" href="http://addthis.com/bookmark.php?v=250&pub=xa-4b0dc7c014519abc">Share it</a>
<a href="http://jalz-cassieast.blogspot.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zFzuZdziqkKHUX4UkTmRhzBbch7qtH5-58npnxNGDVqHTDvV8nLTMeQuMrV9s4dtZb2zGk4ypwvLaVvdfF1uMWUu4_H-sZHzjPljsG92zUXyUh6hvTyEfn8hR8_dnB7w1F_Fp2pHlMs/s1600/aa.jpeg" width="80" /></a></td></tr>
</tbody></table>
</div>
</div>
Warna yang ini Adalah posisi dari widget ^_^
kalau ini adalah warna gambar yang menjadi background dari widget tersebut ^_^ selamat menikmati...
Merapikan tombol like & share melayang, lebih rapi dan trendi, tutorial lengkap klik nama gw di atas gan: All About...
ReplyDelete@All About TutorialSip gan ^_^
ReplyDelete