Cara Memasang Tombol Social Share Flat di Bawah Posting Blog

Baca Juga

KODE dan Cara Memasang Tombol Social Share Flat di Bawah Posting Blog. Penampilannya seperti dalam gambar di bawah ini.

Tombol berbagi sosial (Social Share) di bawah posting blog memudahkan kita (admin blog) dan pengunjung untuk membagikan posting ke berbagai akun media sosial.

Cara Memasang tombol berbagi sosial di bawah posting

Berikut ini cara memasangnya:

1. Template > Edit HTML

2. Simpan kode berikut ini di bawah kode  <div class='post-footer-line post-footer-line-1'> atau di bawah </article> atau di bawah kode <data:post.body/> atau di atas kode <div id='related post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-flatsharo { border:2px solid #CCC; height:110px; width:600px;
background: #ffffff; margin:auto; padding-left:20px}
.ks-flatsharo h3 {font-family: 'Titillium Web', sans-serif; font-size:20px; text-align:center;
font-weight:600; margin-top:8px; margin-bottom:7px; color:#151515}
.sharo-contino a { text-decoration:none; color:#151515}
.sharo-contino a:hover { text-decoration:none; color:#fff}
.sharo-contino ul{list-style:none;text-align:center;margin:0;padding:0; margin-top:20px;}
.sharo-contino ul li{ float:left; margin-left:5px; margin-right:5px}
.tweet.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.fb-tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.googleplus.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.linkedin.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.pin-it.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.stumble.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.tweet.tips:hover {background:#00A0D1;border:2px solid #00A0D1; color:#fff;}
.fb-tips:hover {background:#3B5998;border:2px solid #3B5998; color:#fff;}
.googleplus.tips:hover {background:#DA4834;border:2px solid #DA4834; color:#fff;}
.linkedin.tips:hover {background:#0077B5;border:2px solid #0077B5; color:#fff;}
.pin-it.tips:hover {background:#CB2027;border:2px solid #CB2027; color:#fff;}
.stumble.tips:hover {background:#EB4924;border:2px solid #EB4924; color:#fff;}
</style>
<div class="ks-flatsharo">
<h3>Like the article? Please share on your social network :)</h3>
<div class="sharo-contino">
<ul class='share-story'>
<li><a class='fb-tips' data-title='Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&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'>Facebook</a>
</li>
<li><a class='tweet tips' data-title='Twitter' expr:href='&quot;http://twitter.com/share?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'>Twitter</a></li>
<li><a class='googleplus tips' 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'>Google+</a></li>
<li><a class='linkedin tips' data-title='Linkedin' expr:href='&quot;http://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;'>LinkedIn</a></li>
<li><a class='pin-it tips' data-title='Pin it' expr:href='&quot;http://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'>Pin it</a></li>
<li><a class='stumble tips' data-title='Stumle-Upon' expr:href='&quot;http://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'>Stumble</a></li>
</ul><!--contohblog.com sharer codes ends--></div></div></b:if>

3. Simpan template!

Kini Tombol Social Share Flat di bawah posting blog sudah muncul. Good Luck & Happy Blogging! (www.contohblog.com).*