HaCk-A-tHoN: Blogger Widgets and plugins

How to Add Feedburner Email Subscriptions Box to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="article-entry entry-content" style="background-color: #fafafa; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 24.44444465637207px; margin: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;">
<a class="article-thumb single-thumb" href="http://www.way2blogging.org/2011/11/add-feedburner-email-subscriptions-box.html" rel="bookmark" style="border: 0px; color: #3395bf; display: block; float: right !important; font: inherit; margin: 0px 0px 15px 10px; padding: 0px; vertical-align: baseline;" title="How to Add Feedburner Email Subscriptions Box to Blogger"><br /><img alt="How to Add Feedburner Email Subscriptions Box to Blogger" class=" wp-post-image" height="225" src="http://www.way2blogging.org/wp-content/uploads/blog_images/How-to-add-Feedburner-Email-Subscriptions-Box-to-Blogger.jpg" style="border: 0px; display: block; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: baseline; width: auto;" title="How to Add Feedburner Email Subscriptions Box to Blogger" width="225" /></a><div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
In this simple tutorial i will show you, Adding Feedburner Email subscription box to your blog/site. We know that, we can add the blogger official Follow by Email widget, However some blogger does not like that widget. for those bloggers, this tutorial is very useful.</div>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
<span id="more-73" style="border: 0px; font-size: 14.44444465637207px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></div>
<div class="clear" style="border: 0px; clear: both; font-size: 14.44444465637207px; font: inherit; height: 1px; margin: 0px; padding: 0px; vertical-align: baseline; width: auto;">
</div>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
First you need to create a Feedburner Feed for your blog. i already posted a detailed tutorial on How to create a blog feed with feedburner.</div>
<h3 style="-webkit-box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; background-color: transparent; background-image: url(http://www.way2blogging.org/wp-content/themes/way2blogging/images/h3.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 1; margin: 20px 3px; padding: 6px 10px 6px 30px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase; vertical-align: baseline;">
NOTE TO NEWBIES AND WAY2BLOGGING.ORG SUBSCRIBERS</h3>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
After subscribing to Email Updates of any blog, then you will receive a Confirmation Email to your inbox that contains a conformation link. you must click that conformation link to receive Email updates from your subscribed blog.</div>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
Why i am giving this note? because, till today(27/11/11) way2blogging has <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">632</b> users subscribed to email updates. but <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">271</b> users are not conformed their subscriptions and they not receive way2blogging updates until they conforms their subscription.</div>
<h2 style="background-attachment: scroll; background-color: transparent; background-image: url(http://www.way2blogging.org/wp-content/themes/way2blogging/images/star.png); background-position: 5px 50%; background-repeat: no-repeat no-repeat; border: 0px; clear: both; color: #662d2d; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 1.2; margin: 25px 5px; padding: 2px 10px 2px 40px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase; vertical-align: baseline;">
HOW TO ADD FEEDBURNER EMAIL SUBSCRIPTIONS BOX TO BLOGGER?</h2>
<ol style="border: 0px; font: inherit; list-style-image: initial; list-style-position: initial; margin: 10px 0px 20px 15px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Login to <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Feedburner Dashboard</b> and Locate your Blog Feed.<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
Click on the Feed title to get it’s Dashboard</div>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
<img alt="How to Add Feedburner Email Subscriptions Box to Blogger" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiufCB7fY6AN_9zmN31AWoSmDdMJtiHFThzHIO4FZgpGrn1VbM7B_fw-3AsaHRlgy8gwBLSEO8zoRQa1PN1kN3RrOR_yT0jCZ8h9yfE41fVRKqQFQYTyuBItnb60bGt4fTkgwPYPF-xg68N/+to+add+Feedburner+Email+Subscriptions+Box+to+Blogger-1.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font: inherit; height: auto; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></div>
</li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Navigate to <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Publicize</b> > <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Email Subscripts</b></li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">If your Email Subscripts are <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">not Activated</b>, then you will see this screen.<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
-> To activate Email Subscripts, Just click on <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Activate</b> button.</div>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
<img alt="How to Add Feedburner Email Subscriptions Box to Blogger" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJD3Lzh2wxBypwFTkrbHAwDjWtytTupAnaZqWq6jGjmEbtycYTJ5AzHXQqC-zjqgWXFLbp50GPmaqSzCsJvRctiRq3SIpYQiXbAu9g5twJBM-bMA3XTX2A6VDvtGUksa3ef-DlofPGi-J/+to+add+Feedburner+Email+Subscriptions+Box+to+Blogger-2.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-size: 14.44444465637207px; font: inherit; height: auto; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></div>
</li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">If your Email Subscripts are <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Activated</b>, then you will see this screen.<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
<img alt="How to Add Feedburner Email Subscriptions Box to Blogger" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGA9DyAB3Nsk_KXqgBiKkd5trcu-UaVZCZzvMG2Ok08hLjnHG-1kpBLBeQr-u5vOegU3H2aUfNdVTqAdP35T17bRVntrscEaf7LXaDch8men03krqH_y0q2CxOhOIn8M_xbQyOw2tks14z/+to+add+Feedburner+Email+Subscriptions+Box+to+Blogger-3.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-size: 14.44444465637207px; font: inherit; height: auto; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></div>
</li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Under <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Subscription Management</b>, Choose the Language, and select use widget as <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Blogger</b>, finally click on <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Go</b> button to add the Feedburner Email Subscriptions Box to your blog.<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
<img alt="How to Add Feedburner Email Subscriptions Box to Blogger" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMSy__z4uD0N7LlMgAplHrshQW8VHutpSyczyj6BmUTNTpl0Tv-P1z8VRbqn7rB5XX9UxZRTQYXFul_kkiDdjxgMy8NkWaYeTt6Udv__eGbCLsii6WwcOp-HDJNejugyK5gJI-NUmdW0mL/+to+add+Feedburner+Email+Subscriptions+Box+to+Blogger-4.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font: inherit; height: auto; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></div>
</li>
</ol>
<div style="border: 0px; font: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
This is very simple tutorial, and is very useful for my up coming posts. and also, i will give you some awesome styles of email subscriptions gadgets. so stay connected with my blog. <img alt=":)" class="wp-smiley" src="http://www.way2blogging.org/wp-includes/images/smilies/icon_smile.gif" style="border: 0px; font-size: 14.44444465637207px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: baseline; width: auto;" /></div>
</div>
</div>

In this simple tutorial i will show you, Adding Feedburner Email subscription box to your blog/site. We know that, we can add the blogger official Follow by Email widget, However some blogger does not like that widget. for those bloggers, this tutor…

Add Auto Scrolling Recent Posts Widget (v3) For Blogger / Blogspot

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="background-color: #fafafa; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 24.44444465637207px; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">
Auto Scrolling Recent Posts Widget, Blogger recent posts in your blog which looks Good in your Blogger blog. This is similar to display recent posts in your side bar or any where you want, but this will have marquee effect in this widget. You can scroll recent posts horizontally or vertically according to your need. In my Previous post Many Bloggers are asking for Setting out Font Size, Background color, Image Bullet, and so on. <a href="" name="more" style="border: 0px; color: #3395bf; font-size: 14.44444465637207px; font: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;"></a>I include all feathers in this widget and redesigned for U. I hope you are happy with this one also…. <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Watch live Demo</b><br /><span id="more-31" style="border: 0px; font-size: 14.44444465637207px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></div>
<div class="clear" style="background-color: #fafafa; border: 0px; clear: both; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; height: 1px; line-height: 24.44444465637207px; margin: 0px; padding: 0px; vertical-align: baseline; width: auto;">
</div>
<div style="background-attachment: scroll; background-color: #e0f8ec; background-image: none; background-position: 0% 0%; background-repeat: repeat repeat; border: 1px dashed green; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 24.44444465637207px; margin: 0px; padding: 10px; vertical-align: baseline;">
<div class="way2blogging-srp" style="border: 0px; font-size: 20px; font-weight: bold; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<marquee behavior="scroll" direction="left" scrollamount="15%" scrolldelay="5" width="100%"><img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2012/05/blogger-in-draft-blog-is-being-retired.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">The Blogger In Draft Blog Is Being Retired</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2011/11/bloggers-brand-new-google-page.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Blogger’s Brand New Google+ Page</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2011/10/use-your-google-profile-with-your.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Use your Google+ profile with your Blogger blogs</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2011/08/introducing-google-scribe-in-blogger.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Introducing Google Scribe in Blogger</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2011/07/bloggers-updated-interface-now.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Blogger’s Updated Interface Now Available for All Draft Users</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2011/06/customize-your-favicon.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Customize Your Favicon</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2011/04/blogger-redesigned.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Blogger, Redesigned</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2010/12/new-mobile-templates-for-reading-on-go.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">New mobile templates for reading on the go</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2010/12/search-and-insert-youtube-videos.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Search and Insert YouTube Videos</a>    <img class="w2bbulletbimg" src="http://www.dan-dare.org/Dan%20FRD/JerryAni.gif" style="border: none; font-size: 20px; font: inherit; height: auto; margin: 0px; max-width: 98%; padding: 0px; vertical-align: middle; width: auto;" /> <a href="http://bloggerindraft.blogspot.com/2010/11/more-fonts-means-more-choice.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">More Fonts Means More Choice</a>      <a href="http://www.way2blogging.org/2011/01/add-auto-scrolling-recent-posts-widget.html" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" tareget="_blank">+ Grab this Widget</a> on <a href="http://www.way2blogging.org/" style="border: 0px; color: red; font-size: 20px; font: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" tareget="_blank">Way2Blogging</a></marquee></div>
</div>
<div style="background-color: #fafafa; border: 0px; color: #999999; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 24.44444465637207px; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<i style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Demo does not works Properly here, <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; color: red; font-size: 14.44444465637207px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">But</span></b> when we add as widget it Works Great!</i></div>
<div class="clear" style="background-color: #fafafa; border: 0px; clear: both; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; height: 1px; line-height: 24.44444465637207px; margin: 0px; padding: 0px; vertical-align: baseline; width: auto;">
</div>
<h2 style="background-attachment: scroll; background-color: #fafafa; background-image: url(http://www.way2blogging.org/wp-content/themes/way2blogging/images/star.png); background-position: 5px 50%; background-repeat: no-repeat no-repeat; border: 0px; clear: both; color: #662d2d; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 1.2; margin: 25px 5px; padding: 2px 10px 2px 40px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase; vertical-align: baseline;">
HOW TO INSTALL THIS WIDGET ON BLOGGER?</h2>
<ol style="background-color: #fafafa; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font: inherit; line-height: 24.44444465637207px; list-style-image: initial; list-style-position: initial; margin: 10px 0px 20px 15px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;"><b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Customize Options</b> in Given <b style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; color: red; font-size: 14.44444465637207px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Widget Generator Form</span></b></li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Click on <span style="border: 0px; font-size: medium; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b style="border: 0px; color: red; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Generate</b></span> Button</li>
<li style="border: 0px; font-size: 14.44444465637207px; font: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Finally Click <span style="border: 0px; font-size: medium; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b style="border: 0px; color: red; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Add to Blogger</b></span> Button to add this widget on Your blog</li>
</ol>
<div>
<a class="button widget-button" href="http://www.way2blogging.org/widget-generaters/auto-scrolling-recent-posts-widget-version-3" style="-webkit-box-shadow: rgb(249, 249, 249) 0px 1px 0px inset, rgba(223, 223, 223, 0.4) 1px 1px 1px; background-color: #fafafa; background-image: -webkit-linear-gradient(top, rgb(247, 248, 249) 0%, rgb(233, 233, 233) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(249, 249, 249) 0px 1px 0px inset, rgba(223, 223, 223, 0.4) 1px 1px 1px; color: #3395bf; cursor: pointer; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; font: inherit; line-height: 1.2; margin: 30px auto; padding: 8px 30px; text-align: center; text-shadow: rgb(255, 255, 255) 1px 1px 0px; text-transform: uppercase; vertical-align: baseline; width: 195px;">WIDGET GENERATOR</a><a class="button widget-button" href="http://www.way2blogging.org/" style="-webkit-box-shadow: rgb(249, 249, 249) 0px 1px 0px inset, rgba(223, 223, 223, 0.4) 1px 1px 1px; background-color: #fafafa; background-image: -webkit-linear-gradient(top, rgb(247, 248, 249) 0%, rgb(233, 233, 233) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(249, 249, 249) 0px 1px 0px inset, rgba(223, 223, 223, 0.4) 1px 1px 1px; color: #3395bf; cursor: pointer; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; font: inherit; line-height: 1.2; margin: 30px auto; padding: 8px 30px; text-align: center; text-shadow: rgb(255, 255, 255) 1px 1px 0px; text-transform: uppercase; vertical-align: baseline; width: 195px;">Powered BY WAY2Blogging</a></div>
</div>

Auto Scrolling Recent Posts Widget, Blogger recent posts in your blog which looks Good in your Blogger blog. This is similar to display recent posts in your side bar or any where you want, but this will have marquee effect in this widget. You can sc…

Archive Calendar Widget For Blogger - 2 Themes

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<img align="left" alt="archive calendar" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8ItMPQu754fCtzb9IhyiswytG6kyHhhQOQHig9GaDG3aQCgMUVXzeVxJp6VgcKBa4Us8ap7sKx8acwA_8eT3HlOX1o4sGxogrI2AUBwwfEmTHmu8IuBYlBgfJFsvpBr1oc6liqNwO1s/?imgmax=800" style="background-image: none; border-width: 0px; display: inline; float: left; margin: 0px 6px 0px 0px; padding: 0px 0px 10px;" title="archive calendar" width="303" /></div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
You guys needed more tutorials? There we go with yet another unique and interesting hack for <a href="http://www.mybloggertricks.com/2011/11/25-best-blogger-widgets-released-in.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">blogger Archive Widget</a>. You can see at our sidebar area that the default BlogSpot archive widget is transformed into a Wordpress Type Archive calendar with custom styles and flavors. The easy script and stylesheet today will enable you all to create a calendar archive gadget for your blogs using MBT's custom style sheets for Dark and Light backgrounds. The script is coded by <a href="http://phydeaux3.blogspot.com/2007/04/blogger-archive-calender.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">phydeaux3</a> <em> </em>and redesigned by MBT with custom colors and more easy installation. The plugin has been made compatible and easy to implement. Just follow the basic steps below.</div>
<a href="" name="more" style="background-color: white; color: #0084ce; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px; outline: none;"></a><span style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"></span><div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<br /></div>
<h3 style="background-color: white; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Verdana; line-height: 20.796297073364258px; padding: 3px;">
Install Archive calendar on your Blog</h3>
<ol style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<li>Go To Blogger > Layout</li>
<li>Chose <strong>Blog Archive</strong> widget which is available in Blogger's default widget directory. Switch to next page in the directory to find it.<img alt="blog archive gadget" border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORzb7Z24CDs_c4__qBmEBs7biTnlPJUS4WO2rdGDwFMSJ9rs8oJtvLNkcxkBml06pO4sxzuajWGtrefrj7wNei0V0og_8WIGJ3dvCRG_km2SPy5fyj97hhA1ReQLbRWnHNzbd1mRb8XU/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 0px 0px 10px;" title="blog archive gadget" width="455" /></li>
<li>Choose the following options as shown in the screenshot. Choose <strong>style</strong> as<em>Flat list</em>. Uncheck "<em>Show Oldest Posts First</em>", choose <strong>archive Frequency</strong> as<em>Monthly </em>and <strong>Date Format</strong> can be set to anything.</li>
</ol>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<img alt="archive settings" border="0" height="403" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI7KT4bYCucIuYj56q3NR2NW0HKHpe-4WNct0IvQKYJLMP3Or6hoZvUuaC0P8l_Z2O6bU2LQNWKks_UqXO0aKoBhSFLCidC-Q1j2QYyysutzd8if_V5jPG4ymq0MFaNTNZZXAR_NS-bgA/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 0px 0px 10px;" title="archive settings" width="434" /></div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
    4.  Click save</div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
    5. Now go to Blogger > Settings > <strong>Template</strong>. Backup your template and then click<strong>Edit HTML</strong> > <strong>Proceed</strong></div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<strong>     </strong>6. Search the following code:</div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCyF5wrcnYywzvGZFOpnIlcOGMQFbIdupRMjNpD35SGrSVYDThGhhyphenhyphenck1-Nkxp6foTzEEvAIFqbfYglXFZOXEVWjQQuVR3FZtYPiLsd_cDJtql5c8uPvDHz6GDHkQTizCMDLbiWt4NBE/s400/quote1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #333333; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="padding: 0px 0px 15px;">
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/></div>
<div style="padding: 0px 0px 15px;">
<br /></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
If you could not find it then simply search <span style="background-color: yellow;">BlogArchive </span>and then find a similar code as shown above.</div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
     7.  Replace the above code in step#6 with the following code:</div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCyF5wrcnYywzvGZFOpnIlcOGMQFbIdupRMjNpD35SGrSVYDThGhhyphenhyphenck1-Nkxp6foTzEEvAIFqbfYglXFZOXEVWjQQuVR3FZtYPiLsd_cDJtql5c8uPvDHz6GDHkQTizCMDLbiWt4NBE/s400/quote1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #333333; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="padding: 0px 0px 15px;">
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'><br /><b:includable id='main'><br />  <b:if cond='data:title'><br />    <h2><data:title/></h2><br />  </b:if><br />  <div class='widget-content'><br />  <div id='ArchiveList'><br />  <div expr:id='data:widget.instanceId + "_ArchiveList"'><br />    <b:if cond='data:style == "HIERARCHY"'><br />     <b:include data='data' name='interval'/><br />    </b:if><br />    <b:if cond='data:style == "FLAT"'><br />      <b:include data='data' name='flat'/><br />    </b:if><br />    <b:if cond='data:style == "MENU"'><br />      <b:include data='data' name='menu'/><br />    </b:if><br />  </div><br />  </div><br />  <b:include name='quickedit'/><br />  </div><br /></b:includable><br /><b:includable id='toggle' var='interval'><br />  <br /></b:includable><br /><b:includable id='flat' var='data'><br /><div id='bloggerCalendarList'><br />  <ul><br />    <b:loop values='data:data' var='i'><br />      <li class='archivedate'><br />        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)<br />      </li><br />    </b:loop><br />  </ul><br /></div><br /><div id='blogger_calendar' style='display:none'><br /><table id='bcalendar'><caption id='bcaption'><br /></caption><br /><br /><thead id='bcHead'></thead><br /><br /><br /><tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr><br /><tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr><br /><tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr><br /><tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr><br /><tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr><br /><tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr><br /></tbody><br /></table><br /><table id='bcNavigation'><tr><br /><td id='bcFootPrev'></td><br /><td id='bcFootAll'></td><br /><td id='bcFootNext'></td><br /></tr></table>  <br /><div id='calLoadingStatus' style='display:none; text-align:center;'><br /><script type='text/javascript'>bcLoadStatus();</script><br /></div><br /><div id='calendarDisplay'/><br /></div><br /><script  type='text/javascript'> initCal();</script><br /></b:includable><br /><b:includable id='posts' var='posts'><br /><br /></b:includable><br /><b:includable id='menu' var='data'><br />  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format<br /></b:includable><br /><b:includable id='interval' var='intervalData'><br />  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format<br /></b:includable><br /></b:widget></div>
<div style="padding: 0px 0px 15px;">
<br /></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
   8.  Now search <strong></head></strong>   and just above it paste the following lines of code:</div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCyF5wrcnYywzvGZFOpnIlcOGMQFbIdupRMjNpD35SGrSVYDThGhhyphenhyphenck1-Nkxp6foTzEEvAIFqbfYglXFZOXEVWjQQuVR3FZtYPiLsd_cDJtql5c8uPvDHz6GDHkQTizCMDLbiWt4NBE/s400/quote1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #333333; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="padding: 0px 0px 15px;">
<br /><script type='text/javascript'><br />//<![CDATA[<br /><span style="background-color: yellow;">var bcLoadingImage = "<strong>http://mybloggertricks.googlecode.com/files/loading-trans.gif.png</strong>";<br />var bcLoadingMessage = " <strong>Loading....</strong>";<br />var bcArchiveNavText = "<strong>View Archive</strong>";<br />var bcArchiveNavPrev = '◄';<br />var bcArchiveNavNext = '►';<br />var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];<br />var headInitial = ["<strong>Su</strong>","<strong>Mo</strong>","<strong>Tu</strong>","<strong>We</strong>","<strong>Th</strong>","<strong>Fr</strong>","<strong>Sa</strong>"];</span><br />// Nothing to configure past this point ----------------------------------<br />var timeOffset;<br />var bcBlogID;<br />var calMonth;<br />var calDay = 1;<br />var calYear;<br />var startIndex;<br />var callmth;<br />var bcNav = new Array ();<br />var bcList = new Array ();<br />//Initialize Fill Array<br />var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];<br />function openStatus(){<br />   document.getElementById('calLoadingStatus').style.display = 'block';<br />   document.getElementById('calendarDisplay').innerHTML = '';<br />  }<br />function closeStatus(){<br />   document.getElementById('calLoadingStatus').style.display = 'none';<br />  }<br />function bcLoadStatus(){<br />   cls = document.getElementById('calLoadingStatus');<br />   img = document.createElement('img');<br />   img.src = bcLoadingImage;<br />   img.style.verticalAlign = 'middle';<br />   cls.appendChild(img);<br />   txt = document.createTextNode(bcLoadingMessage);<br />   cls.appendChild(txt);<br />  }<br />function callArchive(mth,yr,nav){<br />// Check for Leap Years<br />  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {<br />      fill[2] = '29';<br />   }<br />  else {<br />      fill[2] = '28';<br />   }<br />   calMonth = mth;<br />   calYear = yr;<br />   if(mth.charAt(0) == 0){<br />      calMonth = mth.substring(1);<br />      }<br />   callmth = mth;<br />   bcNavAll = document.getElementById('bcFootAll');<br />   bcNavPrev = document.getElementById('bcFootPrev');<br />   bcNavNext = document.getElementById('bcFootNext');<br />   bcSelect = document.getElementById('bcSelection');<br />   a = document.createElement('a');<br />   at = document.createTextNode(bcArchiveNavText);<br />   a.href = bcNav[nav];<br />   a.appendChild(at);<br />   bcNavAll.innerHTML = '';<br />   bcNavAll.appendChild(a);<br />   bcNavPrev.innerHTML = '';<br />   bcNavNext.innerHTML = '';<br />   if(nav <  bcNav.length -1){<br />      a = document.createElement('a');<br />      a.innerHTML = bcArchiveNavPrev;<br />      bcp = parseInt(nav,10) + 1;<br />      a.href = bcNav[bcp];<br />      a.title = 'Previous Archive';<br />      prevSplit = bcList[bcp].split(',');<br />      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};<br />      bcNavPrev.appendChild(a);<br />      }<br />   if(nav > 0){<br />      a = document.createElement('a');<br />      a.innerHTML = bcArchiveNavNext;<br />      bcn = parseInt(nav,10) - 1;<br />      a.href = bcNav[bcn];<br />      a.title = 'Next Archive';<br />      nextSplit = bcList[bcn].split(',');<br />      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};<br />      bcNavNext.appendChild(a);<br />     }<br />   script = document.createElement('script');<br />   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';<br />   document.getElementsByTagName('head')[0].appendChild(script);<br />}<br />function cReadArchive(root){<br />// Check for Leap Years<br />  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {<br />      fill[2] = '29';<br />   }<br />  else {<br />      fill[2] = '28';<br />   }<br />    closeStatus();<br />    document.getElementById('lastRow').style.display = 'none';<br />    calDis = document.getElementById('calendarDisplay');<br />    var feed = root.feed;<br />    var total = feed.openSearch$totalResults.$t;<br />    var entries = feed.entry || [];<br />    var fillDate = new Array();<br />    var fillTitles = new Array();<br />    fillTitles.length = 32;<br />    var ul = document.createElement('ul');<br />    ul.id = 'calendarUl';<br />    for (var i = 0; i < feed.entry.length; ++i) {<br />      var entry = feed.entry[i];<br />      for (var j = 0; j < entry.link.length; ++j) {<br />       if (entry.link[j].rel == "alternate") {<br />       var link = entry.link[j].href;<br />       }<br />      }<br />      var title = entry.title.$t;<br />      var author = entry.author[0].name.$t;<br />      var date = entry.published.$t;<br />      var summary = entry.summary.$t;<br />      isPublished = date.split('T')[0].split('-')[2];<br />      if(isPublished.charAt(0) == '0'){<br />         isPublished = isPublished.substring(1);<br />         }<br />      fillDate.push(isPublished);<br />      if (fillTitles[isPublished]){<br />          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;<br />          }<br />      else {<br />          fillTitles[isPublished] = title;<br />          }<br />      li = document.createElement('li');<br />      li.style.listType = 'none';<br />      li.innerHTML = '<a href="'+link+'">'+title+'</a>';<br />      ul.appendChild(li);<br />      }<br />   calDis.appendChild(ul);<br />   var val1 = parseInt(calDay, 10)<br />   var valxx = parseInt(calMonth, 10);<br />   var val2 = valxx - 1;<br />   var val3 = parseInt(calYear, 10);<br />   var firstCalDay = new Date(val3,val2,1);<br />   var val0 = firstCalDay.getDay();<br />   startIndex = val0 + 1;<br />  var dayCount = 1;<br />  for (x =1; x < 38; x++){<br />      var cell = document.getElementById('cell'+x);<br />      if( x < startIndex){<br />          cell.innerHTML = ' ';<br />          cell.className = 'firstCell';<br />         }<br />      if( x >= startIndex){<br />          cell.innerHTML = dayCount;<br />          cell.className = 'filledCell';<br />          for(p = 0; p < fillDate.length; p++){<br />              if(dayCount == fillDate[p]){<br />                  if(fillDate[p].length == 1){<br />                     fillURL = '0'+fillDate[p];<br />                     }<br />                  else {<br />                     fillURL = fillDate[p];<br />                     }<br />                  cell.className = 'highlightCell';<br />                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';<br />                 }<br />              }<br />          if( dayCount > fill[valxx]){<br />             cell.innerHTML = ' ';<br />             cell.className = 'emptyCell';<br />             }<br />          dayCount++;<br />         }<br />      }<br />    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;<br />    if(visTotal >35){<br />        document.getElementById('lastRow').style.display = '';<br />       }<br />  }<br />function initCal(){<br />   document.getElementById('blogger_calendar').style.display = 'block';<br />   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');<br />   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');<br />   document.getElementById('bloggerCalendarList').style.display = 'none';<br />   calHead = document.getElementById('bcHead');<br />   tr = document.createElement('tr');<br />   for(t = 0; t < 7; t++){<br />       th = document.createElement('th');<br />       th.abbr = headDays[t];<br />       scope = 'col';<br />       th.title = headDays[t];<br />       th.innerHTML = headInitial[t];<br />       tr.appendChild(th);<br />      }<br />   calHead.appendChild(tr);<br />  for (x = 0; x <bcInit.length;x++){<br />     var stripYear= bcInit[x].href.split('_')[0].split('/')[3];<br />     var stripMonth = bcInit[x].href.split('_')[1];<br />     bcList.push(stripMonth + ','+ stripYear + ',' + x);<br />     bcNav.push(bcInit[x].href);<br />     }<br />  var sel = document.createElement('select');<br />  sel.id = 'bcSelection';<br />  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};<br />  q = 0;<br />  for (r = 0; r <bcList.length; r++){<br />       var selText = bcInit[r].innerHTML;<br />       var selCount = bcCount[r].innerHTML.split('> (')[1];<br />       var selValue = bcList[r];<br />       sel.options[q] = new Option(selText + ' ('+selCount,selValue);<br />       q++<br />       }                  <br />   document.getElementById('bcaption').appendChild(sel);<br />   var m = bcList[0].split(',')[0];<br />   var y = bcList[0].split(',')[1];<br />   callArchive(m,y,'0');<br />}<br />function timezoneSet(root){<br />   var feed = root.feed;<br />   var updated = feed.updated.$t;<br />   var id = feed.id.$t;<br />   bcBlogId = id.split('blog-')[1];<br />   upLength = updated.length;<br />   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}<br />   else {timeOffset = updated.substring(upLength-6,upLength);}<br />   timeOffset = encodeURIComponent(timeOffset);<br />}<br />//]]><br /></script><br /><script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script><br /></div>
<div style="padding: 0px 0px 15px;">
<br /></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<strong>Optional:</strong> The yellow highlighted region is where you can change the text "<strong>View Archive</strong>", loading image, <a href="http://www.mybloggertricks.com/2010/06/how-to-use-special-keyboard-characters.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">ASCII characters</a> for navigation arrows and change the abbreviation for Day names.</div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
   9. Save your template and you are almost done!</div>
<h3 style="background-color: white; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Verdana; line-height: 20.796297073364258px; padding: 3px;">
Add Styles</h3>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
The widget will look dull and grey unless you style them by adding colours. Do this:</div>
<ol style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<li>Search inside the template for ]]></b:skin>   and just above it paste the following css codes respectively:</li>
</ol>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
If you are using a lighter theme with white background then use this code:</div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<img alt="Light Archive Calendar" border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwS8x-JmxB7hqocCg9TMDA-A-xljprQTtEYbD51uJ1O9oGm49giEjm_SEnYWFPWJt9gpfVleIntvGMq-WfkScil3e04WirrO0ZZUZR2BDQegEq1P3Tm4JBZ6jRwF7gu3bNZcxhdMR424g/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin: 0px auto; padding: 0px 0px 10px;" title="Light Archive Calendar" width="303" /></div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCyF5wrcnYywzvGZFOpnIlcOGMQFbIdupRMjNpD35SGrSVYDThGhhyphenhyphenck1-Nkxp6foTzEEvAIFqbfYglXFZOXEVWjQQuVR3FZtYPiLsd_cDJtql5c8uPvDHz6GDHkQTizCMDLbiWt4NBE/s400/quote1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #333333; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="padding: 0px 0px 15px;">
/* Start of Post Navigator by MBT (LIGHT Theme) ------ */<br />#calendarDisplay {display:none;}<br />/* div that holds calendar */<br />#blogger_calendar { margin:0px auto 0px 0px;width:100%;}<br />/* Table Caption - Holds the Archive Select Menu */<br />#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}<br />/* The Archive Select Menu */<br />#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#<span style="background-color: yellow;">0080ff</span>;font-weight:bold;text-align:center;}<br />/* The Heading Section */<br />table#bcalendar thead {}<br />/* Head Entries */<br />table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#<span style="background-color: yellow;">0080ff</span>;}<br />/* The calendar Table */<br />table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}<br />/* The Cells in the Calendar */<br />table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}<br />/* Links in Calendar */<br />table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;}<br />table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}<br />/* First Row Empty Cells */<br />td.firstCell {visibility:visible;}<br />/* Cells that have a day in them */<br />td.filledCell {  background:#fff;}<br />td.filledCell:hover {  background:#dddddd;}<br />/* Cells that are empty, after the first row */<br />td.emptyCell {visibility:hidden;}<br />/* Cells with a Link Entry in them */<br />td.highlightCell {background:#<span style="background-color: #4bacc6;">53A9FF</span>;border:1px solid #C7C7C7}<br />td.highlightCell:hover {background:#<span style="background-color: #9bbb59;">72B9FF</span>;border:1px solid #C7C7C7}<br />/* Table Footer Navigation */<br />table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#<span style="background-color: yellow;">0080ff</span>;font:bold 100% Tahoma, Arial, Sans-serif;}<br />table#bcNavigation a:link {text-decoration:none;color:#<span style="background-color: yellow;">0080ff</span>}<br />table#bcNavigation a:hover{text-decoration:underline;}<br />td#bcFootPrev {width:10px;}<br />td#bcFootAll{text-align:center;}<br />td#bcFootNext {width:10px;}<br />ul#calendarUl {margin:5px auto 0!important;}<br />ul#calendarUl li a:link {} </div>
/* End of Post Navigator by MBT (LIGHT Theme) ------ */<br /><div style="padding: 0px 0px 15px;">
<br /></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
If you are using a Dark template with black background or similar then use this code instead:</div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<img alt="Dark Archive Calendar" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRACAbDnl4KZGAdkPWpDNjilEXVqu7Ie-tTqEJJoDUD_rTTbszShkodq_zE_obWxv5rg2uA5l5sPWVOw2xM7CsdhdO0nBYS0kwkvRJvA16LQ34aTJzWmF0XUJjfzowP70TpcnWSJ811tU/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 0px 0px 10px;" title="Dark Archive Calendar" width="314" /></div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCyF5wrcnYywzvGZFOpnIlcOGMQFbIdupRMjNpD35SGrSVYDThGhhyphenhyphenck1-Nkxp6foTzEEvAIFqbfYglXFZOXEVWjQQuVR3FZtYPiLsd_cDJtql5c8uPvDHz6GDHkQTizCMDLbiWt4NBE/s400/quote1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #333333; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
/* Start of Post Navigator by MBT (DARK Theme) ------ */<br /><div style="padding: 0px 0px 15px;">
#calendarDisplay {display:none;}<br />/* div that holds calendar */<br />#blogger_calendar { margin:5px 0 5px 10px;width:98%;}<br />/* Table Caption - Holds the Archive Select Menu */<br />#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}<br />/* The Archive Select Menu */<br />#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;}<br />/* The Heading Section */<br />table#bcalendar thead {}<br />/* Head Entries */<br />table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd}<br />/* The calendar Table */<br />table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}<br />/* The Cells in the Calendar */<br />table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#<span style="background-color: #d19049;">F5F202</span>;font:bold 100% Tahoma, Arial, Sans-serif;}<br />/* Links in Calendar */<br />table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:underline;}<br />table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}<br />/* First Row Empty Cells */<br />td.firstCell {visibility:visible;}<br />/* Cells that have a day in them */<br />td.filledCell {}<br />/* Cells that are empty, after the first row */<br />td.emptyCell {visibility:hidden;}<br />/* Cells with a Link Entry in them */<br />td.highlightCell {background:#000000;border:1px solid #666666}<br />/* Table Footer Navigation */<br />table#bcNavigation  {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#<span style="background-color: #d19049;">F5F202</span>;font:bold 100% Tahoma, Arial, Sans-serif;}<br />table#bcNavigation a:link {text-decoration:none;color:#<span style="background-color: #d19049;">F5F202</span>}<br />table#bcNavigation a:hover{text-decoration:underline;}<br />td#bcFootPrev {width:10px;}<br />td#bcFootAll{text-align:center;}<br />td#bcFootNext {width:10px;}<br />ul#calendarUl {margin:5px auto 0!important;}<br />ul#calendarUl li a:link {}</div>
/* End of Post Navigator by MBT (DARK Theme) ------ */<br /><div style="padding: 0px 0px 15px;">
<br /></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<strong><u>Customization for LIGHT theme:</u></strong></div>
<ul style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px; list-style: none;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqD54qDTW-JoPkf22nIoTEqHVLGQCI9RRFKtSZFIg2TqGa6UOGziXjTySQ1kU8T3c726UERKSjwAZqQA0y_08wUiAlsU5k03eIjdmb4IQDOIEdXQy1MH0udWq_iD59v9x5F5U993Hr-bo/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To change text color in blue edit  <span style="background-color: yellow;">0080ff</span>  Use our <a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Color Generator Tool</a></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqD54qDTW-JoPkf22nIoTEqHVLGQCI9RRFKtSZFIg2TqGa6UOGziXjTySQ1kU8T3c726UERKSjwAZqQA0y_08wUiAlsU5k03eIjdmb4IQDOIEdXQy1MH0udWq_iD59v9x5F5U993Hr-bo/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To change background color of the cell with blue background in active mode edit <span style="background-color: #4bacc6;">53A9FF</span></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqD54qDTW-JoPkf22nIoTEqHVLGQCI9RRFKtSZFIg2TqGa6UOGziXjTySQ1kU8T3c726UERKSjwAZqQA0y_08wUiAlsU5k03eIjdmb4IQDOIEdXQy1MH0udWq_iD59v9x5F5U993Hr-bo/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To change the cell colour in mouse hover mode edit <span style="background-color: #9bbb59;">72B9FF</span></li>
</ul>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<strong><u>Customization for DARK theme:</u></strong></div>
<ul style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px; list-style: none;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqD54qDTW-JoPkf22nIoTEqHVLGQCI9RRFKtSZFIg2TqGa6UOGziXjTySQ1kU8T3c726UERKSjwAZqQA0y_08wUiAlsU5k03eIjdmb4IQDOIEdXQy1MH0udWq_iD59v9x5F5U993Hr-bo/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To change color of the yellow text edit <span style="background-color: #d19049;">F5F202</span> </li>
</ul>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
   2.   Finally save your template and you are all done!</div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
Visit your blogs to see the Archive gadget transformed into a beautiful Calendar. :)</div>
<h3 style="background-color: white; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Verdana; line-height: 20.796297073364258px; padding: 3px;">
Need help?</h3>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
The widget can be further customized and is fully editable. If you needed any further help just let me know. I hope this new method may add new spice to your free blogger layouts and give it a more professional Design touch. I hope you find it useful.</div>
<div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">
Don't you think the widget loads extremely fast and can attract visitors more thus leading to higher page views? Do let us know of your precious views. Peace and blessings buddies! :)</div>
</div>

Blogger Tricks Blogger Widgets and plugins Archive Calendar Widget For Blogger - 2 Themes

You guys needed more tutorials? There we go with yet another unique and interesting hack for blogger Archive Widget. You can see at our sidebar area that the default BlogSpot archive widget is transformed into a Wordpress Type Archive calendar with …

HaCk-A-tHoN

How to Add Feedburner Email Subscriptions Box to Blogger

Add Auto Scrolling Recent Posts Widget (v3) For Blogger / Blogspot

Archive Calendar Widget For Blogger - 2 Themes

Popular Posts

Labels

Blog Archive