Slide Overlay On Responsive Social Share Button

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

Karena kemarin aku memilih tinggi backgroundnya dengan padding yang kadang tingginya dapat berubah dikala disimpan di blog yang berbeda, maka kali ini aku memperbaiki tinggi background pada tiap-tiap share button dengan pribadi memilih tingginya sehingga dikala 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.

Baca juga: Responsive Social Sharing Button Widget Blogger

Tentunya instruksi CSS dan HTML share button ini ada yang berubah dari kode-kode share button sebelumnya, jadi bagi Anda yang kemarin sudah memakai button sebelumnya dan ingin mencoba dengan yang ini, silahkan ganti instruksi 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHkgiAaGnE1vdeD0JIB_TCC84yW2cvwG96r_2UZs5ePuPEMIN2WxOR0TL0JEelWjdd6Mv0UfFBTWRy1mwALm4qRGKOAo6ZKv6b-YOcGp1MUEe1O2Fc2p0iqKeFhuVR5tZWAIidAQg-gAI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTj8XKgGXBPYdRlxoxGd53lQMfiiPrW2ffyVQ0HHI2StTbmL4cE_brw2jaIUJjf3UKJUQmSmY5E88YSFKpVSL93soFzfqZYt4_VwbuFdcGwZJ72KKiMkJ3qe6UW4gLLf9C-xKo3gZ3IAb/s1600/iconprinter.png' title='Print This Page' width='16'/></a>
 </div>
 </div>
 </div>
   <div style='clear:both'/>
 </b:if>

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

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

Sumber https://www.kompiajaib.com/

Share this post