Cara Memperbaiki Tombol Share Yang Tidak Beraturan

Ketika pengunjung blog kita sudah ramai, kita sangat membutuhkan sebuah elemen penyedia berbagi atau share yang nantinya blog kita akan dipergunakan untuk saling berbagi tentang berbagai hal favorit dari blog kita ke followers/teman mereka. Hal itu adalah kabar baik untuk suatu blog, sehingga Blog tersebut akan semakin populer khususnya dalam Ranah Social Media.

Dalam template CMS Blogger yang banyak tersedia secara gratis, Tombol Social Media atau Share biasanya sudah terpasang secara default dan siap di gunakan, tetapi akhir-akhir ini saya perhatikan banyak Tombol Social Share yang menjadi tidak beraturan, saya mengambil contoh dari Template BroSense V2 buatan Mas Sugeng dari Sugeng.id, tombol social share yang seharusnya berada di Posisi Bawah, mengekspansi jadi Melebar Ke Posisi Atas Post dan menutupi Judul dan Tags/Label.

Bagaimana cara memperbaikinya...? Ganti saja Code scriptnya, simak berikut ini:

1. Login ke Blogger

2. Masuk ke Tab Template

3. Backup Dulu Template anda Siapa tahu ada Hal Hal yang tak di inginkan..semacam mati Listrik ^_^

4. Pilih Edit HTML dan cari Code Script Social share yang lama Script Code Tombol Social Share yag lama biasanya seperti ini:

<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;'/>

Script biasanya berada di posisi di bawah Pos atau di bawah elemen seperti di bawah ini :

<data:post.body/>

5. Hapus semua Script code lama dan Ganti dengan Code Script 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;'/>

6. Dan Save...

Dan lihat kembali tampilan tombol share di blog sobat sudah berada di bawah postingan blog.

Tweet

Kirimkan Ini lewat EmailBlogThis!Bagikan ke XBerbagi ke FacebookBagikan ke Pinterest