Cara Membuat Widget Berlangganan/Subscribe Mirip Jalan Tikus

Anda tentunya sudah tidak asing lagi bukan dengan situs website yang bernama jalantikus? Yap, situs website download ini merupakan salah satu situs paling populer dan melegenda.

Tampilan situs yang sangat keren, konten yang menarik dan lengkap merupakan salah satu faktor penyebab mengapa situs ini menjadi sangat terkenal diseluruh indonesia.

Tak hanya tampilan situsnya yang mempesona dan selalu menjadi buah bibir dikalangan masyarakat, ternyata widget subscribe yang ada pun ikut menjadi sorotan banyak orang.

Widget subscribe atau yang biasa kita kenal dengan widget berlangganan adalah sebuah widget yang digunakan untuk mempermudah para pengunjung dalam mengikuti setiap update yang ada di jalantikus.

Dengan adanya widget ini, maka para pengunjung tidak akan ketinggalan untuk melihat update terbaru di jalantikus.

Ada banyak alasan mengapa widget ini menjadi sorotan banyak kalangan, terutama para blogger. Salah satu alasannya adalah karena tampilannya yang minimalis, keren, dan terlihat profesional.

Nah karena banyaknya minat para blogger yang ingin juga menggunakan widget ini didalam blognya, maka pada kesempatan ini saya akan memberikan cara untuk memasang widget berlangganan yang mirip seperti milik jalantikus.com.

Untuk cara memasang widget ini sebenarnya cukup mudah, anda hanya perlu menambahkan sedikit script kode dan juga sedikit meng-edit sesuai blog anda.

Baiklah agar anda lebih memahami bagaimana cara pemasangan widget yang benar, silahkan ikuti caranya dibawah ini:

1. Pertama, login terlebih dahulu ke blogger
2. Kemudian masuk pada Tema>>Edit HTML
3. Lalu masukan kode berikut, diatas kode ]]></b:skin> atau </style>

.langganan.news-content { min-width: 300px; width: 100%; padding: 20px; margin-top: 20px; margin-left: auto; margin-right: auto; background: #ce0a46; background: -webkit-linear-gradient(15deg,#ce0a46,#e98125); background: -o-linear-gradient(15deg,#ce0a46,#e98125); background: -webkit-linear-gradient(75deg,#ce0a46,#e98125); background: -o-linear-gradient(75deg,#ce0a46,#e98125); background: linear-gradient(15deg,#ce0a46,#e98125); border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; } .news-content { position: relative; } .sidebar-content .news-content .news-title { position: relative; display: inline-block; font-family: Museo,sans-serif; font-size: 22px; line-height: 32px; } .langganan .news-title { font-family: Museo,sans-serif; font-size: 20px; margin-bottom: 15px!important; line-height: 15px; font-weight: 700; padding-left: 0; background-color: hsla(0,0%,100%,0); } .sidebar-content .news-title { margin-bottom: 20px; } .color.white { color: #fff; } .langganan .news-detail { font-family: Open Sans; font-size: 14px; line-height: 20px; } .color.white { color: #fff; } .news-detail { white-space: normal; } .langganan .email-langganan { position: relative; } .langganan .email-langganan:before { position: absolute; height: 16px; width: 16px; bottom: 12px; left: 12px; color: #d62e3d; font-size: 16px; } .icon-mail:before { content: "\E012"; } [class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before { font-family: untitled-font-2!important; font-style: normal!important; font-weight: 400!important; font-variant: normal!important; text-transform: none!important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .langganan .email-langganan input { width: 100%; height: 40px; font-family: Open Sans; font-size: 14px; margin-top: 20px; border: 0; border-radius: 4px; padding-left: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; }  a, button, input, label { -webkit-tap-highlight-color: rgba(255,255,255,0); outline: 0; } user agent stylesheet input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] { padding: 1px 0px; } user agent stylesheet input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } user agent stylesheet input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; } user agent stylesheet input, textarea, select, button, meter, progress { -webkit-writing-mode: horizontal-tb !important; } .langganan .email-langganan { position: relative; } .langganan .submit {
    height: 35px;
    width: 100%;
    margin-top: 20px;
    font-family: Museo,sans-serif;
    font-size: 14px;
    line-height: 35px;
    text-align: center;
    border: 0;
    border-radius: 4px;
    background-color: #3a2e28;
    outline: 0;
}
.color.white {
    color: #fff;
}
.trs-2 {
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}

button, input[type=button], input[type=submit], label {
    cursor: pointer;
    font-family: Open Sans;
}

a, button, input, label {
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    outline: 0;
}; } form { display: block; margin-top: 0em; }
.langganan .email-langganan:before {
    position: absolute;
    height: 16px;
    width: 16px;
    bottom: 12px;
    left: 12px;
    color: #d62e3d;
    font-size: 16px;
}

.icon-mail:before {
    content: "\E012";
}

[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before {
    font-family: untitled-font-2!important;
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

4. Setelah selesai silahkan klik pada "Simpan Tema"
5. Kemudian kita beralih ke Tata Letak>>Tambahkan Gadget>>HTML/Javascript
6. Dan masukan kode dibawah ini

<div id="" class="langganan news-content "><form action="https://feedburner.google.com/fb/a/mailverify/Palingtop21" method="post" target="popup"><div class="news-title color white">Langganan Artikel</div><div class="news-detail color white">Temukan Tips dan Berita menarik setiap harinya. GRATIS!</div><div class="email-langganan icon-mail"><input type="email" placeholder="Alamat Email..." required="" data-role="none"><input type="hidden" value="jalantikus/feed" name="uri"><input type="hidden" name="loc" value="en_US"></div><button type="submit" value="LANGGANAN" class="submit color white trs-2" data-role="none">LANGGANAN</button></form></div>

Catatan:
Ubah kode yang telah saya beri tanda, dengan FeedBurner anda

7. Terakhir, klik "Simpan" lalu cek blog anda untuk melihat hasilnya

Bagaimana sobat, mudah bukan cara memasang widget subscribe seperti jalantikus ini? Sekarang para pengunjung anda bisa mengikuti update terbaru juga dari blog anda.

Baiklah saya rasa hanya itu yang dapat saya sampaikan, terimakasih dan sampai jumpa di postingan berikutnya.

Tweet

Subscribe to receive free email updates: