• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Editing Blogger’s theme template to have some features like WordPress

By Abhishek Ghosh May 6, 2011 10:05 am Updated on May 6, 2011

Editing Blogger’s theme template to have some features like WordPress

Advertisement

Many bloggers using Google Bloggers want a custom theme that is SEO optimized. We thought to have a look on the Bloggers template and add some exiting features like WordPress.

SEO optimized Blogger template which will have:

  • Only one image as background plus header logo : lowest possible http request and thus fastest loading.
  • Use of CSS gradients instead of png images.
  • Fully functional navigation menu with dropdown sub menu.
  • Widgeted footer.
  • Lowest errors on W3C validation.
  • Breadcrumb

 

First understand the Blogger template’s anatomy

 

Download any Blogger template to understand what we are saying. It has a xml file; right click on it and open in any text editor; you can also paste the xml file to Bloggers blog Template edit box too (without saving).

Advertisement

---

 

The first part of Blogger template before the head starts

 

The codes written before the <head> is grossly like below:

 

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html 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’>

 

Do not modify any part of it except, you can change DTD XHTML 1.0 Strict to DTD XHTML 1.0 Transitional in order to avoid W3C showing lot of errors in Strict mode. We wrote ago about the value of W3C validation for webpages ago, you might be interested to read it too.

 

Second part : within the head

 

It includes the Meta tags and the most important thing the CSS stylesheet. This CSS actually determines the appearance of your Blogger blog. It starts with head within HTML markup and ends with /head within the HTML markups. This is the end:

 

Editing Blogger's theme to have some features like WordPress

 

Copy the code full; if your navigation had images before, it might look like this:

Body and Footer markups

 

Just like the header, there will be body and Footers too. Footer sometimes is absent in some template (it is bad thing not to have). The hyperlinks, texts in footer is controlled from this Footer.

 

The CSS of Blogger

 

This is the heart of your design of the blog. It starts with <style type=’text/css’> and end with </style>. Before starting of the CSS part, the CData is given, which defines it is a Blogger Template Style, the Author, url of the Author etc :

 

Editing Blogger's theme

 

Fully functional navigation menu with dropdown sub menu, Widgeted footer, Lowest errors in W3C validation and the Breadcrumb

 

If you are not good at programing and coding, choose a theme template that already have these features. Dropdown menu will need pure javascript and / or JQuery ; the script can be pasted in the template or can be linked to any other server with url.

 

Editing the CSS : Most important part

 

We promised to decrease the number of images. You can easy do it by defining the color hex value of the background in CSS (you can use colorpic freeware to know the hex values) and adding a relatively smaller and smushed image in that argument. If you have wrapper, (#wrap) set the backgroud color of them to same hex value that of main background. Here is example of the body along with background image and header (match the colored texts with the code below) :

 

body {
background: #ffffff url (put full url here) top center no-repeat;
width: 980px;
color: #333;
font-family: Arial, Tahoma, Verdana;
font-size: 13px;
line-height: 20px;
margin: 0px auto 10px;
}

Now, the navigation menu and other parts. You can use solid color or CSS gradient. To generate CSS gradient use online tool ColorZilla. It will give you amazing gradient and glassy look without using any images.

In ColorZilla, you will get the code for the effects you have selected or created:

 

Editing Blogger's theme-1

 

Suppose it is your navigation style:

 

#nav {
background: url(full url of the image);
width: 960px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
clear: both;
height: 44px;
}

We will use that code for background now:

 

#nav {
background: rgb(203,96,179); /* Old browsers */
background: -moz-linear-gradient(top, rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(193,70,161,1)), color-stop(51%,rgba(168,0,119,1)), color-stop(100%,rgba(219,54,164,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#cb60b3′, endColorstr=’#db36a4′,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%);
width: 960px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
clear: both;
height: 44px;
}

It (with similar code not the same) it will look like:

 

gradient with css

 

Obviously, you have to change the hover color too.

 

Changing the navigation links

 

Unlike WordPress, where PHP fetches the links, you have manually insert the navigation urls. Blogger uses “Labels”, it is something like Tags. Suppose this the code of your navigation (match with the above screenshot) :

 

<div id=’nav’>
<ul class=’nav superfish’>
<li class=’home’><a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a></li>
<li class=’page_item page-item-xyz’><a href=’http://example.com/’>Microsoft</a>
<ul class=’children’>
<li class=’page_item page-item-abc’><a href=’hhttp://example.com/’ title=’Nice title 1‘>Sub menu 1 under Microsoft</a>
<ul class=’children’>
<li class=’page_item page-item-pqr’><a href=’http://example.com’ title=’Nice title 2‘>Sub menu 2 under Microsoft</a>
<ul class=’children’>
<li class=’page_item page-item-pq’><a href=’http://example.com’ title=’Nice title 3‘>Sub menu 3 under Microsoft</a></li>
<li class=’page_item page-item-ab’><a href=’http://example.com’ title=’Nice title 4‘>Sub menu 4 under Microsoft</a></li>
<li class=’page_item page-item-xy><a href=’http://example.com’ title=’Nice title 5‘>Sub menu 5 under Microsoft</a></li>
</ul>
</li>

Needless to say, we have shown the code only for Microsoft main menu here and the submenu is not visible in the screenshot. Put SEO friendly description inside the titles (marked as red text).

You can read CSS tricks on how to create hover buttons, how to use text shadows to get pressed text effect, how to create custom blockquotes , how to customize Feedburner RSS newsletter subscription too. You will get lots of CSS tricks in Smashing magazine, NetTuts plus etc websites.

Signature

This Article Has Been Shared 149 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Editing Blogger’s theme template to have some features like WordPress

  • 45 tips for good blog writing : everything you need to know

    The impact of writing skill is essential in the hypertext environment of the Internet. Inspired by the user experience, this article, which wants to be very concrete, summarizes a small own advices in writing blogs.

  • 9 types of articles to write in your blog

    When one writes a blog on a regular basis, one of the main challenges is to produce relevant content, unique and interesting to the readers, all this on a regular basis. Here are some ideas about what to write on.

  • Making of WordPress theme : softwares and browsers addons

    List of the most useful tools needed for designing and coding a Wordpress theme.

  • Faster loading website : minimize HTTP requests

    To make your website load faster, you need to minimize the http requests. Here is an article on how you can decrease http requests.

  • Best features of WordPress

    This article Best features of Wordpress describes the features which has established Wordpress in the top position in search engine war.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Comments

  1. AvatarCorrine says

    May 6, 2011 at 6:06 pm

    You are nothing short of amazing!

    I notice you seem to favor one “side-bar”; that is 2-column rather than 3-column blog templates. Is that your preference or is there another reason?

  2. AbhishekAbhishek says

    May 6, 2011 at 6:39 pm

    Thank you very much Corrine.

    3 columns will take more time to load for WordPress as the php call will be double than two columns (non cached) . You will say that logic does not work for Blogger as ready-made xHTML is getting delivered. But, people says that human do not click on left side of the screen as the mouse is in right hand (usually) and an effort is needed to move the forearm to reach left sided column. Instead, people read more on the left side. So it is better to put the text content (= post) on the left side.
    Next is 3 columns in the same side (right side). Both columns get two much narrow, this point is my way of thought.

  3. AvatarCorrine says

    May 6, 2011 at 7:47 pm

    Of course! Most people are right-handed. Now I understand. (The Doctor rules!)

    This is certainly something I need to work on. Although with the nice weather finally coming, it may take me quite a bit of time to complete.

  4. AbhishekAbhishek says

    May 6, 2011 at 8:21 pm

    It will take a bit time, actually a good time to customize properly; particularly you are not used with most commonly used hex values; you have to check manually for each.

    You can search deviantArt for backgrounds if want to find as the thing you are wishing. You can try Photoshop CS 5 extended (30 days trial) or Gimp (open source, free) for editing image parts including backgrounds. Extensive step by step tutorials are found all over the Internet for both.

    The greatest advantage of using the above method is, one can change the background to give special look during Christmas, New year etc. by just changing the background image (one file).

    The last thing I forgot to write there: create a page named sitemap with the label sitemap; put the HTML code of human readable sitemap and put a link of that page in the footer; name it sitemap. HTML sitemap tutorial is here: http://www.microsystools.com/products/sitemap-generator/help/create-html-sitemaps-tutorial/

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Cyberpunk Aesthetics: What’s in it Special January 27, 2023
  • How to Do Electrical Layout Plan for Adding Smart Switches January 26, 2023
  • What is a Data Mesh? January 25, 2023
  • What is Vehicular Ad-Hoc Network? January 24, 2023
  • Difference Between Panel Light, COB Light, Track Light January 21, 2023

About This Article

Cite this article as: Abhishek Ghosh, "Editing Blogger’s theme template to have some features like WordPress," in The Customize Windows, May 6, 2011, January 29, 2023, https://thecustomizewindows.com/2011/05/editing-bloggers-theme-template-to-have-some-features-like-wordpress/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT