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
- Cari kode ]]> </ b: skin> dan letakkan kode berikut di atas kode ]]> </ b: skin>
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/AVvXsEiLS78sPUusV2hbVQE3loT_vn9mvGMmlAODs7NYD1faL9Ug956ZzffhVeBFMekN9ZohGv6Y6SWAgl26vQKwSmu3yXZhy9jQhS3NbvBU8Lhx3WTNGvIt6uYjVHaH0upfUdymHyuJsi5lfZUc/s1600/tutorialblogspot-facebook-icon.png)}ul.social_tutorialblogspot li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1n14KPLhPJu5TVvCAN-AUjrssWm7h-z8HapafAXFnCx14z3_pJCUxgG3BXdys6vYYycUzDEhCCG3n5mUAaG7OkK4vHfuLmo4ieQ8oyZF5QywQwM1q6qL2XHSm4nmspLWeiW8ye0h3Ukp/s1600/tutorialblogspot-twitter-icon.png)}ul.social_tutorialblogspot li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV44u3skKkgJWd7f_jmyljA2NqW8DSh0_RJ8mhSnYI3uTaRSjtR5jmq4UBERuMOUobK186mtUYv1telaRpAky5gopsG89QdopSKGYwezyHl3odyF3JoCbwE3cZ2oV6NX-GqK2ZAfvMDFLb/s1600/tutorialblogspot-google-icon.png)}ul li.abpinterest{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy6HcgRaYuX9rNwFFpJXaWpjKyEA6ETe1-LU95kdZhr6BgQlDzkcPXa2cFbwSQwfY-tVwCuDbl-sKNJSBCJyTDBbB2diKgjp49kVEoMK3MWvGLqzd5M96stAj3skTztDO1wdiC3zMsh5qt/s1600/tutorialblogspot-Pinterest-icon.png)}ul.social_tutorialblogspot li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ImmTsCULI4QgqE_UfFtEWc-hTmT71e5OizsFy2a3Y86xG0tpcktRHj5qxYPHOK707aH4ohY3HEq8maWy9N0QkP8zPfbgLz7TtoYXuvwGfwQ8puzf76nVwBDMrGNbhZvmMNUVViX7PLek/s1600/tutorialblogspot-StumbleUpon-icon.png)}ul.social_tutorialblogspot li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_c-ez4vHIrvdVxjdmEb_hNuGGvEP1ee9M2oflRNqSm5AcXjRk6rtBKrELEN8vNa-md5MC5hClSqnoAZRw56DoMX0ft-xgDSPhvhuBRJCQiP-xmX46iYNLFkFzuR9ub7OlJzlQ7Vkw-Oa-/s1600/tutorialblogspot-Digg-icon.png)}ul.social_tutorialblogspot li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuaZjueN7GaWbTdowwsJDhMvWuSBDkrDMRLoSWTXt7oLGAJccRIzo0UzEog5SvDV1_aLXWKf4AGTkcI3xlZnWh0aI5VsNv0ttu0DkYC7nfHq0ej1bGTTJTkk81eHYmrKg2UIkq57BqI5wV/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.appendChild(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.
0 komentar:
Posting Komentar