Cara Membuat Tombol Subscribe Responsive di Blogger
Salah satu untuk mendapatkan pengunjung setia adalah memasang tombol subscribe di Blogger. Tombol subscribe ini sangat penting untuk sebuah blog karena dengan adanya tombol ini pengunjung bisa berlangganan artikel ketika anda sedang update dan pengunjung bisa mendapatkan update'an terbaru tersebut melalui email mereka. Nantinya ketika anda membuat artikel baru, maka artikel tersebut akan terkirim ke email pengunjung dan kemungkinan mereka akan melihat notifikasi email tersebut dan mengunjungi blog anda. Kali ini saya akan membagikan Tombol Subscribe Newsletter dimana tombol ini bisa anda letakan dibagian Footer, dibawah postingan, atau di Sidebar. Ok, langsung saja ke proses pembuatan.
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema
3. Edit HTML.
Proses Pembuatan :
1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* Top Subscribe */
#subscribe{
display:block;
background-color:#374760;
position:relative;
width:100%;
padding-top:25px;
padding-bottom:25px;
z-index:9;
}
input#wq{
background:#fff;
color:#333;
font:400 15px/12px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin:0;
padding:21px;
width:60%;
height:22px;
outline:0;
border:none;
border-radius:4px;
box-shadow:initial;
transition:all .1s;
}
#subscribe p{
float:none;
width:100%;
margin-top:10px;
margin-bottom:-10px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
font-size: 15px;
letter-spacing:0.07em;
color:#fff;
}
#subscribe p::selection{
color:#333;
}
input#wq:focus{
color:#333;
box-shadow:inset 0 2px 2px rgba(0,0,0,0.15);
}
form.subscribe-form{
position:relative;
width:80%;
margin:20px auto;
text-align:center;
}
form.subscribe-form:focus {
box-shadow:inset 0 2px 2px rgba(0,0,0,0.15);
}
.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:15px 0;
}
form.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:10px 0 0;
width:auto;
}
input#subscribesubmit{
background-color:#36a7f2;
border:1px solid transparent;
color:#fff;
display:inline-block;
position:absolute;
right:25%;
top:0;
padding:10px 20px;
border-radius:0 4px 4px 0;
transition:.2s all;
font-weight:600;
text-transform:uppercase;
font-size:14px;
}
input#subscribesubmit:hover, input#subscribesubmit:focus , input#subscribesubmit:active{
background-color:#1f6b9a;
color:#fff;
cursor:pointer;
outline:0;
}
@media only screen and (max-width:768px){
input#subscribesubmit{
top:10px;
width:100%;
border-radius:4px;
float:none;
position:relative;
right:0;
}
#subscribe{
padding-bottom:30px;
}
input#wq{
width:100%;
}
p#subscribe{
font-size:14px;
letter-spacing:0.15em;
}
@media screen and (max-width: 768px){
#subscribe-email{
width:85%!important;
}<footer id='footer-wrapper'> Jika ingin meletakkan di footer, letakkan kode berikut ini tepat diatasnya tulisan copyright.
<data:post.body/> Jika ingin meletakkan dibawah postingan, pilih kode yang ke-2 atau anda bisa meletakkan kode berikut ini dibawah tombol share <div class='sharepost'>
4. Copy & Paste kode berikut ini, dan letakkan sesuai dengan selera anda dimana saja.
<div id='subscribe'>
<p>SUBSCRIBE TO NEW ARTICLE</p>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=MayCyber-Download/HBiCa' class='subscribe-form emailsubscribe' data-code='p4s8z2' method='POST'>
<input id='subscribe-email' onblur='if (this.value == "") {this.value = "Masukan Email . . .";}' onfocus='if (this.value == "Masukan Email . . .") {this.value = "";}' pattern='[a-zA-Z0-9.!#$%�*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*' required='required' style='background:#fff;color:#333;font:400 15px/12px"Roboto",Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;padding:9px 20px;width:40%;outline:0;border:1px solid transparent;border-radius:4px;box-shadow:initial;transition:all .1s;' type='email' value='Masukan Email . . .'/>
<input id='subscribesubmit' type='submit' value='Daftar'/>
</form>
</div>Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage atau postingan anda, widget tersebut udah muncul atau belum. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Tombol Subscribe Responsive di Blogger
Related Post
0 Response to "Cara Membuat Tombol Subscribe Responsive di Blogger"
Post a Comment