Selamat datang di TNW Yandi Blog, alhamdulillah pada malam ini saya baru ada waktu untuk update postingan di blog ini dan kali ini saya akan menulis artikel tentang Memasang Tombol Social Share Postingan Blogger alasan saya menulis artikel untuk memasang tombol social share ini karena saya tertarik dengan tombol social share dari bebrapa blog yang sempat saya kunjungi dan para admin yang baik hati dari masing-masing blog share bagaimana untuk mempercantik tampilah social share untuk menarik pengunjung blog agar share artikel di blog kita .Beberapa blog yang share artikel tentang cara Memasang Tombol Social Share Postingan Blogger yang menarik untuk saya bagikan kembali di bolg yang baru saya buat ini sekalian sebagai pengingat saya ketika ingin menggunakan nya tinggal membuka blog sendiri,tombol social share di sini kebanyakan menggunakan fontawesome sehingga tampilan nya menjadi lebih menarik dan beberapa dia antaranya di beri efek hover yang memutar .
Selain dari tampilan yang bagus tampilan nya juga cukup sederhana, oh ia apakah anda tau manfaat dari tombol social share ini ? tombol ini juga berguna untuk memudahkan anda sebagai admin blog untuk membagikan artikel ke beberapa social media yang telah di setting pada tombol social share berikut salah satu tombol social share yang saya suka yang saya screen shoot dari blognya kang zulmy eve .
Cara Memasang Script Tombol Social Share Postingan Blogger
Tombol social share pertama yang akan saya share pertama dari blognya kang zulmy jika anda tertarik dengan tombol share yang ini silahkan anda peraktekan mengikuti langkah dan memasang kode scriptnya di bawah :Tombol Social Share Postingan Gaya Flat Ui
#1 . Login ke dasboard blog anda kemudian masuk ke edit HTML template anda selanjutnya cari kode ]]></b:skin> </style>.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;}}#2 . Kemudian anda copy kode html dan Js di bawah tepat di bawah kode <data:post.body/> yang ke dua dan jangan di dalam bagian postingan mobile berikut kodenya .
<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&url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
<li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&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 + '&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>#3 . Karena tombol social share ini menggunakan fontawesome jadi anda juga harus memasang plugin fontawesom ini di template yang akan di pasang tombol social share flat ui untuk memasangnya silahkan anda copy kode fontawesome di bawah simpan di atas kode
</body><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>Untuk tombol social share selanjutnya dari blognya arlina design bentuk dari tombol ini hampir mirif karena bentuknya yang bulat juga kalau tertarik dengan yang ini silahkan anda ikuti langkah pemasangan nya .
Tombol Social Share Arlina Design
#1. Silahkan anda copy kode yang ada di bawah ini kemudian lakukan cara penerapannya seperti pada langkah tombol social share di atas karena di sini yang berbeda hanya kodenya saja .
<b:if cond='data:blog.pageType == "item"'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>#2 . Dan berikut kode css yang akan di simpan sebelum kode
]]></b:skin></style>
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl2UeH0axbBfl2dIrm6zefBcpzwMeayP29nWI-1lGwLwZjkpy5sKfwRvmxmfaXuQMmdYxKk-OVE2d1VK3Dx8vSFhesR5fuXPLNk-7sEV2SBQc4GbSKNdJ-W7j8fPG2Lx41FdFmVhgXeWOr/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}#3 . Setelah selesai anda save dan lihat hasilnya
Tombol Social Share Kompi Ajaib
Untuk Demo dari tombol social share kang adhy ini silahkan anda lihat pada tombol social share di blog ini dan berikut kode nya yang harus anda terapkan
#1 . Copy dan simpan kode css berikut tepat di atas kode
</head><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.share,h2.sharetitle{display:block;float:left}
h2.sharetitle{font-size:18px;margin-top:15px!important;font-weight:500;line-height:1.4em}
.share,.sharethis{position:relative}
.sharethis{margin:10px 0 10px 20px;}
.sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{cursor:pointer;text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-size:12px;font-weight:300;border-radius:3px;color:#777!important;background:#f8f8f8;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .4s ease-in-out}
.fbi,.goplus,.pplus,.tewe{font-size:18px!important;margin-top:1px;vertical-align:middle}
.sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#555;background:#fafafa;border:1px solid #999}
.sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
#share-menu{display:none}
.dropdown-menu{position:absolute;top:100%;right:5px;z-index:1000;max-width:100px;padding:5px 10px;margin:0!important;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.dropdown-menu li a{color:#333!important;font-weight:300;display:block}
.dropdown-menu li a:hover{color:#e8554e!important}
.share-whatapp{display:block;font-size: 18px;font-weight: 500;margin-bottom:5px;margin-left:20px}
.clear{clear:both}
</style>
</b:if>#2 . Selanjutnya anda copy dan siman kode HTML berikut
<b:includable id='share-tool' var='post'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<i class="fa fa-google-plus goplus"></i> Google</a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<i class="fa fa-facebook fbi"></i> Facebook</a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Share to Twitter">\
<i class="fa fa-twitter tewe"></i> Twitter</a> \ <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \
<ul class="dropdown-menu" id="share-menu"> \
<li><a href="javascript:pinIt();">Pinterest</a></li>\
<li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
<li><a href="//www.linkedin.com/shareArticle?mini=true&url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
<li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
<li><a href="//delicious.com/post?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
<li><a href="//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 href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
<li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
<li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
<li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Reddit">Reddit</a></li> \
</ul> \
</div>\
<div class="clear"></div></div> \
');
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)};
//]]>
</script>
<b:if cond='data:blog.isMobileRequest == "true"'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if>
</b:includable>Kemudian simpan setelah kode berikut
<b:includable id='post' var='post'>
............
............
............
</b:includable>#3 . Selanjutnya anda copy kode berikut
<b:if cond='data:blog.pageType == "item"'>
<h2 class='sharetitle'>Share this:</h2>
<div class='clear'/>
<b:include data='post' name='share-tool'/>
</b:if>Silahkan anda simpan tepat di bawah postingan jika bingung silahkan anda cari kode
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
dan simpan kode yang anda copy tadi simpan tepat di bawah kode di atas
#4 . Kemudian copy kode javascript di bawah dan simoan tepat di atas kode
</body><b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
var boxArray2=["share-menu"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray2.length;r++){var o=document.getElementById(boxArray2[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}});
//]]>
</script>
</b:if>Karena tombol social share ini juga menggunakan font awesome jika pada template anda belum terdapat fontawesome lakukan seperti langkah pemasangan fontawesome seperti pada tombol social share pertama di atas .
Demikian tombol social share yang saya suka dan pada kemudian hari pasti saya akan menggunakannya jika anda ingin menggunakannya silahkan lakukan Memasang Tombol Social Share Postingan Blogger seperti yang saya tuliskan di atas .
Jika anda ada pertanyaan silahkan tulis pada komentar atau contact blog ini. selamat bermain kode .