Widget Cek Resi Paket - Global Tracking Button All In One
Halo Mas Bos semuanya 🙋🏻♂️
Kali ini share bagaimana cara membuat tombol pelacakan berbagai ekspedisi yang sedang menawarkan jasa pengiriman paket baik domestik sampai mancanegara. Tools (widget) ini memudahkan pengguna karena terdapat lebih dari 1000 kurir di seluruh dunia. Hal ini pastinya menyenangkan bagi sisi pelanggan bisnis online Mas Bos karena bisa dengan mudah melacak pesanan yang dikemas menjadi sebuah paket kiriman yang sangat mudah bisa langsung comot dan tempel kodenya di situs web Mas Bos.
✅ Keyword Tool
✅ HTML Editor
✅ Password Generator
✅ HTML Table Generator
✅ Compress HTML & XML
✅ Minify CSS, JS, HTML
✅ JS/HTML Encode Decode
✅ WebP Image Converter
✅ Compress & Resize Image
✅ Translate
✅ Flip Text/Word
✅ Speedtest
✅ Character Counter
Kali ini share bagaimana cara membuat tombol pelacakan berbagai ekspedisi yang sedang menawarkan jasa pengiriman paket baik domestik sampai mancanegara. Tools (widget) ini memudahkan pengguna karena terdapat lebih dari 1000 kurir di seluruh dunia. Hal ini pastinya menyenangkan bagi sisi pelanggan bisnis online Mas Bos karena bisa dengan mudah melacak pesanan yang dikemas menjadi sebuah paket kiriman yang sangat mudah bisa langsung comot dan tempel kodenya di situs web Mas Bos.
Jika Mas Bos sering mendapatkan pelanggan dari negara luar, rekomendasi terbaik dengan nama Rifex Shipping Solution dengan website resminya https://rifex.co.id. Ekspedisi ini melayani ekspor - impor via udara dan pengiriman dalam negeri (domestik) dengan tarif pengiriman atau yang saat ini lazim disebut ongkir yang lebih kompetitif, akan sangatlah tepat bagi usaha / bisnis online Mas Bos seperti halnya penjualan skincare kepada para TKW atau produk lainnya yang bisa kita ekspor dengan mudah dan cepat serta lebih efisien waktu menggunakan pengiriman via udara, mengingat juga banyak TKI yang menjadi sasaran peluang penjualan lintas negara.
Dalam hal pengiriman paket luar negeri tersebut, kami menyarankan kepada Mas Bos agar lebih bijak untuk melihat dahulu cek ongkir luar negeri sebelum melakukan pengiriman dan tentunya hal ini juga hukumnya wajib agar tidak kecewa dibelakang hari, mengenai apa saja fitur yang di berikan ekspedisi pengiriman barang tersebut. Oleh karenanya jangan lupa selalu juga sebelum membeli suatu produk ataupun jasa adalah langkah terakhir dalam hal akan memilih ekspedisi terbaik, maka silahkan cek testimoni pengiriman paket.
Kembali ke topik mengenai widget cek resi ini hasilnya tidak mengarahkan ke open new tab atau membuka tab baru di browser pc, laptop, smartphone, tab merk samsung, ipad produk merk apple, handphone (mobile phone), melainkan hasil pelacakan paket tetap akan muncul di website blog toko online Mas Bos sendiri.
Tampilan dari track button widget juga sudah mendukung akses mobile friendly yang responsive, jadi lebih nyaman untuk pengguna ataupun customer dalam menggunakannya.
Cara Membuat Widget Cek Resi Paket Di Website
Tombol / Button "My Parcel" pada gambar dibawah ini belum ada icon pencarian, Silahkan diikuti panduan sampai selesai akan di jelaskan dibawah.
Tampilan Screen Shoot Widget Cek Resi / Tracking Button |
Silahkan salin dan tempel 3 kode dibawah ini ke website toko online Mas Bos untuk memudahkan dalam pelacakan pengantaran paket baik kurir dalam negeri atau kalian yang berbisnis sampai dengan penjualan ke luar negeri. Hal ini menambah kepercayaan para customer Mas Bos untukbisa cek mandiri update status paket mereka tanpa ada rasa khawatir lagi !
Berikut urutan penggabungan 3 kode tersbut :
Caranya sangat mudah, tinggal gabungkan saja ke 3 kode diatas dengan salin dan tempel ke menu edit HTML website Mas Bos.
Silahkan bisa langsung di coba masukkan nomor resi / waybill kiriman paket dan bisa langsung "Enter" pada keyboard atau klik tombol "My Parcel" untuk meihat riwayat perjalanan paket yang kita nantikan 😍
Silahkan tanam kode javascript tersebut, dibagian menu "Edit HTML", langsung saja copas diatas kode
Salam sehat dan sukses selalu 😎
Berikut ini sebagai bahan percobaan hasil uji karya dari ide kreatif mengenai widget tracking sesuai dengan keinginan tampilan akan seperti apa hasil tombol cek resinya. Silahkan di utak atik sendiri tampilan bisa langsung setting dikolom bawah ini, karena sengaja memang dibuat unlock / editable.
Ini tampilan terlihat masih berantakan karena masih dengan kode terpisah dan penerapan kode javascript-nya juga terlihat error
sourceURL=pen.js
Apabila di coba untuk cek nomor resi ekspedisi kurir mana aja juga belum bisa 😁
😍 tutor26.com 😍
Berikut urutan penggabungan 3 kode tersbut :
- Kode CSS
- Kode HTML
- Kode Javascript (posisi fleksibel bisa diantara kode HTML)
Terlihat widget cek resi diatas adalah tombol kode CSS, karena biasanya kita copy + paste peletakan pertama adalah CSS terlebih dahulu di posisi paling atas, lalu enter untuk membuat paragraf berikutnya dan klik tombol kode HTML dan copy lalu paste. Terakhir adalah tombol kode Javascript (JS), hal yang sama copy dan paste ke menu edit HTML website Mas Bos.
Untuk mengatur dan mengedit script HTML, CSS dan Javascript bisa buka halaman HTML Editor atau jika mau tampilan berbeda pada Komputer yang hasilnya ada di tombol "Preview" bisa klik HTML Editor Mode 2 . Keduanya ada fitur Fullscreen lebih memudahkan dan detail karena sudut pandang yang lebih lega untuk urusan editing script.
Input Tombol Icon Pencarian Pada Tombol Widget Cek Resi
Terlebih dahulu masukkan Link Stylesheet, seperti kode dibawah ini :
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
Jika sudah ada di pengaturan tidak perlu di pada halaman pembuatan, tetapi apabila belum ada, masuk ke Tema, Edit HTML, lalu bisa di taruh juga di atas tag </head>, tetapi jika keduanya digunakan juga tidak masalah, hanya jadi double akan memperlambat loading blog Mas Bos karena link stylesheet, javascript yang tidak digunakan akan percuma dan semua itu memperlambat loading.
Selanjutnya masukkan icon pencarian yang hasilnya seperti ini =>
Yang mana peletakkan icon pencarian ini berada di sebelah kiri pada tombol widget cek resi ini. Penempaan terserah bisa di sebelah kiri atau kanan, kasih juga {spasi} akan tidak terlalu rapat akan lebih indah dilihat saja ;D
Berikut kode html icon pencariannya :
<i class="fa fa-search" aria-hidden="true"></i>
Baik sampai disini sudah paham pastinya. Langsung saja praktik dibawah ya...
Caranya sangat mudah, tinggal gabungkan saja ke 3 kode diatas dengan salin dan tempel ke menu edit HTML website Mas Bos.
Setelah digabungkan 3 kode diatas, mari kita coba liat apakah widget cek resi semua ekspedisi ini berhasil ?
Berikut ini sudah bisa untuk melacak nomor resi paket dari kurir mana saja. Artinya bahwa kode sudah tersusun dengan benar dan bisa merespon perintah dari kita dengan menampilan hasil riwayat pelacakan, setelah kita masukkan nomor tracking ke dalam kolom dan klik enter dari keyboard Mas Bos atau tekan tombol "My Parcel", lihat dan silahkan scroll / gulir atas bawah hasil riwayat update status cek resi paket yang dimaksud
Terlihat hasilnya seperti ini
😍 tutor26.com 😍
Silahkan bisa langsung di coba masukkan nomor resi / waybill kiriman paket dan bisa langsung "Enter" pada keyboard atau klik tombol "My Parcel" untuk meihat riwayat perjalanan paket yang kita nantikan 😍
Catatan :Apabila hasil terlihat masukkan Captcha, Verification Code atau lainnya, tekan "Enter" pada keyboard atau klik saja terus tombol "My Parcel" sampai hasil riwayat pelacakan muncul
Lebih detail penggunaan widget cek resi ini, bisa di baca di halaman 👉 cek resi
Kode Script Tracking Button / Tombol / Widget Cek Resi
Kode ini bisa di letakkan di posisi mana saja, baik header website / blog, posting artikel, sidebar, maupun bottom / bagian bawah sampai footer juga bisa.
Silahkan ini tinggal copy saja yak, biar tidak bingung lagi 😁
Ini penggabungan dari 3 kode diatas, yang akan terlihat seperti dibawah ini
Halo Mas Bos 🙋
Kode Telah Tersalin ya 😎
Kode Telah Tersalin ya 😎
Tambahan Pengaturan Widget Cek Resi :
Apabila di letakkan di posting atau page, untuk klik "enter pada keyboard" tidak merespon, maka keluarkan javascript dibawah ini<script src="https://cdn.jsdelivr.net/gh/chanmup/0@main/rifextrack.js" type="text/javascript"></script>
Silahkan tanam kode javascript tersebut, dibagian menu "Edit HTML", langsung saja copas diatas kode
</body>
Salam sehat dan sukses selalu 😎
Jangan lupa ngopi ☕
Online Tools Berguna Lainnya
✅ Quran Audio✅ Keyword Tool
✅ HTML Editor
✅ Password Generator
✅ HTML Table Generator
✅ Compress HTML & XML
✅ Minify CSS, JS, HTML
✅ JS/HTML Encode Decode
✅ WebP Image Converter
✅ Compress & Resize Image
✅ Translate
✅ Flip Text/Word
✅ Speedtest
✅ Character Counter