Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog

Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog

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.

Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog


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 HTML
2. Simpan kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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='&quot;   https://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>
<a class='fltw' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>
<a class='fllk' href='http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' target='blank'><i class='fa fa-linkedin'/></a>
<a class='flin' data-action='share/whatsapp/share' expr:href='&quot;https://whatsapp://send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); 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 == &quot;item&quot;'>
<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://2.bp.blogspot.com/-pFHxnby3vvM/XJ7ySDbhDqI/AAAAAAAA9iY/eLZikB9Nggk8cigqDEva3sFCuQWV83X7wCLcBGAs/s1600/cb%2Bfav.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='&quot;   https://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>
<a class='fltw' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>
<a class='fllk' href='http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' target='blank'><i class='fa fa-linkedin'/></a>
<a class='flin' data-action='share/whatsapp/share' expr:href='&quot;https://whatsapp://send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); 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).*

Thanks for reading Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog | Labels: Desain Blog edit this post
0 Komentar untuk "Cara Pasang Tombol Share Social di Bawah Judul Artikel Blog"

1. Komentar spam, link aktif, dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat/bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *