• Iklan text, 150 Karakter Free hingga akhir tahun
  • Iklan text, 150 Karakter Free hingga akhir tahun

TRICK : How to Decorate Your Feedburner RSS Form.

Posted by at
On this post I will share about "How To Decorate Your Feedburner RSS Form". Many of my friends ya my blogger who would like to know how to decorate rss subscription form in order to attract the readers to enroll in their feed.
I will make a Feedburner form as below but with a different version. See the example below :

Menghias kotak langganan feedburner

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 :
I've made ​​3 Id CSS on html tags there are: subscriptions, address and keys. Now I want to decorate it with CSS by entering the following code just above the code that I provided earlier :
<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. "

Prohibited from using harsh words and the words of the SARA, the words that indicate the Flame against someone that I would quarrel delete and block from this blogspot!!
--------------------------------------------
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 !!

Back to Top