Cara Mengatasi Tombol Share Template BroSense

Akhdanz Kamvretz - Hallo sobat blogger, kali ini saya akan membagikan sebuah cara yaitu Cara Mengatasi Tombol Share Di Template BroSense yaps, udah tau dong dengan template BroSense ini? Template buatan Mas Sugeng yang bagus banget untuk ningkatin CTR iklan AdSense kalian. Bukan hanya untuk ningkatin CTR kelebihan template BroSense pun masih banyak saya akan menyebutkan kelebihan nya.

Fitur BroSense V1

• SEO
• Facebook Coments
• Share Button
• Loading Ngebut Banget
• Auto Readmore
• Breadcrumb
• Gampang di modifikasi ( Warna, Fonts )
• Responsive Desain
• Related Post
• Ningkatin CTR Iklan AdSense

Fitur BroSense Update V2

• Perbaikan Eror Data
• Pembaruan Struktur Data Template
• Penghapusan Javascript Thumbnail

Keren banget bukan? Tapi menurut saya setelah update v2 BroSense memiliki Bug yaitu Tombol Berbagi yang melayan bukan hanya brosense template evomagz pun sama, di judul Artikel tepatnya di di atas artikel, dan itu mengganggu menurut saya. Nah dari masalah itu saya membuat artikel ini untuk mengatasi tombol share template BroSense dengan mudah. Yuk di simak caranya.

1. Kalian masuk ke tema > Edit HTML

2. Keluar kan search box dengan menekan tombol CTRL + F dan cari kode

   <!-- iklan di bawah postingan taruh di sini -->

Jika sudah hapus kode ini, jika sobat kebingungan mencari kode di bawah ini. Kode ini terdapat di bawah kode.   <!-- iklan di bawah postingan taruh di sini -->

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

Masih bingung juga ini dia gambarnya. kode yang di tandai kode yang harus di hapus.

nah sebenarnya selesai sudah untuk mengatasi tombol berbagi brosense tapi jika tanpa tombol share artikel sobat sulit untuk di bagikan makanya saya juga sekalian akan membagikan tombol share nya.

1. Cari lagi kode ]]></b:skin> atau </style> dan pastekan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style> ( pilih salah satu )

/* CSS Tooltip */
.arlina-tooltip {position:relative;display:inline-block;}
.arlina-tooltip:before, .arlina-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;}
.arlina-tooltip:hover:before, .arlina-tooltip:hover:after {opacity:1;}
.arlina-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;} 
.arlina-tooltip:after {content:attr(data-arlina-tooltip)!important;background:#494158;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.arlina-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.arlina-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}

/* CSS Share Button */
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .share-post ul {padding:0;}
.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}

@media only screen and (max-width:640px){
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}}

@media screen and (max-width:480px) {
.share-post li{width:100%}}

2. Tambahkan kode di bawah ini tepat di atas <!-- Related Post Widget Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-post'>
              <ul>
                <li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
<div style='clear:both'/>
</b:if>

Selesai jangan lupa save dan tombol share tidak melayang lagi, nah itu dia cara mengatasi tombol share di template brosense dan nantikan artikel saya selanjutanya, semoga bermanfaat.

Catatan

Jika icon facebook, twitter, g+, tumblr dan pinterest tidak muncul tambahkan kode di bawah ini tepat di atas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika sudah di pasang font awesome nya tidak perlu menambahkan lagi.

Source tombol share : http://www.arlinadzgn.com/2016/02/memasang-widget-share-button-di-postingan.html