Digital Statement Blogger Template

One of my Blog reader , requested me to convert Digital Statement wordpress theme to blogger. The wordpress theme was developed by Blog Oh Blog. This is a professional theme with lots of new features available.

Main features of this template:

• Header with a search widget on right :
This is the code i have used

<div id=’searchbox’> <form action=’/search’ id=’searchform’ method=’get’> <input class=’swap_value’ id=’s’ name=’q’ type=’text’ value=”/> <input alt=’Search’ id=’go’ src=’http://i624.photobucket.com/albums/tt327/digitalstatement/go.gif’ title=’Search’ type=’image’/> </form> </div>

you can see this code if you check expand widgets box in layout page. If you want to show your own adsense search box then just replace this code with your adsense search box code.
• Two navigation widget available.
This is the code I have used

<div id=’nav’> <ul> <li class=’page_item’><a href=’http://techieblogger.com/’>Home</a></li> <li class=’page_item’><a href=’http://www.wordpress.org’ title=’Wordpress’>Wordpress</a></li> <li class=’page_item’><a href=’http://www.blogger.com’ title=’Blogger’>Blogger</a></li> <li class=’page_item’><a href=’http://www.techieblogger.com’ title=’Taking Blogger to Next Level’>Techie Blogger</a></li> </ul><div class=’clearfloat’/> <ul id=’cat’> <li class=’cat-item’><a href=’http://www.techieblogger.com’ title=’View all posts filed under Blockquotes’>admin</a></li> <li class=’cat-item’><a href=’http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html’ title=’Page Navigation Widget’>Numbered Page navigation</a></li> <li class=’cat-item’><a href=’http://www.techieblogger.com/’ title=’View all posts filed under Lists’>Author</a></li> </ul> </div></div>

replace all the links with your own links. If you are satisfied with just one navigation widget and want to show adsense 726×15 ad link unit then you need to edit the second navigation code with this.

<ul id=’cat’> < —- adsense code here — > </ul>

• Related Posts Widget with custom CSS is included in this template with print option.
• Comments with unique CSS style and showing author comments in different style is included.
If you want to show your own avatar then search for this code in the edit HTML tab pge with expand widgets box checked. http://www.gravatar.com/avatar.php?gravatar_id=ef6eb8d01747fd1846efd0227517ca1c&rating=R&size=36 replace that url with your own avatar url.
• Two Tabbed Navigation Widget is included in Sidebar. If you want to change the titles of the tabbed navigation , then search for this tag in EDIT HTML page.
<div class=”tabbertab” title=”Recent Post“> similarly you can change the titles of other widgets also.
• Three column footer section is available in this template.
I haven’t included the featured post hack in this template , because most of the blogger users won’t use that. if you want to add that featured post widget then add the following java script above </head>

What’s Next ?

With So many new features available , hope everyone will like this template.
Download | Demo

Guys I am giving this template as free so please don’t remove the footer credits

Hope you Guys will like this template.. if you are really impressed by my hard work then please make some donations.

See you soon with a new template.
update :
if you want to remove one of the tabbed navigation Widget then do the following step.
Go to Layout page of your template and then navigate to EDIT HTML sub page. There search for the following tag

<div id=’tab’>
<div class=’tabber’>

<div class=’tabbertab’ title=’Archives’>

<b:section class=’tabber’ id=’tab1&#8242; preferred=’yes’>
<b:widget id=’BlogArchive1&#8242; locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
</b:section>

</div>

<div class=’tabbertab’ title=’Categories’>

<b:section class=’tabbertab’ id=’tab2&#8242; preferred=’yes’>
<b:widget id=’Label1&#8242; locked=’false’ title=’Labels’ type=’Label’/>
</b:section>
</div>

<div class=’tabbertab’ title=’Tag Cloud’>

<b:section class=’tabbertab1&#8242; id=’tab3&#8242; preferred=’yes’/>
</div>

</div></div>

remove this whole code.
If you need any other customization let me know..

Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc

Learn How to create Compatible CSS for Various Browsers like Internet Explorer 6 , IE7 , IE8 , Opera , Firefox , etc..

Web-designers create blogger template for Hours using one particular browser say Firefox , They don’t know that the CSS code they use is compatible only for the browser they are working at present. Especially in IE6 , there are many Compatible issues.

for Example : the sidebar may appear below main content wrapper or there would be more gap between each widget , content wrapper and sidebar may overlap ,etc.

So in this Post I will tell you How to create CSS code which is compatible for almost all browsers. For this you need to have two browsers Internet Explorer 6 and Firefox .

I have chose IE6 because it is one of the most common browsers which windows have.
Incompatibility issues in IE6 and Firefox

First let’s check is our current Blogger template is compatible with all browsers or not.

For this visit this website : Browser Screen shots
Enter your Blog URL and check the images there to know How your blog looks in various Browsers.

step 2 : If you find any incompatibility issues then you need to modify your CSS code to suit browsers.

Let’s us see an Example

Generally the css we use if of this form :

#example {
float : left;
width : 170px;
margin-left : 5px;
}

In this assume that this particular div is incompatible with Internet Explorer version x.

then we need to modify the above css code as

#example {
float : left;
width : 170px;
margin-left : 5px;
}
#example {
float : left;
width : 185px;
margin-left : 3px;
}

in this first css code is for all versions of Internet Explorer and the second css code is for other browsers like firefox , opera , dillo , sea monkey , etc

but it will be confusing for you to edit.. so now we are going to add different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

After introducing Child selector command , the css code must look like this

#example {
float : left;
width : 170px;
margin-left : 5px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}

in this the green colored code is for IE versions and the red Colored code is for other browsers.

So with simple child selector command we can make our css code compatible for all browsers. Every time when I create a New template , I use to check whether it is compatible with other browsers or not. And I use to change the CSS code to suit that browser.

If you are unable to modify the CSS code then please mail me your template and explain the problem , I will rectify those errors and mail you back.

Add 125 x 125 ad section to Blogger

Learn How to add an extra B:section in your Blog template and also learn to add 125×125 ad banners !

I noticed that most of my readers are asking me How to add 125 x 125 ads section in Blogger templates. We know that to add a widget we need b:section with add page elements function enabled. So in this post I will tell you how to add b:section in your Blogger template and how to add CSS code to suit that b:section.

So with this hack you can add any widget you want. And I will also make a note on Adding 125 x 125 Page Element.

Lets start :

Adding b:section to Blog sidebar :

Step 1 : Sign in to Your Blogger account and got to Layout section of your Blog. Then Navigate to Edit HTML sub tab.

Step 2 : If your template possess two Columns in Right sidebar and if you want to add an Subscription form or 125 x 125 ad section above those two columns then do this step.

If you have a sidebar like this then add a b:section above the 2 columns to add more widgets


Search this tag or similar

<div id=’sidebar-right’> <b:section class=’sidebar-right’ id=’sidebar-right’ preferred=’yes’>


The id can be different , so please paste the following code just above the sidebar section of your Blog.

<div id=’sidebar2&#8242;>
<b:section class=’sidebar2&#8242; id=’sidebar2&#8242; preferred=’yes’>
</b:section></div>

So Now we have added the b:section code needed to add more widgets. Then we need to add css code for that b:section

#sidebar2 {
float : right;
margin-left:4px; width : 415px; background:#ffffff;
font : 11px Verdana;
}
#sidebar2 .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}

#sidebar2 .widget h2, #sidebar2 h2 {padding-left: 10px;
text-align:center;padding-left: 18px;
font: 12px/34px “Georgia”, Verdana;
text-transform: uppercase;
color: #ffffff;
background: url(“http://i263.photobucket.com/albums/ii150/mohamedrias/sidebar_title-2.gif“) repeat;font-weight:bold;

}

#sidebar2 a {
color: #969696;
font-size : 12px;
text-decoration : none;
}
#sidebar2 a:hover {
color: #969696;
text-decoration : none;
}
#sidebar2 ul {
border : medium none;
margin : 7px;
padding : 0;
}
#sidebar2 ul li {
list-style-type : none;
border-bottom : 1px dotted #87581f;
margin : 0;
background-position : 0% 100%;
padding-left : 8px;
padding-right : 10px;
line-height : 15px;
padding-top : 5px;
padding-bottom : 5px;
}
#sidebar2 ul li a {
text-decoration: none; background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/side_li_bullet.gif) no-repeat; padding:0 0 0 12px;color: #87581f;
}

please edit the text in green to suit your Blogger template.

So we have successfully added the b:section and css codings required.

Now navigate to Layout section of your blog and there you will see a new ” Add page Elements ” link just above the sidebar.

If you are planning to add 125 x 125 ad section then click add page element link. there select add HTML/ JAVASCRIPT page widget and insert the below code over there.

<div class=”sidebar-ads”>
<div class=”sidebar-banner”><a href=”#“>
<img border=”0&#8243; src=”http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125×125.jpg “/></a></div>

<div class=”sidebar-banner”><a style=”text-decoration: none;” href=”#”><img border=”0&#8243; src=”http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125×125.jpg” /></a></div>

<div class=”sidebar-banner”><a style=”text-decoration: none;” href=”#“><img border=”0&#8243; src=”http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125×125.jpg” /></a></div>

<div class=”clear”></div><p><a href=”mailto:your email id” title=”Advertise Here”>Advertise Here</a></p>
</div>

After adding the code , click save widget. Then navigate to Edit HTML sub tab to add the necessary CSS code needed for this ad section

/* Sidebar – Ads */

.sidebar-ads {
float: left;
width: 410px;margin-left:5px;
margin-bottom: 5px;
}

.sidebar-banner {
padding: 5px;
float: left;
}

#sidebar2 p { background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/adsdotdot-1.gif) no-repeat center left; margin-top:5px;text-align:right;padding-right:10px;}

Edit the test in red to suit your template.

After adding the CSS code this is how it will look

So we have successfully added the 125 x 125 ad section.

Adding b:section below or above posts ( content)

Most wish to add two column b:section below main container ( posts ) . I will write about this hack soon. (Its a continuation of this hack )
If you guys need any help , please feel free to contact me mohamedrias1103@gmail.com . See you soon with new Blogger hacks.

Premium Quality Brownish Blogger template

Today I am Going to Publish my Fourth three column Blogger template. I hope among those Four Blogger templates this is the best one. It’s a premium quality Brownish Blogger template. This Blogger template consists so many new features. let’s see few among them

1. Twitter like news Widget or Adsense banner ad

There is a HTML / Javascript Element in the header section. You can use this widget either for displaying twitter like site updates or you can just place Adsense or Adbrite Ads.

Adding adsense ad is easy , so Now I will tell How to add the Twitter like news widget.


The CSS code required for this hack is already included in the template. So Now we just need to add the following code in the HTML widget found beside the header.

<div id=”twitter-like-news” rel=”nofollow”>

<b:if cond=”data:content == &quot;&quot;”>
<em> Site Message </em><h1>type the text you want to display here</h1>

</b:if>
<data:content/>
</data:content></div>

Change the text in red and green to suit your blogger template.

2. Top Navigation Widget

In the layout section of your blog , you can see a HTML/ Javascript widget. There you can put the links you want to display.

<ul>
<li><a href=”/“>Home</a></li>
<li><a href=”http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Template“>Blogger Templates</a></li>
<li><a href=”http://rias-techno-wizard.blogspot.com/search/label/Blogger%20widget“>Widgets</a></li>
<li><a href=”http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Hack“>Blogger Hacks</a></li>
<li><a href=”http://feeds.feedburner.com/TechnoWizard?format=xml” rel=”follow”><span style=”color: rgb(255, 102, 0);”>{Subscribe}</span></a></li></ul>

Customize the text in red and green to suit your blogger template.

3. Page Navigation widget :
The Page navigation widget in the blogger template has the css code like in my blog.
4. Three column Footer section.
This is one of the special features of this template. This template has a three column footer section in a unique style. I will write a post on this hack soon.
There is a Blog archive widget already included in the footer section. there please change the appearance of the widget to drop down menu type.
5. SEO ( search Engine Optimization ) title hack included
6. Favicon is also included , just change the image url with your own image url.
if you going to change your current blogger template with this one , then please look at this article so that you can change the template without loosing your widgets.
License: This work is done under creative commons license 3.0 . i have spent some 3 hours to create this template. So please don’t remove the footer credits.
if you guys want any modification in this template then please send your suggestion to mohamedrias1103@gmail , I can modify this template to your wish for free.
Demo : Blogger Accessories

Premium quality brownish Template

I hope you will like this theme for sure . Very few Blog themes are there with professional look. I am sure that this theme is also one among them.
I can also convert wordpress themes to Blogger xml templates. if you are really inspired by any wordpress thems let me know , i can convert that template to you for free.

Submit Blogger Blog Sitemap To Google Webmasters

Today I am going to tell how to add blogger blog to Google. Everyone ask Why we must submit our blog to Google , Since Google automatically indexes our Blog. But by submitting our blog sitemap to Google we can make Google to index our Blog frequently. One more question everyone ask is
“Why should we submit our Blog sitemap to Search Engines ? “
Sitemaps allows a webmaster to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently.
So in this Post I am going to tell how to Submit our Blog url and Blog Sitemap to Google. Just follow these step by step instructions:

Step 1 : Submitting Blog url to Google.

To submit our Blog Url to Google visit this page(http://www.google.com/addurl/?continue=/addurl). There you will find a form like this ,

Fill the form and click submit.
So we have successfully added our Blog to Google. but it’s just not enough. We need to submit our Blog Sitemap to Google.
Step 2 : Now we need to add our Blogger Blog sitemap to Google Webmasters.
Why we need to submit our Blog to Google Webmasters ?
Google Webmaster provide us some useful tools which helps us to know lots of things about our site. I will explain only top 2 tools :
* Google Crawling info
- when Google Indexed our Blog.
- Broken or Invalid Urls which Google unable to crawl
* Top search queries

- with this tool we can find the top queries that drive traffic to your site and where your site is included in the top search results. This will let you learn how users are finding your site.
I hope with the small introduction you might have learned the importance of Google Webmaster. So let us see how to Add our Blog there.
We can do this in two methods. First I will tell how to do it manually
Login to Google Webmaster with your Google Account .
It will take you to Dashboard page. There you can see a box saying ” Click here to add your site” . In that box type your full blog url with http:// and click add site.

You know With Draft Blogger we can automatically submit our blog to Google Webmasters

So draft blogger will automatically add our blog url to Google Webmasters.
step 3 :
After adding your site url , navigate to dashboard again. One the right side of your site , you will find two links ( ADD and Verify ).
Now click ” Verify ” , it will take you to new page saying

In this select ” Add Meta Tag ” and copy and paste the code in your Blogger template. Then save your Blogger template and click verify.
step 4 : Adding Blog Sitemap to Google Webmasters
Now navigate to Dashboard again , there click add sitemap link . It will take you to a new page , There click ” Add a sitemap” . Then select ” Add General Web Sitemap” . and do as instructed.

that’s it. So we have successfully added our Blog sitemaps to Google.
Now we can see indexed stats of our Blog sitemap .

After submitting the sitemap , you will see indexed stats like these

If you have any trouble let me know , I will try my best to help you guys.

DailyPress – Free Blogger Template

On Last Monday itself i converted Daily Press Wordpress theme to blogger , but due to my exams I was unable to publish that on Monday.
Daily Press is a wordpress theme created by Blog Oh ! Blog .Let us see the main features of this theme
See the Screenshot of this DailyPress Blogger Template

Main Features of DailyPress :
* Search form is included in the right hand side of header.
- I have already wrote an article on ”Adding Search Form to Blogger ” .
The code for the hack is given below ( if you delete it by mistake then you can copy the code here )

<div id=’topsearch’>

<form expr:action=’data:blog.homepageUrl + &quot;search&quot;’ id=’searchform’ method=’get’ name=’searchform’>
<b:if cond=’data:title’/>
<input class=’s’ id=’s’ name=’q’ onblur=’if (this.value == &apos;&apos;) {this.value = &apos;&apos;;}’ onfocus=’if (this.value == &apos;&apos;) {this.value = &apos;&apos;;}’ type=’text’ value=”/>
<input alt=’Search’ id=’go’ src=’http://i263.photobucket.com/albums/ii150/mohamedrias/go.gif’ title=’Search’ type=’image’/>
<data:content/>
</form>

</div>
* Below Header there is a Navigation menu

In the Edit HTML page of your template search this code
<li><a href=’http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Template‘>Blogger Templates</a></li>
<li><a href=’http://rias-techno-wizard.blogspot.com/search/label/Blogger%20widget‘>Widgets</a></li>
<li><a href=’http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Hack‘>Blogger Hacks</a></li>
<li><a href=’http://feeds.feedburner.com/TechnoWizard?format=xml‘ rel=’follow’><span style=’color: rgb(255, 102, 0);’>{Subscribe}</span></a></li>

* Three 125 x 125 ads placement widget on sidebar

- Use the below code to set up this widget.

<a href=”#” class=”ads”><img border=”0&#8243; alt=”Ad” src=”http://wpthemes.blogohblog.net/wp-content/themes/dailypress/images/ad250.gif”/></a>
<a href=”#” class=”ads”><img border=”0&#8243; alt=”Ad” src=”http://wpthemes.blogohblog.net/wp-content/themes/dailypress/images/ad250.gif”/></a>
<a href=”#” class=”ads”><img border=”0&#8243; alt=”Ad” src=”http://wpthemes.blogohblog.net/wp-content/themes/dailypress/images/ad250.gif”/></a>
<div class=”clear”></div>
<p><a href=”#” title=”Advertise Here”>Advertise Here</a></p>

please change the text in red to suit your template
* A tabbed Navigation Widget on sidebar. I will write a post on this soon.
By default i have included three titles like ” Recent Post ” , ” Recent Comments ” and ” Popular posts “. If you want to change the titles then go to layout section of your blog. then Navigate to Edit Html subtab. There search for those three titles ” Recent Post ” , Recent Comments and Popular Posts . Rplace them with the title you want.
* Social bookmarking Widget with custom CSS is also included.
* Comment form of unique style is included.

* Related Posts Widget included and
* Page Navigation hack is also Included

Download the DailyPress Theme

Demo of this theme is available here
If you Guys need any modification or any other hack with this template , then please email me to mohamedrias1103gmail.com. I will modify this template to your wish for Free.

This week i am going to publish some excellent hacks like

1. Having Custom Layouts in Blog HomePage , Labels Page and Posts Page.
2. How to Show Author Comments in Different Style ( Author image included )
3. Rotating Ads ( can show different ads in different pages )
and few more….

Show Labels containing specific number of Posts

I have already written ” How to show only specific number of posts on Labels Page “. Today I am going to tell How to Show Only Labels with specific number of posts. This hack is very useful for those who have plenty of Labels in their Blog. It’s a very simple hack , just follow the below steps to implement this hack in your blog.
Step 1 : Login to your Blogger Account and go to Layout section of your Blog.
If you don’t have any Labels widget then add it by clicking ADD Page ELEMENT link in the Page. Then navigate to EDIT HTML subtab and Check EXPAND WIDGETS box.

Step 2 :
Now search for this Line.

<b:widget id=’Label1&#8242; locked=’false’ title=’Labels’ type=’Label’>

Now below this line , you will find this code
<b:loop values=’data:labels’ var=’label’>
<li>
<b:if cond=’data:blog.url == data:label.url’>
<data:label.name/>
<b:else/>
<a expr:href=’data:label.url’><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
Now replace the above code with the following code.

<script type=’text/javascript’>
var labelnum = 0;
<b:loop values=’data:labels’ var=’label’>
if (<data:label.count/> &gt; 2) {
document.write(&quot;<li><a expr:href=’data:label.url + “?max-results=5“‘
rel=’nofollow’><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
}
</b:loop>
</script>

It should look like this

In the above script edit the text in green to show Labels which contains more than text in Green.
for example : I have chosen number 2 , then Labels which contains more than 2 posts will be shown and other labels will be hidden.
Edit the text in red to show only specific number of posts in Labels Page.
That’s it , you have successfully implemented the “Show Labels with specific number of Posts ” hack in your blog.
If you have any problem , let me know.