Cosfdf
Horizontal Navigation Menu Links For Blogger:-This is very important hack for bloggers as we need to create a top menu of links with our links to important pages making the navigation in your blog very easy for your readers.As i have also explained an easy way before to add top menu links to blogger but some would have not liked the styled of that navigational menu links.
How to add these top navigational links below blogger header:-
Just Go To Layout > Edit Html
And Search For
Now add these below Css codes before it-
/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Please edit the width of the above codes in red to adjust to the width of the navigation menu to adjust it to yours template width.You can change the color and design of above css also if you are capable of it.
Now Search for below codes-
And add the below codes after the above codes:-
Thats It Now Preview It.If its working fine just save your template.
Change the links above in codes to yours.I hope you would like this navigation menu for sure.I will be back with one more great navigation link bar menu for sure ,uptil then enjoy this.
|
|
Now you can embed the comment form below the blogger post.Means you can embed i.e insert the form to comment below the posts in blogger.Embeddded Comment form gives very much professional look and its easy for readers to comment.As it was only available in wordpress now its made available by blogger too for test.
How to embedd the comment form below post?
First:- Login to you blogger account from draft.blogger.com instead of blogger.com.
Now Go to settings in draft.blogger.and then comments.
There you will find this option in picture below-
Set the Comment Form Placement to embedd below post and save it.
If you are using template by google without making editing then embed comment form below post in blogger will work.If you are using customized template then follow step below:-
Got to Layout then Edit HTML and then click on Expand Widgets-
Now search for below code in your html section-
Now replace the above code with this following code
Its Done Now. Save It and Check Your Blog
.The comment form below post is ebbedded making your blog look beautiful.
If still Comment form below post is not embedded Follow this:-
search for
Thats it now done now you will see the comment form is inserted in your blogger below each post.
|
|
