Cara Mengatasi Widget Tombol Berbagi Yang Berantakan Di Blog

"Berbagi itu indah", sebab manakala kita membaca artikel yang menarik ada hasrat ingin membagikan kembali melalui social media platforms yang dipergunakan. Dan bila anda seorang blogger tentu merasakan kesenangan sendiri dikala pengunjung ramai mendatangi blog yang kita kelola apapun itu bentuk platformnya pasti menyediakan widget social media platforms sebagai wadah untuk pengunjung agar sedianya menyebarluaskan kembali postingan yang dibuat mengandung nilai kemanfaatan bukan hanya bagi pengunjung itu sendiri akan tetapi untuk calon pembaca lain dari ketersediaan tombol berbagi dari blog/web.

Tujuan blog/web memasang widget tombol berbagi dengan ikon social media platform apapun sebagai penyambung artikel tentang perihal yang bersifat menyenangkan, favorit, dan layak untuk dibagikan dari situs sobat untuk teman/pengikut mereka. Dan ini merupakan berita bagus pada suatu blog, kelak blog sobat akan bertambah baik pada tingkat kepopuleran khususnya dijagad maya. Bila kita menatap pada CMS blogger telah banyak disediakan secara gratis dengan munculnya widget social media platform apapun itu secara default telah terpasang dan sengaja untuk dipergunakan bagi pemula blogger. Namun Google sebagai penyedia platform blog walaupun telah memperbaiki mekanisme sistem dan susunan html pada blog/blogspot, saya perhatikan belakangan ini tampilan widget tombol ikon scoial media platform terlihat melar/berantakan.

Berikut contoh gambarnya dibawah ini :

http://www.seratblog.ga/penyimpanan telepon/screenshot/IMG_20170802_233440.jpg
Contoh gambar ini diambil dari template brosense ver 2 milik Mas Sugeng.id dan sebab template ini pun akun adsense saya diterima, Saya haturkan banyak terima kasih buat mas sugeng dan semoga makin jaya juga dengan blognya. 

Dan pada gambar kedua diatas saya ambil contoh dari template evomagz dan fastest magz, dengan adanya eror/kesalahan pada pemasangan widget tombol berbagi ikon social media platform yang menurut saya template yang sangat bagus, responsive dan cocok untuk didaftarkan google adsense ini sebagian menutupi judul postingan. 

Bagi saya ataupun anda yang merasakan manfaat template blog diatas dan telah menjadi kesayangan bagi blogger lain patut diperhatikan sebab yang demikian sedikit mengurangi kenyamanan pembaca blog. Dan seharusnya penampakkan/pemasangan widget tombol ikon social media bagusnya pada posisi bawah, dan bukan posisi terexpand melebar keatas pada postingan blog dan menutupi judul artikel atau labels.
Dibaca juga :
  1. Cara Memasang Widget Top Komentar Disquss
  2. Tips Membuat Widget Tombol Berbagi Muat Dengan Cepat
Lalu, kasih informasi dong sobat bagaimana cara mengatasi atas pemasangan widget tombol berbagi soacial mesia tersebut agar lebih enak dipandang dan sedikit digeser supaya nyaman bagi pembaca juga
  • Cukup ganti skrip kode
  • Masuk ke akun blogget sobat
  • Jangan lupa membuat cadangan/backup template terlebih dahulu.
  • Klik edit HTML
Temukan kode skrip berikut dibawah ini, Kenapa? Karena skrip kode yang demikian bawaan template atau skrip lama.

<div style=’clear: both;’/>
     
        <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>
        <div style=’clear: both;’/>

Biasanya kode skrip diatas dibawah Post atau dibawah

<data:post.body/>

Hilangkan semua kode skrip lama tersebut dan ganti dengan skrip kode dibawah ini :


