iMledoz – Kali ini
saya ingin share bagaimana Cara Membuat Widget Email Subscription Responsive di
Blogger, kali ini widget email subscribe yang akan saya bagikan telah
dimodifikasi agar tampak lebih profesional.
Anda dapat menyesuaikan kode
sesuai yang Anda inginkan, jika Anda memiliki saran atau pertanyaan tentang
tutorial di atas Anda dapat berbagi di dalamkotak komentar di bagian bawah blog
ini.
Langsung saja ke topik “Cara
Membuat Widget Email Subscription Responsive di Blog “
Petama cari kode </head>
kemudian letakkan kode dibawah ini diatas kode </head>
<link
href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'
rel='stylesheet' type='text/css'/>
<link
href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet'
type='text/css'/>
Disini saya akan memberikan
2 model widget Email Subscribe untuk Blogger yang kesemuanya tentu Responsive.
Model # 1
1. Masuk ke akun blogger
Anda, Dashboard >> Template
>> Edit html
2. Mencari kode berikut ]]></
b:skin>
3. Setelah ketemu, letakkan
kode dibawah ini, di atas kode ]]></ b:skin>
#subscribebox{background:#576269;padding:20px;font-family:'PT
Sans',sans-serif;}
.widget_follow_subscribe
.widget-detail{padding:36px 30px 40px}
#subscribebox
p{color:#fff;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 .2s
ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s
ease-in-out;-o-transition:color .2s ease-in-out;transition:color .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:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.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{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color
.2s
ease-in-out;-moz-transition:background-color .2s
ease-in-out;-ms-transition:background-color .2s
ease-in-out;-o-transition:background-color .2s
ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6;
float: right; font-size: 8px;}
4. Kemudian Simpan Template
5. Silahkan masuk ke menu Layout
(tata letak) >> Tambah Gadget ( Add Gadget ) >> HTML/Javascript
6.Letakkan kode dibawah ini
di dalam kotak HTML yang disediakan
<div
id="subscribebox">
<div
class="follow-subscribe-social">
<ul>
<li><a
href="#" target="_blank"><i class="fa
fa-facebook"></i></a></li>
<li><a
href="#" target="_blank"><i class="fa
fa-twitter"></i></a></li>
<li><a
href="#" target="_blank"><i class="fa
fa-linkedin"></i></a></li>
<li><a
href="#" target="_blank"><i class="fa
fa-google"></i></a></li>
<li><a
href="#" target="_blank"><i class="fa
fa-pinterest-p"></i></a></li>
<li><a
href="#" target="_blank"><i class="fa
fa-dribbble"></i></a></li>
<li><a
href="#" target="_blank"><i class="fa
fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my
Newsletter</p>
<form
class="subscribe"
action='http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA'
method='post'
onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA,
'popupwindow',
'scrollbars=yes,width=550,height=520');return true'
target='popupwindow'>
<input name='uri'
type='hidden' value='ID FEEDBURNER-ANDA'/>
<input name='loc'
type='hidden' value='en_US'/>
<input
class="subscribe-email" type='text' name='email' onblur='if
(this.value == "") {this.value = "Your
Email";}' onfocus='if (this.value == "Your Email")
{this.value = "";}' value='Your Email'/>
<input
class="subscribe-button" type="submit"
value="Subscribe" />
</form>
</div>
<div
class="creadit">
<a href="http://bloggingpasuruan.blogspot.co.id"
rel="dofollow" target="_blank"> Get This
Widget</a></div>
7. Simpan dan lihat hasilnya…….
Berikutnya Widget Subscribe
Model # 2
1. Masuk ke akun blogger
Anda, Dashboard >> Template
>> Edit html
2. Mencari kode berikut
]]></ b:skin>
3. Setelah ketemu, letakkan
kode dibawah ini, di atas kode ]]></ b:skin>
#subscribe-box
{background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p
{font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield
{padding:0px 20px 10px;}
#subscribe-box .emailfield
input
{background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all
0.4s ease-in-out;}
#subscribe-box .emailfield
input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield
.submitbutton
{background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family:
'PT Sans',
sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all
0.4s ease-in-out;}
#subscribe-box .emailfield
.submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield
.submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6;
float: right; font-size: 8px
4. Kemudian Simpan Template
5. Silahkan masuk ke menu
Layout (tata letak) >> Tambah Gadget ( Add Gadget ) >>
HTML/Javascript
6.Letakkan kode dibawah ini
di dalam kotak HTML yang disediakan
<div
id="subscribe-box">
<center>
Subscribe for our all latest
news and updates</center>
<div
class="emailfield">
<form
action="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA"
method="post"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA,
'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
target="popupwindow">
<input
name="name" onblur="if (this.value == "")
{this.value = "Your Name";}" onfocus="if
(this.value == "Your Name") {this.value = "";}"
type="text" value="Your Name" />
<input
name="email" onblur="if (this.value == "")
{this.value = "Your Email";}" onfocus="if
(this.value == "Your Email") {this.value =
"";}" type="text" value="Your Email"
/>
<input
name="uri" type="hidden" value="ID FEEDBURNER-ANDA" />
<input
name="loc" type="hidden" value="en_US" />
<input
class="submitbutton" type="submit" value="Subscribe
Now" />
</form>
</div>
</div>
<div
class="creadit">
<a href="http://bloggingpasuruan.blogspot.co.id/"
rel="dofollow" target="_blank"> Get This
Widget</a></div>
7. Simpan dan lihat hasilnya…..
Anda bisa langsung cek dari
HP android anda, apakah widget diatas benar-benar responsive atau tidak…… 100%
Responsive dech !
Semoga bermanfaat…..
