I will make a Feedburner form as below but with a different version. See the example below :
To make a box like the above subscription, the first step you should do is
1. Login to Blogger.com
2. Select Design >> Page Element.
3. Select the Add a Gadget on the sidebar.
4. Copy and paste the code below :
<div id="langganan">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=XXXXXXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!</p>
<p>Masukan Email Anda:</p>
<p><input id="alamat" type="text" name="email"/></p><input type="hidden" value="intutsblogspot" name="uri"/><input type="hidden" name="loc" value="en_US"/><input id="tombol" type="submit" value=" " /></form></div>
Replace the words in bold red with your feedburner id. After you insert and save the results you would like this :
<style type="text/css">
#langganan{}
#alamat{}
#tombol{}
</style>
The third function of the above code is to call the id that I have written in HTML code. Now I will explain one by one. If you look at the detail, the code<div id="langganan"></div>
are beyond the form to indicate that a large area for your form to be determined by providing additional code id = "subscription".
I will add the code for setting up wide to width. And code set its height to height. See the code as shown below :
#langganan{width:350px;height:150px;}
Now I will add a border and background on the tag subscriptions.
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;}
Now I want to add padding and font-size so neatly :
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;padding:5px;font-size:12px;}
Well ya already finished part, the next step is to edit the email boxes and buttons. Add float and also position.
#alamat{float:left;position:relative;}
#tombol{float:left;position:relative;}
Now I want to add a background to the button like this :
So I am going to set the button as shown below :
#tombol{float:left;position:relative;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5Acw2OiijSAnvOdPHsDHAdRz3qmqnmAZgGRKi7tvZbtpSOqGMv8dX3YSVcSwWvIYxuFDurE9xcguT2aDMQv3zxecy5Tukowj2IeGw4Bz_rUWEPNAEZkmM67Cs2rNtno9azD6lO2_MBk/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}
Button has now finished, Staying fox textnya like this to adjust the button :
#alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;}
Code end result is as below :
<style type="text/css">
#langganan{width:350px;height:150px;border:3px dashed #fff;background:#eee;text-align:left;padding:10px;font-size:12px;}
#alamat{float:left;position:relative;width:250px;margin-top:10px;height:35px;border-radius:3px;border:2px dashed #fff;}
#tombol{float:left;position:relative;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5Acw2OiijSAnvOdPHsDHAdRz3qmqnmAZgGRKi7tvZbtpSOqGMv8dX3YSVcSwWvIYxuFDurE9xcguT2aDMQv3zxecy5Tukowj2IeGw4Bz_rUWEPNAEZkmM67Cs2rNtno9azD6lO2_MBk/s1600/Mail-48%25282%2529.png')no-repeat;height:50px;width:52px;border:none;margin-left:10px;bottom:20px;}
</style>
<div id="langganan">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=intutsblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
Dapatkan Update Artikel Terbaru Saya Gratis Ke Email Anda!
Masukan Email Anda:
<input id="alamat" name="email" type="text" />
<input name="uri" type="hidden" value="intutsblogspot" /><input name="loc" type="hidden" value="en_US" /><input id="tombol" type="submit" value=" " /></form>
</div>
For others please create yourself yes. Because if I post all will be very long. Do not forget to leave a comment.Note: If the placement is less sempurnya button, you can refine them by using the top (top position), bottom (down position), left (left), and right (right).
Tidak ada komentar untuk " TRICK : How to Decorate Your Feedburner RSS Form. "
--------------------------------------------
Dilarang menggunakan kata-kata kasar dan kata-kata yang mengandung SARA, kata-kata yang mengindikasikan Flame terhadap seseorang sehingga terjadi pertengkaran akan saya hapus dan blok dari blogspot ini !!