Cara Membuat Mashable Mashshare Social Sharing Widget Untuk Blogger

Selamat Malam... Kini Telah hadir  Mashable Mashshare Social Sharing Widget Untuk Blogger v2 dengan tampilan baru dan bergaya, dengan total shares counter - hal ini telah dimungkinkan berkat Sharrre , Anda dapat mengunjungi situs web mereka untuk lebih jelasnya.
Oke langsung saja ke step-stepnya...

Pergi ke Blogger »Template» dan Edit HTML

Cari Kode <div class='post-footer-line post-footer-line-1'> Lalu Copy kode di bawah ini tepat setelah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='social-div'><div id='sharrrrre'><div data-title='SHARES' id='shareme'/></div>
<div style='display: inline-block; margin-bottom: 20px;'>
<a class='mbafacebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'> <img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'/>Share on Facebook</a>
<a class='mbatwitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'> <img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'/>Share on Twitter</a></div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 mbagoogle-plus' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a>
<a class='socialshare2 mbalinkedin' data-title='Linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' target='_blank'></a>
<a class='socialshare2 mbastumbleupon' data-title='Stumble-Upon' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a>
<a class='socialshare2 mbapinterest' data-title='Pin it' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'></a></div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div></div></div></b:if>

Mungkin anda tidak dapat mencari Kode <div class='post-footer-line post-footer-line-1'> Jadi Carilah Yang Mirip Dengan itu,Dan juga anda bisa memasang Dimana Saja.

Cari Kode ]]> </ b: skin> Lalu Kopi Pastekan Kode berikut tepat di atasnya.

#sharrrrre{float:left;margin:-10px 5px 0 0;padding:15px 15px 15px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJc4GzUGhnPGJuFo8-lLxX2k4XseyEIUeNJJkXU6q6apqlXeqV5R5RNV51idkFuEmD9gNn7E3rGgXT3Hia-N_Cy9QVLX0N6QbK_rabHWcUaw5N8rewb7E6QHr3Qk6RuTa1pFeRIGW_8J4/s1600/diagonal.png) no-repeat 100% 50%}.sharrre .count,.sharrre .share{display:block;text-align:center;text-decoration:none;width:100px;padding:0}.sharrre .count{font-weight:700;position:relative;line-height:40px;color:#7fc04c;font-size:50px}.sharrre .share{color:#666;font-size:10px;height:10px}.social-div a{text-decoration:none!important;display:inline-block}.social-div a img{display:inline-block;width:auto;height:auto;margin:0 8px 0 -5px;vertical-align:middle}#socialshare,.share-toggle{display:inline-block;text-align:center}#socialshare{vertical-align:middle;font-size:16px;padding:14px 20px 15px;font-family:Raleway;margin-right:5px;-webkit-font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility}#socialshare:active{padding:15px 20px;margin-bottom:-1px}#socialshare:hover{opacity:.9}.share-toggle{position:relative;cursor:pointer;color:#fff}#socialshare,.share-toggle a{color:#fff;text-decoration:none}.share-toggle,.social-div{vertical-align:middle}#expand-social,#social-expand{display:inline-block;vertical-align:middle;position:relative}#expand-social{height:53px}#social-expand{top:0;left:0}.expand{box-shadow:0 3px 0 0 #c5bebe;background:#cdcccc;position:relative;width:40px;height:40px;line-height:40px;font-size:200%}.expand:active{box-shadow:0 1px 0 0 #c5bebe;height:41px;margin-bottom:-1px}.expand:hover{opacity:.9}.expand-minus{display:none}.socialshare2{width:50px;height:50px;display:inline-block}.socialshare2:active{height:51px;margin-bottom:-1px}.socialshare2:hover{opacity:.9}.mbafacebook{background:#507bbf;box-shadow:0 3px 0 0 #4671b5}.mbafacebook:active{box-shadow:0 1px 0 0 #4671b5}.mbatwitter{background:#63cef2;box-shadow:0 3px 0 0 #57c4e9}.mbatwitter:active{box-shadow:0 1px 0 0 #57c4e9}.mbagoogle-plus{box-shadow:0 3px 0 0 #43454c;background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzDUiqTssw3KnlwQqy0i_IJH8biR7WR4TaYIaDu4Ggpxei2OXmUEWulnfgJGB20yveFUR_UHpYuQmiS8blrNrtYd2HTuOXa7q7QNMXOOyybD32mCQLWIAKrTsa97mt5iiesEAoRj-Up4/s20/g+.png) no-repeat center}.mbagoogle-plus:active{box-shadow:0 1px 0 0 #43454c}.mbalinkedin{box-shadow:0 3px 0 0 #12a4db;background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibz7Sv3RSNlzFtDVhmbFOE_v1fu73F63Y_BA-1iL6yjjkU5PWoRhB8OPZH7xggBWfFxRq6zkM2pNGrFQfqnpQgJgIOJ0I9h0HmDl-jKbIUuzJfe0NI7VMNIBKky3n71ZQ3m3RBo30Uixw/s20/in.png) no-repeat center}.mbalinkedin:active{box-shadow:0 1px 0 0 #12a4db}.mbapinterest{box-shadow:0 3px 0 0 #e85756;background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS1CsF1xTk48cLEZBXJA-uWuD8Jc2Q7i7qwK-zW2MqzhOP2wMpadaBtbf_Wi70FUafLWT9K15MTWNkWHYahOMIMm0Mn8IfHaH0_Ra2zVsDWQHbWZ28gYqudntiiZkhZOvn2BwOSrUxRgA/s20/pinterest.png) no-repeat center}.mbapinterest:active{box-shadow:0 1px 0 0 #e85756}.mbastumbleupon{box-shadow:0 3px 0 0 #f5a635;background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlKrYujMYf1tAEAMAVDG3Ji1BXIQSjcfCpK2YYSOzeRXFx57hR4ynCNbS7pukPLHOL-oo8TSvxZFTR5p2CpXxduqBZO96fX_rtdJL5gd-gtHAQbHb3hBx6j-8UkaEtZm10Gaeg1tptcM/s20/stumble.png) no-repeat center}.mbastumbleupon:active{box-shadow:0 1px 0 0 #f5a635}

Save Template Anda


Cari Lagi Kode </ body> Dan Kopi Pastekan Kode berikut Tepat di atas Kode </ body>

<script src='https://c8e27177358b76154f67a92cab4608cc54cd08c0.googledrive.com/host/0B72-8N3aLQVmai0zWDl1U1AxeTQ'/>
<script type='text/javascript'>
 $(function(){    
    $(&#39;#shareme&#39;).sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true,
    stumbleupon: true,
    linkedin: true,
    pinterest: true
  },
  enableTracking: true,
      enableHover: false,
});
  });
</script>
<script type='text/javascript'>
function toggle(d){$(&quot;#&quot; + d).animate({width:&#39;toggle&#39;},400);}
$(document).ready(function(){$(&quot;#social-expand&quot;).click(function(){$(&quot;.expand-plus&quot;).toggle();$(&quot;.expand-minus&quot;).toggle();});});
</script>

Save Template Anda Dan Lihat Hasilnya


Kata-kata akhir
Berharap Anda menyukainya. Dan Mengungkapkan pikiran Anda dengan meninggalkan komentar. Sampai Jumpa Di Postingan berikutnya, Terima kasih!