Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel

Menarik Lainnya

Cara Memasang Tombol Share Button Sosial Plus Whatsaap Ala Omipoel  - Pada kesempatan kali ini omipoel akan membagikan tutorial bagaimana cara memasang tombol share button yang simpel, keren dan juga Responsive ini disertai tombol sharing untuk Whatsaap.

Bagi sebuah blog, yang namanya dengan menu sharing sosial itu sangatlah diperlukan, ini bertujuan mempermudah Pengunjung untuk membagikan artikel yang dirasa bermanfaat ke jejaring sosial mereka seperti facebook, twitter, google plus dll.

Kelebihan Tombol Share Botton OI 1 adalah ditambahkannya tombol share whatsapp untuk mobile device.

Dan utuk membuat Tombol Menu Sharing atau Share Button itu tidaklah terlalu susah, Sobat cukuplah menerapkan Kode-kode dibawah ini yg sudah omipoel sediakan kedalam template Sobat.

SHARE BUTTON OI 1 :

Langkah Penerapannya :
1. Masuk Blogger,
2. Klik Template,
3. Klik Edit HTML

Selanjutnya cari kode seperti dibawah ini

<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>

4. Setelah itu taruh kode dibawah ini tepat dibawah kode diatas atau taruh dibawah kode seperti ini <data:post.body/> urutan kedua pada Template

<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
document.write('<span class="shared">SHARE</span>\
<a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" title="Share On Whatsapp"></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:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharelight"><div class="sharede"> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus gotea"></i></a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbtea"></i></a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter twtea"></i></a> \
    <span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
    <li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \
    <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
    <li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
    <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    </ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
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>
<div class='clear'/>

5. Kemudian Terapkan kode dibawah ini sebelum atau diatas kode ]]></b:skin> atau </style>

/* Share Button OI 1 WA */
.shared{font-weight:700;border:1px solid #333;font-size: 16px;background-color: #2c3e50;color: #fff;margin:0 4px 5px 0;padding:4px 8px;border-radius:4px;transition:all .3s;display:inline-block}
.wa_btn:after{display: inline-block;content: "\f232";font-family: fontAwesome;font-style: normal;font-weight:700;font-size: 16px;background-color: #29C534;color: #fff;margin:0 4px 5px 0;padding:6px 13px;border-radius:4px;transition:all .3s;}

/* Share Button OI 1 FULL */
.sharede,.sharelight{position:relative;display:inline-block;}
.sharelight{margin:0 auto 10px auto;}
.sharelight a.fb,.sharelight a.gp,.sharelight a.tw,.sharelight span.pl{text-decoration:none!important;display:inline-block;margin:0 3px 5px 0;font-weight:800;border-radius:4px;color:#fff;text-shadow:none;padding:6px 13px;opacity:1;transition:all .3s}
.sharelight a.gp {background:#f20000;}
.sharelight a.fb {background:#516ca4;}
.sharelight a.tw {background:#00baff;}
.sharelight span.pl {background:#ff6600}
.fbtea,.gotea,.plustea,.twtea{font-size:16px!important;vertical-align:middle;font-weight:800}
.sharelight a.fb:hover,.sharelight a.gp:hover,.sharelight a.tw:hover,.sharelight span.pl:hover{color:#fff;opacity:.9}
.sharelight a.fb:active,.sharelight a.gp:active,.sharelight a.tw:active,.sharelight span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
.dropdown-menu{position:absolute;bottom:100%;right:0;z-index:99;float:right;min-width:100px;padding:5px 10px;margin: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 #ddd;border-radius:3px;}
.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:600;display:block}
.dropdown-menu li a:hover{color:#e8554e!important}
ul#share-menu{margin:10px 0;padding:5px 15px}
#share-menu{display:none}

Simpan Template dan lihat hasilnya....