Cara memasang widget JNE, TIKI, dan POS Indonesia - Wara memasang widget JNE, TIKI, dan POS Indonesia ini sangat membntu bagi kamu yang mempunyai blog yang berasaskan jualan produk berupa barang secara online, kalau jualan produk berupa barang online past memerlukan jasa ekspedisi, dan ekspedisi paling tenar dinegri ini adalah JNE, TIKI, dan POS Indonesia

Penampakan widgetnya sebagaimana gambar dibawah ini


Cara memasang widget JNE, TIKI, dan POS Indonesia

Langsung saja masuk ke blog kamu, pilih menu Tata Letak > Tambah widget dan pilih HTML/JavaScript

<style scoped="scoped" type="text/css">
@import url(https://fonts.googleapis.com/css?family=Oxygen:400,700);
*,
*:before,
*:after,
input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box
}

a:link {
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

a:visited,
a:link:hover,
a:visited:hover {
  text-decoration: none;
}

body {
  background: #ecf0f1 none repeat scroll top left;
  color: #444;
  font-family: 'Oxygen', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  background: #fff;
  max-width: 320px;
  margin: 2% auto;
  padding: 10px;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
}

.title,
.content {
  margin: 2% auto;
  display: table;
  text-align: center;
  font-size: 1.5em;
  color: #999
}

.title {
  font-size: 2.5em;
  font-weight: 700;
  color: #ccc
}

#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 class="title">Widget JNE, TIKI, Pos Indonesia</div>
<div class="content">Cek data nomor resi di bawah ini</div>
<div class="container">
  <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>
</div>

Widget ini juga bisa ditempatkan dalam halaman statis, atau postingan, silahkan dikreasikan sendiri
Demikianlah Cara memasang widget JNE, TIKI, dan POS Indonesia, lihat kode warna atau lihat font awesome untuk memperindah tampilan widget JNE, TIKI, dan POS Indonesia
No comments