simple whatsapp sharepage versi desktop dan mobile blog

Hei sobat blog, ketemu lagi. Semoga tidak bosan main main kesini yah, soalnya disini dijamin bebas pungli hehehe, kayak jalanan aja.. Oh ia saya mau menyambung masalah share page kemarin di simple share page versi mobile ala ritongablog UPDATED [BLOG].Sedikit masalah muncul saat saya mencoba membuka halaman blog ini di tablet device. Masalahnya adalah halaman tersebut dibuka dalam versi desktop, bukan mobile. Soo yah tampilan sharepage whatsappnya ga muncul dong.

Sempat termenung sebentar sampai mendapat ide, oh ia kenapa tidak dibuat 2 versi berbeda? akhirnya dengan modal nekat dan memakai asumsi seadanya, akhirnya saya oprek lagi nih template. Daan hasilnya, syukurlah work, tampilan sharepage antara versi desktop dan mobile akhrinya berbeda, begitu pula dengan tampilan icon whatsappnya.

Bagi kamu yang ingin menjadikan ini sebagai referensi, yah sok atuh silahkan, dan jika ga work, itu mungkin pengaruh template yang digunakan, silahkan mencari referensi lengkap dari luar blog ini.

Ok dilanjut saja seperti biasa, Dashboard - Template - Backup [Optional] - Edit template. Perlu diingat kode warna hijau adalah versi desktop, sedangkan versi biru adalah versi mobile.

CTRL + F dan cari kode <b:skin>, lalu pastekan kode berikut tepat dibawahnya :

a.bitz2{color:#37BC4A; border-bottom:3px solid #37BC4A;}
a.bitz{color:#37BC4A; border-bottom:3px solid #37BC4[A];}

So kita lanjut ke tahap selanjutnya. cari //<![CDATA[ dan pastikan kode berikut dibawahnya, yang penting masih dalam lingkup </script> dengan kata lain jangan diletakkan diluarnya. Biasanya posisi tersebut terletak di atas kode </head>.

$(document).ready(function() {$(document).on(&quot;click&quot;, &#39;.bitz&#39;, function() {if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {var text = $(this).attr(&quot;data-text&quot;);var url = $(this).attr(&quot;data-href&quot;);var message = encodeURIComponent(text) + &quot; - &quot; + encodeURIComponent(url);var whatsapp_url = &quot;whatsapp://send?text=&quot; + message;window.location.href = whatsapp_url;} else {alert(&quot;This function works on Mobile Device only&quot;);}});});
$(function() {$.fn.scrollToTop = function() {$(this).hide().removeAttr(&quot;href&quot;); if ($(window).scrollTop() != &quot;0&quot;) {       $(this).fadeIn(&quot;slow&quot;)} var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == &quot;0&quot;) {       $(scrollDiv).fadeOut(&quot;slow&quot;) } else { $(scrollDiv).fadeIn(&quot;slow&quot;) } }); $(this).click(function() { $(&quot;html, body&quot;).animate({ scrollTop: 0 }, &quot;slow&quot;) }) } }); $(function() {$(&quot;#MD-StoTop&quot;).scrollToTop();});

$(document).ready(function() {$(document).on(&quot;click&quot;, &#39;.bitz2&#39;, function() {if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {var text = $(this).attr(&quot;data-text&quot;);var url = $(this).attr(&quot;data-href&quot;);var message = encodeURIComponent(text) + &quot; - &quot; + encodeURIComponent(url);var whatsapp_url = &quot;whatsapp://send?text=&quot; + message;window.location.href = whatsapp_url;} else {alert(&quot;This function works on Mobile Device only&quot;);}});});
$(function() {$.fn.scrollToTop = function() {$(this).hide().removeAttr(&quot;href&quot;); if ($(window).scrollTop() != &quot;0&quot;) {       $(this).fadeIn(&quot;slow&quot;)} var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == &quot;0&quot;) {       $(scrollDiv).fadeOut(&quot;slow&quot;) } else { $(scrollDiv).fadeIn(&quot;slow&quot;) } }); $(this).click(function() { $(&quot;html, body&quot;).animate({ scrollTop: 0 }, &quot;slow&quot;) }) } }); $(function() {$(&quot;#MD-StoTop&quot;).scrollToTop();});

Nah sekarang cari <div class='post-footer-line post-footer-line-2'> yang berada di posisi pertama , lalu pastekan kode versi desktop berikut tepat di bawahnya.

<a class='bitz2' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#' title='Share on whatsapp'><i class='fa fa-whatsapp'/> </a>

atau kamu bisa sejajarkan dengan icon sharepage lainnya yang masih di dalam tag <div> .. </div>

Kemudian cari <div class='post-footer-line post-footer-line-2'> yang berada di posisi kedua, lalu pastekan kode versi mobile berikut tepat dibawahnya.

<b:if cond='data:top.showMobileShare'>
               <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/> </a>
                </div>
                <b:if cond='data:top.showDummy'/><a class='bitz' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#' title='Share on whatsapp'><i class='fa fa-whatsapp'/> </a>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>

Jika kode <b:if> sudah ada, kamu cukup menempatkan kode whatsapp tersebut di antaranya, sesuai dengan kode di atas. Atau kamu bisa paste secara keseluruhan jika kode tersebut belum ada.

Done! Sesuaikan tata letaknya sesuai dengan keinginan kamu. Kembali mengingatkan, jika tidak work di tempat kamu, alasannya sudah saya bahas di atas. Cara cepatnya silahkan cari referensi yang lengkap dari luar blog ini. Semoga berhasil, keep working, and Ciaoo!