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>

Blogger Widget Blogger Widgets and plugins How to Add Feedburner Email Subscriptions Box to Blogger

In this simple tutorial i will show you, Adding Feedburner Email subscription box to your blog/site. We know that, we can add the blogge...

Read more »

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

<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>

Blogger Widget Blogger Widgets and plugins CSS and HTMLTricks Add Auto Scrolling Recent Posts Widget (v3) For Blogger / Blogspot

Auto Scrolling Recent Posts Widget, Blogger recent posts in your blog which looks Good in your Blogger blog. This is similar to display r...

Read more »

The Best Way to View Photos in Facebook

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> The best way to view photos on <strong>Facebook!</strong></div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> Make sure you are using the latest version of <strong>Google Chrome.</strong></div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> <strong><a href="https://chrome.google.com/webstore/detail/photo-zoom-for-facebook/elioihkkcdgakfbahdoddophfngopipi?utm_source=chrome-ntp-icon" style="color: #15527e; text-decoration: none;" target="_blank">CLICK HERE</a></strong></div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> <a href="http://virscent.com/blog/wp-content/uploads/2012/10/The-Best-Way-to-View-Photos-in-Facebook-1.png" style="color: #15527e; text-decoration: none;"><img alt="" class="aligncenter size-medium wp-image-1021" height="43" src="http://virscent.com/blog/wp-content/uploads/2012/10/The-Best-Way-to-View-Photos-in-Facebook-1-300x43.png" style="border: 0px; display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto;" width="300" /></a></div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> <strong>Photo Zoom for Facebook</strong>, formerly FB Photo Zoom, is simple, light-weight extension that integrates directly into Facebook so you can see the larger images of photo albums, profile photos and more whenever you over a zoom able image!</div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> <a href="http://virscent.com/blog/wp-content/uploads/2012/10/The-Best-Way-to-View-Photos-in-Facebook-2.png" style="color: #15527e; text-decoration: none;"><img alt="" class="aligncenter size-medium wp-image-1022" height="48" src="http://virscent.com/blog/wp-content/uploads/2012/10/The-Best-Way-to-View-Photos-in-Facebook-2-300x48.png" style="border: 0px; display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto;" width="300" /></a></div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> After Logging into your Facebook account make sure that <strong>Photo Zoom is ON</strong>.</div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> Then Just by placing the cursor on any zoom able  photo it can be visible as shown below.</div> <div style="background-color: white; color: #333333; font-family: Helvetica, Arial, serif; font-size: 12.222222328186035px; line-height: 21.111112594604492px; margin-bottom: 10px; margin-top: 10px; padding: 0px;"> <a href="http://virscent.com/blog/wp-content/uploads/2012/10/The-Best-Way-to-View-Photos-in-Facebook-3.png" style="color: #15527e; text-decoration: none;"><img alt="" class="aligncenter size-medium wp-image-1023" height="300" src="http://virscent.com/blog/wp-content/uploads/2012/10/The-Best-Way-to-View-Photos-in-Facebook-3-168x300.png" style="border: 0px; display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto;" width="168" /></a></div> </div>

Facebook The Best Way to View Photos in Facebook

The best way to view photos on  Facebook! Make sure you are using the latest version of  Google Chrome. CLICK HERE Photo Zoom for...

Read more »

Create Static HTML Design Of your Blogger Template

