Showing posts with label blogspot. Show all posts
Showing posts with label blogspot. Show all posts

Wednesday 23 November 2011

Setting A Sticky Post In Blogger [Keep a Post Always In Top]

I wanted to set my giveaway post always at the top of post even if I posted new posts so this is just little trick that might be useful for many people out there. Since blogger arranges the blog posts in the reverse chronological order (descending order of date and time), we apply a little trick to set our post always at the top just like the sticky post.

The trick is to set the date and time of the post to some date that is far away in the future. For example, you could keep the date of your post to 2020 A.D. thus that post will always be at top since blogger shows the post in the reverse chronological order. Now to do this, while you are composing your post or editing your post, click on Post Options to expand it and then in the Post date and time, select the Scheduled at and then enter some future date. Now just publish your post and this particular post will always be in the top of your blog homepage. I hope it helps you. :)


Saturday 12 November 2011

My Blog's Header Menu HTML and CSS Source

Here I am sharing my shitty simple design of my top menu in the header I've updated recently. If you like, you can use it for your blog as well. If you want to customize some part of it, you can do easily. I recommend playing around with color combinations.

CSS Of Header Menu:
    width: 100%;
    background: #2e2e2e;
    height: 36px;
    font-weight: 14px;

    list-style: none;
    padding: 7px 5px 0px 5px;

ul#mynav li
    display: inline;
    border: 0px;
    background: #333;
    margin-left: 0.5px;
    margin-right: 0.5px;
    padding: 8px 10px;

ul#mynav li a
    text-decoration: none;
    color: #ccc;
    font-weight: bold;

ul#mynav li a:hover
    text-decoration: underline;
    color: #eee;

The CSS entities are kept inside the <b:skin> and ]]></b:skin> so you have to paste all these CSS inside them. If you are confused, search for ]]></b:skin> and then paste all the above CSS codes before it.

HTML Part for menu:
<div id="menubox">
<ul id="mynav">
<li><a href="#" title="">Link 1</a></li>
<li><a href="#" title="">Link 2</a></li>
<li><a href="#" title="">Link 3</a></li>
<li><a href="#" title="">Link 4</a></li>
<li><a href="#" title="">Link 5</a></li>

First edit the HTML code as per your need and then search for <b:section class='header' id='header' and you need to figure out where to post the HTML. I had a separate div where I could insert these HTML codes but your blogger template might be different so I leave this for you to figure out. Just paste in the header area and then preview to see how it looks. I can't exactly pinpoint you on what to do exactly, just keep on previewing till you get what you need. I've pasted mine one just below the </b:section>.

This way, you can simply insert the HTML and CSS based navigation menu for your blogger blog. I hope the information proves helpful.


Friday 4 November 2011

SEO Friendly and Better Title For Blogspot Blog

The blogger blogspot has a default setting to show the title of posts page in your blog in the format Blog Name : Post Title which is not much SEO friendly. Better would be the format Post Title : Blog Name. Changing to this better format is very simple and easy.

Go to your design page and click on Edit HTML and then check the Expand Widget Templates checkbox.

Now search for:


Replace that whole thing you've just searched with the following blogger code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageName/>: <data:blog.title/></title>

Now you should see the effect in action. :)