Cara Membuat Widget Pelacak Paket JNE, TIKI, POS

Tutorial Cara Membuat Widget Pelacak Paket JNE, TIKI, POS - Pagi gan, maaf update agak siangan, hari ini admin ingin share tutorial memasang widget untuk melacak keberadaan paket yang kita pesan dan diantar melalui jne, tiki, maupun pos. Cara kerjanya sangat mudah gan, agan tinggal copy nomor resi yang diberikan oleh jne, tiki, maupun pos. Maka paket agan akan terlacak sudah ada dimana. Widget ini cocok untuk blog mengenai jne, tiki, maupun pos gan.

Biasanya, orang yang menunggu paketnya datang sering bosan dan bingung kapan paketnya datang, terutama realita admin kemarin gan. Admin pesen sepatu dari jakarta, dan ongkir ke cirebon hanya 10k. Terbilang sangat murah bukan gan ? Iya murah dan sangat lama. Lama ? Seminggu gan sampainya hahaha. Tapi itu sesuai dengan harganya yang murah gan. Saat itu admin meminta no. resi dan melacaknya. Ini sangat berguna intinya gan.

Screenshot

Tutorial Pemasangan

Pertama agan masuk ke blogger, lalu pilih add gadget, dan pilih html/javascript. Setelah itu tinggal agan copy script dibawah ini

<style scoped="scoped" type="text/css">
#kode-lacak{padding:10px;text-align:left;font-size:85%}
#kode-lacak form{display:block;position:relative;clear:both;overflow:hidden;margin:auto;text-align:center}
#kode-lacak .cek-jne,#kode-lacak .cek-tiki,#kode-lacak .cek-pos{text-align:left;display:inline-block;vertical-align:top;padding:2px 8px;height:33px;line-height:19px;color:#626262;background:#fff;outline:none;margin:10px 0;border:1px solid #e3e3e3;border-radius:2px;width:70%;float:left}
#kode-lacak .cek-jne-button,#kode-lacak .cek-tiki-button,#kode-lacak .cek-pos-button{display:inline-block;vertical-align:middle;height:33px;line-height:1;padding:0 18px;font-size:13px;color:#243140;text-align:center;text-shadow:0 1px rgba(255,255,255,.2);background:#e5e7ed;border:0;border-radius:2px;cursor:pointer;width:27%;outline:none;margin:10px 0 0 5px;transition:background .6s;}
#kode-lacak .cek-jne-button:hover,#kode-lacak .cek-jne-button:active,#kode-lacak .cek-tiki-button:hover,#kode-lacak .cek-tiki-button:active,#kode-lacak .cek-pos-button:hover,#kode-lacak .cek-pos-button:active{background:#ee4f3d;color:#fff}
</style>
<div id="kode-lacak">
Lacak resi <b>JNE</b><br />
<form action="http://www.jne.co.id/index.php" method="get" name="input" target="_new2">
<input name="mib" value="tracking.detail" type="hidden" />
<input name="awb" size="14" class="cek-jne" type="text" />
<input value="Cek" class="cek-jne-button" type="submit" /></form>
Lacak resi <b>TIKI</b><br />
<form method="post" action="http://www.tiki-online.com/tracking/track_single" name="input" target="_blank"><input id="TxtCon" name="TxtCon" size="14" class="cek-tiki" type="text" />
<input id="button" name="button" value="Cek" class="cek-tiki-button" type="submit" /></form>
Lacak resi <b>POS Indonesia</b>
<form method="get" action="http://www.posindonesia.co.id/home/modules/mod_search/tmpl/libs/lacakk1121m4np05.php" name="input" target="_blank"><input name="barcode" size="14" class="cek-pos" type="text" />
<input value="Cek" class="cek-pos-button" type="submit" /></form>
</div>

Kedua tinggal disave gan. Agan bisa coba edit cssnya gan. Css ? Yang mana min ?? Okay cekidot script css yang ada di script html itu gan.

<style scoped="scoped" type="text/css">
#kode-lacak{padding:10px;text-align:left;font-size:85%}
#kode-lacak form{display:block;position:relative;clear:both;overflow:hidden;margin:auto;text-align:center}
#kode-lacak .cek-jne,#kode-lacak .cek-tiki,#kode-lacak .cek-pos{text-align:left;display:inline-block;vertical-align:top;padding:2px 8px;height:33px;line-height:19px;color:#626262;background:#fff;outline:none;margin:10px 0;border:1px solid #e3e3e3;border-radius:2px;width:70%;float:left}
#kode-lacak .cek-jne-button,#kode-lacak .cek-tiki-button,#kode-lacak .cek-pos-button{display:inline-block;vertical-align:middle;height:33px;line-height:1;padding:0 18px;font-size:13px;color:#243140;text-align:center;text-shadow:0 1px rgba(255,255,255,.2);background:#e5e7ed;border:0;border-radius:2px;cursor:pointer;width:27%;outline:none;margin:10px 0 0 5px;transition:background .6s;}
#kode-lacak .cek-jne-button:hover,#kode-lacak .cek-jne-button:active,#kode-lacak .cek-tiki-button:hover,#kode-lacak .cek-tiki-button:active,#kode-lacak .cek-pos-button:hover,#kode-lacak .cek-pos-button:active{background:#ee4f3d;color:#fff}
</style>

Nah gampang dan bermanfaat kan gan ? Cara ini juga bisa agan terapkan untuk dijadikan laman khusus dan taruh di menu. Maka pengunjung akan melihat widget ini ada pada page khusus dan terlihat lebih professional gan. Terimakasih