√ Ini Dia Cara Membuat Widget Berlangganan Seperti Jalan Tikus

Memasang widget berlangganan keren seperti situs jalantikus, yap tentunya para blogger disini tak asing lagi bukan dengan tampilan widget berlangganan yang ada di situs jalantikus banyak yang bilang kalau widget tersebut mempunyai tampilan yang super keren serta menarik bagi perhatian bagi pembaca setia blog sobat.

Nah kemungkinan sebagian blogger masih belum paham apa gunanya dari widget berlangganan di blog, sekedar informasi widget berlangganan bertujuan sebagai menarik para pengunjung agar mingikuti blog sobat dan apabila ada artikel yang menarik lainnya dari sobat maka pengunjung akan menerima sebuah email pemberitahuan bahwa blog sobat baru saja mempublikasikan sebuah artikel yang mungkin dapat pengunjung baca.

Tentunya sangat berguna sekali bukan, apalagi jika widget tersebut dapat menarik perhatian pengunjung nah untuk itu kali ini saya akan membagikan caranya memsang widget seperti situs jalantikus, yuk simak baik-baik tutorial berikut ini :

Membuat Widget Belangganan Seperti Situs Jalantikus

1. Masuk Blogger

2. Pilih Tema > Edit HTML

3. Cari Kode Berikut ini  ]]&gt;&lt;/b:skin&gt; atau  ]]></b:skin> lalu pastekan kode di bawah ini tepat di atas kode tersebut.

 .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. Klik Simpan Tema Sobat.



Cara Pengguna Widget Berlangganan Seperti Jalantikus

1. Buat Sebuah Widget dengan Pengaturan HTML/JAVASCRIPT

2. Paste Kode Berikut di bawah ini :

 <div id="" class="langganan news-content "><form action="https://feedburner.google.com/lewatin-aja" 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> 

3. Ganti Feedburner mimin yang ditandai warna biru tersebut dengan feedburner milik kalian

4. Save.



Bagaimana mudah bukan, jika ada yang belum di pahami atau ingin mengajukan sebuah pertanyaan silahkan berkomentar di bawah ini. dan selamat berjumpa kembali di postingan lainnya. terima kasih banyak