Free Premium Blogger Templates - My World

Today, I present to you my next creation namely, "My World Blogger Template". This template is basically a Wordpress theme which was converted by bloggerzbible. The converted template had a lot of bugs in it. I have removed the bugs and completely customized it in such a way that it looks very professional and gives a Wordpress like appearance. I have made the template SEO optimized and it includes the script for read more hack. Various customizations for this template are explained below.

Live Demo | Download My World Blogger Template For Free

Just have a look at the template screen shot or click on the demo link to view a lived demo of the template. I hope you are excited about the template and you have downloaded the same. If you are not satisfied with the above look of the template, have a look at another example of this same template customized in another manner. So, what you waiting for??? Hit the download  link and start customizing your template. You can read about the features and its customizations below.

{Get This Blogger Template Completely Customized At Just $5.00}

{Click the button below to pay me and send your details via "Our Services" Page}

Basically, the template is a two column template with the following features.

1. Multi-tab Navigation Bar:

The template carries a rounded navigation bar apart from one standard navigation bar above the header logo. The navigation bar is a smooth sliding bar. You may look the snapshot below for better understanding.

Customization:

1.1. Just search for the following code in your template.

<li class='menu-item menu-item-type-taxonomy'><a href='#'>Examples</a></li>

1.2. Now, you just need to replace every "#" with the link you wish to point to and make sure that, you change the name(Example) correspondingly. There are various instances where you will find the above codes. Replace all the links with the link you wish to point to. It is pretty self-explanatory. You can contact me via email if you face any problem!!!

2. Search Engine Optimization:

The template has already made the title tags search engine optimized. You just need to customize the keywords and description part for your template. 

Customization:

2.1. Search for the following code in your template.

<meta content='DESCRIPTION HERE' name='description'/>

<meta content='KEYWORDS HERE' name='keywords'/>

2.2. Replace "DESCRIPTION HERE" and "KEYWORDS HERE" with your own blog description and keywords.

3. Changing Blogger Logo And Header Logo:
3.1. Changing Blogger Logo:

If you wish to know more about blogger logo, then visit this page: "Change Blogger Logo". You can always do this simple hack by replacing the links that point to the logo. To change the blogger logo, just follow this step. 

3.1.1. Find the following code in your template.

<link href='IMAGE URL IN GIF FORMAT' rel='shortcut icon'/>

<link href='IMAGE URL IN GIF FORMAT' rel='icon'/>

3.1.2. Replace "IMAGE URL IN GIF FORMAT" with the URL of your image(logo). Upload the image to Google Picasa or Imageshack or Photobucket. Get the URL of the image and paste it in the space provided. That's it!!!

3.2. Changing Header Logo:

3.2.1. To change the header logo, just find the following code.

<img alt='My World Logo' class='png_bg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcr61D3tcLSKGPAUDvjM1ICBXDz3K6DoHPKUCNXfp2h1U1dVZ-OTrxFBUBDmyxcFOvdZy_UfxCIwd6C78iGVEZcoPpkP9LclG6Twciiny4DpAYtI68dR1Fhy02gT-cJ34AAskDlpNDW9r/s800/My-world-logo.png'/>

3.2.2. Now, replace the link mentioned in green with the link to your logo. Make sure your header logo is transparent. To get a professional header logo for your blog, just visit "Our Services" page. We guarantee 100% satisfaction when it comes to banner and header design.

4. Wordpress Like Comments Section:
I always wanted to have templates that resemble Wordpress themes. When I tried to do them, I always faced problem with the comments section. But, this template will overcome that difficulty. It has got an excellent comments section similar to Wordpress. If you wish to add the same section on your blog, then visit this page: "Wordpress Like Comments Section On Blogger".

5. Footer Section:
There is nothing much to explain with respect to the footer section excepting the logo that you can display. Follow the same steps mentioned for changing the header logo. You can also add some text next to the logo if you need to. So, have a look at the screen shot of the footer section.

I have just highlighted the most important features of this template. The template includes various other features and customizations too. Those are pretty self-explanatory. Overall, the template will appear exactly like a Wordpress theme. I hope you enjoy this template. If you missed the earlier template customized by me, then visit this page: "Smack V1 Premium Blogger Template". Please, leave your opinion about the template via comments!!!

Click4more... 5 Comments

Wordpress Like Comments For Blogger/Blogspot Blogs

Last week, one of my blog readers sent me a mail stating that he wanted to add a comments section on blogger like the one displayed in my blog right now. I started receiving few mails from different readers regarding the same hack for the past few days. So, I wanted to share this hack on "How To Add A Wordpress Like Comments Section For Blogger/Blogspot Blogs?" with my readers. If you wish to take a look at the final output, then scroll down and view the comments section on my blog or else, just check out the screen shot below.

To add this "Stylish Wordpress Type Comments Section" on your blogger blog, just follow the following steps. Please, make a back up of your template before you make any modifications. To create a back up, navigate to "Design->Edit HTML" and click on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Click on the expand template icon. Now, search for the following piece of code in it. You may use "CTRL+F" to fasten your search results.

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

2. Replace the following block of code with the code mentioned in step 3.

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

3. The following code should be replaced with block of code mentioned in step2.

<div class='comments'>
<b:loop values='data:post.comments' var='comment'>
<div id='comments-outer'>
<div class='comment-author'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img class='avatar' expr:src='data:comment.favicon' height='35px' rel='dofollow' width='35px'/>

</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='says'>said on :</span>

</dt><span style='float: left;'><b:include data='comment' name='commentDeleteIcon'/></span>

<div class='comment-meta commentmetadata'>
<data:comment.timestamp/>
</div>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:loop>
</div>

4. Now, its time to add the CSS part for this code. But, you need to remove the already present CSS for your comments section. To remove it, find the word "comments" in the CSS part of your template and remove the related code. The CSS part of your template are the codes which lie between the following two tags.

<b:skin> CSS OF YOUR TEMPLATE </b:skin>

Once, you find the code with name "comments", remove the blocks of code associated with them. Please have a look at the following picture for better understanding.

If you still do not know what code should be removed, then ping me via email and I will solve your problem.
5. Take a break with a cup of coffee:) Now, find the following code in your template.

]]></b:skin>

6. Copy and paste the following piece of code just above/before the line mentioned in step5.

/* Comments Section By www.newbloggingtipz.com */
#comments{
background : #fff url() no-repeat top;
float : left;
width : 590px;
font-size:12px}
#comments h4{ margin:1em 0;   font-weight:bold;   font-size:15px;   text-shadow:1px 1px 1px #ddd;   line-height:1.4em;   text-transform:uppercase;   letter-spacing:.2em;   color:$sidebarcolor}
#comments-outer{ background:#f4f4f4;   border:1px solid #ddd;   margin:1em 0 2.5em;   padding:10px;   line-height:1.6em}
.avatar-image-container{margin-right:20px; padding:0; float:right; width:48px; height:48px; margin-top:-20px}
.avatar-image-container img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHGuyFKyjKBl5xGPIjp058fSdIToYig9X2n59rL4LAutnnZvDJHmbu1qIvfrMSRiAUr6Ha5LffkTtVL-HFlCsNs2q37a6Q-QsypnQ-FXpA7Tv80595pugegAYRO54JE_wYhkNp0YA4EQ/s400/grav.png); width:48px; height:48px; border:1px solid #ddd}
.deleted-comment{ font-style:italic;   color:gray}
.comment-body-author{background:#f4f4f4}

7. Huh!!! That's it!!! Save your template and you will find the "Wordpress Style Comments Section" on your blog.

For further customizations like adding a background to the comments section, etc.. you can edit the CSS part  or view "Our Services" page for any type of customization seen on blogger blogs. How ever, I have provided space for various customizations in the code by default. So, if you know little HTML then, the job should be very easy!!!

I hope you enjoyed this hack. If you need any clarifications regarding this hack, then feel free to comment on my blog or ping me via email. I will clarify your doubts as early as possible. Also, we would be happy to receive comments from readers who understood what I blabbered in this post and successfully installed this hack on their blog:)

Click4more... 48 Comments

Free Premium Blogger Templates - Smack V1

I'm quite happy to introduce my first premium blogger template namely, "The Smack V1 Blogger Template". This two column template is an improved version of the "Stunning Press" word-press theme. Lasantha(Have included his credit in the template) bloggerized this template. I have remodeled the whole template in such a way that, it loads much faster when compared to the conventional template. Moreover, this template is highly search engine optimized. Take a look at the following screen shot of this blogger template. Or, click on the "Live Demo" link to view a live demo of this template.

Live Demo | Download Smack V1 Blogger Template For Free

Features:

1. A 468x60 Ads Ready Banner.
2. A Customized Search Bar.
3. Two Navigation Bars (Above And Below The Header).
4. Ready To Use Social Bookmarking Buttons.
5. Gravatars Enabled For Comments.
6. Wordpress Like Comments Section.
7. Codes Ready For Your Site Logo (Read More About: Changing Blogger Logo).
8. Automatic Read More Hack Enabled.
9. Tested and Compatible with all major browsers (Firefox, IE and Safari).
10. Ready To Use Three Column Footer and so on...


The template also includes a provision for adding a sliding featured content widget. But, I did not include this feature in my template because, it will reduce the web page speed. Please, don't confuse yourself with this template and the "Stunning Press" blogger template. I would say "Smack V1" is an advanced version of the "Stunning Press" blogger template.


Template Customization:
I have listed clearly the entire customization with respect to this template. I have also explained few features for better understanding. You can always leave comments if you need any clarification regarding the template customization.


1. Meta Tags:
1.1. Search for the following code in your blogger template.

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>

1.2. Replace "DESCRIPTION HERE" and "KEYWORDS HERE" with your own blog description and keywords.
(Note: Do not change the title tags. They are optimized by default for SEO and it comprises of meta tags for each blogger posts too.)


2. Navigation Bars:
2.1. Search for the following code in your blogger template.

<a href='#' title='Edit this link'>

2.2. Replace ' # ' with the link you wish to point to and "Edit" with the name of the link.
(Note: You will find the code mentioned in step 1 at two instances. You can replace them with different links of your choice.)


3. Changing Blogger Logo:
3.1. Look for the following code in your blogger template.

<link href='IMAGE URL IN GIF FORMAT' rel='shortcut icon'/>
<link href='IMAGE URL IN GIF FORMAT' rel='icon'/>

3.2. Replace "IMAGE URL IN GIF FORMAT" with the URL of your image(logo). That is, after uploading it to Google Picasa or Imageshack or Photobucket. Get the URL of the image and paste it in the space provided.
(Note: We design blogger logos and header images for your blogs at very affordable prices. Please, visit the services page for more details (Our Exclusive Premium Services) or write to me directly via email at smalwayz[at]gmail.com.)


4. Changing Header Banner And Footer Section:
4.1. It is pretty simple to change these sections. I have coded in such a way that you just need to navigate to "Design->Page Elemets" from the dashboard and choose "Add a Gadget" to add any content/image of your choice.


5. Changing Default Avatar For Blogger Comments:
5.1. The template carries a unique wordpress style of comments section. You may have a look at the screen shot of the comments section below.5.2. If you wish to change the default avatar for the comments section, then search for the following link in your blogger template.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHGuyFKyjKBl5xGPIjp058fSdIToYig9X2n59rL4LAutnnZvDJHmbu1qIvfrMSRiAUr6Ha5LffkTtVL-HFlCsNs2q37a6Q-QsypnQ-FXpA7Tv80595pugegAYRO54JE_wYhkNp0YA4EQ/s400/grav.png

5.3. Replace the above link with the URL of your image (avatar of your choice) to display the default avatars on your comments section. That is, after uploading your image to Google Picasa or Imageshack or Photobucket, get the URL of the image and paste it in the space provided.


Overall, with this template installed on your blog, you just need to concentrate on your content and you can forget about the design of your blog because everything is installed by default with this template (including the "Read More" Hack). I hope I explained the customizations clearly. As mentioned earlier in the post, if you need clarifications or need further customizations(adding breadcrumbs or featured content or any other widget), please leave your comments below and I will help you solve the problem.

Click4more... 9 Comments

Add A Scrolling Search Bar On Blogger With Google Adsense

I had been working on few widgets requested by our blog readers for the past few days. One such widget is the Scrolling Search Bar. This widget basically comprises of three components namely, a little stylish search bar, a Google Adsense ad unit and social bookmarking buttons/counters. So, I would say this widget is basically a "Three-In-One" package that should be enabled on most of the blogs. If you want to increase your Adsense revenue, then go for it!!!

Since the ads scroll as the web page is scrolled, the impressions will increase and there is a higher probability for the ads being clicked, that is, your click rates will increase. Apart from this feature, it provides flexibility for the reader to search any content on your blog. Moreover, it becomes very easy for the reader to tweet or re-tweet your posts and share your posts on Facebook. If you would like to see the final output for this widget, then have a look at the screen shot below.You might have seen similar widgets provided by various sites like Wibiya but none of the sites, as far as I know, provide you the ability to display Adsense ads on their scroll bar. Anyway, let us proceed to the installation of this widget on our blog. Before you make any changes to your blog, make sure you back up your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Let us first add the CSS part for the bar. Search for the following code on your blog template. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

2. Now, copy and paste the following piece of code just above the line mentioned in step 1.

#mta_bar {
background-color:#dddddd;
border-top: 1px solid #ffffff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: hidden;
position: fixed;
height:20px;
}
#mta_bar img{border:none;}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left;
text-align:left;
padding-left:10px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #0000FF;
width:630px;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif;
float: right;
text-align: center;
font-weight: normal;
font-size: 10px;
letter-spacing: 0;
white-space: nowrap;
padding-right:10px;}
#mta_bar .right a {font-size: 10px;
color: #0000FF;
text-decoration: underline;}
#mta_bar .right a:hover {
font-size: 10px;
color: #0000FF;
text-decoration: none;}
#left_bar a {background: url() no-repeat; text-decoration: none;
color: #000;
padding:0px 0px 5px 30px;}
#left_bar a:hover {
text-decoration: underline;
color: #000; }
#search{border:1px solid #d1cdcd; height:18px; width:150px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{
margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;
background-color:#FFFFFF;border:1px solid #000000;}
#topsearch #s{width:125px}

3. You may temporarily save your template. Now, search for the following code in your template.

<div id='main-wrapper'>

4. Download the following text document - Scrolling Search Bar. Open the text document and paste the code present in it just before the line you searched in step 3. Please, change the Adsense Id(the one present next to the text "pub" in the document) with your Adsense ID. Also, replace my site URL(www.newbloggingtipz.com) with your site URL.
(Note: You may completely replace the Adsense section with your Adsense Code too. If you are pretty good at handling HTML, then you can customize the code as you want. I just provided the basic coding. You can add many more bookmarking buttons at the right of the scroll-bar too.)
5. That's it!!! Save your template!!!

You have installed the scrolling search bar on your blog now. The widget can be seen only on the post pages and not on your home page. If you want them to appear on your homepage, then remove the first and the last line mentioned in the text document. If you want some help regarding this installation, then feel free to leave comments or contact me via email. I will try my best to solve your problem.

Click4more... 15 Comments

Remove "Read More" Hack From Static Pages On Blogger

I have just now enabled guest blogging (my next post will be based on guest blogging and its importance, make sure you subscribe to this blog so that, you don't miss any thing that is valuable to your blog) on this blog, which I should have done long before. Better later than never. Anyway, when I recently added a new page to my blogger blog for enabling guest blogging, I encountered a mistake in it. It displayed a "Read More" link at the end of the post on the static page of my blog.

When I clicked on the link, it still showed the same page. So, it is pretty stupid to display "Read More" link for an already expanded post. More over, displaying the same page again and again for the same link appears to be more stupid. If you did not understand what I meant in the lines mentioned above, just have a look at the following two pictures and you will understand what I mean.

BEFORE REMOVING THE "READ MORE" LINK

AFTER REMOVING THE "READ MORE" LINK

So, I thought I should some how overcome this stupidity and to my surprise, I found a piece of code that would do the magic. Just follow the steps mentioned below and you will rectify the bug on your static pages on blogger.

1. As mentioned in many of my previous posts, make sure you create a back up of your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top.
2. Expand your blogger template and search for the following piece of code.

<b:if cond='data:blog.pageType != "item"'>

(or)<b:if cond='data:blog.pageType != "item"'>

(Note: Make sure that the following pieces of code follow above or below the code mentioned in the step2.)

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

3. Copy and paste the following piece of code just before the line mentioned in step2.

<b:if cond='data:blog.pageType == "static_page"'><b:else/>

4. Now, search for the following code near by the above codes.

<div style='clear: both;'/>

5. Copy and paste the following piece of code just before the line mentioned in step4.

</b:if>

6. Save your template and view the static pages of your blog.

This trick might be little confusing because it involves correcting the stupidity on our blogs(quite difficult to accept and digest). If you feel this tutorial is complex, then you can leave your comments below and I will help you solve the problem.

Click4more... 34 Comments

Free Premium Blogger Templates - Prozine V1

Today, I present to you another premium blogger template namely, "The Prozine V1 Blogger Template". This template is yet another creation from Lasantha Bandara. Although, I google a lot about premium blogger templates, I finally end up with the creations from Lasantha Bandara. I feel the templates posted in his site has got the professional touch that one excepts to have on his/her blog. You may click on the demo link to have a live demo of this template or just view the screen shot below.

Live Demo | Download Prozine V1 Blogger Template For Free

The demo link is the basic setup for the template while the screen shot shows, how good the template can be modified. You can always search for design tips(blogger customizations) in my blog. This template "Prozine V1" is basically a right sided three coulmn blogger template which comes in with outstanding and ready to use features. To start off, the template has got a navigation bar below the header. It comes with ready to use 468x60 banner ad space with the header. More over, the template consists of a sliding feature content which requires a little customization though the space for it is readily provided in the template.

The template carries a white background with black text for the posts which is most commonly preferred combination. The template has a good combination of colors for the rest of the area. Apart from the color combination used, the post area has rounded corners rather than the usual straight ones. The template comes with a ready to use read more feature and also, a very good looking comment bubble enabled for each post.

I always mention one drawback with the templates posted under PBT which is nothing but the footer section. Most of the premium templates lack the footer section. But, this template has overcome that drawback and provides you a four column footer, quite a lot of widgets can be accommodated in this space. If you have not got enough widgets, there is no need to worry. The template comes with enough ideas for each footer section.

So, overall I would recommend this blogger template for every newbie trying to make his/her blog professional. Please share your views about this template via comments!!! Remember, you will generate back links, that contributes to your Google PR, if you comment on dofollow blogs (Read more about dofollow blogs here : "How To Make Your Blogger Blog Dofollow") like mine!!!

Click4more... 11 Comments