MAKE BLOG DASHING

Add Awesome Navigation Or Tabs Menu In Blogger Blog

2014-01-14T01:40:00.001-08:00

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.

Live Preview

Add It To Blogger

1. Go to your Blogger Dashboard>> Layout>> and click on add a gadget (Just Below Header Like Screen Shot.)

2. Click Add A Gadget link below the header.
3. Scroll down the Add A Gadget window and select HTML/JavaScript.
4. Leave the title box empty.
5. Copy and paste the HTML code below into the content box.

<style>

#tab_menu {
	background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbPTVr7hFsKHZc9gTZuV50CTq2KNusM_lUkxx3xdsnuHlk489jKEjJNyrq62NEpM6n0y1Maurigumot0LhGV-s-UKp8Os6ed8fvJallV-V8vMxpAuSGddenFZyrxW31DkxKrW3mYtI1wF/s1600/menu_bg.png) no-repeat;
	height:50px;
	width:960px;
	line-height:50px;
	list-style:none;
	margin-top:10px;
	font-size:14px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	overflow:hidden;
}

#tab_menu li {
	float:left;
	border-right:1px solid #FFA722;
	border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
	border-left:none;
}

#tab_menu li:last-child {
	border-right:none;
}

#tab_menu li a{
	text-decoration:none;
	float:left;
	display:block;
	height:50px;
	padding:0 20px;
	color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
	color:#622900;
	text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
	color:#000;
	text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

6. Replace “#” with the URL of your destination page or blog.

7. You can get the URL of a page by copying the content of your browser’s address/URL bar while you are on that page.
8. To show all posts under a label (category), you need to link to the label’s page.

9. To change the width of the menu edit width: 960px.

Background Option

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUv1ZR0_ThNrs-Mbf9X61-wxthIYM22nWwfNABOm1rDgziiJQbM8IqfGiqrkhinmPpMjMuininny2wJQC7_JylaIGG6vXY8dSxtLUbcm3k9CQaU4PQJaQ22wzfAWdyzg6iSInI_EMWIkzl/s1600/menu_bg_1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0QxVmCiLcnYfjWTqWy5L1vlx4yB2FYTTfrL8m1wmpad-tLzPc8D9t9g9zVENm3yOyj6OKXaOSFpzI7AAkv2bhmevEyjmugrXiEKKxbN-1JfY7VzX3c4ZLa9pBqmMFOGazGiNHokVKrHL/s1600/menu_bg_2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2oBRE-5jS1Gz84_8ST2W3DhaMb3PF9cYEtg5KToJRZ1FUrWy9o9ERYrdnfm6NFvrruQKjksmf8RctPIDcG9pCqYTHW4nM3YmM44TFEiYzcDsIO_tlcCxcN4VM0b7iFYK4UK7jSe7EKSu/s1600/menu_bg_3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw-Vd2BKO8Lc5q9pNHuCq5-weQKZWUZp07Ya_3KjF2bPaJ8rd6qrad0pi7kQ3nLAiHt0KJR0Tdmm71IkUmKthLRgQG46G11wH54etyrSVGWV2xWWkiiYjLEkxGMY8qPLMZ1AmoXBoQXxEZ/s1600/menu_bg_4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjWO9y7gK_m1KKuPSYOjCIYAlg8LHvDaXyBT4Oo25zvCDETe2Myfdz268VpxiCEKPBPvCKTjs-hWMFKaCf_1makWPajrMsKAoX9nMQ2gEm52OjHZ7Pd3FGktFWj5fYYtfUagqAGHIhUi5B/s1600/menu_bg_5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-jUzuo_62_4Civc2R7euGn_eCpcFkHlGElqU6xcTxuSj_ZhCcCv5INlpjN2p2k4XSgu_DxZ7bgMxn5yUnipP3fFQzDmPxahtck0dkF8vDKkdNfp_2ua6pmFZZt69KqzaqpMaf2Bwo1Cl/s1600/menu_bg_6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErztk-qierfpKM5_lEiXDosp5cVpx2Lnc0J2Fz2t3IDli_qxs7zWhz-f7Jx4foKPAG1xoobZFO5DTFHL1BMMjGQAWvDRRpc7TNSKBYS01HVLAYz_5VyyNMmszUPOHgDv-kVBoHdcdoBpk/s1600/menu_bg_7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_dNkLdHGyPFyvENwmOPX7TCr4rN5XgBDk_YcxhroR2hIm1M_V7mhLyG1UlaJ2lo0gReyht-EPHhYUBjXfqmuba5FCfOZHz7KWlC4JDiKxCqbzHc8Rg8FfwAo4gCP8HWQsxao_R5LY3nOC/s1600/menu_bg_8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZyuXK56ofgqyYxtgpvlrEBbB0kMx68nJzeWwlg9TfWtX-u3K-uZi8se23q_Rkx8WmsVP173GOeCjNk4aD2gNhMgewOaJnSLOl7mwpanATLaQ10Z1bNjkgosOBurq01mJtAjzi9UbLyuf/s1600/menu_bg_9.png

10.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkN5-92ICXWP_CwFXCGLfV1Mzd8KCX5WxRoL7aIk-F0hqSFPQz5JbhsbCA7oOQDsosJAU_d2pYGWttJ1VXSgcgfo23BnQ2ZId2HOIjeZD-z6UKP14lSSSLwtw7WKmkLLrUgzkTNGxhsn7K/s1600/menu_bg_10.png

Just Replace highlighted background URL with any background which you want to add in menu.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbPTVr7hFsKHZc9gTZuV50CTq2KNusM_lUkxx3xdsnuHlk489jKEjJNyrq62NEpM6n0y1Maurigumot0LhGV-s-UKp8Os6ed8fvJallV-V8vMxpAuSGddenFZyrxW31DkxKrW3mYtI1wF/s1600/menu_bg.png) no-repeat;

For any further help please feel free to post your queries in the comment box below. Please do not hesitate to ask questions, we love responding! Its Very Handy, Light weight and Professional Tab Menu.

Enjoy!

A Cute Email Subscription Box for Blogspot User!

2014-01-11T00:17:00.003-08:00

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

Live Demo

How To Install The Widget?

Go to Blogger > Layout
Now click on Add A Gadget link
Choose HTML/JavaScript
Now copy and paste the following code inside
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('http://feedburner.google.com/fb/a/mailverify?uri=microwbt', 'popupwindow', 'scrollbars=yes,width=500,height=420');return true' style='text-align: center;' target='popupwindow'>
<p><input name='email' onblur='if (this.value == "") {this.value = "Enter Email...";}' onfocus='if (this.value == "Enter Email...") {this.value = "";}' 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: "Arial","Helvetica",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

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

10+ Custom 404 Error Pages For Blogger

2014-01-07T01:47:00.007-08:00

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

If you want to add custom message then you have to disable above default message first...

To disable blogger's by default status follow below instructions :

New blogger User Interface.
Blogger Dashboard > Design > Edit HTML.
Download your template.
Add below code just above </head> tag.

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
</style>
</b:if>

Custom 404 Error Templates

Here we are sharing collection some cool 404 error template which was collected by Prayag.You can also edit the codes and change it to as you wish.You can use our HTML Editor to see live preview of your changes.

Now go to Settings > Search Preferances. (In new User Interface)
Choose one of the 404 template below
Copy code and paste it in textarea box and save box.

Error Page Template 1

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwUY2jSXhgNsEgoRu7EeyD-kk2pJT_8fsnxWhHehS2gH2ITnw3K__xqdGqn-LaJAHsuNnWXbMx-cAdjuXZ8gFAp4da4m9L_mDGaD02CmpMEwM0lrt4lfCJn82kliFbhBedc2X_A-rXx1A/s1600/404+error+page+7.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 2

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuhC_lTZB0Hh05hpt9k4gcl2cyLnbMCvIUh781ezbcjCkXgfUaUl32QSSbE4PY1yaNVh4LkGphXVqngdCO7jqmFy3NtKu2777V8F_wmQVpa5lziV6bb-NMsMJKWZoitU8oPsYkpnoqta-l/s1600/10.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 3

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9GY1OAxwvFG41I5KLjNPvPBt6qE8QUdu9QWag8yiprKrtlFmGeVH5LOPG-KZwXbHeQbSGAbnG359M7-O8vAF_CSv8qRs6OuNRIt98RkqPI7P6DK8j9wri2gV93ptS65grO038jRDgd8T/s1600/404.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 4

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwUY2jSXhgNsEgoRu7EeyD-kk2pJT_8fsnxWhHehS2gH2ITnw3K__xqdGqn-LaJAHsuNnWXbMx-cAdjuXZ8gFAp4da4m9L_mDGaD02CmpMEwM0lrt4lfCJn82kliFbhBedc2X_A-rXx1A/s1600/404+error+page+7.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 5

/div>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAv7FegyNLtsDIqR6mdzOaA1a9TZUck6qKaSaITG9ZdZ55hglH8T1edjouxwu5nIEQOwQjWVdXD7lUAp3bbVvUDrX-SrS0xxHeZE2Gd-mCpaVMGcalDlb9JLjEpJ0ZmQW4O-WJ3KUuWTE/s320/404+error+page+1.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 6

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPET9qSoVLvZWgqv5NNnT3qedWp766x4djgh4zWVJqn3kIv3Rc1q_UDQhyvGDdnTN_VOQyaFprQwoUWsK76yXJUfCi2_1mYPYraTiKl14b8CTBEzG2E4FnmkfpzZUIkfo7rL6idvxsVW8w/s1600/18.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 7

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Zb-0tnihdaHe75C4dTJ5OxZRGwJiHjIbvgOpTlYH54gIZclJnHtrZ-uIzen6GLEc1bk0OIvewEOsG9PN5fwVJ00ovrKSImOur89wMNmF5M-dNCSaPxzVdAN-aknpallQDDHmHSs0zSJs/s1600/29.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 8

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx7N8gN_EpeyNA4nctADYHigZbuULpaE-TD-dlUxYzyhn25xojbgRjIsisP02H6VRh1l1t-fs4KemHkhgtdjLHs2oPuie7HBEI9ImEvp6wrVZhSOlvF6Mh7PPv5OcAwl_f68wsUkJxKNKq/s1600/4.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>
</style>

Error Page Template 9

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQVnBra_SDHfxOsIG4Offm1vVTnzMACbTkxMln1zBD-gP7WtUXcZCUhwvuyafmUSVGfOO0PWFqeYCNUS-0bXnCL6y9YKDM5GLVQf6MbDx0OqmnMRsqziYv_8ZTSlByS0cekBuCctqFp87e/s1600/7.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 10

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhAUfWyB2WRf7hSXr6fbnY1GIyBa43veeMod39ALv1QWHmj1K-H_SR9BH_Om6HH_HEfiR1w5kNPw8kRvMgTsB1w_cLTVYUOaKkUnW-te7udeaiFtpPmq4eVvA66P1kmYfNVtSBW5Obt0a/s1600/27.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 11

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhgAoXmzs2WjnZWWNLrONsqgljkVYo9w2WEm2pETdvNWOUtU45h1c4BPTjq2S24zNrqI0lZd7tvBh106IwKP0DXcw8fwIA5R8pwgf35uyYsebxdPq_HpE14zlIMLcp7xr0gdPbPIvwDFIg/s1600/24.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 12

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELJkrirY7VXL0uDiuBjDVmcOQkI_e1tkpjsCv75Jlp6toqVLAWX4M4YrOgIUTUtPRTVZBYhN9EtdNO6Rig9LcTycUddE9NC08Nqu0HaI7ooYGIkKPVpKGFM8213gGGmKOti8OyKoVh_94/s1600/17.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

Error Page Template 13

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-D2ZXlGaQry0QyG24ji9C_E0HAddV_MYayJHbD9V7o-MWTYmuDg8Hmh92La96iZ-Q6Xrmwph2DtMYoiGdebN2DTjvksHxO8CURzirExz2-pCAIijFvRbwIjkATHqwyJ5Y-Eng8U0QmvP/s1600/13.gif')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

If you have more such 404 error pages then don't forgot to share it via comments...

Add Related Posts Widget For Blogger With Thumbnails

2014-01-03T23:28:00.002-08:00

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.

By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.

How To Add Related Posts Widget For Blogger With Thumbnails

First for All Go To Blogger.com > Design > Edit Html
Find </head> Using CTRL+F
Copy the code below and paste it just after </head> tag

<b:if cond='data:blog.pageType == "item"'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, “Times New Roman”, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;}
#related-posts a:hover {background-color:#d4eaf2;}</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtT_Apj4fSwd2sxdmqhkExU_z8QS44ypd8SdxSlPf_KzhFFZhhWYSeh0GOhUKFYWhvv5gSNentVuvBzoufUhrxYWOJz4mvrcUH51Ojv2fc-V1LEZJtv-qxhQ0IywXHMks4egvIkIvaSQ/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/></b:if>

Now find the following code:

<div class='post-footer-line post-footer-line-1'>

If you can't find it, then search for this one:

<p class='post-footer-line post-footer-line-1'>

OR:

<data:post.body/>

Copy the code below and paste it just after <data:post.body/> tag and save your template.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWMbThGglzEONFMW-7oC3APyyhnjndLv9Z4ObdKVyTyzMJc-MF7Q92Zj0_jdi93C-HJyc-518UGrsKPrSLx5f86XGYG13V3YV4XNwahJIvaWnj78S2hKaEfYmCN_p-2vMtmVxIw9XOan7D/s1600/blogger-widgets.png" /></a>
</b:if></b:if>

Change the 6 value from max-results=6 with the number of posts you want to be displayed.