Cara Membuat Widget Subscription Jalantikus

Widget subscription / Newsletter / banyak juga yang bilang form langganan adalah sebuah cara agar para pengunjung bisa mendaftarkan alamat emailnya dan mendapatkan update terus menerus dari blog yang di langgankan.

Sebagai contoh sobat memiliki youtube, dan ada yang subcribe blog sobat, nahh orang yang subscribe youtube sobat itu akan mendapatkan update tiap kali sobat mengupload video. Sama halnya dengan form langganan versi blog, jadi ketika ada pengunjung yang rela untuk mendapatkan update terbaru dengan cara memasukkan emailnya, maka pengunjung tersebut akan mendapatkan update dari blog sobat.

Kali ini admin mencoba membagikan widget Subscription milik jalantikus, Bukan niat untuk mengambilnya, tetapi memang tampilannya oke dan bagus jadi minat untuk mencomotnya:D Sebelumnya maaf untuk yang memiliki web jalantikus.

Jika sobat penasaran cara buatnya, mari simak berikut ini..

See the Pen ELEmvE by Enter Blogger (@enterblogger) on CodePen.

Demo on Web

Kelebihan Dari Subscription Punya Jalantikus :

• Tampilan Yang Enak dipandang
• Bagus
• Tampilan Yang Responsive
• Mudah digunakan dan mudah diterapkan

Untuk Itu, mari lihat apa saja yang harus dilakukan...

Widget Subscription / Newsletter Jalantikus

Tahap Pertama : 

1. Login ke Blogger Sobat

2. Lihat Tab Tema > Edit HTML

3. Masukkan CSS dibawah ini, Tepat diatas kode ]]></b:skin> atau diatas kode </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. Silahkan Lihat ke Tata Letak > Tambahkan Gadget > HTML/JavaScript
Masukkan code dibawah ini

<div id="" class="langganan news-content "><form action="https://feedburner.google.com/fb/a/mailverify/Chayaeducation" 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 :
* Ganti https://feedburner.google.com/fb/a/mailverify/Chayaeducation > Dengan Feedburner sobat
Mudah kan sobat?? Iya dong kan artikel dari chayaeducation, Semoga bisa bermanfaat ya+_=