<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="design blogger template" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkIznksyC3UqdmDKu9p1hJnLZQvMkEelBMghFJANnU2yPS_k8jE73lcze7D3X8VxynBmANnAanNu9oXAin33pfYx6fbjr5O_4TQ6V34bmqkHy0lXVm5fK0kv8z_xcVb1Zz55WQSo1M8VI/?imgmax=800" style="background-image: none; border-width: 0px; display: inline; float: left; padding: 0px 0px 10px;" title="design blogger template" width="334" />This is part 2 of our series "<strong><span style="color: #008040;">XHTML to HTML</span></strong>" . We have already learned how to turn blogspot's layout into blank HTML page but we have no yet shared how to remove the dynamic XML tags alone leaving behind the stylesheet, scripts and html design. In today's tutorial I will try to share the basic way of understanding a websites core structure by identifying the important div sections that make up the structure. I hope you have followed part one of the series and have downloaded your blogspot template. I also assume you have Dreamweaver or <a href="http://www.mybloggertricks.com/2012/06/codelobster-perfect-php-development.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Codelobster</a> installed on your desktop computers or laptops.</div> <a href="http://www.blogger.com/blogger.g?blogID=1230533390360711447" 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><br style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;" /> <center style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <span style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 10px solid rgb(72, 161, 250); padding: 6px;"><a href="http://contact.mybloggertricks.com/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Live Demo</a></span></center> <center style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <span style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 10px solid rgb(72, 161, 250); padding: 6px;"></span></center> <div align="center" style="background-color: #fff6bf; border: 1px solid rgb(255, 211, 36); color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px; margin: 10px 0px; padding: 20px 10px;"> <span style="color: red; font-size: large;"><strong>XHTML To HTML</strong></span></div> <div style="background-color: #fff6bf; border: 1px solid rgb(255, 211, 36); color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px; margin: 10px 0px; padding: 20px 10px;"> Part1: <a href="http://www.mybloggertricks.com/2012/10/xhtml-to-html-blogger-template.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">XHTML To HTML: Blogger Template Conversion</a></div> <div style="background-color: #fff6bf; border: 1px solid rgb(255, 211, 36); color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px; margin: 10px 0px; padding: 20px 10px;"> Part2:<em> </em><strong>Create a HTML Design Of your Blogger Template</strong></div> <div style="background-color: #fff6bf; border: 1px solid rgb(255, 211, 36); color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px; margin: 10px 0px; padding: 20px 10px;"> Part3: <em>In progress</em></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;"> Identify the Div Sections</h3> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> Div sections are division blocks or containers that hold elements inside it to layout a web page. The <div> tag defines a division or a section in an HTML page. It starts with a <div> tag and ends with a </div> tag.  When a div section is styled, we add the CSS ID or class to it as follows:</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;"> <strong>If you want to introduce a class in Div, do this:</strong></div> <div style="padding: 0px 0px 15px;"> <div <span style="background-color: #f79646;">class="class-name"</span>></div> <div style="padding: 0px 0px 15px;"> ...</div> <div style="padding: 0px 0px 15px;"> ...</div> <div style="padding: 0px 0px 15px;"> ..</div> <div style="padding: 0px 0px 15px;"> </div></div> <div style="padding: 0px 0px 15px;"> <br /></div> <div style="padding: 0px 0px 15px;"> <strong>If the Div section is styled using an ID, it will look like this:</strong></div> <div style="padding: 0px 0px 15px;"> <div <span style="background-color: yellow;">id="id-name"</span>></div> <div style="padding: 0px 0px 15px;"> ...</div> <div style="padding: 0px 0px 15px;"> ...</div> <div style="padding: 0px 0px 15px;"> ..</div> <div style="padding: 0px 0px 15px;"> </div></div> </blockquote> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> In CSS code a class always starts with a dot at its beginning and Id starts with a hash sign as shown below:</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;"> <strong>For class:</strong></div> <div style="padding: 0px 0px 15px;"> .class-name {</div> <div style="padding: 0px 0px 15px;"> ---</div> <div style="padding: 0px 0px 15px;"> ---</div> <div style="padding: 0px 0px 15px;"> -</div> <div style="padding: 0px 0px 15px;"> }</div> <div style="padding: 0px 0px 15px;"> <br /></div> <div style="padding: 0px 0px 15px;"> <br /></div> <div style="padding: 0px 0px 15px;"> <strong>For Id:</strong></div> <div style="padding: 0px 0px 15px;"> #id-name {</div> <div style="padding: 0px 0px 15px;"> ----</div> <div style="padding: 0px 0px 15px;"> --</div> <div style="padding: 0px 0px 15px;"> --</div> <div style="padding: 0px 0px 15px;"> }</div> </blockquote> <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;"> Now when you have understood what a Div section is, you will be able to identify these slices (div) that define your overall blog layout.</div> <ol style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <li>View your blog either in Firefox or Chrome. I prefer Firefox</li> <li>On an empty section (<em>the background</em>) of your blog right click and choose "Inspect Element"</li> </ol> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <img alt="inspect element" border="0" height="495" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0GMnyG_do9nHnRomYQMhUJMlUMLlbMGxUf1lx1JFFfBU-5OiRwDrpgYoMf7Li6e8OvzppONjqVQxzSy-2aoaXxSlVhpobfKoaF6_BqzhoFIItVQYkVSqcz6m2U8mv70C_pBOU76FZyo/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 0px 0px 10px;" title="inspect element" width="249" /></div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;">     3. Two windows will open. The bottom window will highlight the core HTML of the blog and the area on your right highlights the CSS.</div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <img alt="firefox inspect element" border="0" height="327" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HIoAkvMysa1Pxknou8U_p0f6wQsS3aCO6AlRLzWommhppH0MPhAg1VW1T6CCPFtSBHUvG_9Tj4ORNPF8nXxiSFSlETmM2wNI79lMV1DFYbR6L5_0GGZ3kJgZwb6goCQSS-4tdmEomtQ/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 0px 0px 10px;" title="firefox inspect element" width="596" /></div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> In the HTML section you will see important div sections. If you click any div tag, all html inside it will expand and when you click back it will contract. The important thing to note is what section is highlighted on your blog when you click a div. Note down that section for that particular div and save it in a notepad. Start from Divs at the top to divs at bottom. Go in sequential order.</div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> For example if I click on the div tag for mbt highlighted below as <strong><div id="wrap"></strong>  the entire container holding all the blog contents except the <a href="http://www.mybloggertricks.com/2011/12/stickybar-with-facebook-like-and-google.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">top-sticky-bar</a> are highlighted. That's how I identified what this div does and what sections can be styled using it.</div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <img alt="highlighted div section" border="0" height="697" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNUs6KWUFNqX2XW0kYEqjvRYIi_NvuL5n4CW-X04vbHclhnag4JPTwTSZahXzb4LKrZbP-mzl0bYKkS0CzzLI-63N-tfdBkYxMLypahY6CYpCLZMkVxk8Qgc2iG5cFSnOIceYfb6H1ZgE/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 0px 0px 10px;" title="highlighted div section" width="503" /></div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> Use the same method to identify the divs for Header, Navigation, Post container, Sidebar Container and finally the footer. The divs must go in order and keep track of which div is nested under another div. For example in my case the navigation, header, post body and sidebar all comes under the wrap div. So I will insert the remaining divs inside it.</div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> This may sound a little techy for people not familay with HTML tag priorities but for developers who wish to understand how to create a clone design the method above can't be more clear than this.</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;"> Remove the Dynamic Tags</h3> <ol style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <li>Use Dreamweaver or Codelobster to open the xml file you downloaded</li> <li>Find each div tag and edit the code inside each one of them.</li> <li>For example for the outer-wrapper div tag I delete the div tags for post body and sidebar leaving the entire area vacant and then I add the contact form inside it. Visit our <a href="http://contact.mybloggertricks.com/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">contact page</a> to see the wide area with no sidebars and post-section.</li> </ol> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <img alt="identify the nested div containers" border="0" height="439" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJh2QxTng58NwU224G3hwWVJeHnEoIZUAY9rFnryK_MjT18-xLtvWOKjqtQQ5lE7wVqYXkWXMz5fToV1I-jx9y9KWfXU1Zzl2Ftg2BhFYm83v1p-Wy51_1CkG3jFRUtlZ6g2VftLMF5dw/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 0px 0px 10px;" title="identify the nested div containers" width="600" /></div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> The dynamic code is easy to identify because all widgets have this basic structure:</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;"> <span style="background-color: #f79646;"><b:section ........................></span><br /> <span style="background-color: yellow;"><b:widget ......................................../></span></div> <span style="background-color: yellow;"><b:widget ......................................../> </span><span style="background-color: yellow;"></span></blockquote> <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;"> <span style="background-color: yellow;"><b:widget ......................................../> </span><br /> <div style="padding: 0px 0px 15px;"> <span style="background-color: yellow;"><br /></span></div> <span style="background-color: yellow;"> <span style="background-color: #f79646;"></b:section></span></span><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;"> A widget container is initiated using the b:section tag and widget content is initiated using the b:widget tag. Find them all and replace the b:section tags with static div tags like the following:</div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> <br /></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;"> <span style="background-color: #f79646;"><div ........................></span></div> <div style="padding: 0px 0px 15px;"> <span style="background-color: #f79646;"></span><br /> <span style="background-color: yellow;">Delete all code inside B:widget tags found here</span></div> </blockquote> <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;"> <span style="background-color: yellow;"></span><br /> <div style="padding: 0px 0px 15px;"> <span style="background-color: yellow;"><br /></span></div> <span style="background-color: yellow;"> <span style="background-color: #f79646;"></div></span></span><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;"> Once you are done with this, you will find your template looking neater and getting in shape if you are using code lobster or dreamweaver. It took me 4 hours to clean up MBT's code so it should not take you long. Its lengthy process but extremely interesting and worth trying. Once you have learnt how to do this, in our next part, I will teach you how to add a PHP contact form inside the Cloned Blogger template that looks exactly like the original blog, giving the user a great experience. </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;"> I know you have tons of questions!</h3> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> Of course this method is a little techy for newbies and would have given a headache to most of you but you may not panic and just post me a comment. I will be at your service. I reply late but I do reply! =)</div> <div style="background-color: white; color: #333333; font-family: Verdana; font-size: 13.333333969116211px; line-height: 20.796297073364258px;"> I wish this tutorial may help you better understand the possibilities of customizing the Google hosted free blogs. There is no end to Blogger customization and you must try every possible tutorial that comes along your way because only Blogspot layouts can turn you into a brilliant web developer. Peace and blessings buddies. :)</div> </div>

Blogger Widget CSS and HTMLTricks Create Static HTML Design Of your Blogger Template

This is part 2 of our series " XHTML to HTML " . We have already learned how to turn blogspot's layout into blank HTML page...

Read more »

Archive Calendar Widget For Blogger - 2 Themes

<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 />  <!-- Toggle not needed for Calendar --><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 /><!-- Table Header --><br /><thead id='bcHead'></thead><br /><!-- Table Footer --><br /><!-- Table Body --><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 /><!-- posts not needed for Calendar --><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;"> <!-- Blogger Archive Calendar by  www.MyBloggerTricks.com --><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 /><!-- End Blogger Archive Calendar by www.MyBloggerTricks.com  --></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 o...

Read more »