Social Share Button No Js With Javascript
Beberapa waktu yang kemudian telah membagikan share button yang melayang di pinggir blog dengan javascript. Nah kali ini aku modifikasi share button tersebut dan menjadikannya statis dan berjejer ke samping biar dapat disimpan di bawah artikel postingan.Kemudian aku juga menambahkan link share ke lebih banyak sosial media lainnya ibarat Digg, Linkedin, Stumbleupon, Delicious, Tumblr, BufferApp, Pocket, dan Evernote. Link-link sharing sosmed tersebut aku buat show hide dengan klik pada tombol Plus ibarat tampak pada gambar aniasi gif di atas tadi.
Social Share Button ini tidak menyertakan js dari masing-masing share button, hanya memakai link share saja sehingga tidak akan membebani loading blog. Dan untuk show hide link tambahannya aku membuatnya menjadi 2 versi yang memakai javascript dan jquery sehingga jikalau versi javascriptnya tidak jalan dapat mencoba memakai versi jquery.
Jika ingin mencobanya, silahkan copy kode-kode di bawah ini.
Kode CSS
Simpan aba-aba css ini di atas kode
]]></b:skin> atau </style> .share,h2.sharetitle{display:inline-block;float:left;margin-right:10px}
h2.sharetitle{font-size:24px;margin-top:6px;font-weight:600}
.sharethis{position:relative;margin-bottom:20px}
.share{position:relative;}
a.gp{color:#ba3227}
a.fb{color:#324b81}
a.tw{color:#01a7de}
a.pr{color:#0a7111}
span.pl{color:green;cursor:pointer}
a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px}
#share-menu{display:none}
.dropdown-menu{position: absolute;top: 100%;right:2px;z-index: 1000;float: left;min-width: 100px;padding: 5px 10px;margin: 2px 0 0;font-size: 14px;text-align: left;list-style: none;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0,0,0,.15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);}
.dropdown-menu li{list-style: none!important;margin: 0!important;padding-left:0!important;line-height: 1.8em!important;}
.dropdown-menu li a{color:#333!important;font-weight:400;display:block}
.dropdown-menu li a:hover{color:#e8554e!important;}
Kemudian simpan kode-kode javascript di bawah aba-aba ini atau yang ibarat ini
<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 class='clear'/> <!-- clear for photos floats -->
</div>
Kode Javascript
1. Show Hide Dengan Javascript
<b:if cond='data:blog.pageType == "item"'>
<h2 class='sharetitle'>Share this:</h2>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=KompiAjaib&related=kompiajaib" target="_blank" title="Social Share Button No JS With Javascript">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a> \
<span class="fa-stack fa-lg pl" data-target="#share-menu"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
<li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">Digg</a></li> \
<li><a href="//www.linkedin.com/shareArticle?mini=true&url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">Linkedin</a></li> \
<li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Stumbleupon</a></li> \
<li><a href="//delicious.com/post?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Delicious</a></li> \
<li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Tumblr</a></li> \
<li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">BufferApp</a></li> \
<li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Pocket</a></li> \
<li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Evernote</a></li> \
</ul> \
</div><div class="clear"></div></div> \
');
var button=document.querySelector(".pl");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"});
//]]>
</script>
</b:if>
Ganti aba-aba
KompiAjaib yang aku marking dengan username Twitter Anda.2. Show Hide Dengan Jquery
Pastikan Anda sudah menyimpan Jquery Library berapa pun versinya di blog Anda.
<b:if cond='data:blog.pageType == "item"'>
<h2 class='sharetitle'>Share this:</h2>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=KompiAjaib&related=kompiajaib" target="_blank" title="Social Share Button No JS With Javascript">\
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a> \
<span class="fa-stack fa-lg pl"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
<li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">Digg</a></li> \
<li><a href="//www.linkedin.com/shareArticle?mini=true&url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">Linkedin</a></li> \
<li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Stumbleupon</a></li> \
<li><a href="//delicious.com/post?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Delicious</a></li> \
<li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Tumblr</a></li> \
<li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Social Share Button No JS With Javascript">BufferApp</a></li> \
<li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Pocket</a></li> \
<li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button No JS With Javascript">Evernote</a></li> \
</ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
//]]>
</script>
</b:if>
Ganti aba-aba
KompiAjaib yang aku marking dengan username Twitter Anda.Karena share button ini memakai ikon Font Awesome, jadi pastikan Anda sudah memasang Font Awesome di blog Anda. Social Share Button ini dapat dipasang di Blogger maupun Wordpress.
Karena aba-aba CSS tiap blog berbeda-beda, maka adakala dapat menghipnotis aba-aba css widget yang gres di pasang ibarat widget ini khususnya untuk posisi ikon font awesome. Jika posisi ikonnya tidak berada di tengah, maka silahkan sesuaikan posisi
left pada css di bawah ini. a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px}
0 Response to "Social Share Button No Js With Javascript"
Posting Komentar