Bagikan Artikel ini ke teman Anda...!!!
Untuk memasang widget berbagi ini di bawah artikel atau posting blog tidak sulit. Coba Anda ikuti saja langkah-langkah di bawah ini!
Anda masuk dulu ke blogger.com
- Pilih Template dan Edit HTML
ul.social_tutorialblogspot{list-style:none;display:inline-block;margin:15px auto}ul.social_tutorialblogspot li{display:inline;float:left;background-repeat:no-repeat}ul.social_tutorialblogspot li a{display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none}ul.social_tutorialblogspot li a strong{font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px}ul.social_tutorialblogspot li.abfacebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip_J-s70iJ5HHWkOrxMCRVTmNT92SNg8LwbcIdnoR4LILIJB5lufQDmsEYXpwvoJqhJD8daSlkfTeeg1zWJCeJMAioZTfjLEUes7ZRALlF81Cqfwxl559GWsLyJJNFNCPv2kURcn7hDuzR/s1600/tutorialblogspot-facebook-icon.png)}ul.social_tutorialblogspot li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ5XvTPugj0DKILXqIuIiT0AcxFQDDN4btginpTY29nGqQcRDuWWPXjtLX14mGwjpFcu1kvBf5mGKpm-hEQcXkr6mWVxPOTZMdXWFcVBgsAXHJ0bApqkf4TA8JypYmCZIu5S6vKqokWTsl/s1600/tutorialblogspot-twitter-icon.png)}ul.social_tutorialblogspot li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnViqdOhb1KvEmj2eD4a7ASZQ-PnV3lzz_q0D4HIhOXJbk8PeLVjijHP7Q9IUYyy21HVCHxJLefLDk7hG9ss97fBmnENVerooO6OftGL1OCVjnnYRAJCgbCDsvNnm71uYBXMrfAVYVoIz/s1600/tutorialblogspot-google-icon.png)}ul li.abpinterest{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVJXxA9sSJOu1G2rqV6FDAdUVQEiSpIBqRaLOBsv5FWgd4Pp9R4c4NPDoTtRXLPoXJHw0AGxxIdz0NN4wEX9WTO2SP-Kc3OYE5lWdpnN-1Vpd2KQ17mHyVFcMZCdXelLZ2I47NxRGYkfj/s1600/tutorialblogspot-Pinterest-icon.png)}ul.social_tutorialblogspot li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_W-bJfgeMnOOjqBIA-kseJliAMa04dE7PArD6b84kB5la1ViMweDisn0anzEotlDbi1_8AseUCpoN_XxsfS_sqVVAub9Nmc2pe4N05a87T9jKnLo_73j7Hxn2DkFk9S3kIQadda7tLJqp/s1600/tutorialblogspot-StumbleUpon-icon.png)}ul.social_tutorialblogspot li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNO8wA8YBmyCB8E8o8Sb8_u9CxaWx9SxIWrHaETcmLPteLf3AfWfq5usj6y_T-4AAqLTspXkcctsZ1foLLI7SLZ99pX9GaFfyEojtRpN2thbWpjkHzG8UZm5bQr5cYH04zbjlzfX1RLnZ/s1600/tutorialblogspot-Digg-icon.png)}ul.social_tutorialblogspot li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGnZuWZ0HhVHJVkAo5XRU2MeOcfd-vQ-7XzeKmERjnbH-4WY-8Wcl_apXsXpNqiMG3OqzCeclt62BaI6sWoERn6pzcB2YaVAUq9-FGH-iY-9LhsUVSjCjMI9Vt1I4b4OqzNhKRXq0kl5FN/s1600/tutorialblogspot-Linkedin-icon.png)}#animation_tutorialblogspot:hover li{opacity:.2}#animation_tutorialblogspot li{-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms}#animation_tutorialblogspot li a strong{opacity:0;-webkit-transition-property:opacity,top;-webkit-transition-duration:300ms;-moz-transition-property:opacity,top;-moz-transition-duration:300ms}#animation_tutorialblogspot li:hover{opacity:1}#animation_tutorialblogspot li:hover a strong{opacity:1;top:-10px}
- Cari kode <data:post.body/> dan letakkan kode berikut SEBELUM kode<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Bagikan Artikel ini ke teman Anda...!!!</b></div>
<ul class='social_tutorialblogspot' id='animation_tutorialblogspot'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;'
rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendC
hild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" +
data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
</ul>
</b:if>
Preview template Anda terlebih dahulu baru di Save.
Kalau Anda sudah menerapkan fitur read more otomatis, kode kedua sebaiknya diletakkan setelah kode Read More.
Kode CSS di atas sudah di kompress menggunakan Online YUI Compressor jadi Anda tidak perlu kompress lagi.
sumber http://www.tutorialblogspot.com/2013/10/cara-memasang-widget-sharing-super-keren-di-bawah-posting.html
Posts
0 komentar:
Post a Comment