Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog
March 30, 2019
Tombol share posting ke media sosial biasanya dipasang di bawah postingan blog. Kali ini CB share kode Tombol Berbagi Social untuk dipasang di bawah judul artikel. Demonya di postingan CB ini, atau sperti gambar ini.
Tombol share di bawah judul ini dilengkapi dengan post info berupa thumbnail logo, nama blog atau nama admin (author), dan tanggal publikasi. Share media sosialnya sudah termasuk WhatsApp.
Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog
1. Tema > Edit HTML2. Simpan kode berikut ini di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.postmeta {font-size:13px;font-family:Arial;font-weight:400;color:#666;line-height:normal;margin:10px 0;padding:10px 0;border-bottom: 1px solid #eee}
.postmeta a{color:#8c8c8c;font-weight:700;line-height:1.6em}
.postmeta .author-photo{display:inline-block;float:left;position:relative;z-index:1;margin-right:10px}
.postmeta .author-photo img{width:36px;height:36px;border-radius:40em;z-index:1;padding:0;}
.author a,.comment a{color:#000;margin-right:10px}
#follow-button{margin:-60px 0;float:right;overflow:hidden}
#follow-button a {float:left;display:block;color:#fff;padding:3px 5px 9px 13px;font-size:16px;height:35px;line-height:2em;width:35px;margin:4px 3px 0}
#follow-button .flfb i.fa{padding-left:1px}
#follow-button a.flfb{background:#3b5998;border-radius:50%}
#follow-button a.fltw{background:#00aced;border-radius:50%}
#follow-button a.fllk{background:#0177b5;border-radius:50%}
#follow-button a.flin{background:#33c12e;border-radius:50%}
.author {text-transform: uppercase;font-weight: bold;line-height: 1.4em;font-size:12px}
@media screen and (max-width: 414px){
.postmeta{font-size:10px;font-family:Arial;text-transform:capitalize;font-weight:500;color:#000;line-height:1.3em;}
.postmeta{font-size:10px;margin:0;line-height:1.3em;padding:10px 0;}
.postmeta a{color:#8c8c8c;font-weight:500;line-height:1.6em}
.postmeta .author-photo{display:inline-block;float:left;position:relative;z-index:1;margin-right:6px}
.postmeta .author-photo img{width:35px;height:35px;border-radius:50em;z-index:1;padding:0;}
#follow-button p {display:none;}
#follow-button a {float: left;display: block;color: #fff;padding: 0 8px;font-size: 15px;height: 30px;line-height: 2em;width: 30px;margin: 0px 4px 0 0;}
#follow-button {margin: -40px 0;}
@media screen and (max-width: 320px){
#follow-button{margin:10px 0;float:left;overflow:hidden;position:relative}
}
@media screen and (max-width: 240px){
#follow-button {margin:10px 0 0;float: left;}
}
</style>
</b:if>
3. Simpan kode berikut ini diatas kode <data:post.body/> yang kedua atau ketiga.
<b:if cond='data:blog.pageType == "item"'>
<div class='postmeta'>
<span class='author-photo'><img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author' height='36' itemprop='image' width='36'/>
</span>
<span class='author'>
<data:blog.title/>
<span class='post-author vcard' itemscope='itemscope' itemtype='http://schema.org/Person' style='display:none'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
</span>
<br/>
<data:post.dateHeader/>
</div>
<span id='follow-button'>
<a class='flfb' expr:href='" https://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>
<a class='fltw' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>
<a class='fllk' href='http://www.linkedin.com/shareArticle?mini=true&url=" + data:blog.url + "&text=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' target='blank'><i class='fa fa-linkedin'/></a>
<a class='flin' data-action='share/whatsapp/share' expr:href='"https://whatsapp://send?text=" + data:post.title + " | " + data:post.url' onclick='window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</span>
<div class='clear'/>
</b:if>
KODE CB (Alternatif)
Kode di atas menampilkan secara otomatis gambar thumbnail dari profil blogger author. Jika ingin menggantinya dengan gambar sendiri dan judul blog, seperti yang CB pasang, gunakan kode ini
<b:if cond='data:blog.pageType == "item"'>
<div class='postmeta'>
<span class='author-photo'>
<a href='https://www.blogger.com/profile/06788684849400740675' target='_blank'><img border='0' expr:alt='data:post.title' height='36' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqsj9CwxxA_HaM6bEqypcbMTFClfn1UeMqxKzQTQb187HzKFH5tUWU_TjkaXIQlsUcPVySNDBYwCzqms02jG1-nOX6e-KSCZPwBJpea7ewarE5mevNdbuXiaJgozgZYNYgiKel-21pdVss/s1600/cb+fav.png' title='cb blogger' width='36'/>
</a></span>
<span class='author'>
<data:blog.title/>
<span class='post-author vcard' itemscope='itemscope' itemtype='http://schema.org/Person' style='display:none'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
</span>
<br/>
<data:post.dateHeader/>
</div>
<span id='follow-button'>
<a class='flfb' expr:href='" https://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>
<a class='fltw' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>
<a class='fllk' href='http://www.linkedin.com/shareArticle?mini=true&url=" + data:blog.url + "&text=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' target='blank'><i class='fa fa-linkedin'/></a>
<a class='flin' data-action='share/whatsapp/share' expr:href='"https://whatsapp://send?text=" + data:post.title + " | " + data:post.url' onclick='window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</span>
<div class='clear'/>
</b:if>
Ganti link gambar warna merah dengan link gambar Anda.
4. Save! Simpan template
Demikian Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog. Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
No comments on Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog
Post a Comment