Home » » Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog

Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog

Ditulis oleh Dicky Fajriansyah pada Kamis, 30 Mei 2013 | 19.27

Membuat Tombol Share Minimalis dibawah Posting Blog

Kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog | Tombol share ini cukup sylish sob, minimalis, ringan dan berada dibawah postingan. Social Share diantaranya adalah Facebook, Twitter, Google+, Pinterest, StumbleUpon, Digg, dan Linkedin. Pasti akan menghiasi blog sobat, dan sekali klik langsung menuju social share masing-masing. Ya, Langsung saja ini Tips-nya.

Berikut Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog :
  • Login ke Blogger, atau klik disini
  • Pilih Template --> Edit HTML --> Proses (loading dulu)
  • Backup Template dulu atau Download Template Lengkap, buat jaga-jaga
  • Cari kode ]]></b:skin> (gunakan CTRL+F), dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

ul.social_db {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_db li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_db li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_db 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_db li.abfacebook {
background-image:url(http://4.bp.blogspot.com/-nJMUyZUi2SM/UaXEnGYtwWI/AAAAAAAAAkM/SXrQ4Q8ASoA/s1600/btrix-facebook-icon.png);
}
ul.social_db li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-_18_qzg7sHs/UaXEnVKS3aI/AAAAAAAAAkY/UYLCvEQuOEI/s1600/btrix-twitter-icon.png);
}
ul.social_db li.abgoogleplus {
background-image:url(http://2.bp.blogspot.com/-DpI_6iUH6GY/UaXEnB83lFI/AAAAAAAAAkQ/Q6QtGamgL_E/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(http://2.bp.blogspot.com/-tMeDXWRp5VY/UaXEmVQIGDI/AAAAAAAAAj0/FrLLKtGE8j0/s1600/btrix-Pinterest-icon.png);
}
ul.social_db li.abstumbleupon {
background-image:url(http://1.bp.blogspot.com/-NxzIC4d0ixE/UaXEmytFBoI/AAAAAAAAAkI/jmk72VMrnvA/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_db li.abdig {background-image:url(http://4.bp.blogspot.com/-J2vYlohj8qw/UaXEmX-JDMI/AAAAAAAAAj8/QwSrbs1Md8w/s1600/btrix-Digg-icon.png);
}
ul.social_db li.ablinkedin {
background-image:url(http://2.bp.blogspot.com/-HaUpL3wjx3I/UaXEmf3UVSI/AAAAAAAAAj4/cHVj0FALvgk/s1600/btrix-Linkedin-icon.png);
}
#animation_db:hover li {
opacity:0.2;
}
#animation_db li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_db li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_db li:hover {
opacity:1;
}
#animation_db li:hover a strong {
opacity:1;
top:-10px;
}


  • Masih dalam posisi Edit HTML, kemudian cari kode </data:post.body> (gunakan CTRL+F), jika sobat sudah memasang Read More, sobat pilih yang ke-3 atau ke-4, tergantung template yang sobat gunakan.
  • Selanjutnya letakkan kode dibawah ini tepat dibawah kode </data:post.body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_tuliskancom' id='animation_tuliskancom'>
    <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>



  • Simpan Template, dan lihat haslnya.

Semoga Tips Blog yang berjudul Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog bisa bermanfaat......
dan selamat mencoba........
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog
Posted by:Dicky Fajriansyah
Published :2013-05-30T19:27:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog

0 komentar:

Posting Komentar