White Bread Blogger Template

Download Demo
White Bread Blogger Template is first template created by me and it looks really good with a sleek look and some advance features like Bread Crumb and Page Navigation. Please leave your feedback.....

It Contains :
Display Post Author, Date, Labels And Comments Widget.
Custom AddThis Sharing Widget.
Numbered Page Navigation.
Add 3 Column Footer.
Animated CSS3 Navigation Menu.
Breadcrumb Navigation.

How To Install A Blogger Template

Blogger offers to so much free template but they don't look professional at all so when it comes to use a custom blogger template first question comes into a new blogger's mind is how to do that so here we're going to explain you :

• First go to your favorite blogger template resource and download your favorite template or you can also create your own template.

• Your download will contain a .xml file so we have to install this .xml file in our blog.

• Go To Blogger > Template > Click on 'Backup/Restore' :

Now take a deep breath and eat some cookies because we're moving to next step which was easy as hell so just read carefully :

• After clicking on Backup/Restore button a pop-up will appear. Now choose your .xml template file and click on upload just like this :

Now after clicking on Upload it'll take several seconds to upload your template (Depends on your net connection and template size) and after completing loading your new template is ready to use.....Enjoy

Display Post Author, Date, Labels And Comments With Icons Below Post Titles

Today i'am sharing a great post by Helper Blogger. Here is a great widget to show author name , time , label and a comment bar with icons just below your blogger post titles. When there are no comments posted,the comment link says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. Here we go :

Installing :

• Go To Blogger > Template > Edit HTML > Tick expand widget templates check box.

• Now search for <div class='post-header-line-1'> and just above it paste following code :

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavzoRG9bfyrjlRqJ-YEyq_E9VrXArh02J5-_Kb8Ks3jSRVE-e9Eg_gwUG0PjAP54kLQ9z8mJqF1zwkHX4gaMCp5yEChjTt1G5nCyNnyH-ry-san5I1-AeeqmH_YfL7S_aSBVoNG39D-U/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnuBIJuJnKzy9R9IkTwPmSS4X0_5txI0Xsy9Ixk-Cwq6A5dQjXeylNir6xumH1L62aEpYl-cazDM0naaRoLofzdm1XygHP0OOg8jFYTieaUx5XbWBiZ9LH98h-ozsqTPoGg8ZVuJR2j4U/s1600/clock-icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhdzvktxmxLTbsOUvVsExq9HzYnFON7p8OzGwvD4WaUqmdNhdyItxsiG5zEgiijnWRCpbnqZY7Vturb4Xl96iA9N3QqwzAuazWu9JBHdBALwx90YFXrbwb-VoPgk1XNHzrXTVokmZ_hU/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SZ6VJVZxY0nuGkWd1ezF5fF9s38C9wobjd8TBJMezWUjJ74Hr1WdOhhSzQRjYKJADrevDms8u42BUWEoo0ZB8DJ1XnJko5x69CYXdkpX3l85vo57wCEzjw2dCuxq7nO5vx7nYNvUQdo/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

Customizing :

•  You can change all icons of this widget and also text to display then there is one or zero comments.

Custom AddThis Sharing Widget For Blogger

Here is a sharing widget created by me with the help of AddThis script and first of all i just wanna clear that this is a sharing widget not a link to your social media profiles and it's awesome so trust me and add this.

Just click on Add To Blogger button below and add it on your blog :

Numbered Page Navigation For Blogger

You may saw this navigation on wordpress and other amazing sites by now because of Abu Farhan you can also use this amazing navigation in blogger.So here we go with this quick tutorial :

Installation :

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin> paste following css :

.showpageArea {
padding:10px;
}
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 5px;
padding:5px;
background:#fff;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#f0f0f0;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #f0f0f0;
margin:0 5px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 5px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:5px;
background:#fff;
}
.showpage a:hover {
text-decoration:none;
background:#f0f0f0;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

• Now search for </body> and just above it paste following script :

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.searchLabel'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
</b:if>
<!--Page Navigation Ends -->

The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed on navigation widgets.

• Save it and enjoy :)

How To Add 3 Column Footer To Blogger

In past i posted a post about 3 column footer widget which was cool but this time this footer is a simple and a basic one but still it looks real good. So without wasting any time just move on to tutorial :

Installing :

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin>  paste following css :

