Cara mengatasi tombol share artikel yang menutupi judul postingan pada template BroSense Responsive milik Mas Sugeng

Sebenarnya sudah lama saya mengalami masalah Tombol Share yang Naik Keatas sehingga menutupi Judul Artikel. Ini sangat menganggu sekali, tentunya. Namun demikian, karena alasan kesibukan kerja, tadinya saya biarkan ini terjadi. Tentu saja dikarenakan saya memang suka menggunakan Template Brosesne Responsive dari Mas Sugeng ini, hampir dari kebanyakan blog milik saya mengalami masalah yang sama.

Nah, sekarang saya sudah menyelesaikan permasalahan diatas, dan bermaksud membagikan kepada anda semua yang kebetulan mungkin belum sempat atau bahkan belum mengetahui Cara mengatasi tombol Share artikel yang menutupi judul postingan pada template BroSense Responsive milik Mas Sugeng tersebut.

Tombol share artikel menutupi Judul postingan

Cara yang saya maksud disini, tentu saja berbeda dengan cara yang sudah dibagikan oleh beberapa mastah blogger. Hehe, secara saya ini adalah Newbie abadi, yang gemar berbagi. Berikut ini alternative untuk mengatasi tombol share yang naik keatas, yang menutupi judul postingan.

1. Langkah pertama, Silahkan temukan kode dibawah berikut pada Edit template Brosesne Responsive dari Mas Sugeng yang anda gunakan, :

<!-- Related Post Widget Start -->

<div class='related-post' id='related-post'/>

<script type='text/javascript'>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop></b:if>];

var relatedPostConfig = {

homePage: &quot;<data:blog.homepageUrl/>&quot;,

widgetTitle: &quot;&lt;h4&gt;Related Posts :&lt;/h4&gt;&quot;,

numPosts: 5,

summaryLength: 100,

titleLength: &quot;auto&quot;,

thumbnailSize: 60,

noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVP7fnKrHUV9bXH9dKpZJ5_e9TbrEpSq5HcyEKsAzQb9qoX-DwJPvv3UZ-wCZ_ZqL2MA43d5myOxabf_pvGwKwBdTLmG-VS9pJil1t_senMeZLo_Y0jZo2LS3V4eHrdbuQnC0Yjlq-7qf/w60-c-h60/no-image.png&quot;,

containerId: &quot;related-post&quot;,

newTabLink: false,

moreText: &quot;Read More...&quot;,

widgetStyle: 2,

callBack: function() {}

};

</script>

<!-- Related Post Widget End -->

Silahkan anda gunakan fungsi pencarian pada template editor, yaitu dengan Ctr + F, lalu masukkan ini class='related-post' atau id='related-post'.

2. Setelah anda menemukan segerombolan kode seperti diatas, silahkan ‘Hapus’ Kode-kode ini :

<!-- ShareButton Aslinya -->

<div class='share-buttons-box'>

<div class='share-buttons'>

<div class='share gplus'>

<div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/>

</div>

<div class='share like'>

<div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/>

</div>

<div class='share fbshare'>

<div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/>

</div>

<div class='share tweet'>

<a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

</div>

<div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: en_US </script>

<script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>

</div>

</div>

</div>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

<!-- ShareButton Aslinya -->

<div style='clear: both;'/>

3. Langkah selanjutnya gunakan kode-kode dibawah ini, sebagai ganti kode-kode yang kita hapus tadi.

<!-- ShareButton -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='border-top:3px solid #ccc;border-bottom:1px solid #ddd;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>

<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'>

<strong>Share this article via </strong> :

</div>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank' title='Share to Facebook' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Share on fb</a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank' title='Share to Twitter' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Tweet</a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Share to Google+' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Share on G+</a>

</div>

</b:if>

<!-- ShareButton --> 

4. Setelah kita ganti kode-kode Share Button kita, maka kurang lebih akanmenjadi seperti ini.

Silahkan ganti “Share this article via” dengan kata-kata anda sendiri.

Cara mengatasi Tombol share artikel menutupi Judul postingan<

5. Untuk CSS Tombol Share aslinya, silahkan di ‘Hapus’ saja.

Kode untuk Share Button yang kita buat tadi, sudah menggunakan kita sudah menggunakan CSS langsung didalam fungsi <div>, dan tentu saja didalam Tag Condition, karena tombol Share ini hanya akan aktif pada halaman-halaman posting saja.

/* share buttons */

.share-buttons-box {

  height: 67px;

  margin:20px 0 0;

  overflow:hidden;

}

.share-buttons {

  margin:0 0;

  height:67px;

  float:left;

}

.share-buttons .share {

  float:left;

  margin-right:10px;

  display:inline-block;

}

6. Simpan HTML Template anda, dan coba preview salah satu postingan anda.

Apakah Tombol Share anda sudah benar, tidak naik keatas, dan tidak menutupi Judul postingan.

Demikian tadi kerjaan mudah, tapi harus kita lakukan, jangan ditunda lagi. Jangan dibiarkan Tombol share artikel anda menutupi Judul postingan, bagi anda yang menggunakan template BroSense Responsive milik Mas Sugeng.

Semoga template anda kembali cantik, enak dipandang, dan makin Responsive. Salam Blogger, salam Newbie Abadi.

Bagikan Artikel ini via :

Share on fb Tweet Share on G+