Floating Vertical Social Share Buttons With Counter

Floating Vertical Social Share Buttons With Counter

Bola Hero Gawai

Floating Vertical Social Share Buttons With Counter

Floating Vertical Social Share Buttons With Counter
Masih dengan tombol berbagi sosmed dari Donreach yang dilengkapi dengan konter penghitung klik berbagi, kini saya akan bagikan floating vertical social share buttons with counter. Floating vertical social buttos with counter ini merupakan modifikasi dari Donreach social share buttons.

Kita ketahui bahwa Donreach hanya menyediakan horizontal social share buttons, oleh karena itu tombol berbagi ini saya modifikasi menjadi tombol vertical yang ditampilkan melayang di sisi blog sebagai alternatif lain untuk menggunakan tombol berbagi dari Donreach ini.

Selain dilengkapi dengan counter, tombol berbagi ini juga cukup ringan untuk disimpan di blog sehingga cocok untuk digunakan oleh blog yang mengutamakan kecepatan.


Untuk menggunakan atau membuat flotting vertical social buttons ini, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan simpan kode CSS di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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}
/*]]>*/
</style>
</b:if>

Perhatikan!
Kode margin:0 0 0 -91px!important; perlu di sesuaikan karena tiap blog biasanya berbeda-beda. Perhatikan kode -91px harus disesuaikan jika ternyata letak floating share button terlalu ke kiri atau mungkin kurang ke kiri. Jadi silahkan hitung untuk angka tersebut dengan menjumlah lebar widget + padding kiri .post atau margin kiri .post-body.

Lebar widget = 71px

UPDATE:
Ma'af sebelumnya saya tidak memperhatikan untuk tampilan mobile. Di tampilan mobile, tombol share ini tidak dibuat melayang karena akan menutupi postingan, jadi akan berada di bawah postingan. Untuk itu silahkan tambahkan kode CSS di bawah ini untuk tampilan mobile pada CSS di atas.


@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}
}

2. Langkah Kedua
Silahkan temukan kode seperti di bawah ini.


              <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 kode yang 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>

Kemudian silahkan simpan kode HTML di bawah ini pada kode di atas (SIMPAN KODE HTML DI SINI).


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

3. Langkah Ketiga
Silahkan simpan kode javascript ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

Selesai...kini blog Anda sudah memiliki flotting vertical social buttons with counter. Silahkan cek halaman postingannya.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×