Chira Sathi

Friday, September 30, 2011

Social Bookmarking Widget For Blogger – Bookmark and Share homepages!

With the release of Cute Box blogger Template I also released some useful blogger widgets which includes a Bookmarking Widget For your blog’s homepage. This widget helps readers to bookmark your blog’s homepage on their favourite bookmarking services like Google bookmark, Stumbleupon, Delicious, Digg etc. It contains icons from our Circular Style Social Media Icon Set. This is how this widget looks like,
Bookmarking Widget

To add this widget to your blogs, follow these steps,

Go To Blogger > Layout

Click Add a Gadget or Add a Page element

Choose HTML/JavaScript

Inside HTML/JavaScript paste the code below,

<center><tr>
<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8TnPN1eGNOjrtOK7rTfaKKX0I4TD3VUFvQ4F-18BReEnZMEUSd9_zqnBgc7BpcoCMR9HKlwNCfaQHg9FdYscfnA9EcLlSkprOHY50PW7hlh6tRQRb3Bo2zK96TiEeb3QEOEY_7ESCCyA/s400/FACEBOOK.png" height="25"/></td>
<td height="30"><a href="http://www.facebook.com/sharer.php?u=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Facebook</a></td>
</tr>
<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwqMscsW8GPR-ZwtEEX7heWt9mxK30byD0OB82qCgwvYS0qkRIoe8o-gjjxq29MCridmwbl4f9XzLQoMFpnfP2CjeCAWxGzbt7eBF1jwi_wMLyGhL5AYBCBurguEOapwG9eqReSbuGmw/s400/TWITTER.png" height="25"/></td>
<td height="24">
<a href="http://twitthis.com/twit?url=http://YOUR-BLOG-NAME.blogspot.com">Share on Twitter</a></td>
</tr>
<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxjPYELpkLY7kSDUMuO2rVDqbuGgxe9xtLqCNPPJX7Bhh2koDAvKdLV80lqsJ0BUOOcUhbrCnAiNTnV_K0hsRJmealgutt9fidf5_L6MUHFhoOCHTKahENjO5n5oqensCpN2LkSjairk/s400/STUMBLE-UPON.png" height="25"/></td>
<td height="30"><a href="http://www.stumbleupon.com/submit?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on StumbleUpon</a></td>
</tr>
<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtV7AM5ienoGXXq8YcbvmIEuvgrZbTuHF6kd1EnQ6KCCTzJLQLM-U8ABVR2kiZRFwZTEpieIYLib39jg4zcv-c4N3ZxRwLJcZRjSkSG3ZTJTM23bWi7GmlbK2yio3XrLz8h5qnsZUpEI0/s400/DELICIOUS.png" height="25"/></td>
<td height="30"><a href="http://del.icio.us/post?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Delicious </a></td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNC5w5twpa3XFkaMgUaXufcNJ4G28YDgckBcoM90a9oJEoSYJ2FhAksDlOfIcx_biI5DtM-vNG02v8W9Zls8HQeX0HuXs4cHd0bVHZdrVvXr0sXwR9EuQNmShvOAHhDyaAi_betAluUY/s400/DIGG.png" height="25"/></td>
<td height="30"><a href="http://digg.com/submit?phase=2&url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Digg </a></td>
</tr>
<tr>
<td height="30"><img border="0" width="22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EnTCM1w7EIolAYMQsdIHu3WTSt18T_Mb5VmpQIo2l-E76iqAdLvbIvKHsyfsIRBmaTO1LmH5aAF3BEeVgVtfHIWAVRhQ0uT_K___T_NAwuWX-6hCMx48nyVNE80GjT0HtMWq7j1dK2Q/s400/Google-icon.jpg" height="22"/></td>
<td height="30"><a href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow" title="Bookmark this blog on Google">Bookmark on Google</a></td>
</tr>
<tr>
<td height="30"><img border="0" alt="Email" width="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK94ive5_mGXDW_8SCB4qqThk5WWMI0E8hE0LqwpaY2xnpVVJVp5waoW_F43kds7JLof1xmmH9QAc6zAsj9_CK0DDdxjke02h73DqqZUJzC8vyzr5xnHc6NlE6BmzIMyDPh49fv5tnMPNp/s400/Email+Orange_128.png" height="22"/></td>
<td height="30"><a href="http://feedburner.google.com/fb/a/mailverifyuri=tntbystc&loc=en_US" target="_blank" rel="nofollow">Receive Email Updates</a>
</td>
</tr>
</tbody>
</table></td></tr></center>

Remember to replace YOUR-BLOG-NAME with your Blog’s good name and the Subscription Link i.e http://feedburner.google.com/fb/a/mailverifyuri=tntbystc&loc=en_US with your own Feedburner subscription link. You can find your subscription link by going to the following location in your feedburner account, Publicize > Email Subscription . Just below Email Subscription page you will find a code as shown below,

Finally save your widget and preview your blog to see the new change!

Create Wordpress Subscription Form

It's a long time since we last released a widget. The widget today is really a useful one. It is a smart container which displays the total number of subscribers, contains RSS link, Facebook link and Twitter link. It also contains a beautiful subscription form where visitors can submit there emails to receive free website updates. This Widget is made Compatible to work with all browsers especially with IE8.

I named it Wordpress Subscription Form because you might have seen such widgets on every Wordpress blog and Blogger lacks it.

To have a look at our previously designed Subscription Forms kindly visit these links,

Live Demo

How To Create Wordpress Subscription Form?

The steps are made really simple. Follow these,

Go To Blogger > Design
Select an HTML/JavaScript Widget
Paste the code below into the widget

<style>
.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RH70_hLspUQp0pFEZl_mN64PFjIAvz7c_QI35CFkZW9N-RYPQsuRoK2A4-NlSG_FW6vNaf7fg4Ovi3iHrDp0pys0RlL5n35bQAjSUm3A4s75G3hDCnXlojNNBvH5tBkyHVQQhP4ybZc/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYhXodqsvilbBs45vP-icLC3IZZe9xUZoNK1AxESplJmNI8BIaLDGxIyZ_KUb_Q8qf6qtUn3x2CK7y88T_rqxvrt9BYpQVK2uRyLXo0BHePXxMY8Awutx8aj7GwbbU2sXASlPJ4PR99zQ/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5QJiGRlHKwUXOJxaBgnIVTY8QYB_226f3uy4Fqf68tmsDvWuYeh7PWDfApVF7ajrj00u2vfSe2n433qLFre4i_dZ9yZhHI5FlozWc4Y1RA6WrAmtzGV7QJ4AmsYjwjFJNU7H4tYL7Vk/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQdnXxCo6sefdpKvUCy0czGXg4D-1YjFF5k89jAzd2f6VYjnd1CpxKyX4K729NLTr3dkGLNoBowgV5PlzcisGuJ9pQMPlOdctwTnW4gKiJbcYL7FnSExKjnr_JUm4O9bfxUYne60kW9U/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>

<div class="mbtbar"><div class="count">Join <span class="bigcount">1675+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

4. Save the widget and you are done!

How To Style and Edit the Widget?

Follow these,

To Change the the Blue Colour of the Submit button Change #57ABFE to a Light shade and this #0080ff to a dark shade. Our Colour Generator Can help in this case.
Replace 1675+ with your Feed count and always update it manually once a week. To change its colour edit this #F17C18
Replace http://www.mybloggertricks.com/feeds/posts/default with your feedburner RSS Feed link.
Replace http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744 with your Facebook profile Link
Replace http://twitter.com/mybloggertricks with your twitter profile link
Replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your feedburner RSS Email Link
Replace tntbystc with the Feedburner RSS Email Title which is always written at the end of your FEED Email Link as shown below,

http://feedburner.google.com/fb/a/mailverify?uri=tntbystc

How did you like it?

I would be really pleased to hear about your suggestions and feedback. If you faced any trouble then do not panic and let me know :>
I would appreciate MBT regular readers to kindly advise me whether or not to change MBT's current Feed Form with this new one because I personally like this new design. =)

Subscription Email Form For Blogger Equipped With RSS Feed

I am extremely sorry for delaying this post. Due to burden of studies I was finding it difficult to publish posts but now everything is fine. Now without wasting your time lets jump straight to the tutorial of adding a beautiful Subscription form to the sidebars of your BlogSpot blogs.

Before Proceeding make sure you have burnt your feeds at www.feedburner.com
Now do the following,

Go To Blogger > Layout
Click Add a Gadget or Add a Page element
Choose HTML/JavaScript Widget
Inside this widget paste the code below,

<a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXkHWrttPPXviNXJ_87c5s63cYL9RD2YMXIbaToBAoldARuUGDv2sLNIunb5gd335GhJo5Xpk8ZEgU4UHhGI-l_Vst2EAUZqDTPhav8A66OpZWSkZkjAxAwRMTTzRMCrKhmQIk8ubo-Bs/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Join the team! </a><span style="color: #5C6AA4; font-weight: bold;">By Submitting your email address:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#5C6AA4; background: #fff; border:1px solid #5C6AA4; width: 90px;" name="email" type="text"/><input value="TntByStc" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="GO!" class="mbt1" type="submit"/></form><br/>

Now you need to make some important changes to customize the widget.

Replace http://feeds2.feedburner.com/TntByStc with your Feed URL that Feedburner has provided you. If you don’t now how to get it simple replace TntByStc with your Feed title like this,

http://feeds2.feedburner.com/Paste-Your-Feed-Title-here

To use a different RSS Feed Icon simple change the URL below with that of yours,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXkHWrttPPXviNXJ_87c5s63cYL9RD2YMXIbaToBAoldARuUGDv2sLNIunb5gd335GhJo5Xpk8ZEgU4UHhGI-l_Vst2EAUZqDTPhav8A66OpZWSkZkjAxAwRMTTzRMCrKhmQIk8ubo-Bs/s400/MBT-RSS-FEED.gif

Replace TntByStc with your own Feedburner Feed Title
The Color code #5C6AA4 refers to the text colour and border colour of the Subscription Box. May be MBT Color Chart will help you. If you are using MBT Buster Themes than change the colours as follows,

               For Buster Theme 1 leave the code #5C6AA4 unchanged.
               For Buster Theme 2 replace #5C6AA4 with #64A6E4
               For Buster Theme 3 replace #5C6AA4 with #37BD07
               For Buster Theme 4 replace #5C6AA4 with #7CA2C4
               If you are using MBT Church Theme then replace #5C6AA4 with #7CA2C4
That’s it. Hit Save and Preview Your Widget!
I hope it was simple to understand :|

Friday, September 30, 2011

How To Create Wordpress Subscription Form?

How To Style and Edit the Widget?

How did you like it?

Popular Posts