16 Februari 2015

Membuat Widget Subscribe Responsive


Siomponk.Com - Seiring kemajuan teknologi, mau tidak mau dunia blogging juga ikut terhadap kemajuan tersebut dan harus bisa menyesuaikan dengan kemajuan tersebut. Salah satunya adalah template blog, dimana saat ini sudah banyak pengguna gadget android, dengan berbagai ukuran layar yang tentunya juga mempengaruhi tampilan sebuah blog. Karena saat ini bukan hanya PC dekstop atau laptop saya yang dapat membuka blog, bahkan gadget mobile pun sudah biasa. Untuk itulah pemilik blog harus pandai-pandai memilih template dan widgetnya agar enak dilihat dengan berbagai ukuran layar monitor.

Pada postingan saya kali ini, saya akan membahas tentang Membuat Widget Subscribe Responsive, tentunya jika kita memasukkan keyword "membuat widget subscribe" sudah banyak beredar. Kali ini saya akan membuat widget tersebut dengan dukungan responsive. Sebagai contoh seperti ada pada gambar diatas.

Adapun cara membuatnya adalah sebagai berikut:

- Edit template, menuju ke HTML
- Pasang kode berikut ini DIATAS code ]]></b:skin>
/* CSS Subscribe by Siomponk.Com */
.subscribe-wrapper {
color : #fff;
background: none repeat scroll 0% 0% #ff0000;
font-family: "Oswald",Verdana,Sans-serif;
font-size : 14px;
line-height : 20px;
padding : 1px 20px 10px;
text-align : center;
}
.subscribe-form {
background : #ff0000;
clear : both;
display : block;
margin : 10px 0;
overflow : hidden;
}
form.subscribe-form {
clear : both;
display : block;
margin : 10px 0 0;
width : auto;
overflow : hidden;
}
.subscribe-css-email-field {
background : url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) 1px -27px
no-repeat #eee;
color : #444;
margin : 0 0 15px;
padding : 12px 40px;
width : 100%;
border : none;
}
.subscribe-css-button {
background: none repeat scroll 0% 0% rgb(138, 0, 0);
color : #fff;
cursor : pointer;
font-weight : 700;
padding : 7px;
text-transform : none;
width : 100%;
border : none;
font-size : 16px;
transition : all 0.3s ease-in;
}
.subscribe-css-button:hover {
transition : all 0.3s ease-in;
background: none repeat scroll 0% 0% rgb(255, 136, 0);
}ound : rgba(0, 0, 0,0.2); }
- Simpan template anda
- Buat widget baru dengan pilihan Javascript/HTML
- Masukkan code berikut ini pada kotak widget tersebut
<div class="subscribe-wrapper">
<p><b>Ikuti Blog ini dengan memasukan Email Anda dibawah ini!<br />Terima Kasih</b></p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=siomponkdotcom', 'popupwindow', 'scrollbars=yes,width=560,height=500');return true">
<input name="uri" type="hidden" value="siomponkdotcom" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/>
<input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" />
</form>
</div></div>
KETERANGAN:
?uri=siomponkdotcom = ganti dengan ID RSS Feedburner milik anda (feedburner.google.com)
value="siomponkdotcom" = ganti dengan ID RSS Feedburner milik anda

Jika anda sedikit malas untuk ngutak-atik, anda bisa memadukan script diatas menjadi 1 pada widget blog anda dengan cara menambahkan code <style> di atas code CSS, dan ditutup dengan code </style>.

Jadi bentuknya seperti berikut:
<style>

--- KODE CSS ---

</style>

--- KODE WIDGET SUBSCRIBE ---

Nah, demikianlah postingan saya kali ini Membuat Widget Subscribe Responsive, dan semoga postingan saya ini dapat bermanfaat untuk anda.
Salam....
Previous Post
Next Post

Seorang publisher blogger asal kota Jogjakarta yang mencoba mencari jati dirinya dan yang selalu belajar dalam hidupnya. Sangat menyukai ungkapan
"Jangan lihat dari siapa kebenaran itu datang, tapi lihatlah isi dan makna dari kebenaran itu."

0 komentar:

PERATURAN BERKOMENTAR:

- Gunakan BAHASA yang baik dalam berkomentar
- Dilarang SPAM dalam berkomentar
- Dilarang SARA dan SARU dalam berkomentar
- Dilarang OOT dalam berkomentar

Jika terdapat hal demikian pada komentar anda, kami akan menghapus komentar anda tersebut.