Widget Share Pop Up Untuk Blogger

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
December 03, 2017

Selamat malam blogger Apakah Anda mencari cara yang ramping dan bergaya untuk menampilkan widget berbagi sosial Anda atau dengan cara yang lebih fashionable? Tidak terlihat lagi karena kami telah membuatnya dengan Jquery sederhana dengan tampilan datar dan bergaya.

Widget berbagi sosial ini tidak biasa seperti sharer lainnya, karena slide di kanan setelah pemirsa atau pembaca Anda menyelesaikan artikel Anda! Ya, ini akan memungkinkan pengguna Anda untuk berbagi konten Anda di jejaring sosial kapan pun mereka selesai membaca. Ingin? Ikuti saja langkah-langkah sederhana ini untuk membuatnya bekerja di blog Anda sekarang juga.


Langsung saja berikut caranya dibawah ini.

HTML
1. Pergi ke Blogger
2. Template
3. Backup Template Anda untuk menghindari kemungkinan yang tidak di inginkan
4. Edit HTML
5. Salin kode berikut dan paste sebelum </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mba-social-sharing'>
<div class='closethis'><i class='fa fa-times'/></div>
<h1>Share this page.</h1>
<p>If you liked this post share it with your friends!</p>
<ul>
<li class='fb'><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/><br/>Facebook</a></li>
<li class='tw'><a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/><br/>Twitter</a></li>
<li class='gp'><a expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'/><br/>Google Plus</a></li>
<li class='re'><a expr:href='&quot;https://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><i class='fa fa-reddit'/><br/>Reddit</a></li>
<li class='in'><a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' id='linkedin' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/><br/>Linkedin</a></li>
<li class='st'><a expr:href='&quot;https://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Delicious'><i class='fa fa-delicious'/><br/>Delicious</a></li>
</ul></div></b:if>
CSS
6. Cari ]]> </b:skin> lalu tambahkan kode css ini terlebih dahulu tepat di atasnya
#mba-social-sharing ul{display:block;position:relative;line-height:2em!important}#mba-social-sharing{z-index:9999999999;transition:all .2s;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;position:fixed;bottom:-240px;right:-400px;width:400px;height:240px;display:block;background:#fff;border:1px solid #eaeaea;padding:10px 15px;font-size:12px;color:#666}#mba-social-sharing h1{font-size:22px;font-weight:400;line-height:18px;padding:0!important;margin:5px 0 0 5px!important}#mba-social-sharing p{margin:0 0 0 5px!important}#mba-social-sharing ul li{float:left;display:inline-block;margin:5px}#mba-social-sharing ul li a{font-size:12px;color:#fff;width:111.6px;padding:10px 0 5px;text-align:center;display:block;border-radius:3px}#mba-social-sharing ul li a:hover{text-decoration:none;opacity:.9}#mba-social-sharing ul li a i{font-size:16px;padding:10px;border-radius:100%;background:rgba(0,0,0,.1)}#mba-social-sharing ul li.fb a i{padding:10px 14px}#mba-social-sharing ul li.fb a{background:#38559b}#mba-social-sharing ul li.tw a{background:#00aaf2}#mba-social-sharing ul li.gp a{background:#d74628}#mba-social-sharing ul li.re a{background:#f04a24}#mba-social-sharing ul li.in a{background:#12689b}#mba-social-sharing ul li.st a{background:#f04f23}.come-in{transform:translate(-400px,-240px);-moz-transform:translate(-400px,-240px);-webkit-transform:translate(-400px,-240px);-o-transform:translate(-400px,-240px)}.come-back{transform:translate(0,0);-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0)}.closethis{position:absolute;right:10px;top:0;cursor:pointer}
JavaScript
7. Temukan (ctrl + f) </body>
8. Salin kode berikut dan paste sebelum </body>
<b:if cond='data:blog.pageType == "item"'><script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(o){var a=o(".post-footer").offset().top
setInterval(function(){o(window).scrollTop()>=a&&o("#mba-social-sharing").addClass("come-in")},0)
o(".closethis").click(function(){o("#mba-social-sharing").addClass("come-back")})})//]]>
</script><b:if>
Selesai ..

Saya sarankan kepada anda untuk menggunakan widget share ini, di samping elegan dan tidak mengganggu pengunjung website.


Artikel Menarik Lainnya

SUBSCRIBE TO OUR NEWSLETTER