Membuat Widget Berlangganan » Sebelum aku menciptakan artikel ini, Saya pernah membagikan template blogger yang ibarat banget dengan tampilan blog jalan tikus. Saya kira widget berlangganan ini sangat cocok bila kau padukan dengan template tersebut.
Sebagai pemiliki bloh / website tentu kita ingin mempunyai banyak pelanggan, Nah salah satu cara mencari pelanggan / pembaca tetap yaitu dengan cara menyediakan form berlangganan.
Form berlangganan ialah salah satu hal yang cukup penting untuk kemajuan suatu blog, Tujuannya ialah mengirimkan pemberitahuan kepada mereka yang sudah memasukan email di form berlangganan yang kita miliki, Sebagai misalnya silahkan masukan email kau di kolom berlangganan blog lapak usang ini. nanti setiap blog ini update artikel kau akan secara otomatis di beritahu melalui email.
Untuk menarik pengunjung supaya mau berlanganan di blog kita. Kita harus menyediakan konten yang bermanfaat bagi orang lain, Selain itu kau juga harus menyediakan form berlanggnan yang keren dan mencolok. ibarat widget formbelangganan yang akan kita buat ini.
Form berlangganan yang akan kita buat ini ibarat banget dengan miliki website jalan tikus. website teknologi paling popular ketika ini.
Baca Juga:
Cara Membuat Widget Berlangganan Seperti Jalantikus
Setelah melihat demo di atas niscaya kau ingin sekali menciptakan form berlangganan ibarat itu. OK! silahkan ikuti panduan Membuat Widget Berlangganan keren ala jalan tikus dibawah.
- Masuk ke dalam daboard blogger kamu.
- Kemudian pilih menu Template kemudian klik Edit HTML
- Silahkan cari arahan ]]></b:skin> atau arahan </style> untuk mepermudah pencarian kode, Silahkan gunakan kombinasi tombol CTRL + F pada keyboard.
- Jika arahan sudah ketemu, silahkan copy arahan css dibawah ini, kemudian pastekan sempurna di atas kode ]]></b:skin> atau kode </style> CSS.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;
} - jika sudah klik Save Template
- Pindah kemenu Tata Letak
- Pilih Tambah Gadget
- Pilih lagi HTML/Javascript
- Copy kemudian pastekan arahan dibawah ini. HTML<div id=”” class=”langganan news-content “><form action=”https://feedburner.google.com/fb/a/mailverify/Lapaklama” 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>
- Selesai.
#NOTE:
Silahkan ganti https://feedburner.google.com/fb/a/mailverify/Lapaklama dengan feedburner blog sobat.
Nah itulah Cara Membuat Widget Berlangganan Seperti Jalantikus biar bermanfaat. Terimakasih
Sumber aciknadzirah.blogspot.com