› › › ›

Social Share Button Kompi Ajaib

Sabtu, 22 September 2018 Add Comment Edit
Sebenarnya aku sudah membagikan cara menciptakan social share button ini, namun lalu aku sendiri merubah sedikit tampilannya untuk aku pakai sendiri hingga ketika ini. Dan tombol membuatkan ini juga sudah aku pasang di template Kompi Males dan template Kompi Flexible.

Namun kalau Anda sedikit kesulitan untuk mengambil kode-kodenya dari template Kompi Males, sekarang aku share kode-kode social share button Kompi Ajaib ini semoga gampang untuk mencobanya di blog Anda.

Untuk mencobanya silahkan copy kode-kode di bawah ini.

1. Kode CSS
Simpan isyarat CSS di bawah ini di atas isyarat </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 .share,h2.sharetitle{display:block;float:left}
 h2.sharetitle{font-size:18px;margin-top:15px!important;font-weight:500;line-height:1.4em}
 .share,.sharethis{position:relative}
 .sharethis{margin:10px 0 10px 20px;}
 .sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{cursor:pointer;text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-size:12px;font-weight:300;border-radius:3px;color:#777!important;background:#f8f8f8;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .4s ease-in-out}
 .fbi,.goplus,.pplus,.tewe{font-size:18px!important;margin-top:1px;vertical-align:middle}
 .sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#555;background:#fafafa;border:1px solid #999}
 .sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
 #share-menu{display:none}
 .dropdown-menu{position:absolute;top:100%;right:5px;z-index:1000;max-width:100px;padding:5px 10px;margin:0!important;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:300;display:block}
 .dropdown-menu li a:hover{color:#e8554e!important}
 .share-whatapp{display:block;font-size: 18px;font-weight: 500;margin-bottom:5px;margin-left:20px}
 .clear{clear:both}
 </style>
 </b:if>

2. Kode HTML
Copy isyarat HTML di bawah ini:

 <b:includable id='share-tool' var='post'>
 <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 Kompi Ajaib">\
     <i class="fa fa-google-plus goplus"></i> Google</a> \
 <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Social Share Button Kompi Ajaib">\
     <i class="fa fa-facebook fbi"></i> Facebook</a> \
 <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Social Share Button Kompi Ajaib">\
     <i class="fa fa-twitter tewe"></i> Twitter</a> \
     <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \
 <ul class="dropdown-menu" id="share-menu"> \
     <li><a href="javascript:pinIt();">Pinterest</a></li>\
     <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Social Share Button Kompi Ajaib">Digg</a></li> \
     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Social Share Button Kompi Ajaib">Linkedin</a></li> \
     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Stumbleupon</a></li> \
     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Social Share Button Kompi Ajaib">Delicious</a></li> \
     <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Tumblr</a></li> \
     <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Social Share Button Kompi Ajaib">BufferApp</a></li> \
     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Pocket</a></li> \
     <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Evernote</a></li> \
     <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Social Share Button Kompi Ajaib">Reddit</a></li> \
     </ul> \
 </div>\
 <div class="clear"></div></div> \
 ');
 function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
 //]]>
 </script>
 <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <script>
 //<![CDATA[
 var whatsurl = window.location.href;
 var whattitle=encodeURIComponent(document.title);
 var whattitle_esc=unescape(whattitle);
 document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
 <a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Social Share Button Kompi Ajaib">\
 Share</a>\
 ');
 if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
 //]]>
 </script>
 </b:if>
 </b:includable>

Dan simpan sempurna di bawah isyarat berikut:

 <b:includable id='post' var='post'>
 ............
 ............
 ............
 </b:includable>

Sehingga penampakannya akan menyerupai berikut

 <b:includable id='post' var='post'>
 ............
 ............
 ............
 </b:includable>
 <b:includable id='share-tool' var='post'>
 <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 Kompi Ajaib">\
     <i class="fa fa-google-plus goplus"></i> Google</a> \
 <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Social Share Button Kompi Ajaib">\
     <i class="fa fa-facebook fbi"></i> Facebook</a> \
 <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Social Share Button Kompi Ajaib">\
     <i class="fa fa-twitter tewe"></i> Twitter</a> \
     <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \
 <ul class="dropdown-menu" id="share-menu"> \
     <li><a href="javascript:pinIt();">Pinterest</a></li>\
     <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Social Share Button Kompi Ajaib">Digg</a></li> \
     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Social Share Button Kompi Ajaib">Linkedin</a></li> \
     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Stumbleupon</a></li> \
     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Social Share Button Kompi Ajaib">Delicious</a></li> \
     <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Tumblr</a></li> \
     <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Social Share Button Kompi Ajaib">BufferApp</a></li> \
     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Pocket</a></li> \
     <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Social Share Button Kompi Ajaib">Evernote</a></li> \
     <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Social Share Button Kompi Ajaib">Reddit</a></li> \
     </ul> \
 </div>\
 <div class="clear"></div></div> \
 ');
 function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
 //]]>
 </script>
 <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <script>
 //<![CDATA[
 var whatsurl = window.location.href;
 var whattitle=encodeURIComponent(document.title);
 var whattitle_esc=unescape(whattitle);
 document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
 <a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Social Share Button Kompi Ajaib">\
 Share</a>\
 ');
 if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
 //]]>
 </script>
 </b:if>
 </b:includable>

Kemudian copy isyarat di bawah ini.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <h2 class='sharetitle'>Share this:</h2>
 <div class='clear'/>
 <b:include data='post' name='share-tool'/>
 </b:if>

Dan simpan di bawah postingan, cari isyarat menyerupai atau menyerupai isyarat di bawah ini.

 ...............
 ...............
       <data:post.body/>
       <div style='clear: both;'/> <!-- clear for photos floats -->
     </div>

Sehingga penampakannya menyerupai di bawah ini

 ...............
 ...............
       <data:post.body/>
       <div style='clear: both;'/> <!-- clear for photos floats -->
     </div>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <h2 class='sharetitle'>Share this:</h2>
 <div class='clear'/>
 <b:include data='post' name='share-tool'/>
 </b:if>

3. Kode Javascript
Simpan isyarat Javascript di bawah ini di atas isyarat </body>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
 var boxArray2=["share-menu"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray2.length;r++){var o=document.getElementById(boxArray2[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}});
 //]]>
 </script>
 </b:if>

Tombol membuatkan ini memakai Font Awesome, jadi pastingan Anda sudah memasang Font Awesome di blog Anda.

Dan tombol ini juga dilengkapi dengan tombol membuatkan Whatsapp yang akan tampil hanya di mobile device.


Sumber https://www.kompiajaib.com/

0 Response to "Social Share Button Kompi Ajaib"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel