This Is A Sample Of Sticky Post


The Problem is: to do this trick, we must use HTML code to make up the text... But don't worry, if you are not capable with HTML Codes, there are simple and fast way to make your sticky post without learn it. Use your "New Post" to make a sample of your sticky post, set the display as close as your real post, use the Preview to check your sticky post display then copy-paste into your content collumn text add gadget.

Learn how to make this sticky post in http://doit2us.blogspot.com/2010/02/how-to-make-sticky-post-in-your-blogger.html

How To Make The Navigation Menu Bar On Blogspot (II)

>> Sunday, January 31, 2010

In How To Make The Navigation Menu Bar on Blogspot (I) we have discuss how to make the navigation links menu with simple HTML script. In this article we will learn how to make it more attractive with CSS.
To do so, besides displaying the menu links with the facilities of HTML/JavaScript Widget, first we must declare the CSS code for these links to set the appereance, than put this CSS in our HTML Template.

1. Simple Navigation Bar Menu.
Besides as we did in How To Make The Navigation Menu Bar on Blogspot (I) , we can create a simple navigation bar menu in the way below, although a bit busy because we have to declared the CSS Code first, but we can easily set the appereance later.

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS between <head>...</head>, I suggest to put in under /*Header*/ or ]]></b:skin> to make it easy to remember.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
You can set the font size larger or smaller, you can also set the padding and the margin to set the space in between the word. If you want add a border around the word then you can set the border value at least 1 px. Don't forget to click Save Template.

The next step is create the menu links list (as we did in How To Make The Navigation Menu Bar on Blogspot (I)  but in a LIST form).
On your Dashboard > Layout > Page Elements, and click Add a Gadget on Header. and choose to add HTML/JavaScript.
 
Note : If you want to add "Add a Gadget" Widget on your Page Elements Please visit  http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html .

Leave the Title Column empty, Copy the Script below and insert in the column content
<div id='navbarmenu'>
<ul>
<li><a href="URL of Your Home page">Home</a></li>
<li><a href="URL of Your Music page">Music</a></li>
<li><a href="URL of Your Books page">Books</a></li>
<li><a href="URL of Your Video page">Video</a></li>
<li><a href="URL of Your Profile page">About Me</a></li>
<li><a href="mailto:YOUR EMAIL ADDRESS">Contact</a></li>
</ul></div>
Change the URL Link and relevant words with yours. If you want to make link for your "Label" or "About Me", you can simply click your "Label" or "About Me" in the sidebar and look at your browser navigation bar, just copy and paste into the URL Link 
The following example are "Home", "About Me" and "Contact" of this blog..
<a href="doit2us.blogspot.com">Home</a>
<a href="http://www.blogger.com/profile/07471629071890951823">About Me</a>
<a href="mailto:mc4tur@gmail.com">Contact</a>
After Save it, you can move this link widget, try to put it under the header or above the blog posts than try to preview the template. Click SAVE after you make sure the location of your menu link widget.

2. Add a different setting of each link menu (03/02/2010)
If we want to make the different setting of each link menu (eg background color) than we must declare the setting by each link. After we made the links than we give a "class" on each.
Exactly the same steps as above, but we declare CSS for each link (so not longer in a list form). For example we call it by the numbers: newnavbar1, newnavbar2, newnavbar3 and so on.
a.newnavbar1{
font-size:100%;
list-style-type: none;
display:inline;
background:#333399;
padding:3px;
color:#ffffff;
border:0px solid;
}
a.newnavbar2{
font-size:100%;
list-style-type: none;
display:inline;

background:#ff0000;
padding:3px;
color:#ffffff;
border:0px solid;
}
a.newnavbar3{
font-size:100%;
list-style-type: none;
display:inline;

background:#339966;
padding:3px;
color:#ffffff;
border:0px solid;
}
a.newnavbar4{
font-size:100%;
list-style-type: none;
display:inline;

background:#ff6600;
padding:3px;
color:#ffffff;
border:0px solid;
}
a.newnavbar5{
font-size:100%;
list-style-type: none;
display:inline;

background:#cc99ff;
padding:3px;
color:#ffffff;
border:0px solid;
}
 And in the Column Content Configure HTML/JavaScript we make a modification by add script class="newnavbar1" for the first link (eg Home), Please match with the link you created.
And in accordance with the setting in the CSS, then we should also write the link one by one just like in the simple HTML Links  How To Make The Navigation Menu Bar on Blogspot (I)
<a href="URL of Your Home page" class="newnavbar1">Home</a>
<a href="URL of Your Music page" class="newnavbar2">Music</a>
<a href="URL of Your Video page" class="newnavbar3">Video</a>
<a href="URL of Your Profile page" class="newnavbar4">About Me</a>
<a href="mailto:YOUR EMAIL ADDRESS" class="newnavbar5">Contact</a>
To make it more attractive, you can add a visited link and hover effect, for that you must add the following script below your CSS.
a.newnavbar1:hover, a.newnavbar2:hover, a.newnavbar3:hover, a.newnavbar4:hover, a.newnavbar5:hover {
background:#41a317;
color:#ffffff;
}
a.newnavbar1:visited, a.newnavbar2:visited, a.newnavbar3:visited, a.newnavbar4:visited, a.newnavbar5:visited {
color:#57e964;
}
Click Save and try to view your colourful link..

Some people tend to choose a simple display. If you want to display your menu navigation bar background in one color only or even the same color with your background page, then you can use the CSS code in a list form like in the no. 1 above.
Here is an example of CSS script if we use the same background and just add a visited and hover effects.
#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#navbarmenu li a{
color:#dfffed;
}

#navbarmenu li a:visited {
color: #57E964;
}

#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}
And we use the same step and the same HTML/JavaScript as in no.1. Simple Navigation Bar Menu.

48 comments:

reverse phone lookup February 2, 2010 at 9:45 AM  

Thank you very much for your post. I will definitely implement on my blog.

social network design February 5, 2010 at 9:17 AM  

Very nice description. I am very much stuck with the navigation bar building in my blog. I need your help. Do you have gtalk id so that I can clear my doubt about this.

propane hose adaptor February 10, 2010 at 5:14 AM  

Good tutor. I am going to implement this on my blog. Thanks

john February 11, 2010 at 6:42 PM  

Hi, thanks for great post but i don't get this :( well i created navbar but don't know how to add links there.I chosed www.myblog.com for HOME but what about other tab links? I created www.myblog.com/contact.html for CONTACT but when i'm clicking then showing page not found :/ what should i do? please help.

mc4tur February 11, 2010 at 7:45 PM  

Hi John..

I've been already checked your ../contact.html page and I am brought back into your main/home page. I do not know if you are asking this seriously, because it looks like "domain parking web" for me. Whatever it is, I think everything looks right.. unless if your contact link page that you want is not your "main/home page", then you must check your "contact link page" addres again for sure or you can simply put your email addres in the navigation bar (....mailto:YOUR E-MAIL ADDRES....as explained above).
Hope the best for you...

mc4tur February 11, 2010 at 7:59 PM  

@http://www.searchreversephonenumber.com/ and http://www.propanehose.net/... Thanks hope works for you.

@http://social-network-design.com/... would seem better if we discuss your problems here (as John was), so there is the possibility of feedback from visitors other than me/mine..
Thanks.

real estate gardening home February 12, 2010 at 8:49 AM  

Thanks for your kind information. I will apply this in my site.

Compare Mortgages February 12, 2010 at 10:43 PM  

I found your blog dofollow. But the comment links show that your blog is nofollow. Why is this?

model beauty fashion February 14, 2010 at 4:31 AM  

Good tips. Thanks for your share. I will definitely do this with my blog.

Hotel Travel February 17, 2010 at 9:10 AM  

Hello is your blog dofollow or nofollow. I am little bit confused?

Mc | Use Blogspot for Autoblog February 18, 2010 at 7:50 PM  

@Compare Mortgages and Hotel Travel..

My blog is dofollow, I've done a little fixed on it.. Thanks..

social networking software February 20, 2010 at 1:23 AM  

Thank you very much friend. I was looking for this for a long time. But no one given me a good and nice answer like this.

Escuelas Profesionales February 21, 2010 at 10:24 PM  

Thank you very much for your share. I am going to implement this on my blog.

Tenerife Holidays February 26, 2010 at 6:47 AM  

Good tutorial. I love this. Thanks for making this blog dofollow

agoodic April 9, 2010 at 5:35 PM  

Good tips. Thanks for your share. I will definitely do this with my blog.

blog for steveLi April 17, 2010 at 1:00 AM  

I found your blog dofollow. But the comment links show that your blog is nofollow. Why is this?wholesale 3g cell phone

├žizgi film izle May 17, 2010 at 10:53 AM  

Super-Duper site! I am loving it!! Will come back again - taking you feeds also, Thanks.

wedding rings May 31, 2010 at 4:21 AM  
This comment has been removed by a blog administrator.
iPhone Development September 15, 2010 at 3:01 AM  

I am very much stuck with the navigation bar building in my blog. I need your help. Do you have gtalk id so that I can clear my doubt about this.iPad Developer Custom Software Development Mobile Application Development iPhone Application Development iPhone Games Development

Seo experts April 9, 2011 at 2:27 AM  

your post about how to make navigation menu bar in your blogger is really helpful, thanks for your share. I will definitely implement this with my blog.

Muhammad Azeem June 6, 2011 at 2:46 AM  

This is a nice article..
Its very easy to understand ..
And this article is using to learn something about it..
asp.net, c#, javascript
Thanks a lot..!

accident claims company August 10, 2011 at 4:15 PM  

You have a very impressive ideas here, it's a very useful one, I could use this in the near future. Thanks for sharing this to us.

whiplash claim August 25, 2011 at 7:06 PM  

Keep up the excellent work!

Henry Jakson September 13, 2011 at 1:04 AM  

I had logged onto this site very recently and found it to be very useful and informative. Each and every concept was well presented. Thanks a lot for the information.
Marketing Plan

whiplash compensation October 20, 2011 at 10:45 PM  

Your post really helps me to work easily.

KVM Switches December 13, 2011 at 11:11 PM  

I have a few additional questions. I got my horizontal Navigation Bar up on my blog, but how do I link the tabs to my labels?

Anonymous,  December 19, 2011 at 3:27 PM  

You have shared nice stuff. This is my first time I visit here. I found so many interesting in your blog especially its discussion. Keep your blog updating and good luck!

Interface Talent not an Agency

debt management companies December 20, 2011 at 9:32 PM  

I am a newbie and your success is very much an inspiration for me.

Anonymous,  January 13, 2012 at 1:21 AM  

Generally, the usefulness and importance makes my head spin. Greatly thanks again as well as all the best as well as maintain the great operate!

roller backpacks for girls

Anonymous,  February 2, 2012 at 2:34 AM  

We are publishing the following just to let you know that what you are doing a fantastic job by maintaining all of us posted relating to this. Make sure you keep on putting up this sort of top quality content articles because this is an uncommon issue to locate currently.

child health plus

Domain services February 24, 2012 at 10:25 PM  

Great work you have done by sharing them to all.I found this website is very useful Thanks Domain name registration india

handyman Bellevue February 26, 2012 at 7:53 PM  

It is very rare these days to find blogs that provide information someone is looking for. I am glad to see that your blog share valued information that can help to many readers. Thanks and keep writing.

lease deals nissan March 11, 2012 at 4:07 PM  

I have gone through the article and found interesting information helped me in getting the best answer that I am looking for.

homeopathic adhd remedies March 28, 2012 at 3:08 AM  

Truly impressed! Everything is very, clear and also available. You've shared a lot of important information.

buy attic ladder March 29, 2012 at 9:03 PM  

Every time we go to web sites, we observed virtually the same as the additional write-up as well as theme but I happen to be jolted when I initially reviewed the title from this page. I never ever expect that the blogger has the expertise of making a little something new online. I just watched this kind of website in this page. I concur that the blogger has the psyche of Albert Einstein.

licensed plumbers brooklyn ny April 19, 2012 at 2:53 AM  

I will be pleased to view that your particular blog site reveal appreciated information that will help to many people viewers. Many thanks and also maintain creating.

tv reviews 2012 April 22, 2012 at 8:51 PM  

Truly impressed! Things are all quite, specific along with open up. You've discussed a lot of important data.

youtube html5 player May 4, 2012 at 1:46 AM  

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

idaho divorce May 16, 2012 at 9:39 AM  

I truly learned about many of this, but never the less, I still thought it was beneficial. Good task..

Tarah May 24, 2012 at 8:37 AM  

Thanks for the tips, I've been trying to get into custom software development but it's harder than it looks. I really appreciate the guide. Anything to get me started will help, thanks.

Cosmetic Dentist New York May 24, 2012 at 8:06 PM  

Great work from a smart person. I want to say a big Thank You for this post. Now, I know how to make navigation menu bar easily. Thanks for the help!

www.modelingnews.net May 28, 2012 at 11:36 PM  

I can’t look for the best blog because of

their similarities. At last, the rare blog I am hunting for many days is now in your site.

Clarence H. July 29, 2012 at 7:47 PM  

This happens to be an exceptional article! I like this topic.

wildan a December 19, 2012 at 5:35 AM  

Thank You for tur\torial make navigation.

Mobile App Developers August 20, 2015 at 4:21 AM  

Amazing blog and very interesting stuff you got here! I definitely learned a lot from reading through some of your earlier posts as well and decided to drop a comment on this one!

Property Lawyer Delhi July 22, 2017 at 3:18 AM  

Great article. Thanks for your great information, the content is quiet interesting. I will be waiting for your next post

Post a Comment

 

  © New Blogger Tips For Us Free Blogger Template by Mc 2010.

Back to TOP