Memasang social share button dengan gaya flat UI

Cara memasang social share button dengan gaya flat UI responsive - Material design itulah gaya yang sekarang banyak orang pakai. Maka dari itu gw menyarankan ente pakai juga dengan gaya gaya flat UI jangan sampai ketinggalan jaman. he he

Cara memasang sosial share button dengan gaya flat UI responsive - Material design
Sosial share button material design

Dengan begitu, siapa tahu dengan melihat sosial share button yang sangat menarik si pengunjung blog ente mau menekan tombol ini yang sangat jarang sekali orang klik pada setiap blog maupun web. FAKTA !

Cara pasang si agak sedikit rumit, namun bagi yang sering bergelut dengan template sangatlah mudah. Tidak seperti gw yang newbie ini. he he

Langkah pertama edit template blogger ente dan sisipkan kode css ini.sebelum /]]></b:skin> ataupun </style> tapi ingat, jika ingin menyisipkan sebelum </style>, sisipkan pada style yang ada di dalam tag conditional <b:if cond='data:blog.pageType == &quot;item&quot;'>. awas bro jangan kebangetan wkwk.

.sharede,.sharein{position:relative;display:inline-block;}
.sharein{display:table;margin:auto;text-align:center}
.sharein a.fb,.sharein a.gp,.sharein a.tw,.sharein span.pl{width:60px;height:60px;line-height:60px;text-decoration:none!important;display:inline-block;margin:0 15px 0px 0;font-weight:700;border-radius:100%;color:#fff;text-shadow:none;padding:0 10px;transition:all .3s;text-align:center;overflow:hidden}
.sharein a.gp {background:#e74c3c;}
.sharein a.fb {background:#2980b9;}
.sharein a.tw {background:#03a9f4;}
.sharein span.pl {background:#878f96;margin-right:0;}
.fbtea,.gotea,.plustea,.twtea{font-size:20px!important;vertical-align:middle}
.sharein a.fb:hover,.sharein a.gp:hover,.sharein a.tw:hover,.sharein span.pl:hover{transform:rotate(360deg);}
.sharein a.fb:active,.sharein a.gp:active,.sharein a.tw:active,.sharein span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position:absolute;bottom:100%;right:5px;z-index:99999;float:right;min-width:100px;padding:10px 20px;margin:0;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:2px;box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.dropdown-menu li a{color:#666!important;font-weight:400;display:block}
.dropdown-menu li a:hover{color:#03a9f4!important}
ul#share-menu{margin:10px 0;padding:5px 15px}
@media only screen and (max-width:640px){
.sharein a.fb,.sharein a.gp,.sharein a.tw,.sharein span.pl{width:45px;height:45px;line-height:45px;}
.fbtea,.gotea,.plustea,.twtea{font-size:15px!important;}}

Lalu sisipkan kembali kode html/javascript ini nya didalam tag <b:if cond='data:blog.pageType == &quot;item&quot;'> yang sesudah <data:post.body/>. Pada setiap template memiliki tiga <data:post.body/> namun jangan bingung, caranya search/tekan CTRL+F cari <data:post.body/> jika yang dibawahnya ada tag <b:if cond='data:blog.pageType == &quot;item&quot;'> berarti itu tempat yang tepat dan silahkan ente sisipkan dalam tag itu.

<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharein"><div class="sharede"> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus gotea"></i></a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbtea"></i></a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter twtea"></i></a> \
    <span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
    <li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \
    <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
    <li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
    <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    </ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
var _0xba47=["","\x70\x78\x20","\x70\x78\x20\x30\x70\x78\x20","\x2C\x20","\x74\x65\x78\x74\x53\x68\x61\x64\x6F\x77","\x73\x74\x79\x6C\x65","\x2E\x66\x62\x74\x65\x61","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x23\x32\x32\x36\x61\x39\x62","\x2E\x67\x6F\x74\x65\x61","\x23\x65\x33\x33\x30\x31\x63","\x2E\x70\x6C\x75\x73\x74\x65\x61","\x23\x37\x34\x37\x65\x38\x36","\x2E\x74\x77\x74\x65\x61","\x23\x30\x32\x38\x65\x63\x66"];var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[6])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[8]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[9])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[10]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[11])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[12]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[13])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[14]);
//]]>
</script>

Sampai disini simpan template ente dan lihat hasilnya. Sebaiknya jika dalam template ente sudah memliki sebuah share button di bawah postingannya, silahkan dihapus kode html ataupun kode cssnya guna agar share button flat UI tidak menumpuk dengan share button sebelumnya.

Tambahan

Sebelumnya pada template ente harus sudah terpasang font awesome, jika belum silahkan sisipkan font awesome berikut sebelum </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");");
//]]>
</script>

Baca juga:

No responses yet for "Memasang social share button dengan gaya flat UI"

Post a Comment