Cara Membuat Smart Sosial Sharing di bawah postingan atau di bawah judul postingan Blog ~ MESTI GIMANA

Assalamualaikum kerabat. Membuat Smart Sosial Sharing di bawah postingan atau di bawah judul postingan Blog - Kamu pasti sering melihat tombol berbagi di bawah postingan atau di bawah judul postingan sebuah artikel di blog atau website, tombol ini berguna sekali untuk mempromosikan konten blog di berbagai media sosial. Dengan begitu akan meningkatkan traffic pengunjung blog.

Sejauh ini ada 2 penempatan tombol share yang dianggap paling efektif, yaitu di bawah judul artikel dan di akhir artikel. Dan pada kesempatan kali ini akan dibahas cara membuat Smart Sosial Sharing di bawah postingan Blog atau di bawah judul postingan Blog. Yuk simak tutorialnya di bawah ini.

1. Masuk ke dasboard blogger

2. Pilih template -> edit HTML

3. cari kode <head>, untuk mempercepat pencarian gunakan CTRL+F, dan pate kode berikut di bawah kode <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

4. cari kode ]]></b:skin> kemudian paste kode berikut di atasnya.

/* Smart Share widget oleh http://www.mestinyagimanaa.tk */

.smartshare,.sharewrap{position:relative;display:block;font-size:0;margin:auto;text-align:center}

.sharewrap{display:block;text-align:center;margin:30px 0 0 0}

.sharewrap a.sb,.sharewrap a.fb,.sharewrap a.gp,.sharewrap a.tw,.sharewrap span.pl{text-decoration:none!important;display:inline-block;margin:0 .5px;font-weight:400;font-size:12px;color:#fff;text-shadow:none;padding:6px 10px;opacity:1;transition:all .3s}

.sharewrap a.sb {background:#222222;}

.sharewrap a.gp {background:#f20000;}

.sharewrap a.fb {background:#516ca4;}

.sharewrap a.tw {background:#00baff;}

.sharewrap span.pl {background:#ff6600;}

.fbbutback,.googlebutback,.plusbutback,.twbutback{font-size:13px!important;vertical-align:middle}

.sharewrap a.fb:hover,.sharewrap a.gp:hover,.sharewrap a.tw:hover,.sharewrap span.pl:hover{color:#fff;opacity:.9}

.sharewrap a.fb:active,.sharewrap a.gp:active,.sharewrap a.tw:active,.sharewrap span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}

span.pl{color:green;cursor:pointer}

#sharepop{display:none}

.sharepopup{position:absolute;bottom:100%;right:15%;z-index:99;float:left;min-width:100px;padding:5px 10px;margin:0;font-size:13px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;}

.sharepopup li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}

.sharepopup li a{color:#333!important;font-weight:400;display:block}

.sharepopup li a:hover{color:#078FF8!important}

ul#sharepop{margin:10px 0;padding:5px 15px}

5. Cari kode <data:post.body/> atau <div class='post-footer'>

6. Copy dan paste kode di bawah ini di bawah/setelah <data:post.body/> atau <div class='post-footer'>, dan untuk menempatkan tombol share di bawah judul postingan blog, pastekan kode di bawah ini di atas/sebelum kode <data:post.body/>

<b:if cond='data:blog.pageType != "index"'>

<b:if cond='data:blog.pageType != "archive"'>

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

//<![CDATA[

var siteurl = window.location.href;

document.write('<div class="sharewrap"><div class="smartshare"> \

<a class="sb" <h2>Sharing is Caring </h2><i class="fa fa-share-square-o"></i></a> \ \

<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 googlebutback"></i> Google</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 fbbutback"></i> Facebook</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 twbutback"></i> Twitter</a> \

<span class="pl" data-target="#sharepop"><i class="fa fa-share-alt plusbutback"></i> Share More</span> \

<ul class="sharepopup" id="sharepop"> \

<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(){$("#sharepop").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)};

//]]>

</script>

<div class='clear'/>

</b:if>

</b:if></b:if>

7. Save template.

Sekarang cek hasilnya di halaman postingan blog. Well sekian artikel cara Membuat Smart Sosial Sharing di bawah postingan atau di bawah judul postingan Blog. Semoga bermanfaat, wassalam.

Enjoy and Share

MESTI GIMANA

Cara Membuat Smart Sosial Sharing di bawah postingan atau di bawah judul postingan Blog

Related Post

About Mesti Gimana