Cara membuat tombol sharing "sharing is sexy"

1. Login ke akun blogger anda disini
2. Pada halaman Dasbor klik Rancangan >> Edit HTML, jangan lupa untuk mencentang Expand Template Widget [Tips : download template anda terlebih dahulu, untuk mencegah apabila terjadi kesalahan saat modifikasi template]
   
3. Kemudian anda cari kode  ]]></b:skin> [tekan Ctrl+F untuk mempermudah pencarian kode], apabila sudah ketemu silahkan sedulur copy kode dibawah ini dan taruh tepat diatas kode tadi
   
   
   div.beauty-bookmarks {
   height:54px;
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHSmrtjZtggsdjnCRdnzYKkeLcUtvwfjJDiKCiaGqgrjXuhvY5seMq677eTW00pRTNGD6QcU0DvRRii5rkCbDFrPuav4k3dBBQ9H3IstavytX8Qe8oshTvHeOSXTvWw6VONw00VPMktC8/') no-repeat left bottom;
   position:relative;
   width:455px;
   }
   
   div.beauty-bookmarks span.beauty-rightside {
   width:17px;
   height:54px;
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHSmrtjZtggsdjnCRdnzYKkeLcUtvwfjJDiKCiaGqgrjXuhvY5seMq677eTW00pRTNGD6QcU0DvRRii5rkCbDFrPuav4k3dBBQ9H3IstavytX8Qe8oshTvHeOSXTvWw6VONw00VPMktC8/') no-repeat right bottom;
   position:absolute;
   right:-17px;
   }
   
   div.beauty-bookmarks ul.socials {
   margin:0 !important;
   padding:0 !important;
   position:absolute;
   bottom:0;
   left:10px;
   }
   
   div.beauty-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.beauty-bookmarks ul.socials a {
   display:block !important;
   width:48px !important;
   height:29px !important;
   font-size:0 !important;
   color:transparent !important;
   }
   
   .beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvV9t34AiGNmLbNYQadGiqv6yRVWE4kv5AJjCG4YKYDqZiWUxMEg2pmSg5tWUrFl7QpCfEZ1JP5On8_CfN_7FFixtcpazRIHXtzZ-JmD_hH7x0rMqoE4PmwZg-Yc32DNrIDhV16jD4vGG/') no-repeat !important;
   }
   
   .beauty-furl {
   background-position:-300px top !important;
   }
   .beauty-furl:hover {
   background-position:-300px bottom !important;
   }
   .beauty-digg {
   background-position:-500px top !important;
   }
   .beauty-digg:hover {
   background-position:-500px bottom !important;
   }
   .beauty-reddit {
   background-position:-100px top !important;
   }
   .beauty-reddit:hover {
   background-position:-100px bottom !important;
   }
   .beauty-stumble {
   background-position:-50px top !important;
   }
   .beauty-stumble:hover {
   background-position:-50px bottom !important;
   }
   .beauty-delicious {
   background-position:left top !important;
   }
   .beauty-delicious:hover {
   background-position:left bottom !important;
   }
   .beauty-technorati {
   background-position:-700px top !important;
   }
   .beauty-technorati:hover {
   background-position:-700px bottom !important;
   }
   .beauty-twitter {
   background-position:-350px top !important;
   }
   .beauty-twitter:hover {
   background-position:-350px bottom !important;
   }
   .beauty-facebook {
   background-position:-450px top !important;
   }
   .beauty-facebook:hover {
   background-position:-450px bottom !important;
   }
   .beauty-script-style {
   background-position:-400px top !important;
   }
   .beauty-script-style:hover {
   background-position:-400px bottom !important;
   }
   .beauty-designfloat {
   background-position:-550px top !important;
   }
   .beauty-designfloat:hover {
   background-position:-550px bottom !important;
   }
   
   NB : Jika anda ingin mengganti tulisan 'Sharing is sexy' menjadi 'Sharing is caring' maka ganti left bottom dan right bottom menjadi left top dan right top
   
4. Setelah itu cari kode <data:post.body/> kemudian copy kode dibawah ini dan taruh tepat dibawah kode <data:post.body/>
   
   
   <b:if cond='data:blog.pageType == "item"'>
   <div class='beauty-bookmarks'>
   <ul class='socials'>
   <!-- delicious start-->
   <li class='beauty-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>
   <!-- delicious end-->
   <!-- digg start-->
   <li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
   <!-- digg end-->
   <!-- technorati start-->
   <li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
   <!-- technorati end-->
   <!-- reddit start-->
   <li class='beauty-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>
   <!-- reddit end-->
   <!-- Stumbleupon start-->
   <li class='beauty-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>
   <!-- Stumbleupon end-->
   <!-- designfloat start-->
   <li class='beauty-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>
   <!-- designfloat end-->
   <!-- facebook start-->
   <li class='beauty-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>
   <!-- facebook end-->
   <!-- twitter start-->
   <li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
   <!-- twitter end-->
   <!-- furl start-->
   <li class='beauty-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>
   <!-- furl end-->
   </ul>
   <span class='beauty-rightside'/>
   </div>
   </b:if>
   
   NB : Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:
   

   <!-- facebook start-->
   <li class='beauty-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>
   <!-- facebook end-->

5. Kalau sudah simpan template anda...Selesai

PERLU DIINGAT

Bagi pengguna "Read More" kode <data:post.body/> pasti ada 2 buah, maka letakanlah kode diatas dibawah kode yang kedua.

Source: Membuat Sharing is Sexy di Blog

Related Post: