simple share page versi mobile ala ritongablog UPDATED [BLOG]

Hei there, ketemu lagi kali ini ingin membahas simple share lagi yang versi mobile, setelah dioprek lagi sedikit. Oh ia kalau pembahasan yang lalu mengenai simple share page versi mobile ala ritongablog [BLOG] ada keanehan, atau merasa ganjil bisa coba pakai cara yang kedua ini. Kalau kamu merasa nyaman atau tidak ada masalah dengan artikel pertama, yah sudah diabaikan saja, so pilihan ada ditangan kamu juga kan?

Memang di blog saya ada yang dirasa kurang, oprek lagi, oprek lagi eh akhirnya dirasa pas dasar ga ada puas puasnya . Baiklah lagian juga basa basi harus singkat toh? hehehe..Pasang mata, berdoa dan semoga berhasil yah :)

• Dashboard - Template - Edit Template
•  WARNING : BACKUP n DWYOR!

CTRL +  F, Terus cari nih kode </style> , lalu pastekan kode tepat di atasnya :

#share-this{overflow:hidden;margin:10px 18px;line-height:1.4em}#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;width:44px;padding:0;text-align:center;height:41px;overflow:hidden;}#share-this a.this-gp i{margin:5px 0 0;text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFlydWPJIl3N1SkWAvAKVO2shrbch-gwK-ZH_c6LKfLS0123f0PrAbmodJm_2tpXmOq4hoWmrxVKzxvlVzmw-VKriGph7REPn6lE58zte_RkwYacoA_kGTKs-wpW9kD_yE30jyZZxV1hs/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}.gp-del{display:none}

.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}
@media screen and (max-width:5000px){#share-this{margin:10px 15px}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}}

Cari kode ]]></b:skin> dan pastekan tepat di atasnya :
a.bitz{background-color:#26A65B; border-bottom:none solid #37BC4A;}

Cari kode <div class='post-footer-line post-footer-line-2'>, pastekan tepat di bawahnya :

<b:if cond='data:top.showMobileShare'><div id='share-this'><a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Share on Twitter</a><a class='bitz' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#' title='Share on whatsapp'>Share on Whatsapp<i class='fa fa-whatsapp'/> </a><a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Share on Google+</span>
  </a> </div>
              </b:if>

Kalau error atau bermasalah ketika proses menyimpan, cari kode <b:if> dari kode di atas, posisi terakhir biasanya dan cukup menambahkan kode </div> seperlunya sampai tidak terjadi lagi error ketika proses save template. Done dan sekarang bisa kamu test hasilnya, semoga berhasil n Ciaoo!

Note 1 : [DEMO FOR DESKTOP] atau jika kamu memakai smartphone, cukup lihat hasilnya di akhir halaman ini.

[WARNING] khusus untuk Whatsapp share ini hanya work untuk saya, karena bawaan template blog yang saya gunakan, ini hanya sekedar catatan agar tidak repot bagi saya kedepannya. Jika kamu mengikuti tutorial ini,harap menghapus kode yang berbau whatsapp, selebihnya work!

Note 2 : Kalau kamu pengen tombol whatsapp sharepage di blog kamu,ikuti saja petunjuk di Addthis*com, Daftar dan pilih menu yang kamu suka dan di blog kamu. Gratis dan Semoga berhasil!