simple share page versi mobile ala ritongablog [BLOG]

Fix, akhirnya berhasil juga, setelah keluar masuk blog luar maupun dalam mengenai permasalahan yang sama dengan judul saya yang di atas. Dari sekian yang banyak yang saya masuki kebanyakan tutorialnya ga work ataupun kurang sreg, yah namanya juga wong simple pengen yang enak dipandang mata aja.

Oprek lagi oprek lagi, dan jadilah hasil seperti yang kamu lihat pada foto disamping, yah puas juga, karena mikir terus utak atik kodenya. Oh ia ini WORK pada blog saya, karena ini hanya catatan pertinggal buat saya agar tidak ribet keliling blog orang lagi.

Jika kamu tertarik ingin memasang tampilan seperti ini, yah sok atuh, gpp, Tentunya kode ini sudah saya OPREK sesuai dengan selera saya. Langsung saja, seperti biasa yah, pasti tahu dong! : DASHBOARD-TEMPLATE-EDIT

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 :

<div class='feet-icons'>
  <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></div>

Nah selamat, Share page yang kamu inginkan sudah jadi. Jika ga work di tempat kamu, mungkin saja hanya di penempatan kode saja. So keep oprek yah, n Ciaoo!

 

Note 1 : Jika kamu buka dari smartphone, cukup lihat di bawah 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!