Subscribe For Free Updates!

We'll not spam mate! We promise.

Tuesday, January 14, 2014

Add Awesome Navigation Or Tabs Menu In Blogger Blog


Tab Menu For Blogger
A navigation or menu bar is a bar made up of tabs. “Behind” each of those tabs is a link -to a post page, a static page, a label page, to another website etc. Making navigation tabs is not that difficult. They are basically links with some styling added for visual appeal. While links are arranged vertically, navigation tabs are usually arranged horizontally. In this tutorial we will install the bar just below the header, a typical place for navigation bar. The bar will be added as a gadget via Page Elements page. The advantage of using a gadget is that if you want to remove it later on, it can be done easily without editing the HTML. But in order to do that, the template must have an Add A Gadget link thingy or widget container as I would call it, at that particular location. The is no such element. What do we do then? We create it. In our next tutorial we will learn how create Element just below header.

Saturday, January 11, 2014

A Cute Email Subscription Box for Blogspot User!



Cute Email Subscription Box
When we develop any template we take some particular custom gadgets and also make them compatible with our developed template so that it can express extra beauty of our developed template and allure a user to download and use the hot design right that time. Let's go ahead and see how to install it on blogger platform

How To Install The Widget?

  1. Go to Blogger > Layout
  2. Now click on Add A Gadget link
  3. Choose HTML/JavaScript
  4. Now copy and paste the following code inside
  5. Do some changes and finally hit save button
<style>
.emailzon p {
color:#CCC;
font-size: 20px;
font-weight: normal;
font-family: Lucida Fax, Tahoma;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #444;
width:100%;
margin-bottom:0px;
margin-top:-10px;
}
#wrapperzon {
border:1px solid #333; padding:8px;
width:300px;
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih_BqMxO-MWv3FF4QseYpj0cmWoevfBCKqWI_eAmax76QRi7OBvzZpQEQk4gpt0Kx4hMfufm5ZrRHuH8e5dCAlYUHxgJkuRWGynrcTnGfuVSpi3LO9BgWGgwhWlSpbmHGnkhU1dPSl_4eH/s1600/picons20.png)no-repeat left top;
height:60px;
margin:0;
background-size:63px auto;
}
input.subscribe{
background: -moz-linear-gradient(center top,#666 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
width: 80px;
margin-top:6px;
height:29px;
padding-top:5px;
border-image: initial;}

input.subscribe:hover{
background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
.email-box{
padding: 5px 5px;
font-family: "Arial","Helvetica",sans-serif;
height:38px;}
input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
input.email:focus{color:#333}
.upper {
margin-top:-13px;
padding:0;
}
</style>

<div id='wrapperzon'>

<div class='upper'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=microwbt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=420&apos;);return true' style='text-align: center;' target='popupwindow'>
<p><input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Email...&quot;;}' onfocus='if (this.value == &quot;Enter Email...&quot;) {this.value = &quot;&quot;;}' style='width: 180px; margin-left:-5px; height: 29px; background:#FFFFFF; border: 1px solid #222; color: #666; padding: 0px 8px 0px 6px;-moz-border-radius: 3px; -webkit-border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;border-image: initial; font-weight: italic; font-size: 12px;font-family: &quot;Arial&quot;,&quot;Helvetica&quot;,sans-serif;' type='text' value='Enter Email...'/><input name='uri' type='hidden' value='microwbt'/><input name='loc' type='hidden' value='en_US'/>
<input class='subscribe' type='submit' value='Submit'/></p><p>
<a href='http://feedburner.google.com' target='_blank'/></a></p></form>
<div>

</div></div></div>

Customize The Following

  1. Simply change microwbt with your feedburner username
  2. If you change the popup box height and width then simply change the following measurementwidth=500, height=420

Tuesday, January 7, 2014

10+ Custom 404 Error Pages For Blogger




Recently Blogger introdued new Blogger Search Preference option for blogger blogs. With introduction of latest search preference they introduced "Errors And Redirections" in simple we can say it "404 Error" It is a great feature of bloggers which will help them to set a custom 404 Error Page as they wish.Here I am giving some samples of 404 Error pages you can use them or you can add your own.But before adding any custom 404 error template you have to disable by default 404 message of blogger.

By Default, your Blogger Error page will display this error message

Friday, January 3, 2014

Add Related Posts Widget For Blogger With Thumbnails



Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views.