\ \

Stylish Subscription Box Untuk Blogger

\ \ 2 comments
Akhirnya bisa juga update blog ini, setelah beberapa minggu vakum dari dunia blogging karena ruwetnya tugas-tugas yang diberikan sekolahku. Karena banyaknya tugas dan waktu yang diberikan oleh guru sangat sedikit maka aku relakan blogku tak terupdate. Langsung saja, pada kesempatan kali ini saya akan berbagi tutorial membuat Subscription Box. Jika penasaran dengan bentuknya ini dia screenshootnya.
Jika sobat berminat dengan Subscription Box seperti di atas silahkan ikuti langkah-langkah berikut ini.


1. Login ke akun Blogger sobat terlebih dahulu
2. Masuk tab Rancangan lalu pilih Edit HTML.
3. Backup template sobat dengan klik Download Template Lengkap untuk meghindari hal-hal yang tidak diinginkan.
4. Centang Expand Template Widget.
5. Cari kode ]]></b:skin> lalu tambahkan kode berikut sebelum kode tadi.
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXIL4u9tz9VPtQi902qnp5RxDUtrQuTlJsa0krAgINeO7tz4bpgqnnnT1HmlmROhMnBipLlfDulDloq6_qphQnRCEQnKUGrItR-ZkunRVu2JBG3iRZTLqWSDMgTjdTjxqAkuIKANz7jUM/) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
6. Cari kode berikut <div class='post-footer-line post-footer-line-1'> lalu tambahkan kode berikut setelah kode tersebut.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='margin-left:10px; margin-top:0px; margin-bottom:3px;align:center;'>
<div class='mbt-email'>
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlackDeviant', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="BlackDeviant" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div> </div></b:if>
 Catatan:Ganti kode berwarna merah dengan alamat feedburner sobat.
7. Simpan template sobat dan lihat hasilnya.
Labels: ,

Artikel Sejenis

loading..

2 comments:

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">Kode Anda</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">Kode Panjang Anda</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL Gambar</i>
Untuk menyisipkan judul, gunakan tag <b rel="quote">Kata-kata Anda</b>