Cara Membuat Subscribe Box Ala Jejak Seru

JejakSeru.com - Kali ini saya akan berbagi tutorial cara membuat subscribe box ala jejak seru. tutorial ini saya buat mendadak karena permintaan sesama teman blogger, saya sangat senang karena saya menginspirasi sesama blogger. Namun saya juga malu dan sedih, karena blogger baru seperti saya di banding-bandingkan dengan Arlina Design yang sedianya sudah memiliki nama besar dan sudah terkenal hingga keluar negeri.

Saya bersyukur juga jika disandingkan sama mbak arlina, karena saya sebagai cewek juga merasa bangga bahwa blogger cewek itu ternyata bisa berkembang dalam ketatnya persaingan antara blogger. Oke langsung aja ke tutorial kita, namun sebelumnya saya ingin memperlihatkan komentar-komentar tentang saya dan mbak arlina dalam salah satu group blogger. berikut adalah foto komentar dari teman-teman blogger:

Komentar diataslah yang membuat saya menjadi semangat untuk ngeblog, karena saya sendiri masih baru membangun blog Jejak Seru. Pengalaman saya ngeblog sudah sejak 2012 namun baru serius ngeblog ditahun ini. Mungkin itu saja sedikit tentang saya dan selanjutnya kita langsung ke tutorialnya.

Berikut Cara Membuat Subscribe Box Ala Jejak Seru :

Langkah 1 : Buka edit HTML dan cari kode ]]></b:skin> atau </style>. Letakan kode di bawah ini tepat di atasnya.

/* Subcribe */
#subscribebox {
background: #38424B;
padding: 20px;
font-family: 'Lato', sans-serif;
}
#subscribebox h4 {
background: transparent;
color: #fff;
padding: 0;
border: 0;
margin: 0 0 20px 0;
}
#subscribebox p {
margin: 0;
margin-bottom: 20px;
color: #A2A7AB;
padding: 0;
font-size: 14px;
}
form.subscribe {
margin: auto;
}
form.subscribe input {
display: block;
width: 100%;
}
.subscribe-email {
font-size: 15px;
margin-bottom: 15px;
box-sizing: border-box;
background-color: #fff;
border: 2px solid #fff;
color: #333;
padding: 9px 11px;
width: 100%;
}
.subscribe-email:focus {
outline: 0;
}
form.subscribe .placeholder {
color: #cacaca
}
form.subscribe input:-ms-input-placeholder {
color: #cacaca;
}
form.subscribe input::-webkit-input-placeholder {
color: #cacaca;
}
form.subscribe input:-moz-placeholder {
color: #fafafa;
}
form.subscribe input::-moz-placeholder {
color: #fafafa;
}
.subscribe-button {
background: #09a19f;
color: #fff;
margin: 0;
width: 100%;
border: none;
cursor: pointer;
font-size: 16px;
padding: 12px 20px;
font-weight: 700;
transition: all .4s;
}
.subscribe-button:hover {
background: #fff;
color: #4a4a4a;
}
.subscribe-button:focus {
outline: 0;
}

Langkah 2 : Letakan kode di bawah ini pada Tata Letak > Widget > HTML.

<div id="subscribebox">
<p>Berlangganan artikel terbaru dari situs ini langsung via email biar gak ketinggalan jejak.</p>
<form class="subscribe" action="http://feedburner.google.com/fb/a/mailverify?uri=JejakSeru" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=JejakSeru', 'popupwindow', 'scrollbars=yes,width=550,height=480');return true" target="popupwindow">
<input name="uri" type="hidden" value="JejakSeru" />
<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;Alamat Email&quot;;}" onfocus="if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}" value="Alamat Email" />
<input class="subscribe-button" type="submit" value="Lanjutkan" />
</form></div>

Langkah 3 : Simpan hasilnya, namun sebelumnya ganti kode yang ditandai dengan rss feedburner kamu.

Jika kurang jelas atau masih bingung gimana memasangnya tinggal berkomentar dibawah, saya akan pandu kamu supaya bisa menerapkan tutorial ini.

Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.

Berlangganan update artikel terbaru via email: