HaCk-A-tHoN: Blogger Widget

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

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

Create Static HTML Design Of your Blogger Template

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="design blogger template" border="0" height="233" src="http://lh5.ggpht.com/-HTyByPyAtfg/UHxYlvCevUI/AAAAAAAAH0I/sAc94H2KtXs/image%25255B41%25255D.png?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="http://lh4.ggpht.com/-89n1x6-KUUw/UHxYnXVew7I/AAAAAAAAH0Q/S4M6XveuNxM/image%25255B6%25255D.png?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="http://lh5.ggpht.com/-5E48Br8emZw/UHxYqdVT_fI/AAAAAAAAH0Y/IWyHoSSjeNc/image%25255B22%25255D.png?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="http://lh6.ggpht.com/-XnhJRbGgtR4/UHxYskeHtVI/AAAAAAAAH0g/-qZu6pSTFLc/image%25255B14%25255D.png?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="http://lh4.ggpht.com/-Ym97dIQ8Vyc/UHxYvip1ygI/AAAAAAAAH0o/hJVGL-Y4gdo/image%25255B32%25255D.png?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...

Convert Blogger Template into a blank HTML Page

Rahul Rankawat 0

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;"><br class="Apple-interchange-newline" /><img align="left" alt="turn blogger to blank page" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmQe1JEuS5CX4w8aXW2urU5FQlCqGQn04ShXdCzYQQlQzSQD98sa8v8VIBxgyzJi6E7KJh1L_h5nBcAP3Mm3EYy5I-c9G3fq-y77Mz0N-UE4ZKB78lUGTw27FeiMvkwNEIC7BD44gpNI/?imgmax=800" style="-webkit-box-shadow: transparent 0px 0px 0px !important; background-image: none; background-position: initial initial !important; background-repeat: initial initial !important; border: 0px; box-shadow: transparent 0px 0px 0px !important; display: inline; float: left; padding: 0px 0px 10px;" title="turn blogger to blank page" width="340" />BlogSpot templates are codded using the <b>XHTML 1.0 Strict Document Type</b>. It was developed by <a href="http://www.w3.org/TR/xhtml1/" style="border: 0px; color: #289728; outline: none; text-decoration: none;" target="_blank">world wide web consortium</a> on 26 January 2000. Unlike PHP or ASP.net the rules of XML are strict and unforgiving. A slight mistake in code results in terrifying error messages that you often see while editing your blog template. In order to understand how these templates are designed and programmed. You need to start from scratch. I was planning to release some grid and List view templates but the tough work schedule made it difficult to do so. However I am releasing today a simple code that will turn your <b>test</b> Blog's XML structure into a plain, empty template with no widgets. The entire blogger template consists of widgets that are operated and managed using classes and IDs. The blog posts section itself is a giant widget that can be styled in different ways. To make things simple I will share today how to create a blank HTML Page out of a Blogger Template and then start adding widgets to it to experiment exciting new ways of customizing the blog view.</div><h3 style="background-color: white; font-family: Arial, serif; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">How this is done?</h3><div align="justify" style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;">A simple HTML Page has a document type description followed by a HTML, HEAD and BODY tags respectively. The meta tags,  JavaScripts and style sheets are always added inside the head section and the DIV sections or content is enclosed inside the body section. In Blogger since the template is programmed automatically through dynamic<b>b:section</b> tags therefore we first need to remove all such sections and leave just one because the XML markup tag requires presence of at least on such section. To simplify the process I have created a "<b>Static HTML Theme</b>"  that will work just fine for you. You can use this theme to play with exciting new tools, Fancy CSS3 tweaks, and practice your design skills. You will love working on it because it provides you with a much pleasant experience as compared to FH1 HTML Editor</div><h3 style="background-color: white; font-family: Arial, serif; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Steps To Install the Theme:</h3><ol style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;"><li>Go To Blogger Dashboard</li>
<li>Create a New Test Blog</li>
<li>Give it a title and address</li>
<li>Choose the<b> Simple</b> Template and not <b>Dynamic Views</b></li>
<li>Next Navigate to Template > Edit HTML > Proceed</li>
<li>Replace all the code inside the editor with the following code:</li>
</ol><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; color: #333333; font-family: georgia; font-size: 0.9em; font-style: italic; margin: 0px 20px; padding: 10px 20px 10px 45px;"><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><?xml version="1.0" encoding="UTF-8" ?></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><!DOCTYPE html></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: #f79646; font-family: Verdana; line-height: 18px;">  <head></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    <b:if cond='data:blog.isMobile'></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    <b:else/></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">      <meta content='width=1100' name='viewport'/></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    </b:if></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    <b:include data='blog' name='all-head-content'/></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    <title><data:blog.pageTitle/></title></span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  </span></span><span style="font-family: Verdana; line-height: 18px;"> </span><span style="background-color: yellow; font-family: Verdana; line-height: 18px;"><b:skin</span><span style="background-color: yellow; font-family: Verdana; line-height: 18px;">><![CDATA[</span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">/</span><span style="font-family: Verdana; line-height: 18px;"></span><span style="font-family: Verdana; line-height: 18px;">*</span><span style="font-family: Verdana; line-height: 18px;"> </span><br style="font-family: Verdana; line-height: 18px;" /><span style="font-family: Verdana; line-height: 18px;">-----------------------------------------------</span><br style="font-family: Verdana; line-height: 18px;" /><span style="font-family: Verdana; line-height: 18px;">////////////////////////STATIC HTML THEME////////////////////////////////////////////////////////////////////////////////////////</span><br style="font-family: Verdana; line-height: 18px;" /><span style="font-family: Verdana; line-height: 18px;">////////////////////////CODED BY : Mohammad Mustafa Ahmedzai////////////////////////////////////////////////////////////</span><span style="font-family: Verdana; line-height: 18px;"> </span><br style="font-family: Verdana; line-height: 18px;" /><span style="font-family: Verdana; line-height: 18px;">/////////////////////// DOWNLOAD FROM: www.MyBloggerTricks.com  //////////////////////////////////////////////////</span><br style="font-family: Verdana; line-height: 18px;" /><span style="font-family: Verdana; line-height: 18px;">----------------------------------------------- */</span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><br />
</span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">body {</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  font: $(body.font);</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  color: $(body.text.color);</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  background: $(body.background);</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  $(body.background.override)  margin: 0;</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    padding: 0;</span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">}</span></span><br style="font-family: Verdana; line-height: 18px;" /><span style="background-color: yellow; font-family: Verdana; line-height: 18px;">]]></b:skin></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  </span></span><span style="background-color: white; font-family: Verdana; line-height: 18px;">  </span><span style="background-color: #f79646; font-family: Verdana; line-height: 18px;"></head></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="font-family: Verdana; line-height: 18px;"> </span><span style="background-color: #9bbb59; font-family: Verdana; line-height: 18px;"><body></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"></b:section></span></span><span style="background-color: white;"><br style="font-family: Verdana; line-height: 18px;" /></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><div style='margin-top:400px; '></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><center><p><a href='</span></span><a href="http://faduhack1.blogspot.com/" style="border: 0px; color: #fc8901; text-decoration: none;">http://faduhack1.blogspot.com</a>'<span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">>My Blogger Tricks </a>&#169; 2012.</p></center></span><span style="font-family: Verdana; line-height: 18px;"> </span><br style="font-family: Verdana; line-height: 18px;" /><span style="font-family: Verdana; line-height: 18px;"></div></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"></div></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="font-family: Verdana; line-height: 18px;"> </span><span style="background-color: #9bbb59; font-family: Verdana; line-height: 18px;"></body></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"></html></span> </span></blockquote><div style="background-color: white; color: #333333; font-family: Arial, serif; font-size: 14px; line-height: 22.866666793823242px;"><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">    7.  Click save and when prompted about the following error:</span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><div style="background-color: #fff6bf; border: 1px solid rgb(255, 211, 36); font-family: Verdana; font-size: 13px; line-height: 20px; margin: 10px 0px; padding: 20px 10px;"><b>Warning: Your new template does not include the following widgets:</b>                 BlogArchive1 Profile1 Attribution1 Header1 Blog1</div><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">simply click on </span><b style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">Delete widgets</b><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;"> and you are all done!</span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><b style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;"><u>Important points:</u></b><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><ul style="list-style: none;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhLpYoIhxg1ib2Pdz5buaggUW-IwLi39cNRoU15QUadhyphenhyphenaUT7F58Hrn9G18fWdeTV1lyzGLuCoRaaa-zBR2lHbq9HNoAB9eBvubce16VH3KEeTfjM7dNjU0sa_PErj8oiHDUrxDVHgee0/s1600/blue-bullet-icon.png); background-position: 0px 5px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">While creating widgets, you will add the JavaScript just below </span><span style="background-color: #f79646; font-family: Verdana; font-size: 13px; line-height: 1.4em;"><head></span><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;"> or above</span><span style="background-color: #f79646; font-family: Verdana; font-size: 13px; line-height: 1.4em;"></head></span></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhLpYoIhxg1ib2Pdz5buaggUW-IwLi39cNRoU15QUadhyphenhyphenaUT7F58Hrn9G18fWdeTV1lyzGLuCoRaaa-zBR2lHbq9HNoAB9eBvubce16VH3KEeTfjM7dNjU0sa_PErj8oiHDUrxDVHgee0/s1600/blue-bullet-icon.png); background-position: 0px 5px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">You will add the CSS code inside the two </span><span style="background-color: yellow; font-family: Verdana; font-size: 13px; line-height: 1.4em;">yellow highlighted</span><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;"> sections</span></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhLpYoIhxg1ib2Pdz5buaggUW-IwLi39cNRoU15QUadhyphenhyphenaUT7F58Hrn9G18fWdeTV1lyzGLuCoRaaa-zBR2lHbq9HNoAB9eBvubce16VH3KEeTfjM7dNjU0sa_PErj8oiHDUrxDVHgee0/s1600/blue-bullet-icon.png); background-position: 0px 5px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">And you will add the widget data or HTML code inside the </span><span style="background-color: #9bbb59; font-family: Verdana; font-size: 13px; line-height: 1.4em;">two green</span><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;"> body tags</span></li>
</ul><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">What you can't do?</h3><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">Now if you visit the layout section of your blog by going to</span><b style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;"> Blogger</b><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;"> ></span><b style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;"> Layout.</b><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;"> You will find a blank field with the Favicon Widget only. If you create new posts or pages, they wont appear on your blog. If you have previously created posts then they will remain there, they wont get deleted but unless you add the blog post widget, no posts or comments will appear. </span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Create a Blog Post widget</h3><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">Now to give you an idea of how easily a blogger template could be designed from scratch simply add the following code just above </span><span style="background-color: #9bbb59; font-family: Verdana; font-size: 13px; line-height: 20px;"></body></span><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;"> to make the Post widget function on your Static HTML Theme. </span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><blockquote class="tr_bq" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; font-family: georgia; font-size: 0.9em; font-style: italic; line-height: normal; margin: 0px 20px; padding: 10px 20px 10px 45px;"><span style="background-color: white;"><span style="font-family: Verdana; font-size: 14px; line-height: 18px;"><b:section class='main' id='main' showaddelement='yes'> </span></span><span style="background-color: white;"><span style="font-family: Verdana; font-size: 14px; line-height: 18px;"><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </span></span><span style="background-color: white;"><span style="font-family: Verdana; font-size: 14px; line-height: 18px;"></b:section></span> </span></blockquote><div align="justify" style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">Save your template and then visit the layout page again. You will be able to see the Post widget and you can now easily edit its formatting options. Go and create a new post and visit your blog to see it working just fine. <b><span style="color: #008040;">Congratulations!</span></b> you have created one of your first blogger widgets. Play this way with some exciting new widgets and find out how creative you could go.</div><div align="justify" style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">To understand Google blogs programming, you will need to familiarize yourself with standard layout and widget tags. The best reference is provided by Blogger team itself. Please visit the following link to understand the core basics of data tags.</div><b style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">Read: <a href="http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270#posts" style="border: 0px; color: #289728; line-height: 1.4em; outline: none; text-decoration: none;" target="_blank">Layouts Data Tags</a></b><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Can you create a website now?</h3><div align="justify" style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">By turning the template into a static version, you can now easily create HTML web pages. Showcase your portfolio, promote your Ebooks by designing a download page for your Ebook and do whatever you want!</div><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Your views</h3><div align="justify" style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">I hope this tutorial might have helped you to better develop and design your blogs. I am keeping the tutorials easy for the sake of better understandability. The future posts will teach you how to change the post list display and use tabs to switch between a grid or list view of posts on homepage. We hope you find this effort useful. All that we aim is improving your skills so that you may turn out to be far better designers, developers and bloggers. If you need any help, you are most welcome to bug me with as many questions as possible. Please take good care of yourselves and your loved ones. Peace buddies. :)</div></div></div>

