Cara membuat tombol share di bawah judul postingan blog

Kali ini saya akan membagikan tutorial Bagaimana cara menambahkan tombol share social media berada tepat di bawah judul postingan blog, pada dasarnya semua tempat blogger memiliki tombol Share Social Media yang ditempatkan berada di akhir postingan, namun kali ini saya akan membuat atau menambahkan di bawah judul postingan untuk mempercantik penampilan konten yang kita buat.

Selain meningkatkan harapan pengunjung untuk membagikan konten yang kita buat tombol ini juga akan membuat tampilan postingan blogger kalian terlihat lebih elegan dan profesional, langsung saja ke tutorialnya sebagai berikut ini.

Tahap pertama seperti biasa kalian wajib memasuki ke dasbor blogger kalian setelah itu klik halaman tema lalu pilih edit HTML, karena di sini kita akan eksekusi melalui html secara manual.

Setelah berada di mode edit html cari kode yang diberi nama </head> lalu copy dan paste kode di bawah ini tepat di atas kode tersebut.

<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>

setelah itu cari kembali koe <data:post.body/> biasanya terdapat tiga kode yang sama, pilih yang ke dua atau ke tiga, lalu simpan kode berikut ini tepat di atas nya.

<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>

Semuanya sudah selesai, tinggal klik Simpan da lihatlah hasilnya, apabila pada icon sosial media nya tidak berbentuk dengan jelas, kalian bisa mengaturnya melaui css seperti kode berikut.

Kode untuk merubah ukuran icon sosial media pada tampilan dekstop.

#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;}

Rubah pada angka yang saya tandai warna hijau, untuk bagian height = tinggi icon, dan pada bagian width = lebar icon.

Sedangkan kode untuk merubah icon sosial media pada tampilan mobile cari kode berikut ini.

#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}

Mainkan dan sesuaikan angka sesuka selera kalian, itulah tutorial menambahkan icon share sosial media di bawah judul postingan. Apabila adaa yang belum kalian menegerti jangan sungkan untuk berkomentar di bawah.