Membuat Slide Social Share Botton Di Bawah Postingan
Ini hanyalah sebagai alternatif jikalau Anda merasa bosan dengan tampilan social share widget yang telah ada di blog Anda. Memberikan efek slide pada social sharing widget ini risikonya memperlihatkan suasana yang lebih aktraktif pada halaman postingan blog Anda.
Kita menambahkan perintah dengan onclick event untuk membuat efek slide pada widgetnya dengan memanfaatkan margin pada widgetnya sehingga widgetnya dapat bergeser ke kiri atau ke kanan. Dengan perintah onclick event yang sederhana ini kita dapat membuat efek animasi pada sebuah element yang statis menyerupai pada animasi gif di bawah ini.
Tertarik untuk mencobanya? Silahkan copy kode-kode di bawah ini.
Kode CSS
Silahkan simpan di atas kode </style> atau ]]></b:skin>
#shareonbox{padding:0;position:relative;margin:20px 0;}
#sharebox{background-color:#fff;border: 1px solid #eee;box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);font-size:16px;padding:10px 0 11px 10px;position:relative;transition:all .8s ease-in-out;width:98%;margin-left:-800px;cursor:pointer;}
#sharetitle{background-color:#fff;border: 1px solid #eee;box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);font-size:14px;font-weight:700;font-family: 'Roboto', sans-serif;font-style:italic;padding:10px 0 11px 10px;position:absolute;top:0;left:0;width:98%;transition:all .8s ease-in-out;cursor:pointer;}
#sharetitle:hover{background:#eee;}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:0 8px 2px;margin-top:-4px;}
a.more:hover{background:#0f6bc9;}
Kemudian simpan isyarat HTML-nya di bawah isyarat yang menyerupai di bawah ini
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Kode HTML
<b:if cond='data:blog.pageType == "item"'>
<div id='shareonbox'>
<div id='sharebox' onclick='document.getElementById('sharetitle').style.left='0px';sharebox.style.margin='0 0 0 -800px';'>
<span class='title-share' style='float:left;margin-right:30px;font-size:18px;font-weight:700;font-family: Roboto, sans-serif;color:#666;text-transform:uppercase'>Share this article :</span>
<div style='margin-right:30px;margin-top:-1px;float:left;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
<div style='float:left;'>
<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>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>+</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
<div id='sharetitle' onclick='document.getElementById('sharetitle').style.left='-800px';sharebox.style.margin='0';'>
Apakah Anda menyukai postingan ini? Silahkan share dengan klik di sini
</div>
</div>
<div style='clear: both;'/>
</b:if>
Pastikan template Anda sudah mempunyai javascript SDK Facebook menyerupai di bawah ini 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>
Bagi templatenya yang memakai kode <!--</body>--></body> pastikan juga Anda sudah memasang javascript Google+ menyerupai di bawah ini
<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> Setelah itu silahkan SAVE template Anda dan lihat hasilnya di halaman postingan blog Anda. Selamat mencoba...
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Slide Social Share Botton Di Bawah Postingan"
Posting Komentar