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='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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!
