Cara Menciptakan Widget Berlangganan/Subscribe Seolah-Olah Jalan Tikus
Anda tentunya sudah tidak abnormal lagi bukan dengan situs website yang berjulukan jalantikus? Yap, situs website download ini merupakan salah satu situs paling terkenal 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 ialah sebuah widget yang dipakai 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 ialah alasannya ialah tampilannya yang minimalis, keren, dan terlihat profesional.
Nah alasannya ialah banyaknya minat para blogger yang ingin juga memakai widget ini didalam blognya, maka pada kesempatan ini aku akan memperlihatkan cara untuk memasang widget berlangganan yang menyerupai mirip milik jalantikus.com.
Untuk cara memasang widget ini bahu-membahu cukup mudah, anda hanya perlu menambahkan sedikit script isyarat dan juga sedikit meng-edit sesuai blog anda.
Baiklah supaya 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 isyarat berikut, diatas isyarat ]]></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 isyarat 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 isyarat yang telah aku beri tanda, dengan FeedBurner anda
Ubah isyarat yang telah aku beri tanda, dengan FeedBurner anda
7. Terakhir, klik "Simpan" kemudian cek blog anda untuk melihat hasilnya
Bagaimana sobat, gampang bukan cara memasang widget subscribe menyerupai jalantikus ini? Sekarang para pengunjung anda sanggup mengikuti update terbaru juga dari blog anda.
Baiklah aku rasa hanya itu yang sanggup aku sampaikan, terimakasih dan hingga jumpa di postingan berikutnya.