Senin, 06 Mei 2019

Widget tombol Whatsapp Melayang untuk Blogger dan Wordpress

Widget tombol Whatsapp Melayang untuk Blogger dan Wordpress, Awalnya mulai saya pakai ini bukan untuk wa tapi suka sama melayangnya,

Alternatif 1

<div style="position: fixed; bottom: 0px; Left: 10px;width:130px;height:160px;"><a href="http://aniefborneo.blogspot.com/" target="_blank"><img border="0" src="http://i1107.photobucket.com/albums/h385/bogel4/DeidaraBird.gif " title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://aniefborneo.blogspot.com/" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

terus cari cari lagi ketemu:
Alternatif 2

<div class="widget HTML" data-version="1" id="HTML10"><br /><div class="widget-content"><br /><div style="bottom: 0; display: scroll; position: fixed; right: 0;"><a href="https://api.whatsapp.com/send?phone=628113301109&text=Hallo%2C%20mohon%20info%20tentang%20Roove%20Beauty.%20Terimakasih." target="_blank"><img border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLvRoezK5HfSQHu7VZZyE5OeYcXV-apoL0kttOyb0Aww9ShT52Exo-jgiz1-yGdXue4kyHHxv2hKQjld_lsw-hJ5-CMO5dbiAvlpxb1z7O5RKVXc_kpnu0CwTnxJU_fbYKAkpql5Ulohre/s200/nia+wa.png" width="180" / /></a></div><br /></div><br /><div class="clear"></div><br /><span class="widget-item-control"><br /><span class="item-control blog-admin"><br /><a class="quickedit" href="https://www.blogger.com/rearrange?blogID=5583676110771538268&amp;widgetType=HTML&amp;widgetId=HTML10&amp;action=editWidget&amp;sectionId=sidebar2" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML10&quot;));" rel="nofollow" target="configHTML10" title="Edit"><br /><img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18" / /><br /></a><br /></span><br /></span><br /><div class="clear"></div><br /></div>

setelah coba di utak utik, alternatif kedua lebih panjang dan ribet untuk di lihat sekilas,

akhirnya kembali ke alternatif 1, cuman agak di modif dikit.
kita coba bahas 1 per satu ya

Ini Sudah Rumus untuk agar supata tampil melayang, dan kata Left bisa di ganti ke Right, sementara untuk width dan height menentukan posisi gambarnya nanti
<div style="position: fixed; bottom: 0px; Left: 10px;width:130px;height:160px;">

ini link yang akan kita arahkan ke wa
<a href="http://aniefborneo.blogspot.com/" target="_blank">

sementar ini untuk mengganti gambar ke wa,
<img border="0" src="http://i1107.photobucket.com/albums/h385/bogel4/DeidaraBird.gif "

ini menampilkan ketika mouse ada di atas gambar.
title="lihat lebih banyak animasi naruto bergerak." /></a>

sementara ini tampil di bwah gambar, bisa di pakai atau tidak.
<small><center><a href="http://aniefborneo.blogspot.com/" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

kesimpulan:
<div style="position: fixed; bottom: 0px; Right: 10px; width:220px; height:40px" ><a href=https://api.whatsapp.com/send?phone=628113301109&text=Hallo%20Toko%20MiM%20Mau%20Order%20Nih.%20Terimakasih. target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimp141nCRQLfbcO1i7U2HMZMsZJ5j2EB9-1YgbgljHEEW39hO7DzahycsBveCOdQvmE8ukrrPd9MMbT4SqqdbB1MBTcVjkvW0j9-ZtXISJ65QFDQPLZMEAjx_GgtzAWp_XzRKLuIoB6WY/s200/chat-via-WA-800x147.png" width="180" title="Click to Wa" /></a></div>

Bisa juga di kasih 2 kanan dan kiri, misal kanan untuk wa dan tombol kiri untuk call.
tinggal ganti left ke right dan gambar wa ganti ke call

untuk melihat hasil contoh
Alternatif 1 : https://abdulmunibf.blogspot.com/
Alternatif 2: https://www.beautyroove.com/
Kesimpulan : https://tokomim.com/ (wordpress)
Kiri Call Kanan Wa : https://beautyroove.blogspot.com/