Responsive Social Sharing Button Widget Blogger
Sebenarnya ini yakni bentuk social share button yang tidak asing lagi alasannya ini berisi tombol-tombol sharing default dari facebook, twitter, google+, dan linkedin kecuali tombol pin it yang aku ganti dengan image tanpa js pinterest.
Namun kali ini aku buat tampilan tombol-tombol share ini lebih rapih di banyak sekali ukuran device yang akan otomatis turun menyusun ke bawah.
Untuk demonya silahkan lihat pada gambar gif di bawah ini atau silahkan coba geser-geser sendiri kolom di halaman demo JsFiddle di link di bawah ini.
Kode CSS
.sharing-post{margin:20px auto;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;}
.entry-social .title-sharing-post{background:none;padding: 4px 5px 4px 0;width:130px;font-size:20px;font-family: 'Trebuchet MS', sans-serif;font-weight:400;text-transform:uppercase;display:none}
.entry-social .fb{padding: 7px 5px 7px 7px;width:130px;}
.entry-social .fb:hover{background-color: #324b81;}
.entry-social .twitter,.entry-social .gplus{padding: 7px 5px 2px 7px;}
.entry-social .twitter:hover{background-color: #01A7dE;}
.entry-social .gplus:hover{background-color: #BA3227;}
.entry-social .linkedin{padding: 7px 5px 0 7px;height:27px;}
.entry-social .linkedin:hover{background-color: #136F9B;}
.entry-social div.pinterest{width:107px;}
.entry-social .pinterest a{padding: 7px 7px 2px 7px}
.entry-social .pinterest a:hover{background-color: #B01C23;}
Jika ingin menampilkan goresan pena Sharing This, silahkan hapus isyarat display:none pada isyarat CSS .entry-social .title-sharing-post{....}
Kode HTML
<div class='sharing-post'>
<div class='entry-social'>
<div class='title-sharing-post'>Share This:</div>
<div class='fb'>
<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'>
<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>
</div>
<div class='gplus'>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>
</div>
<div class='linkedin'>
<script expr:data-url='data:post.url' type='IN/Share'></script>
</div>
<div class='pinterest'>
<a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=pinterest"' 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>
</div>
<div style='clear:both;'></div>
Kode Javascript
Ini yakni isyarat js untuk twitter, linkedin, dan facebook. kalau di antara isyarat di bawah ini sudah ada di template Anda, maka isyarat tersebut tidak perlu lagi di simpan di template Anda.
Simpan isyarat js twitter, google+ dan linkedin di bawah ini di atas isyarat </body>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script async='async' src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Simpan isyarat js facebook di bawah ini sempurna di bawah isyarat <body>
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Responsive Social Sharing Button Widget Blogger"
Posting Komentar