HaCk-A-tHoN: CSS and HTMLTricks

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

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

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

XHTML To HTML: Blogger Template Conversion

Unknown 0

CSS and HTMLTricks Web Hosting Webmaster Tools XHTML To HTML: Blogger Template Conversion

I already shared how a dynamic XHTML BlogSpot template could be converted into a blank Static HTML Template , but what if you needed to ...

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="" 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 ......................................../> <div style="padding: 0px 0px 15px;">
<br /></div>
<span style="background-color: #f79646;"></b:section></span></span><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;"><div style="padding: 0px 0px 15px;">
<br /></div>
<span style="background-color: #f79646;"></div></span></span><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>

CSS and HTMLTricks Web Designing 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...

HaCk-A-tHoN

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

Create Static HTML Design Of your Blogger Template

XHTML To HTML: Blogger Template Conversion

Create Static HTML Design Of your Blogger Template

Popular Posts

Labels

Blog Archive