Wonderful-Tricks

The widget as seen above is the implementation from feedburner widget into an interesting modification.

To create the widget like this is not so difficult; you just need to install the CSS code and HTML at your blog. For those who are interested in installing this widget but still confused, Wonderful-Tricks will try to explain the steps.


You should know your blog’s feedburner ID

To know the ID of your feedburner, of course, you must have feedburner account, for those who have not yet known how to register in feedburner, you can read at the article Sign Up In FeedBurner,

Please login to feedburner.com, then refer to the blog that you want to know its ID, click Publicize >> click Email Subscriptions. Under the words Preview Subscription Link, you will find the code like:

<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2719849&amp;loc=en_US">Subscribe to Blogspot Tutorial & Free Template by Email</a>

Look at the numeral in red printed; it is your feedbuner ID. e.g. the ID of Wonderful-Tricks’s blog is 2719849. Please note to change the numeral to be used when creating the widget.

Determine Feed icon image to be Used

In order to look a bit pretty, Wonderful-Tricks uses Feed Icon as background. Please determine the feed icon you want to use. For your reference, you can choose any beautiful feed icons here,
Below are the example of those icons you can use any of these also:



http://i391.photobucket.com/albums/oo351/Everythingmasthi/Billboard_Feed_128x128_thumb1.png



http://i391.photobucket.com/albums/oo351/Everythingmasthi/feed_thumb1.png



http://i391.photobucket.com/albums/oo351/Everythingmasthi/feed-icon.gif



http://i391.photobucket.com/albums/oo351/Everythingmasthi/feedrss.png



http://i391.photobucket.com/albums/oo351/Everythingmasthi/green064.gif



http://i391.photobucket.com/albums/oo351/Everythingmasthi/iconefeefeh4.jpg



http://i391.photobucket.com/albums/oo351/Everythingmasthi/feeds-1.png

Upload the image to the image server that you usually use to upload, then copy the URL address.

If you have known feedburner ID and the URL address of Icon Feed, the next you shall follow the steps below:

Step 1:

• Please login to blogger with your ID
  
• Click Layout
  
• Click Edit HTML tab
  
  
• Find this code ]]></b:skin> , copy and paste the code below exactly above the code ]]></b:skin>
  
#kotak {
background: #fff;
width: 200px;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 10px 0px 0px 0px;
padding: 3px;
border-top: 1px solid #666666;
border-right: 1px solid #ddd;
border-left: 1px solid #666666;
border-bottom: 1px solid #ddd;
display: inline;
}
#tombol {
background: #2B74B4;
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 5px;
padding: 2px;
border: 1px solid #234B69;
font-weight: bold;
}
#email{
background: #FFFFFF;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
#submit {
background: #2B74B4;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 0px;
border: 1px solid #234B69;
}

  
• Click SAVE TEMPLATE button.

• Click Page Elements tab
  
• Click Add a Gadget
  
• Click the sign plus (+) for HTML/JavaScript.
  
  
• Copy and paste the code below in the available area
  
<div style="background:url(http://i391.photobucket.com/albums/oo351/Everythingmasthi/Billboard_Feed_128x128_thumb1.png) no-repeat top right;padding:10px 0px">
<p>Insert your email address to receive updates</p>
<p>Blogspot tutorial, Free Template and site Info</p>
<p><form id="subscribe" action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input id="kotak" onfocus="if (this.value == 'Enter your email address...') {this.value = '';}" value="Enter your email address..." name="email" onblur="if (this.value == '') {this.value = 'Enter your email address...';}" type="text"/><input value="http://feeds.feedburner.com/~e?ffid=2719849" name="url" type="hidden"/><input value="Wonderful-Tricks" name="title" type="hidden"/><input id="tombol" value="Subscribe" type="submit"/></form></p></div>
<img style="float:left; margin:0px 15px 0 5px" src="http://i391.photobucket.com/albums/oo351/Everythingmasthi/97ryac.png" align="left"/><a href="http://labs.google.co.in/smschannels/subscribe/Tricks-Fun" target="_blank" rel="nofollow">SMS Alerts</a> : Receive Posts Headlines on your Phone.

  
• Change the image address, feedburner ID, and the words in differently printed with yours
  
• Click SAVE
  
• Done