/* ----- End 3 Column Footer Widget Code by http://www.widcraft.blogspot.com  ----- */
#lower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5);  background:#fff; margin:10px auto 0;  padding:5px 0px 0px 0px;  width:1000px;  border:1px solid #dbe1e6;}
#lowerbar-wrapper{ color:#333;  float:left;  margin:0px auto auto;   padding-bottom:20px;  width:332px;  text-align:justify;  font-size:100%;  line-height:1.6em;  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */ overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
.lowerbar{margin:0; padding:0;}
.lowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px;}
.lowerbar .widget-content{padding:5px 5px 5px 15px;}
.lowerbar h2{background: none repeat scroll 0 0 rgb(79, 165, 241);color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase;}
.main .Blog{border-bottom-width:0;}
.lowerbar ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;list-style-type:none;}
.lowerbar li{margin:0px 0px 2px 0px;padding:0px 0px 1px 20px;border-bottom:1px dashed #dbe1e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMO8j_wKkuvv9kD_ZsLIWYjHi5hXQ4IXGw9P39OF7Gh2_ZZ-cjC6NY3kzj0_QFchk2-j72vqcdWP0Q45VtE3ysOio5GyssWD21FyGi96vem1gw-twgT1HU2a0_1Lm52B235A3D9_MdB6xF/s1600/bullet-point-image-1.png) no-repeat left;}
.lowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none;}
.lowerbar a:hover{color:#A61111; text-decoration:none;}
.lowerbar a:visited{color:green; text-decoration:none;}
/* ----- End 3 Column Footer Widget Code by http://www.widcraft.blogspot.com  ----- */

• Now search for </body> and just above it paste following code :

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Save it and we're done...leave your responses in the comment section below...

5 Must Have Google Chrome Extensions

Google Chrome is worlds #1 browser and it really makes browsing easy and fast but the fact is that it's not #1 just because of fast browsing and sleek looks , it's also popular because of some extensions and stuff which makes it really amazing. So here are top five extensions on my list :

1.RSS Feed Reader : A simple and pretty way of keeping track of your latest RSS and Atom feeds. The best RSS Feed Reader extension for Chrome. Inspired by Firefox's Live Bookmarks.Subscribe to your favorite feeds , organize them and get latest stuff on the go.You can get this extension by clicking here.

2.Silver Bird : Silver Bird is a Twitter extension that allows you to follow your timelines and interact with your Twitter account.Silver Bird is an awesome Twitter client extension for Google Chrome with lots of features. This extension was previously known as Chromed Bird, but has since been renamed Silver Bird.You can get this extension by clicking here.

3.Facebook Notifications : Keep up with your friends, even when you're not on Facebook. This extension connects to your Facebook account to show you what's happening with your friends including:

• Likes and comments on your posts
• Invitations to events
• Posts in your groups
• Friend requests
• New messages
• Other notifications you normally see when you're on Facebook

You can get this extension by clicking here.

4.My Chrome Theme : Create and share Google Chrome themes of your own design.
Add a personal touch to your browser. Create and share custom Chrome themes using your own images and designs.In three simple steps.You can get this extension by clicking here.

5.Screen Capture : It's easy to use this extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image. You can also edit your captured image before saving it as a PNG image. Highlighting, redacting and adding text are supported. You can get this extension by clicking here.

Have fun with them....you can explore millions of cool extensions on your Google Chrome.....

Solution Of Blogger Naked Domain Redirection Problem

You bought a new domain and still wondering why blogger is not redirecting naked domain to your blog and you're so sick of it ? No more because after suffering same problem i found a solution of it and it's easy. First of all make sure you followed all these steps from this tutorial.

So as we know that Blogger team is working to fix it but last time they took 7 days to fix the custom domain problem now let’s see, we can just wait until the problem is solved. But Seriously there is another way to redirect your non-www domain to www e.g extremetechblog.com to www.extremetechblog.com and we really need to do it because it is not good as in SEO (Search Engine Optimization) term.

How to Solve the Blogger Naked Domain Redirection Problem :

It is not as hard as you are thinking right now, so here is the solution all you need is to create on account Google Apps don’t worry you can create it for free and the sign up is so simple as creating an account on Facebook and remember you put the same URL of your website that you are using with your Blogger blog. After creating the account you will be redirected to the admin panel automatically so you will see a bar on top go to Domain settings > Domain names > Redirect your naked domain now I think it’s time for screen shot it will help you more to understand it quickly.

Now after that you will get a box just type there www and click on Continue >> button then here is the tricky part actually after clicking that button you will see page with full of information that you have to add 4 A-records to the domain DNS settings but seriously I know mostly users have done it already because mapping a custom domain with Blogger domain (blogspot.com) requires us to add those A-records so it’s simple just read the page if you didn’t add those records in DNS of the domain then just go ahead do it now the question is how to do it actually everything is written and described on the page or if you had already added those records like me then simply click on I’ve completed these steps button and that’s it now your Blogger custom domain will redirect from non-www to www go to Blogger Publishing settings to confirm that it’s working properly and also open your website link without www to 100% confirmation.

As you can clearly see in the screen shot above that the check box is checked but remember don’t change the settings otherwise you have to do the same to make the redirection working properly so if you still need some help then I am here just comment below I’ll reply you as soon as I can.

Blogger Naked Domain Redirection

The following action links your naked domain (example.com) to your actual site (www.example.com). If you skip this step, visitors who leave off the "www" will see an error page.

Enter your domain name in the format example.com, and list the I.P. addresses shown below in the "A" section. You'll need to create four separate A-records which point to four different Google IPs.

• Sign in to your domain hosting service.

• Navigate to your DNS Management page. i.e. Domain Management, Advanced Settings.

• Locate the A record settings and create a new A record.

• Enter a value for the host name. Leave this field blank and for some domain hosts, the value '@' corresponds to the naked domain.

• Enter the following IP addresses as the destination value:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

• Save changes with your domain host.

Before you move onto this step, wait about an hour for your DNS settings to activate. If you attempt to change the publishing settings before the DNS changes activate, then we'll let you know with a warning message.

Now it’s time to make sure Blogger knows about your custom domain so that Google can direct readers to your blog. Just head back to Blogger and update the information on your Settings | Basic tab. Find the area for "Publishing," and click the edit link.

Check the Redirect yourdomain.com to www.yourdomain.com

Click on save and we're done.... still facing problems then click here.

Animated CSS3 Navigation Menu For Blogger

First of all i just wanna tell you that i'am working on my first blogger template and i hope to publish it soon on our blog for you all to download.....OK so it's time to give you one for acually two more amazing css3 menu , both are way to much awesome and yea i'am using it on my blogger template and as i wrote that i'll publish it later.

Installing :

• Go To Blogger > Layout > HTML/JavaScript > Post following HTML :

<ul id="menu">              
<li><a href="#">Home</a></li>              
<li><a href="#">Products</a></li>              
<li><a href="#">Services</a></li>              
<li><a href="#">About</a></li>              
<li><a href="#">Contact</a></li>          
</ul>

• Just below above html code post any of these CSS code , both are different :

Code 1 :

<style>
#menu li {              
display: inline;              
list-style: none;              
padding: 0;          
}                        
#menu li a {                                
border: 1px solid #3d8bf2;              
padding: 15px 20px 15px 20px;              
text-decoration: none;              
font-family: arial;              
color:#fff;              
margin-left: -5px;              
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2vTKrQi2f_IlCzzPQ2f2OIAg6Au7Kcuy7z8joh-Gd8VXj-wXZBZnB2S2sn8o7SGyiA_aWJKAkMSb2S70l5oxfPGniQTnoiJWhxhSrGOy5zlITRa8m0NwgIinKA7LSjPJ7huRpY5bwMI/s1600/menubg.PNG');              
background-position: left;              
-webkit-transition: all 0.7s ease-in-out;            
-moz-transition: all 0.7s ease-in-out;              
-o-transition: all 0.7s ease-in-out;          
}                        
#menu li a:hover {              
background-position:right;          
}
</style>

Code 2 :

<style>
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2vTKrQi2f_IlCzzPQ2f2OIAg6Au7Kcuy7z8joh-Gd8VXj-wXZBZnB2S2sn8o7SGyiA_aWJKAkMSb2S70l5oxfPGniQTnoiJWhxhSrGOy5zlITRa8m0NwgIinKA7LSjPJ7huRpY5bwMI/s1600/menubg.PNG');
background-position: bottom;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#menu li a:hover {
background-position:top;
}
</style>

That’s it! I hope you enjoyed these navigation menu.