How To Change Name of "Labels" to "Categories" in Blogger

If you want to change the name of Labels to Categories for example in Blogger, it is very easy. You can follow below steps:


1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Search below code [Ctrl+F]

<data:postLabelsLabel/>

4. Replace <data:postLabelsLabel/>  with your own name, for example "Categories".
5.Click on "Save Templates" and refresh your site.

Reference:
http://www.bloggertipandtrick.net/2009/04/how-to-change-name-labels-below-your.html

Saturday, October 20, 2012 | 0 comments | Read More

How To Insert HTML, CSS, Javascript Codes in Bloggers Posts

How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts? This is one of a most common question which arrives in users minds. It has been a biggest headache for many Blogger (Blogspot) users. Still many Blogspot users are unable to discover why they cannot display HTML coding as plain text in there posts.






1. Go to Blogger >> Your Blog >> Template >> EDIT HTML >> Proceed
2. And now Search For ]]></b:skin> With (CTRL+F)
3. After you find ]]></b:skin> just above it paste the following coding

.post blockquote {
background: #C8EFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbRRmNsrwQZUI6DLRujQeKNiSme8v8jBBbTlxHjaIeCdt-jH7qhhcdwGTP0lPAo-K2nb5RDj_-IPoqEPD0Gi_y3Urb63ik-7I-dQATvCzztDhq5X69BbFVhyphenhyphendhQWNXqxhJg8ua_ghOhNk/s1600/1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

4. Now After pasting the above code save your template by pressing Save Template Button
5. Just paste the HTML, CSS or JavaScript coding in the Blogger Post editor
6. Select the HTML, CSS or JavaScript coding which you pasted previously.
7. Press the "QUOTE" button at "Blogger Post Editor Tool Bar".
8. Publish your Post

References:
http://www.mybloggerlab.com/2012/04/insert-html-css-javascript-codes-in.html

Saturday, October 20, 2012 | 0 comments | Read More

Create Breadcrumb Navigation To Blogger

To make you blogger sites are easy for user to know where they are, you need navigation information that called Breadcrumbs. How to put breadcrumbs in you blogger site, follow these steps:

1. Sign in to your blogger sites
2. Go to "Template" > "Edit Html"
3. Find below code [CTRL+F]

<b:include data='top' name='status-message'/>

4. Paste below code above the code in step 3

<b:include data='posts' name='breadcrumb'/>

5. Find below code [CTRL+F]

<b:includable id='main' var='top'>

6. Paste below code above the code in step 5

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

7. Find below code [CTRL+F]

]]></b:skin>

8. Paste below code above the code in step 7

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

9. Save the template

Reference:
http://www.spiceupyourblog.com/2011/07/add-breadcrumb-navigation-blogger-blogs.html

Sunday, October 14, 2012 | 0 comments | Read More

Create Drop Down List in Horizontal Menu for Blogger

Do you know that drop down list in horizontal menu can make you blogger website more beautiful. It is not only nice but also make you blogger websites looks more professional. This is a simple drop down horizontal menu that you can put in your blogger sites. Follow these steps:

1. Sign in in your blogger sites
2. Go to "Layout"
3. Select "Add a gadget" at header position
4. Select "HTML/Javascript" and paste below code

<!-- Drop Down Horizontal Menu Start-->
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li><a href='#'>Home</a> </li>
<li> <a href='#'>About</a>
</li> <li> <a href='#'>Contact</a> </li>
<li> <a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>
<!-- Drop Down Horizontal Menu End-->

5. Go to "Template" > "Edit HTML" > "Proceed"
6. Search [CTRL+F] this code

]]></b:skin>

7. Paste below code above the code in step 6

/*----- Drop Down Horizontal Menu Start ----*/
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*----- Drop Down Horizontal Menu End ----*/

8. Save the template

Your can customize your own color by changing these color.

1. Change #060505 to change background color of the Main menu
2. Change  the yellow highlighted text to change font color, size and family
3. Change #BF0100 to change the background of a tab on mouse hover
4. Change #BF0100 to change the background color of the drop down menu
5. Change #060505 to change the background color of drop down menu on mouse hover

Reference:

http://atif980.blogspot.com/2011/12/create-drop-down-menu-in-blogger.html

Sunday, October 14, 2012 | 0 comments | Read More