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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWo-XgnXIFrA3HbXsePWYe-UHIhcc4DObBV5FVpJPeGUnJ_OkH9RslDMejITXga-3HCO0XRpP3z6xO4EBcTsHpTHBIIEwVMOQksAtAHXhDktmWgEsLH9tM19vKnXr6mnDKyCjuM_nBRGY/s1600/btrix-facebook-icon.png);
}
ul.social_db li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPU_U_jbh0BfVSrjf7J2wc1HbIK8ytq0lgfnjyljs93aC-L9BSQ7dOFqm9KS2Sv0_Wu_vsFpnX6AcXVV3JS7co-JGVJ39DXIZLa-5ALxmoTIUUtSFi7gdrv0SCw3kxtcEVCYxBPbHdlied/s1600/btrix-twitter-icon.png);
}
ul.social_db li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlI3HNW0-QnRBtAv0ZZefE3joYLv1F4M1aUijm4Lc4A4WsOxCwGChZeBpmKdIj-BY_fPdpsvOTJlrXW0hkCErkCMLWzBDGZZlrcy-AU0WBDA58Ilgv06wmPV8xmeMuehnp3Bj3mu6qSBs/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidnSzQsyBMgwMN6AQusRL4DEvmihpZw80rPt2aQtzBQN09qA8aRSr4Q5PjfHAdr1HdABHpCiOAsw23y-0MsqclbTZ3jztn4MadqBt5Kx4BBNaTaFmHJ_f5jFVo_64Uanul86xz-6UL9xz8/s1600/btrix-Pinterest-icon.png);
}
ul.social_db li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9vmz8GlEslH_om4A8oOajDYVxTr6JupLTY-koSB3Jzor8uAocD8jT2VrO_E-rd3FX1Sfrs4j9m-3qbroydDTYf5Yg8t2PKYNsjocoKtvmUZV-TfK1EqvMUE_PkE56BWbXostu0-m2Bp7/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_db li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxOSdbVeq7RkK-6zERHsqeUWQXu-iysUsiU0eqsx-t5F0u8ArAPUHlbxXZHq4X6ibgEtuN6mxaaq67lOHXiosYDx03CQaKVoIzjPDEd4TR9s2wetNLAQXowTdTKitanl2kxlQwgvj5z7kv/s1600/btrix-Digg-icon.png);
}
ul.social_db li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGaz88LFhwpDBD-sFdeaQA3Ura203VC5biO0SbzfkmY8YYcZ84FMMem29wrA6pklBACtpu1KB3mnZ6RuWLYJjVaQFbp6Db8oZb5if-kEWlH77PFwOpfhSfHepN6fFl4sAJ4Phjb5eoVE-p/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 == "item"'>
<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='"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>
- Simpan Template, dan lihat haslnya.
Semoga Tips Blog yang berjudul Cara Membuat Tombol Share Minimalis Dibawah Postingan Blog bisa bermanfaat......
dan selamat mencoba........
Post a Comment