Sebelumnya kita sudah membahas cara memasang social share tetapi berbeda style yaitu cara memasang social share button responsive dengan counter di blog. Berbeda dengan ini, yaitu social share button floating vertikal atau tombol sosial share media melayang vertikal pada postingan blog sobat. Dan sudah dijelaskan sebelumnya, dengan adanya tombol sosial share dapat memudahkan pembaca untuk membagikan artikel yang disukai ke sosial media tertentu.
Gambar diatas yaitu contoh social share button floating vertikal dengan count di blog
Tentu saja social share button ini juga dilengkapi fitur count yaitu jumlah yang dibagikan ke berbagai sosial media dan sudah Responsive. Berikut ini cara memasang social share button floating vertikal di blog
Tambahkan kode ini diatas kode
Pada kode yang ditandai yaitu kode margin: 0 0 0 -91px!important, sesuaikan posisi sosial share tersebut dengan blog sobat, ganti -91px nya dan sesuaikan, karena setiap template itu berbeda width nya.
Kemudian cari kode:
atau seperti ini:
Simpan kode HTML dibawah ini di ATAS
Langkah terakhir, simpan kode Javascript ini diatas kode
Simpan template, selesai
Silahkan sobat lihat hasilnya pada halaman postingan.
Gambar diatas yaitu contoh social share button floating vertikal dengan count di blog
Tentu saja social share button ini juga dilengkapi fitur count yaitu jumlah yang dibagikan ke berbagai sosial media dan sudah Responsive. Berikut ini cara memasang social share button floating vertikal di blog
Cara Memasang Social Share Button Floating Vertikal di Blog
Tambahkan kode ini diatas kode </head><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.don-share{width:50px;padding:10px 10px 5px;margin:0 0 0 -91px!important;background:#fff;border:1px solid #ddd;border-right:0;border-radius:4px 0 0 4px;position:fixed!important;z-index:99999;bottom:30%;float:left;display:inline-block!important}
.don-btn,.don-bubble-hover a .don-count,.don-share .don-btn-ico [class*=' don-ico-'],.don-share .don-btn-ico [class^=don-ico-]{width:50px!important}
.don-share .don-share-total:after{position:absolute;top:40px!important;bottom:0!important;left:0;width:50px!important;height:2px;background:#ccc;content:"";margin-left:0!important}
.don-share .don-share-total{line-height:18px;margin-right:0!important;position:relative!important;padding:0 0 15px!important}
.don-share [class*=' don-share-'],.don-share [class^=don-share-]{margin:0 0 6px!important}
.don-share .don-share-expand:before,.don-share.don-active .don-share-expand:before{line-height:20px!important}
@media screen and (max-width:800px){
.don-share{width:auto;margin:15px -10px 15px 0!important;padding:0;background:0 0;border:none;border-radius:0;position:relative!important;bottom:0;float:none;display:block!important}
.don-share [class*=' don-share-'],.don-share [class^=don-share-]{margin:0 10px 10px 0!important}
.don-share .don-share-total:after{position:absolute;top:0!important;bottom:0!important;left:50px;width:1px!important;height:100%;background:#ccc;content:"";margin-left:15px!important}
.don-share .don-share-total{line-height:18px;margin-right:30px!important;position:relative!important;padding:0!important}
.don-btn,.don-bubble-hover a .don-count,.don-share .don-btn-ico [class*=' don-ico-'],.don-share .don-btn-ico [class^=don-ico-]{width:45px!important}
}
/*]]>*/
</style>
</b:if>Pada kode yang ditandai yaitu kode margin: 0 0 0 -91px!important, sesuaikan posisi sosial share tersebut dengan blog sobat, ganti -91px nya dan sesuaikan, karena setiap template itu berbeda width nya.
Kemudian cari kode:
<b:includable id='post' var='post'>
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='//schema.org/BlogPosting'>
.............
.............
SIMPAN KODE HTML DI SINI
</div>
</b:includable>atau seperti ini:
<b:includable id='post' var='post'>
<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.............
.............
SIMPAN KODE HTML DI SINI
</article>
</b:includable>Simpan kode HTML dibawah ini di ATAS
</div> atau </article> (SIMPAN KODE HTML DI SINI)<b:if cond='data:blog.pageType == "item"'>
<div class="don-share" data-style="icons" data-limit="5">
<div class="don-share-total"></div>
<div class="don-share-facebook"></div>
<div class="don-share-twitter"></div>
<div class="don-share-google"></div>
<div class="don-share-linkedin"></div>
<div class="don-share-pinterest"></div>
<div class="don-share-tumblr"></div>
<div class="don-share-stumbleupon"></div>
<div class="don-share-reddit"></div>
<div class="don-share-buffer"></div>
<div class="don-share-pocket"></div>
</div>
</b:if>Langkah terakhir, simpan kode Javascript ini diatas kode
</body><b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/share-donreach.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>Simpan template, selesai
Silahkan sobat lihat hasilnya pada halaman postingan.
