SobatMasbro - Pada era saat ini kemajuan teknologi memanglah sangat pesat yang tujuannya memudahkan aktivitas masyarakat dalam menjalankan kehidupannya sehari-hari. Salah satu contohnya ialah berbelanja sesuatu atau membeli barang, terkadang masyarakat ingin membeli suatu barang tetapi barang tersebut tidak tersedia pasar terdekat, barang tersebut tersedia ditempat lain atau dikota lain. Maka dari itu sekarang pesatnya belanja online yang memudahkan kita membeli barang yang sulit dicari ditoko terdekat.
Berbelanja online maraknya semakin mudah menggunakan online shop seperti Shoppe, Bukalapak, Tokopedia, Lazada, Zara dan masih banyak lainnya. Kita hanya mencari barang yang akan dibeli dan tinggal bayar secara online dan hanya beberapa hari kemudian barang akan sampai dirumah kita. Nah pengiriman barang yang kita beli diantar oleh kurir seperti JNE, J&T, SiCepat, PosKilat, Ninja, dan masih banyak lainnya.
Setiap barang yang dikirimkan terdapat nomor pengiriman atau yang biasa disebut dengan nomor resi. Nomor resi tersebut kita bisa mengeceknya diwebsite untuk mengetahui lebih detail barang kita mulai dari nama pengirim, tujuan, nama penerima dan lainnya.
Oleh karena itu saya akan berbagi untuk sobat blogger
Cara Membuat Tools Cek Resi dan Ongkir di Blogger. Bisa sobat lihat tampilannya ada dibawah ini. Gimana baguskan? hehe langsung ke langkah-langkahnya.
Ada Fitur Apa Saja
- Cek Resi
- Cek Ongkir Antardaerah/kota
- Cek Ongkir Antarnegara
- Bisa cek semua ekspedisi (JNE, J&T, SiCepat, PosKilat dan lainnya)
Membuat Tools Cek Resi dan Ongkir
- Buka blogger.com > Halaman > Halaman baru
- Klik bagian HTML bukan
Compose
- Copy dan Paste script dibawah ini
<div class="widgetMainCP">
<div class="tabs">
<div class="resiTab tab-link current" data-tab="resi">
Cek Resi</div>
<div class="domestikTab tab-link" data-tab="domestik">
Cek Ongkir</div>
<div class="mancanegaraTab tab-link" data-tab="mancanegara">
Antarnegara</div>
<div class="clear">
</div>
</div>
<div class="tabs-content">
<div class="tab-content current" id="resi">
<div class="top">
<div class="column nomor">
<input class="normalShadow" id="nomor" name="nomor" placeholder="Nomor resi" type="text" />
</div>
<div class="column kurir">
<select class="normalShadow" id="kurir" name="kurir">
<option disabled="" selected="" value="">Kurir</option>
<option value="jne">Jalur Nugraha Ekakurir (JNE)</option>
<option value="pos">POS Indonesia (POS)</option>
<option value="tiki">Citra Van Titipan Kilat (TIKI)</option>
<option value="pcp">Priority Cargo and Package (PCP)</option>
<option value="anteraja">AnterAja (ANTERAJA)</option>
<option value="lex">Lazada eLogistics Express (LEX)</option>
<option value="wahana">Wahana Prestasi Logistik (WAHANA)</option>
<option value="sicepat">SiCepat Express (SICEPAT)</option>
<option value="jnt">J&T Express (J&T)</option>
<option value="sap">SAP Express (SAP)</option>
<option value="jet">JET Express (JET)</option>
<option value="dse">21 Express (DSE)</option>
<option value="first">First Logistics (FIRST)</option>
<option value="lion">Lion Parcel (LION)</option>
<option value="ninja">Ninja Xpress (NINJA)</option>
<option value="idl">IDL Cargo (IDL)</option>
<option value="rex">REX Kiriman Express (REX)</option>
<option value="nss">Nusantara Surya Sakti Express (NSS)</option>
<option value="indah">Indah Logistik Cargo (INDAH)</option>
<option value="rosalia">Rosalia Express (ROSALIA)</option>
<option value="dakota">Dakota Cargo (DAKOTA)</option>
<option value="pahala">Pahala Express (PAHALA)</option>
<option value="dhl">Documents Handling Limited (DHL)</option>
<option value="fedex">Federal Express (FedEx.)</option>
<option value="ups">United Parcel Service (UPS)</option>
<option value="cahaya">Cahaya Logistik (CAHAYA)</option>
<option value="ncs">Nusantara Card Semesta Kurir (NCS)</option>
<option value="rpx">RPX Holding (RPX)</option>
</select>
</div>
<div class="column action">
<button>Cek Resi</button>
</div>
<div class="clear">
</div>
</div>
</div>
<div class="tab-content" id="domestik">
<div class="top">
<div class="column asal">
<input class="flexdatalistGetCity normalShadow" data-min-length="2" data-selection-required="true" id="originDomestik" name="origin" placeholder="Kota/kecamatan asal" type="text" />
</div>
<div class="column tujuan">
<input class="flexdatalistGetCity normalShadow" data-min-length="2" data-selection-required="true" id="destinationDomestik" name="destination" placeholder="Kota/kecamatan tujuan" type="text" />
</div>
<div class="column berat">
<input class="normalShadow" id="weightDomestik" name="weight" placeholder="Berat" type="number" />
/gram
</div>
<div class="column filter">
<div class="wrapFilter">
<div class="titleFilter">
Pilih Kurir</div>
</div>
<div class="showFilterWrap">
<div class="showFilter">
<div class="listCheckbox">
<input class="apple-switch" id="jne" type="checkbox" value="jne" />
<label for="jne">JNE</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="pos" type="checkbox" value="pos" />
<label for="pos">POS</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="tiki" type="checkbox" value="tiki" />
<label for="tiki">TIKI</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="rpx" type="checkbox" value="rpx" />
<label for="rpx">RPX</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="esl" type="checkbox" value="esl" />
<label for="esl">ESL</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="pcp" type="checkbox" value="pcp" />
<label for="pcp">PCP</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="pandu" type="checkbox" value="pandu" />
<label for="pandu">PANDU</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="wahana" type="checkbox" value="wahana" />
<label for="wahana">WAHANA</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="sicepat" type="checkbox" value="sicepat" />
<label for="sicepat">SICEPAT</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="jnt" type="checkbox" value="jnt" />
<label for="jnt">JNT</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="pahala" type="checkbox" value="pahala" />
<label for="pahala">PAHALA</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="cahaya" type="checkbox" value="cahaya" />
<label for="cahaya">CAHAYA</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="sap" type="checkbox" value="sap" />
<label for="sap">SAP</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="jet" type="checkbox" value="jet" />
<label for="jet">JET</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="dse" type="checkbox" value="dse" />
<label for="dse">DSE</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="slis" type="checkbox" value="slis" />
<label for="slis">SLIS</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="first" type="checkbox" value="first" />
<label for="first">FIRST</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="ncs" type="checkbox" value="ncs" />
<label for="ncs">NCS</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="star" type="checkbox" value="star" />
<label for="star">STAR</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="ninja" type="checkbox" value="ninja" />
<label for="ninja">NINJA</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="lion" type="checkbox" value="lion" />
<label for="lion">LION</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="idl" type="checkbox" value="idl" />
<label for="idl">IDL</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="rex" type="checkbox" value="rex" />
<label for="rex">REX</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="nss" type="checkbox" value="nss" />
<label for="nss">NSS</label>
</div>
</div>
</div>
</div>
<div class="column action">
<button>Cek Ongkir</button>
</div>
<div class="clear">
</div>
</div>
</div>
<div class="tab-content" id="mancanegara">
<div class="top">
<div class="column asal">
<input class="flexdatalistGetOriginCountry normalShadow" data-min-length="2" data-selection-required="true" id="originMancanegara" name="origin" placeholder="Kota asal" type="text" />
</div>
<div class="column tujuan">
<input class="flexdatalistGetCountry normalShadow" data-min-length="2" data-selection-required="true" id="destinationMancanegara" name="destination" placeholder="Negara tujuan" type="text" />
</div>
<div class="column berat">
<input class="normalShadow" id="weightMancanegara" name="weight" placeholder="Berat" type="number" />
/gram
</div>
<div class="column filter">
<div class="wrapFilter">
<div class="titleFilter">
Pilih Kurir</div>
</div>
<div class="showFilterWrap">
<div class="showFilter">
<div class="listCheckbox">
<input class="apple-switch" id="jneI" type="checkbox" value="jne" />
<label for="jneI">JNE</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="posI" type="checkbox" value="pos" />
<label for="posI">POS</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="slisI" type="checkbox" value="slis" />
<label for="slisI">SLIS</label>
</div>
<div class="listCheckbox">
<input class="apple-switch" id="expedito" type="checkbox" value="expedito" />
<label for="expedito">EXPEDITO</label>
</div>
</div>
</div>
</div>
<div class="column action">
<button>Cek Ongkir</button>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</div>
<style>
.widgetMainCP
{
font: normal 12px arial;
color: #303030;
min-width: 270px;
background: #fff;
margin: 0 auto 25px;
padding: 10px 15px 7px;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 3px 6px 0 rgba(0,0,0,.1),0 1px 3px 0 rgba(0,0,0,.08);
text-align: left;
width: 90%;
}
.widgetMainCP .clear
{
clear: both;
}
.widgetMainCP .tabs
{
padding: 0!important;
margin: 0!important;
border-bottom: 1px solid #dfdfdf;
}
.widgetMainCP .tabs .tab-link
{
float: left;
padding: 10px 0;
cursor: pointer;
margin: 0 0 -1px;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
color: #888;
width: 33.3333%;
text-align: center;
}
.widgetMainCP .tabs .tab-link.current
{
border-bottom: 2px solid #1ba0e2;
color: #1ba0e2;
}
.widgetMainCP .tabs-content .top
{
margin: 15px 0 0;
box-shadow: 0 3px 6px 0 rgba(0,0,0,.1),0 1px 3px 0 rgba(0,0,0,.08);
position: relative;
}
.widgetMainCP .tabs-content .tab-content
{
display: none;
}
.widgetMainCP .tabs-content .tab-content.current
{
display: block;
}
.widgetMainCP .tabs-content .tab-content .column
{
float: left;
}
.widgetMainCP .tabs-content .tab-content .column input[type="text"],.widgetMainCP .tabs-content .tab-content .column input[type="number"],.widgetMainCP .tabs-content .tab-content .column button,.widgetMainCP .tabs-content .tab-content .column select,.widgetMainCP .tabs-content .column.filter .wrapFilter
{
cursor: pointer;
width: 100%;
border: none;
padding: 0 10px;
line-height: 48px;
height: 48px;
outline: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.widgetMainCP .tabs-content .tab-content .column input[type="number"]
{
width: calc(100% - 10px);
}
.widgetMainCP .tabs-content .tab-content .column input::-webkit-outer-spin-button,.widgetMainCP .tabs-content .tab-content .column input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
.widgetMainCP .tabs-content .tab-content .column input[type=number]
{
-moz-appearance: textfield;
}
.widgetMainCP .tabs-content .tab-content .column select
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23999999'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 12px;
background-position: calc(100% - 8px) 22px;
background-repeat: no-repeat;
background-color: #fff;
}
.widgetMainCP .tabs-content .tab-content .column button
{
background: #1ba0e2;
margin: 0 0 0 1px;
color: #fff;
text-transform: uppercase;
font-size: 12px;
padding: 0;
text-align: center;
overflow: hidden;
}
.widgetMainCP .tabs-content .tab-content .column button:hover
{
background: #328ebc;
}
.widgetMainCP .tabs-content #resi .column.nomor
{
border-right: 1px solid #e9e9e9;
}
.widgetMainCP .tabs-content #domestik .column.asal,.widgetMainCP .tabs-content #domestik .column.tujuan,.widgetMainCP .tabs-content #mancanegara .column.asal,.widgetMainCP .tabs-content #mancanegara .column.tujuan
{
border-right: 1px solid #e9e9e9;
}
.widgetMainCP .tabs-content #domestik .column.berat,.widgetMainCP .tabs-content #mancanegara .column.berat
{
position: relative;
}
.widgetMainCP .tabs-content #domestik .column.berat input,.widgetMainCP .tabs-content #mancanegara .column.berat input
{
padding-right: 50px;
}
.widgetMainCP .tabs-content #domestik .column.filter,.widgetMainCP .tabs-content #mancanegara .column.filter
{
position: relative;
}
.widgetMainCP .tabs-content #domestik .column.berat span,.widgetMainCP .tabs-content #mancanegara .column.berat span
{
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
padding: 0 10px;
line-height: 38px;
color: #999;
font-size: 11px;
}
.widgetMainCP .tabs-content .column.filter .wrapFilter .titleFilter
{
background: #f2f2f2;
width: 100%;
right: 0;
top: 0;
bottom: 0;
text-transform: uppercase;
padding: 5px;
text-indent: 30px;
color: #999;
line-height: 38px;
position: absolute;
font-size: 10px;
font-weight: 700;
}
.widgetMainCP .tabs-content .column.filter .wrapFilter .titleFilter span
{
width: 22px;
height: 22px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 512 512'%3E%3Ctitle%3Eionicons-v5-i%3C/title%3E%3Cline x1='368' y1='128' x2='448' y2='128' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Cline x1='64' y1='128' x2='304' y2='128' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Cline x1='368' y1='384' x2='448' y2='384' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Cline x1='64' y1='384' x2='304' y2='384' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Cline x1='208' y1='256' x2='448' y2='256' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Cline x1='64' y1='256' x2='144' y2='256' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Ccircle cx='336' cy='128' r='32' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Ccircle cx='176' cy='256' r='32' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3Ccircle cx='336' cy='384' r='32' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/%3E%3C/svg%3E") no-repeat 0 0;
display: inline-block;
position: absolute;
left: 8px;
top: 14px;
}
.widgetMainCP.flexdatalist-results
{
position: absolute;
top: 0;
left: 0;
border: none!important;
background: #fff;
z-index: 100000;
max-height: 300px;
overflow-y: auto;
box-shadow: 0 4px 5px rgba(0,0,0,0.15);
color: #333;
list-style: none;
margin: 0;
padding: 0;
font: normal 12px arial;
}
.widgetMainCP.flexdatalist-results li
{
border-bottom: 1px solid #f2f2f2;
padding: 8px 15px;
font-size: 14px;
line-height: 20px;
text-align: left;
}
.widgetMainCP.flexdatalist-results li span.highlight
{
font-weight: 700;
color: #f96d01;
}
.widgetMainCP.flexdatalist-results li.active
{
background: #dfdfdf;
cursor: pointer;
}
.widgetMainCP.flexdatalist-results li.no-results
{
color: #888;
}
.widgetMainCP.flexdatalist-results .item.item-type,.widgetMainCP.flexdatalist-results .item.item-city
{
color: #999;
display: block;
}
.widgetMainCP .showFilterWrap
{
position: absolute;
right: 0;
top: 63px;
display: none;
}
.widgetMainCP .showFilter
{
background: #fff;
padding: 0!important;
margin: 0!important;
box-shadow: none!important;
display: flex;
flex-wrap: wrap;
}
.widgetMainCP .listCheckbox
{
position: relative;
font-size: 12px;
width: 50%;
margin: 5px 0;
}
.widgetMainCP .listCheckbox label
{
cursor: pointer;
vertical-align: top;
line-height: 26px;
color: #777;
}
.widgetMainCP .listCheckbox input::-ms-check
{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.widgetMainCP .listCheckbox input.apple-switch
{
position: relative;
-webkit-appearance: none;
outline: none;
width: 35px;
height: 20px;
background-color: #fff;
border: 1px solid #dfdfdf;
border-radius: 35px;
box-shadow: inset -15px 0 0 0 #ccc;
cursor: pointer;
transition: all .1s ease-in-out;
}
.widgetMainCP .listCheckbox input.apple-switch:after
{
content: "";
position: absolute;
top: 1px;
left: 1px;
background: transparent;
width: 16px;
height: 16px;
border-radius: 50%;
transition: .2s cubic-bezier(0,1.1,1,1.1);
}
.widgetMainCP .listCheckbox input.apple-switch:checked
{
box-shadow: inset 15px 0 0 0 #49f11f;
border-color: #49f11f;
transition: .2s cubic-bezier(0,1.1,1,1.1);
}
.widgetMainCP .listCheckbox input.apple-switch:checked:after
{
left: 10px;
box-shadow: -1px 2px 1.5px rgba(0,0,0,0.05);
transition: .2s cubic-bezier(0,1.1,1,1.1);
}
.widgetMainCP .tabs-content #domestik .column.filter,.widgetMainCP .tabs-content #mancanegara .column.filter,.showFilterWrap
{
width: 100%;
}
.widgetMainCP .showFilter
{
border-radius: 2px;
}
.widgetMainCP .showFilterWrap
{
margin: 0 0 15px;
position: static;
right: auto;
top: auto;
}
.widgetMainCP .title .right,.widgetMainCP .title .left,.widgetMainCP .tabs-content .tab-content .column
{
float: none;
display: block;
}
.widgetMainCP .title .left
{
margin: 0 0 15px;
}
.widgetMainCP .tabs-content #resi .column.nomor,.widgetMainCP .tabs-content #resi .column.kurir,.widgetMainCP .tabs-content #resi .column.action,.widgetMainCP .tabs-content #domestik .column.action,.widgetMainCP .tabs-content #mancanegara .column.action,.widgetMainCP .tabs-content #domestik .column.asal,.widgetMainCP .tabs-content #domestik .column.tujuan,.widgetMainCP .tabs-content #domestik .column.berat,.widgetMainCP .tabs-content #mancanegara .column.asal,.widgetMainCP .tabs-content #mancanegara .column.tujuan,.widgetMainCP .tabs-content #domestik .column.berat,.widgetMainCP .tabs-content #mancanegara .column.berat
{
width: 100%;
display: block;
margin: 0 0 10px;
border: none;
box-shadow: 1px 2px 10px rgba(0,0,0,.1);
}
.widgetMainCP .tabs-content .tab-content .column input[type="text"],.widgetMainCP .tabs-content .tab-content .column input[type="number"],.widgetMainCP .tabs-content .tab-content .column select
{
border-radius: 2px;
overflow: hidden;
border: 1px solid transparent;
}
.widgetMainCP .tabs-content .tab-content .column input[type="number"]
{
width: 100%;
}
.widgetMainCP .tabs-content .tab-content .column button
{
border-radius: 2px;
overflow: hidden;
border: none;
box-shadow: 1px 2px 10px rgba(0,0,0,.1);
}
.widgetMainCP .tabs-content .top
{
background: #fff;
border-radius: 0;
box-shadow: none;
}
.widgetMainCP .tabs-content .column.filter .wrapFilter .titleFilter
{
background: none;
bottom: auto;
}
.widgetMainCP .tabs-content .column.filter .wrapFilter .titleFilter span
{
top: 12px;
}
.widgetMainCP .tabs-content .column.filter .wrapFilter
{
margin: 0 0 5px;
}
</style>
<script src="https://www.cekpengiriman.com/widget/jquery-3.4.1.min.js"></script>
<script src="https://www.cekpengiriman.com/widget/cp.min.js"></script>
- Selesai Publikasikan
- Lihat hasilnya
Jika sobat ingin memasangnya di widget bagian sidebar
- Buka Tata Letak > Tambahkan Gadget
- Pilih HTML/JavaScript
- Copy dan Paste script diatas tadi
- Klik Simpan
Oke sob gimana hasilnya? kerenkan? Tools ini memudahkan kita semua bukan hanya bisa cek resi saja tapi bisa juga yang lainnya seperti cek ongkir antar daerah maupun antarnegara pun bisa.
Mungkin cukup sekian tentang Cara Membuat Tools Cek Resi dan Ongkir di Blogger semoga bisa digunakan dengan baik semoga bermanfaat.
