Slide Overlay On Responsive Social Share Button

Slide Overlay On Responsive Social Share Button

Bola Hero Gawai

Slide Overlay On Responsive Social Share Button

Sekalian memperbaiki responsive social sharing button yang kemarin saya buat untuk tinggi tiap-tiap background share button, kali ini saya menambahkan slide overlay atau penutup button share-nya yang akan terbuka atau bergeser ketika di-hover mouse.

Karena kemarin saya menentukan tinggi backgroundnya dengan padding yang kadang tingginya bisa berubah ketika disimpan di blog yang berbeda, maka kali ini saya memperbaiki tinggi background pada tiap-tiap share button dengan langsung menentukan tingginya sehingga ketika disimpan di blog yang berbeda maka tinggi backgroundnya akan tetap sama. Untuk demo slide overlay pada responsive social share button ini silahkan lihat pada gambar gif di bawah ini.

Responsive Social Share Button

Baca juga: Responsive Social Sharing Button Widget Blogger

Tentunya kode CSS dan HTML share button ini ada yang berubah dari kode-kode share button sebelumnya, jadi bagi Anda yang kemarin sudah menggunakan button sebelumnya dan ingin mencoba dengan yang ini, silahkan ganti kode CSS dan HTML-nya dengan kode-kode di bawah ini.

Kode CSS


.sharing-post{margin:20px 0;overflow: hidden;}
.entry-social{overflow: hidden;}
.entry-social a{display: block;padding:0px;color: #FFFFFF !important;font-weight: 300;font-size:12px;}
.entry-social div{float: left;margin-right: 5px;width:95px;background-color: #ccc;margin-top:5px;transition:all .4s ease-in-out;position:relative}
.entry-social .title-sharing-post{padding:0 7px;width:130px;height:30px;line-height:30px;font-size:20px;font-family: 'Trebuchet MS', sans-serif;font-weight:400;text-transform:uppercase;border-bottom:4px solid #333}
.entry-social .fb{background-color: #324b81;padding: 0 7px;width:130px;height:34px;line-height:34px;}
.entry-social .twitter,.entry-social .gplus{padding: 0 7px;height:34px;line-height:34px;}
.entry-social .twitter{background-color: #01A7dE;}
.entry-social .gplus{background-color: #BA3227;}
.entry-social .linkedin{background-color: #136F9B;padding: 0 7px;;height:34px;line-height:34px;}
.entry-social div.pinterest{width:109px;height:34px;line-height:34px;}
.entry-social div.pinterest img{margin-top:-1px;vertical-align:middle}
.entry-social .pinterest a{background-color: #B01C23;padding:0 7px}
.entry-social div.printblog{width:35px;height:30px;border-bottom:4px solid #333}
.entry-social .printblog a{padding: 7px 7px 4px 9px;transition:all 0.4s ease-in-out}
.entry-social .printblog a:hover{background-color: #333;}
.slide-share{background:#ccc;z-index:2;left:0;top:0;right:0;bottom:0;position:absolute;text-align:center;line-height:7px;color:#333;transition:all 0.4s ease-in-out;height:30px;cursor:pointer}
.entry-social .fb:hover .slide-share,.entry-social .twitter:hover .slide-share,.entry-social .gplus:hover .slide-share,.entry-social .linkedin:hover .slide-share,.entry-social .pinterest:hover .slide-share{left:140px;opacity:0}

Kode HTML


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharing-post'>
<div class='entry-social'>
<div class='title-sharing-post'>Share This:</div>
<div class='fb'>
<span class='slide-share'>
<p>Facebook</p>
</span>
<span style='position:absolute;top:-7px;'>
<span class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</span>
  </div>
<div class='twitter'>
<span class='slide-share'>
<p>Twitter</p>
</span>
<span style='position:absolute;top:5px;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
</span>
  </div>
<div class='gplus'>
<span class='slide-share'>
<p>Google+</p>
</span>
<span style='position:absolute;top:5px;'>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>  
</span>
  </div>
<div class='linkedin'>
<span class='slide-share'>
<p>Linkedin</p>
</span>
<span style='position:absolute;top:7px;'>
<script expr:data-url='data:post.url' type='IN/Share'></script>
</span>
  </div>
<div class='pinterest'>
<span class='slide-share'>
<p>Pinterest</p>
</span>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Pin It'><img alt='pinit' height='21' src='http://2.bp.blogspot.com/-GBohPdcIzF8/U_mMASBohHI/AAAAAAAAde8/ugBc_zbc6Fo/s1600/PinExt.png' title='Pin It' width='43'/></a>
</div>
<div class='printblog'>
<a href='javascript:print(document)' title='Print This Blog'><img alt='print' height='16' src='http://1.bp.blogspot.com/-10ufvnCtIJM/UPo6JsA2VOI/AAAAAAAAVUY/MV8Pa2Kr7yI/s1600/iconprinter.png' title='Print This Page' width='16'/></a>
</div>
</div>
</div>
  <div style='clear:both'/>
</b:if>

Jika tidak ingin menyertakan tulisan Share This: silahkan tambahkan kode display:none pada kode CSS .entry-social .title-sharing-post.

Kode Javascript
Untuk kode javascript-nya silahkan lihat lagi pada postingan sebelumnya pada link di atas, jika sudah ada kode-kode javascript tersebut maka tidak perlu lagi menyimpannya di template.

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!

×
×
×