<div style=’clear: both;’/>
     
           <!– Social Share Scripts Start –>
                      <b:if cond=’data:post.isFirstPost’>
                        <!– Facebook –>
                        <div id=’fb-root’/>
                        <script>
                          (function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id)) {return;}
                            js = d.createElement(s); js.id = id;
                            js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
                            fjs.parentNode.insertBefore(js, fjs);
                          }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
                        </script>
                        <!– Google +1 –>
                        <script type=’text/javascript’>
                          (function() {
                            var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
                                                            po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                                                            var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
                                                            })();
                        </script>
                        <!– Twitter –>
                        <script>
                          !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
                      </b:if>
                      <!– Scripts End –>
                      <!– Horizontal social buttons Start –>
                      <div class=’horizontal-social-buttons’ style=’padding:10px 0 10px;’>
                        <!– Twitter –>
                        <div style=’float:left;’>
                          <a class=’twitter-share-button’ data-count=’horizontal’ data-lang=’en’ data-related=” data-via=” expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ href=’https://twitter.com/share’>
                            Tweet
                          </a>
                        </div>
                        <!– Google +1 –>
                        <div style=’float:left;’>
                          <g:plusone annotation=’bubble’ expr:href=’data:post.url’ size=’medium’/>
                        </div>
                        <!– Facebook Like+Send –>
                        <div style=’float:left;’>
                          <fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’true’ show_faces=’false’/>
                        </div>
                        <!– Pinterest Start –>
                        <b:if cond=’data:blog.pageType == &quot;item&quot;’>
                          <div id=’pin-wrapper’ style=’float: left; margin:0px 0px 0px 30px; width:44px;’>
                            <a data-pin-config=’beside’ data-pin-do=’buttonPin’ expr:href=’&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url’>
                              <img src=’//assets.pinterest.com/images/pidgets/pin_it_button.png’/>
                            </a>
                            <span style=’margin-left:-44px;’>
                              <a data-pin-config=’beside’ data-pin-do=’buttonBookmark’ href=’//pinterest.com/pin/create/button/’ style=’outline:none;border:none;’/>
                            </span>
                          </div>
                          <script src=’http://assets.pinterest.com/js/pinit.js’ type=’text/javascript’/>
                          <style type=’text/css’>
                            #pin-wrapper &gt; a {background-image:none !important;}
                          </style>
                        </b:if>
                        <!– Pinterest End –>
                      </div>
                      <div style=’clear: both;’/>
                      <!– Horizontal social buttons End –>
        <div style=’clear: both;’/>

Terakhir SAVE template

Pada solusi penyelesaian kesalahan tampilan widget tombol berbagi ini saya dapatkan dari Mas Sugeng sendiri sang pemilik template tersebut. Yuk simak caranya.
  • Tekan secara bersamaan CLTR + F untuk menemukan kode skrip dibawah ini
.share-buttons {
 margin:0 0;
 height:67px;
 float:left;
}
.share-buttons .share {
 float:left;
 margin-right:10px;
 display:inline-block;
}
.share-buttons .tweet {
 margin-top: 41px;
}

Seperti pada tahapan diatas hapus kode yang ditemukan diatas untuk diganti dengan kode skrip dibawah ini.


.share-buttonsx {
 margin:0 0;
 height:67px;
 float:left;
}
.share-buttonsx .share {
 float:left;
 margin-right:10px;
 display:inline-block;
}
.share-buttonsx .tweet {
 margin-top: 41px;
}

Kemudian langkah berikutnya temukan juga kode skrip dibawah ini.


<div class='share-buttons'>

Dihapus ya sobat kode diatas untuk digantikan oleh kode skrip dibawah ini.


<div class='share-buttonsx'>

Hai sobat, jika anda melihat kemunculan logo gambar Please Share:) pada tampilan desktop dan agar tidak muncul/hilangkan, cukup mengganti skrip kode berwarna HIJAU diatas dengan skrip kode dibawah ini.


.share-buttons-box {
 height: 67px;
 background: url(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 330px 10px;
 margin:20px 0 15px;
 overflow:hidden;

}
.share-buttonsx .share {
 float:left;
 margin-right:10px;
 display:inline-block;
}
.share-buttonsx .tweet {
 margin-top: 41px;
}

Terakhir SIMPAN template, sekian sudah artikel Cara Mengatasi Widget Tombol Berbagi Yang Berantakan Di Blog. Semoga tulisan yang dituangkan ini bisa diterapkan dan berhasil bagi sobat yang memperbaiki eror/kesalahan pemasangan widget tombol berbagi ikon social media platform.

2 20 komentar

Saya dulu pernah mengalami itu, dan saya langaung ganti template lagi. Baru tahu ternyata ada caranya, dulu saya search gak ada dan gak work.

Silahkan untuk dicoba tips diartikel ini gan.

PERATURAN BERKOMENTAR :

1. Dilarang Spam.
2. Dilarang Memasang Link Aktif.
3. Dilarang Menghina, Sara, Dan P*rn.
4. Dilarang Promosi.
5. Komentar Harus Relevan Dengan Artikel.
6. Terima Kasih..!!

Jika anda melanggar 5 point diatas, maka komentar anda akan kami hapus langsung tanpa pemberitahuan sebelumnya.
Terima kasih dan selamat berblogging ria.
EmoticonEmoticon