Cara Membuat Form Subscriber Keren di Sidebar Blogger - TutorKeren19

Cara Membuat Form Subscriber Keren di Sidebar Blogger - Sobat pasti pernah menonton video di youtube kan ? kalau iya berarti sobat sudah tidak asing lagi dengan yang namanya subscribe. Hampir setiap kali menonton video youtube, di awal video channel youtube mereka pasti menyarankan sobat untuk pencet tombol subscribe terlebih dulu.

Setiap kali saya nonton video di youtube pasti ada aja intronya yang "Sebelum kalian nonton video ini jangan lupa pencet tombol subscribe ya gaysss". Saya sudah muak dengan kata kata tersebut, wkwkwk :v

Eitss tapi jangan salah lho gan, tombol subscribe atau berlangganan sangat berguna sekali bagi Channel youtube mereka untuk mendapatkan traffik lewat email..

Teruss, kalo di blogger bisa gak cara dapetin traffing lewat email ?

Jawabannya tentu saja bisa.

Form subscribe di blogger berguna untuk berlangganan artikel. Jadi setiap sobat update artikel terbaru, subscriber blog sobat akan mendapatkan notifikasi dari email sobat.

bahkan di blogger tampilan form subscribenya bisa di design sesuai yang kita inginkan.

Nah kali ini tutorkeren mau berbagi form subscriber dengan design yang tak kalah menarik dari blog lainnya,kurang lebih contohnya seperti gambar dibawah ini :

Gimana bagus gak ? Jadi langsung aja kita deh kita tutorialkan :D

Design Form Subscriber Blogger Keren di Sidebar

#1 Silakan sobat buka dashboard blogger sobat dan klik "Tata Letak" (disini saya menggunakan bahasa indonesia).

#2 Tambahkan Gadget "HTML/JavaScript" dan masukan kode berikut :

<center>
<div id="subscribebox">
<img border="0" alt="Subcribe" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA9nGSgBF7G7S_eL_Xae02b2EHnFXl-PdwZPLTr7O75ZEs6hdc6V_z438lu0bJ6bRrzpqFWndRYL6w-Hh4SXJCJG-1CpJb2M01GFrug5C4C6nYQmjvE25-xaBX3dPwDdjjwvPn8K48Ng/s1600/unnamed.png" width="100" height="100" />
<p>Berlangganan Gratis! <a href="https://tutorkeren19.blogspot.com">tutorkeren19.blogspot.com</a></p>
<form class="subscribe" action='https://feedburner.google.com/fb/a/mailverify?uri=tutorkeren19' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=tutorkeren19, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='tutorkeren19'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
<p style="font-size:90%;">Note : Setelah Berlangganan, Jangan Lupa Untuk Verifikasi Di Email Kamu!</p>
</div>
</center>

#3 Ganti yang diberi warna kuning dengan ID FeedBurner sobat, dan warna hijau link ke homepage sobat. Jangan lupa "Simpan Setelan".
#4 Waktunya menambah skin CSS, jadi sobat klik "Tema" -> "Edit HTML" dan cari kode ]]></b:skin>
#5 Tempelkan kode CSS berikut di atas ]]></b:skin> :

#subscribebox {background:#204a84; padding:20px;font-family: 'PT Sans', sans-serif;
}
.widget_follow_subscribe .widget-detail {
padding: 36px 30px 40px 30px;}
#subscribebox p {
color: white;
font-size: 15px;
text-align: center;
font-weight: 700;
}
.follow-subscribe-social {
margin: 0 0 15px;
padding: 0 0 14px;
border-bottom: #858585 solid 1px;
}
.follow-subscribe-social ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.follow-subscribe-social ul li {
display: inline;
margin: 0 15px 0 0;    border-bottom: none;
}
.follow-subscribe-social ul li:last-child {
margin: 0;
}
.follow-subscribe-social ul li a {
font-size: 17px;
color: #cacaca;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.follow-subscribe-social ul li a:hover {
color: #fff;
}
form.subscribe {
margin-top: -7px;
}
form.subscribe input {
display: block;
width: 100%;
}
.subscribe-email {
height: 45px;
border: none;
margin: 0 0 10px;
font-size: 0.928571em;
background-color: #ffffff;
text-align: center;
color:efefef;
}
.subscribe-email:focus {
outline: 0;
}
/* Placeholder color */
form.subscribe .placeholder { /* Internet Explorer 9 */
color: #cacaca;
}
form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #cacaca;
}
form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
color: #cacaca;
}
form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fafafa;
}
form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fafafa;
}
.subscribe-button {
height: 45px;
font-weight: 700;
font-size:16px;
color: #fff;
text-transform: uppercase;
border: none;
background-color:#ea5217;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.subscribe-button:hover {
background-color: #f4b458;
}
.subscribe-button:focus {
outline: 0;
}
.creadit a {background:#F35D5C;color:white;margin-top:30px;padding:20px;font-size:15px;}

#6 Jika sudah ditempel kode CSSnya simpan deh..

Nahh itu mungkin tips membuat form subscribe keren ala tutorkeren sob. Jika ada yang tidak dimengerti silakan komen dibawah ya sob..

Jangan lupa share jika bermanfaat, karena ilmu akan bermanfaat Jika setelah belajar, maka mengajarlah.. Karena dengan mengajar kamu akan terus belajar !, Salam TK ;D

Share this post

Berlangganan update artikel terbaru via email: