✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel

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 hidangan sharing sosial itu sangatlah diperlukan, ini bertujuan mempermudah Pengunjung untuk membagikan artikel yang dirasa bermanfaat ke jejaring sosial mereka menyerupai facebook, twitter, google plus dll.

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

Dan utuk menciptakan 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 aba-aba menyerupai dibawah ini

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

4. Setelah itu taruh aba-aba dibawah ini sempurna dibawah aba-aba diatas atau taruh dibawah aba-aba menyerupai 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="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel"></a>\ '); if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/j4vascript";s.src="http://yourj4vascript.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/j4vascript'> //<![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="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">\     <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="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">\     <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="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">\     <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="j4vascript:pinIt();">Pinterest</a></li> \     <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">Digg</a></li> \     <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">Linkedin</a></li> \     <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">Stumbleupon</a></li> \     <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">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="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">Tumblr</a></li> \     <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">BufferApp</a></li> \     <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">Pocket</a></li> \     <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="✔ Cara Memasang Tombol Share Button Sosial Plus Whatsapp Keren Ala Omipoel">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/j4vascript"),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 aba-aba dibawah ini sebelum atau diatas aba-aba ]]></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....

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: