2 Blogger Sharing Widgets (On Request) ~ Tutorial Blogspot Terbaru

Melihat komentar blogger terhadap postingan saya sebelumnya, ada 2 blogger yang request terhadap widget sharing di blog om-dayz, heheheh,,padahal widget ini banyak bertebaran di blog tutorial lainnya, tapi gpp lah aku posting lagi :D
langsung ajah ke kode widget:

Sharing Is Sexy

Pertama kita tambahkan kode CSS di bawah ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks { height:54px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYKI9xsLTLgWB1hhfl6Ukp-lMv43xr9C5xbVh5uyYvk_EUnnxjAt-ArVZSKvVP3qXUrVRu5Rp7h-Ymt7RY80kCcrC1ELaYUD2utH2UOIUBkOtLQVMcJIpEAj5l7i9iwgy7a6wGgNANdo/s1600/sharing.png) no-repeat left bottom;position:relative; width:540px }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYKI9xsLTLgWB1hhfl6Ukp-lMv43xr9C5xbVh5uyYvk_EUnnxjAt-ArVZSKvVP3qXUrVRu5Rp7h-Ymt7RY80kCcrC1ELaYUD2utH2UOIUBkOtLQVMcJIpEAj5l7i9iwgy7a6wGgNANdo/s1600/sharing.png) no-repeat right bottom; position:absolute; right:-17px }
    div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }
    div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }
    div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}
    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BpI1cKl83mzC8lfeTdHcqNXnMZekCCudW1DTXhxwrc79j8I8_Kkno_-a5r1QDiKYDZAJO3FfoKKURwMssdl7QgMiyMgoswlZpjzNji9aIrVCXiTH4UVmwEChj5qKGGZ07BtGAyZmaxc/s1600/sexyy.png) no-repeat !important }
    .sexy-furl { background-position:-300px top !important }
    .sexy-furl:hover { background-position:-300px bottom !important }
    .sexy-digg { background-position:-500px top !important }
    .sexy-digg:hover { background-position:-500px bottom !important }
    .sexy-reddit { background-position:-100px top !important }
    .sexy-reddit:hover { background-position:-100px bottom !important }
    .sexy-stumble { background-position:-50px top !important }
    .sexy-stumble:hover { background-position:-50px bottom !important }
    .sexy-delicious { background-position:left top !important }
    .sexy-delicious:hover { background-position:left bottom !important }
    .sexy-yahoo { background-position:-650px top !important }
    .sexy-yahoo:hover { background-position:-650px bottom !important }
    .sexy-blinklist { background-position:-600px top !important }
    .sexy-blinklist:hover { background-position:-600px bottom !important }
    .sexy-technorati { background-position:-700px top !important }
    .sexy-technorati:hover { background-position:-700px bottom !important }
    .sexy-myspace { background-position:-200px top !important }
    .sexy-myspace:hover { background-position:-200px bottom !important }
    .sexy-twitter { background-position:-350px top !important }
    .sexy-twitter:hover { background-position:-350px bottom !important }
    .sexy-facebook { background-position:-450px top !important }
    .sexy-facebook:hover { background-position:-450px bottom !important }
    .sexy-mixx { background-position:-250px top !important }
    .sexy-mixx:hover { background-position:-250px bottom !important }
    .sexy-script-style { background-position:-400px top !important }
    .sexy-script-style:hover { background-position:-400px bottom !important }
    .sexy-designfloat { background-position:-550px top !important }
    .sexy-designfloat:hover { background-position:-550px bottom !important }
    .sexy-syndicate { background-position:-150px top !important }
    .sexy-syndicate:hover { background-position:-150px bottom !important }
    .sexy-email { background-position:-753px top !important }
    .sexy-email:hover { background-position:-753px bottom !important }
    </style>

Belum sampai disitu, itu baru memasukkan CSSnya, sekarang baru kita tambahkan kode Widgetnya, taruh dibawah kode <data:post.body>, kalau blog anda memakai auto readmore, taruh dibawah kode <data:post.body/> yang terakhir.

<div class='sexy-bookmarks'>
    <ul class='socials'>
    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-syndicate'><a href='http://feeds.feedburner.com/om-dayz' rel='nofollow' target='_blank' title='Subscribe to RSS'/></li>
    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    </ul>
    <span class='sexy-rightside'/></div>

Widget Share Minimalist

Sama seperti widget sebelumnya, cukup dengan menambahkan kode ini dibawah kode <data:post.body/> ( Namanya aku gak taw :D , cuman asal²an )

<div style='border-top: 1px dashed rgb(230, 230, 230);border-bottom: 2px dashed rgb(230, 230, 230); padding:10px 0px;margin:0 0px 20px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-top:3px;font:normal 12px Open Sans;font-style:Italic;'>Bagikan ke Teman! : </div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'></a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'></a>
<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>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='bloggermaps' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</div>
<div style='float:left;padding-left:10px;'>
<g:plusone expr:href='data:post.url' size='medium' source='blogger'>
</g:plusone>
</div>
</div>

Tinggalkan komentar ya sobat ^^
Happy Blogging \m/

Terima Kasih telah membaca artikel 2 Blogger Sharing Widgets (On Request) dengan permalink http://om-dayz.blogspot.com/2011/07/2-blogger-widgets-share-on-request.html yang Diposting oleh Impotensia pada 18.47. Deskripsi artikel ini adalah: 2 Blogger Sharing Widgets (On Request), Tutorial Blogspot Terbaru, 2 Blogger Sharing Widgets (On Request), dan Ratingnya sebesar 5. Semoga Artikel 2 Blogger Sharing Widgets (On Request) bermanfaat bagi Visitor Blog ini.