Blogger Tricks Blogger Widget Convert Blogger Template into a blank HTML Page

BlogSpot templates are codded using the XHTML 1.0 Strict Document Type . It was developed by world wide web consortium on 26 January 200...

Colorful Tabs: A JQuery Menu For Blogger

Rahul Rankawat 0

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;"><a href="http://lh4.ggpht.com/-ZzJYz8WgpLA/UEOoeSxffAI/AAAAAAAAHfI/vgpMs-Pdn0k/s1600-h/colourful-menu6.gif" style="border: 0px; color: #289728; outline: none; text-decoration: none;"><br class="Apple-interchange-newline" /><img alt="colourful jquery menu" height="83" src="http://lh5.ggpht.com/-mdQzprjzXVM/UEOoiGS1kAI/AAAAAAAAHfQ/z4nXrzkDnvU/colourful-menu_thumb4.gif?imgmax=800" style="-webkit-box-shadow: transparent 0px 0px 0px !important; background-image: none !important; background-position: initial initial !important; background-repeat: initial initial !important; border: 0px none; box-shadow: transparent 0px 0px 0px !important; display: block; float: none; margin-left: auto; margin-right: auto; padding: 10px;" title="colourful jquery menu" width="598" /></a>After having published and designed over 100+ Navigation Menus for Blogger, both with horizontal and vertical list view, today we would like to share a beautiful menu that has remained the favorite choice of all MBT clients so far. This menu changes color for each tab on mouse hover. It uses simple JavaScript functions to produce neat and clean transition effects. Instead of displaying the sub menu items in traditional vertical drop down list, we aligned them with one another to fit into a single line. Unlike other menus, this widget would easily fit any BlogSpot template without design conflicts. It is positioned at the top most section of your blog to attract readers the most. The installation steps are fun to try and extremely easy. The Menu works fine on all major browsers i.e: IE7+, Safari, Chrome, Mozilla and Opera.  Lets add it to your blogs and get rid of any existing bulky menu that proved no less than a trouble.</div><div align="justify" style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;">If you are interested to learn how to create a menu from scratch and add Jquery effects to it then read the previous part of this series.</div><br style="background-color: white; color: #333333; font-family: Arial, serif; font-size: 14px; line-height: 22.866666793823242px;" /><br style="background-color: white; color: #333333; font-family: Arial, serif; font-size: 14px; line-height: 22.866666793823242px;" /><h3 style="background-color: white; font-family: Arial, serif; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Add it to blogger</h3><ol style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;"><li>Go To Blogger > Template</li>
<li>Backup your template</li>
<li>Click <i>Edit HTML</i> > <i>Proceed</i></li>
<li>Search For <i><head></i> and just below it paste these scripts:</li>
</ol><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; color: #333333; font-family: georgia; font-size: 0.9em; font-style: italic; margin: 0px 20px; padding: 10px 20px 10px 45px;"><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;"><script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    <script src='http://mybloggertricks.googlecode.com/files/jcarousel-colourful.js' type='text/javascript'> </script></span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">    <script src='http://mybloggertricks.googlecode.com/files/mt-colourful.js' type='text/javascript'></script></span> </span></blockquote><span style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;">    5.   Now search for the body class. i.e: Looks similar to this with some code inside it</span><br style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;" /><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; color: #333333; font-family: georgia; font-size: 0.9em; font-style: italic; margin: 0px 20px; padding: 10px 20px 10px 45px;"><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">body {</span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">----</span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">---</span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">)</span> </span></blockquote><span style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;">Inside this class paste the following values:</span><br style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;" /><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; color: #333333; font-family: georgia; font-size: 0.9em; font-style: italic; margin: 0px 20px; padding: 10px 20px 10px 45px;"><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">body { </span><span style="font-family: Verdana; line-height: 18px;"> </span></span><span style="background-color: yellow; font-family: Verdana; line-height: 18px;">margin:0px</span><span style="background-color: yellow; font-family: Verdana; line-height: 18px;">padding:0px;</span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">---</span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">---</span></span><span style="background-color: white;"><span style="font-family: Verdana; line-height: 18px;">}</span> <span style="font-family: Verdana; font-size: 0.9em; line-height: 1.3em;"> </span></span></blockquote><span style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;">       6.   Next search for this:</span><br style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;" /><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; color: #333333; font-family: georgia; font-size: 0.9em; font-style: italic; margin: 0px 20px; padding: 10px 20px 10px 45px;"><body></blockquote><span style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;">or this:</span><br style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;" /><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; color: #333333; font-family: georgia; font-size: 0.9em; font-style: italic; margin: 0px 20px; padding: 10px 20px 10px 45px;"><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote><span style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;">7.   Just below it paste the following compressed code:</span><br style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Verdana; font-size: 13px; line-height: 20px;" /><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; color: #333333; font-family: georgia; font-size: 0.9em; font-style: italic; margin: 0px 20px; padding: 10px 20px 10px 45px;"><br />
<style><br />
/*------- Colourful Tabs Menu by faduhack1.blogspot.com -------*/<br />
.MBT-Nav-container {<br />
border: 1px solid #cfcfcf;<br />
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1g77oEVfIX_JQW9zyhaBIX_gXP4zUOp6GXyxraXiFN7Kq4LPaJyZ1olH7xiVXUH-Xqg6RIQVUYTkkJxBhlpsgRQWjq4i59plG4hyCTPbj_njbL8ID_f89gNw6QQyFOEEXh5cy_PmRbgU/s400/menu-bgd.png) bottom left repeat-x;<br />
    position: relative;<br />
      margin: 0;  padding: 0;<br />
border: 1px solid #cfcfcf;<br />
}<br />
ul#nav {<br />
    border-left: 1px solid #cfcfcf;<br />
        border-right: 0px solid #cfcfcf;<br />
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1g77oEVfIX_JQW9zyhaBIX_gXP4zUOp6GXyxraXiFN7Kq4LPaJyZ1olH7xiVXUH-Xqg6RIQVUYTkkJxBhlpsgRQWjq4i59plG4hyCTPbj_njbL8ID_f89gNw6QQyFOEEXh5cy_PmRbgU/s400/menu-bgd.png) bottom left repeat-x;<br />
    position: relative;<br />
    font-size: 12px; font-family: helvetica, arial, sans-serif;<br />
    list-style: none;  margin: 0 auto;  padding: 0;<br />
    <span style="background-color: #a5b592;">width: 960px</span>;<br />
}<br />
#nav ul {<br />
     margin: 0;<br />
  <br />
}<br />
:focus {<br />
    outline: 0;<br />
}<br />
*html ul#nav { clear: both; height: 1%; }<br />
ul#nav li a {<br />
    display: block;<br />
    float: left;<br />
    text-transform: uppercase;<br />
    font-weight: bold;<br />
    line-height: 33px;<br />
    padding: 0 13px 0 10px;<br />
    color: #333;<br />
    text-decoration: none;<br />
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6vlTjsexDyQg8vdIiPECjnOt2OonG6lt7rZ1hEz8X6qeTdk7RoX7IUFvNDBlQiNbCbpXsRTuS5jYIcPMtYybtnv526y2poxaME7wOcHph_zAauzVtk8M6Rfl-PscVisb9c-g-pD5FGY/s400/menu-rule.png) right 2px no-repeat;<br />
}<br />
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }<br />
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }<br />
ul#nav li a:hover, ul#nav li a.open { color: #fff; }<br />
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }<br />
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }<br />
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }<br />
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }<br />
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }<br />
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }<br />
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }<br />
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }<br />
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }<br />
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }<br />
ul#nav li#link-home a {<br />
    padding: 0 33px 0 10px;<br />
    text-indent: -9999px;<br />
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9-MFZ2_pr6mduqOJn1A148bnbeFZx8FXQuKhiSVnO9qvEkBcG8sQwRFZOtPbj7Vri04tGX9Wo26Xy6TSuAihK1HGwno7z9wLtNli0RG-7bkOZH8vGizoS0dRb8MrXv29uZpdReo8pWE/s400/home-icon.png) right 0px no-repeat;<br />
}<br />
*html ul#nav li#link-home a { padding: 0; width: 43px; }<br />
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9-MFZ2_pr6mduqOJn1A148bnbeFZx8FXQuKhiSVnO9qvEkBcG8sQwRFZOtPbj7Vri04tGX9Wo26Xy6TSuAihK1HGwno7z9wLtNli0RG-7bkOZH8vGizoS0dRb8MrXv29uZpdReo8pWE/s400/home-icon.png) right -33px no-repeat; }<br />
/* Sub-Vertical Navigation */<br />
ul.sub-nav {<br />
    position: absolute;<br />
    top: 33px;<br />
    left: -1px;<br />
    overflow: hidden;<br />
    <span style="background-color: #a5b592;">width: 960px</span>;<br />
    display: none;<br />
    z-index: 999;<br />
list-style: none;<br />
  padding-left:0px;<br />
}<br />
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM4jqdCvnHtIbsZfExeOCdSZ4kortZVdCXKdWm_DQcLyoW7U1ajGMX5V5BiuwmZFRpH-oZGXcsWhO5E_1yiHfxFWGhAra-R3stbocX4edpBV_QO-bpIAV0l2NIFV8kfJKtwdOxCEz4sZ0/s400/business-subnav-bgd.png) top left repeat-x; }<br />
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFatN4u5EMuKX3gek4oLWs96IjYyWVBMK3rsbjmwBHJxv1b387314e9Haw4sgpEzgmpWampVqptistW9X80FIBmkBsKjaDPtWVQjBRhIUUBHIzWb27AEowk5H7D0oEVylaJ3X9kMkj0Wg/s400/entertainment-subnav-bgd.png) top left repeat-x; }<br />
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPWUTimnAuRbTOw4_6X0IRfPV54y9QxN0uBUvm0LIG2iH5HWISrhQXWE2dy3hq841gtfl8SCX2U1-ySe8RFMPJ1-qrTwej_iXC6-utO43611XxedTte7rPBW7MjeB7swBntD4cvaNAZs/s400/news-subnav-bgd.png) top left repeat-x; }<br />
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghno-LJnZNKPpzmEHPclh62n93nTfqAL7fExO3kjuSeoHX5924IJFPKr6iMG3bnkQYVTxBwkC6hFqTcflbidZln6AomfMylMN641oVknR9w9jbAbMQS2ryPuDFKUeTmExhnlkYAl1SijI/s400/life-subnav-bgd.png) top left repeat-x; }<br />
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz7gKIb1R7AYNuCHZSPHpX5eSWeN0e7UiAJEK2O9TGobdxlpzSTCnvRqbRIXKCiOA5UetjZ22z-3Hx-MUHXLGr00H3TFvlYGD_XA4y7CpqUxwVwwM73HJLthO4Vi-DU0aKUO-D6ljz5Tk/s400/technology-subnav-bgd.png) top left repeat-x; }<br />
ul#nav li ul.sub-nav li { float: left;   }<br />
ul#nav li ul.sub-nav li a {<br />
    float: none;<br />
    background: none;<br />
    font-size: 11px;<br />
    text-transform: none;<br />
    color: #fff;<br />
    line-height: 25px;<br />
}<br />
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }<br />
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }<br />
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }<br />
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }<br />
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }<br />
</style><br />
<div class='MBT-Nav-container'><br />
<ul id='nav'><br />
              <br />
               <li class='non-vertical-link top-link' id='link-home'><a class='open' href='<b>#</b>'><b>Home</b></a></li><br />
                <li class='top-link' id='mbt'><a href='<b>#</b>'><b>TAB 1</b></a><br />
                    <ul class='sub-nav'><br />
                    <li><a href='<b>#</b>'><b>SUB TAB 1.1</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB TAB 1.2</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB TAB 1.3</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB TAB 1.4</b></a></li><br />
                    <span style="background-color: yellow;"></ul></span><br />
                </li><br />
                <li class='top-link' id='link-entertainment'><a href='<b>#</b>'><b>TAB 2</b></a><br />
                    <ul class='sub-nav' style='display: none;'><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 2.1</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 2.2</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 2.3</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 2.4</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 2.5</b></a></li><br />
                    <span style="background-color: yellow;"></ul> </span>                </li><br />
                <li class='top-link' id='link-news'><a href='<b>#</b>'><b>TAB 3</b></a><br />
                    <ul class='sub-nav' style='display: none;'><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 3.1</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 3.2</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 3.3</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 3.4</b></a></li><br />
                    <span style="background-color: yellow;"></ul></span><br />
                </li><br />
                <li class='top-link' id='link-life'><a href='<b>#</b>'><b>TAB 4</b></a><br />
                    <ul class='sub-nav' style='display: none;'><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 4.1</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 4.2</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 4.3</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 4.4</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 4.5</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 4.6</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 4.7</b></a></li><br />
                    <span style="background-color: yellow;"></ul></span><br />
                </li><br />
                <li class='top-link' id='link-technology'><a href='<b>#</b>'><b>TAB 5</b></a><br />
                    <ul class='sub-nav' style='display: none;'><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 5.1</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 5.2</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 5.3</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 5.4</b></a></li><br />
                    <li><a href='<b>#</b>'><b>SUB</b> <b>TAB 5.5</b></a></li><br />
                    <span style="background-color: yellow;"></ul> </span>                </li><br />
<li class='non-vertical-link top-link' id='link-top10'><a href='<b>#</b>'><b>TAB 6</b></a></li><br />
<span style="background-color: yellow;"> </span><span style="background-color: #f79646;"></span><br />
<span style="background-color: #9bbb59;"></span><span style="background-color: #4f81bd;"></span>              <br />
                  <li style='clear: both;'/><br />
            </ul><br />
</div><br />
</blockquote><div style="background-color: white; color: #333333; font-family: Arial, serif; font-size: 14px; line-height: 22.866666793823242px;"><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">8.  Hit Save and all done!</span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">Visit your blogs to see a complete new change to the site layout. The menu will blend both light and dark themes. Have fun. :)</span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Customizations Guide:</h3><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">The code is written in a neat way so that any one may easily change, add or delete the tabs. </span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><ul style="list-style: none;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhLpYoIhxg1ib2Pdz5buaggUW-IwLi39cNRoU15QUadhyphenhyphenaUT7F58Hrn9G18fWdeTV1lyzGLuCoRaaa-zBR2lHbq9HNoAB9eBvubce16VH3KEeTfjM7dNjU0sa_PErj8oiHDUrxDVHgee0/s1600/blue-bullet-icon.png); background-position: 0px 5px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">Replace</span><b style="font-family: Verdana; font-size: 13px; line-height: 1.4em;"> #</b><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;"> with URL of the page and replace </span><b style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">TAB</b><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;"> names with Page Title</span></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhLpYoIhxg1ib2Pdz5buaggUW-IwLi39cNRoU15QUadhyphenhyphenaUT7F58Hrn9G18fWdeTV1lyzGLuCoRaaa-zBR2lHbq9HNoAB9eBvubce16VH3KEeTfjM7dNjU0sa_PErj8oiHDUrxDVHgee0/s1600/blue-bullet-icon.png); background-position: 0px 5px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">To change the width of the menu edit </span><span style="background-color: #a5b592; font-family: Verdana; font-size: 13px; line-height: 1.4em;">width: 960px</span></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhLpYoIhxg1ib2Pdz5buaggUW-IwLi39cNRoU15QUadhyphenhyphenaUT7F58Hrn9G18fWdeTV1lyzGLuCoRaaa-zBR2lHbq9HNoAB9eBvubce16VH3KEeTfjM7dNjU0sa_PErj8oiHDUrxDVHgee0/s1600/blue-bullet-icon.png); background-position: 0px 5px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">To create a new tab in any sub menu simple paste this code above </span><span style="background-color: yellow; font-family: Verdana; font-size: 13px; line-height: 1.4em;"></ul></span></li>
</ul><blockquote class="tr_bq" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-4IqJgJBpDTND0bYakOAzZgogp9KCSHJVVNMIaWXIAmq3l92DUdUBsIWtITST9RwB-jT0SobdN-GR003yOPlkrP9eGRh5ym866e7c3lboaADxwZ2x9dq7_BjyvzyjQXhZij35cRxNbKL/s1600/Untitled.png); 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: 2px 5px 5px 2px; font-family: georgia; font-size: 0.9em; font-style: italic; line-height: normal; margin: 0px 20px; padding: 10px 20px 10px 45px;"><li><a href='<b>#</b>'><b>SUB</b> <b>TAB</b></a></li></blockquote><span style="font-family: Verdana; font-size: 13px; line-height: 1.4em;">Tab 7 to Tab 10 are disabled. If you want to activate any one of it then simply remove the comment tags across it. i.e <b style="line-height: 1.4em;"></b> after itFor more customization tips, just post me a comment!</span><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Is it SEO friendly?</h3><div align="justify" style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">Simple CSS and HTML menus are way better than flash menus because they use the hyperlink tag along with anchor text. Search engines crawl them better and they appear clearly in SITE LINKS. This menu has everything that robots would love. It has a Clear structure and uses no fancy Jquery functions which could lead to High load time.</div><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Credits</h3><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">The menu design is inspired from </span><a href="http://blogs.com/" style="background-color: white; border: 0px; color: #289728; font-family: Verdana; font-size: 13px; line-height: 20px; outline: none; text-decoration: none;" target="_blank">blogs.com</a><span style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">, scripts and code structure is made compatible with blogger by MBT blog. You are most welcomed to redistribute the code as long as you attach attribution and credits back to this page.</span><br style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;" /><h3 style="color: black; font-size: 24px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px;">Need help?</h3><div align="justify" style="background-color: white; font-family: Verdana; font-size: 13px; line-height: 20px;">The code is self explanatory and would not trouble many of you. However if you want to further customize the menu then you are most welcomed to ask us for any help needed. Please always share your BLOG URL while posting. I hope this little effort may prove helpful for most of you. Thank you for taking time and reading this tutorial. Peace and blessings pals. :)</div></div></div>

Blogger Widget Colorful Tabs: A JQuery Menu For Blogger

After having published and designed over 100+ Navigation Menus for Blogger, both with horizontal and vertical list view, today we would lik...

HaCk-A-tHoN

How to Add Feedburner Email Subscriptions Box to Blogger

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

Create Static HTML Design Of your Blogger Template

Convert Blogger Template into a blank HTML Page

Colorful Tabs: A JQuery Menu For Blogger

Popular Posts

Labels

Blog Archive