Memasang Social Share Button Flat Style Responsive

06:48:00
  


Kali ini kami akan membagikan Tutorial Memasang Social Share Button Flat Style Responsive yang pastinya akan menambah manis situs kita dan juga sangat berguna untuk menjaring pemirsa yang lebih luas dengan mudah dan cepat dan bisa dilakukan oleh si pembaca itu sendiri.

Pada dasarnya Social Share Button adalah fitur yang sangat perlu untuk meningkatkan jangkauan situs ke arah yang lebih luas. Biasanya, jika pembaca merasa artikel yang dibacanya bermanfaat, menarik dan bagus, mereka tidak segan-segan bahkan merekomendasikan kepada teman-teman mereka di jejaring sosial, dengan memanfaatkan Social Button ini.

Nah jika sudah tau fungsi dasarnya dan keuntungannya, sekarang kita akan mulai memasangnya, jadi silahkan persiapkan.

Memasang Social Share Button Flat Style Responsive

Memasang Social Share Button Flat Style Responsive

Pertama silahkan buka template editor pada dasbor Blogger.
Hal yang perlu kita instal terlebih dahulu adalah FontAwesome dimana icon yang akan kita buat adalah dengan menggunakan FontAwesome.

<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>
Letakkan sebelum tag </head>

Kemudian cari kode <data:post.body/>, kemudian letakkan kode dibawah ini tepat dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>

Selanjutnya beri styling dengan menambahkan Css ini

.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;}}
 Letakkan Css diatas sebelum tag ]]></b:skin> atau sebelum </style> pada template modern.

Simpan template.

Results

Thanks to Blogeridiots whos make this great widget
Memasang Social Share Button Flat Style Responsive

: CS Team Tentang Kami Portfolio Kontak

CS Team adalah sebuah tim yang berfokus bekerja pada Blogger Design untuk meningkatkan pengalaman pada pengguna Website/ Blog berbasis Blogger.
Terimakasih telah membaca Memasang Social Share Button Flat Style Responsive diatas dan semoga bermanfaat.

Mau bantu share artikel diatas ... ?

Related Posts

Previous
Next Post »

Silahkan tanyakan apa yang ingin anda tanyakan dengan bahasa yang mudah dimengerti .
EmoticonEmoticon