Trik Memasang Widget Share Keren Di Blogspot (LENGKAP)

Trik Memasang Widget Share di Blogspot- Selain untuk mempercantik tampilan Blog, Widget share juga memungkinkan para pengunjung untuk bisa berbagi artikel yang ada di blog anda ke Media Sosial yang  mereka punya seperti :  Facebook, Twitter, Google+,  dan sebagainya. Dengan begitu, maka artikel anda akan lebih mudah di temukan oleh calon pembaca.

Sebenarnya blogger telah menyediakan widget tombol share di setiap template default blogger.

Hanya saja banyak diantara pengguna blogger kurang menyukai tampilan widget tombol share default blogger karena tidak valid HTML5, sehingga mereka melakukan modifikasi widget tombol share tersebut hingga terlihat menarik dengan paduan warna-warni.

Nah, Untuk Trik Memasang Widget Share di Blogspot, ikuti saja langkah-langkah di bawah ini!

1.  Login ke akun Blogger saudara
2. Pilih Template dan Edit HTML
3. Cari kode ]]> </ b: skin> dan copas kode di bawah ini tepat 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/AVvXsEjkVTWHqbun6oiQNPyGlt5RNttcAuRVF6T8GjpELMfl3fj8NiW0UXjtNwKdGXjkmSZhSRzfety0wskap_S21ttXv4bPAtKooaGa0El8CO0LghpjVSz4jACeRGbN3kKYR1HUhDBNN06naTx8/s1600/tutorialblogspot-facebook-icon.png)}ul.social_tutorialblogspot li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimxyzfoj8SbLhmsA2cMlW9jrqBAUhUQO8BWzPlb3mMNkE6aOgeUkgwd7oOWXl3N2UI44kEL_Qb7YgnVRRLXK4PAtiqsPVbVSjTUN9X1vd463Y3Y5TLt3KrQYemG4ru4kOStrLLpfZphaff/s1600/tutorialblogspot-twitter-icon.png)}ul.social_tutorialblogspot li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDWiLXndptPAZfmRAT1V8NUPvu_uzOrSs1QE3sw_OicvZkyppkwZPVbXBe-ClkIwCjIcmD0dumKN7s7JmpckNV0H3J9q0clywJHIxpV7IMV-k6ooqjTFBrzjnEb3B7JnojuplxUCa_TMw/s1600/tutorialblogspot-google-icon.png)}ul li.abpinterest{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-Oy9ym8z5bAHu1f8XfMy0HAlszFxLTKgAjtQDp19m6qh3m2pHJl-5e0rIxH5GTqQFojDnaZSJFyI1acxZb2KuMlltfU3e9LrUHjCZwgLHlfnrC_h3gXS1x7HyyVMO8KkHjf54YAGboaI/s1600/tutorialblogspot-Pinterest-icon.png)}ul.social_tutorialblogspot li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKF5J4QPqzhyphenhyphenD6IwT42mllyOS8UbXMl6h3Iye0g0dB-UrkUJQw6a2y_wF5giv8x_U-myiXYFh343dzc7rrFukii5sKYOWivdhG4Kcv9IDNRspudFgIX-TMx4e1FSZ5SNwVVS4ImoeooKtL/s1600/tutorialblogspot-StumbleUpon-icon.png)}ul.social_tutorialblogspot li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcbadMLYbOlpn2A9YZnjImfSkEO9Lu-LjPvym11uGqAxwNQzU4-PZEHYNUsFx2TMB7ZW2rFyY9AzY-wZ8upcRCjzjaT6o41BQTeI7uJ2gAeAFoivGih4amrbg4OwVtVtgCwZ-ZnT5MYSd/s1600/tutorialblogspot-Digg-icon.png)}ul.social_tutorialblogspot li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNoSvPVXzR6A65ci9DlLjBBzbm9EahfpCjnCwzM-ntURbhLD49P4DETnSPnKxVZRk52q6nkNWpsFqGo1nZAxexspHcOCGeeeNcJRtFBAw9o0gH4n6hlnu5AC77xko6XPU3Qw_Iiy41IFaG/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}

     4. Cari kode <data:post.body/> dan letakkan kode berikut tepat di bawah kode <data:post.body/>

          

         <b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if> 

5. Save dan lihat hasilnya.

 NOTE:

1. Kalau Anda sudah menerapkan fitur read more otomatis, kode kedua sebaiknya diletakkan setelah kode Read More.
2. Kode CSS di atas sudah di kompress menggunakan Online YUI Compressor jadi Anda tidak perlu kompress lagi.

Semoga apa yang saya sampaikan diartikel tentang Trik Memasang Widget Share di Blogspot ini dapat memberikan manfaat, dan tunggu artikel menarik lainnya di pertemuan kita lain waktu. Terimakasih

Thanks for reading & sharing Trik Memasang Widget Share Keren Di Blogspot (LENGKAP)