May 2015 - Blogger Smasher | The Ultimate Portal for Blogger Tricks

Adding Attractive Navigation Bar For Blogger

A navigation menu is highly required organize your blog labels, or to add a menu button for a new Blogger page, or to link to another page on the web. This can be done using some basic HTML and CSS. Before 2 years, our previous admin Mr. Ajaya Gajurel wrote a post on "Creating Custom Navigation Bar for Blogger". You can see it here. So, I'm not going to describe more about it. Just I will be telling you that they will work as a buttons for bloggers. When we click on any of them, it redirects to the specified URL of it.

Follow My Steps on Adding Custom Navigation Bar;

Go To Blogger Dashboard
Click On Add A Gadget Just Below Your Blogger Header (Because We will be showing it in the top of our blog)
Click On HTML/Javascript
Paste The Below Code there;

 <div id="tabs24">  
      <ul>  
           <li><a href="1st link" title="Smasher Menu"><span>Home</span></a></li>  
           <li><a href="2nd Link" title="Smasher Menu" class="current"><span>About Us</span></a></li>  
           <li><a href="3rd link" title="Smasher Menu"><span>Services</span></a></li>  
           <li><a href="4th Link" title="Smasher Menu"><span>Our Work</span></a></li>  
           <li><a href="5th link" title="Smasher Menu"><span>Contact Us</span></a></li>  
      </ul>  
 </div>

Change 1st Link, 2nd Link, 3rd Link, etc with your respective links.
Change Home, About Us, Services, Our Work, Contact us, etc with the text to appear in the button.
Save it!

Now, we have added the links. But it is incomplete and looks very very simple. Now, let's stylize the bar. Follow My Steps To Stylize the navigation bar;

Go To Blogger Dashboard And Select Template And Click On Edit HTML
Then Search for This Code inside the HTML Codes: ]]></b:skin>
Now Just Paste This below code before/above ]]></b:skin>

 /* ---------------------- Start Smasher Navigation Bar ---------------------- */  
 #tabs24{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("images/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}  
 #tabs24 ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}  
 #tabs24 ul li{display:block;float:left;margin:0 2px;}  
 #tabs24 ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}  
 #tabs24 ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}  
 #tabs24 ul li a:hover{color:#fff;}  
 #tabs24 ul li a:hover span{display:block;cursor:pointer;}  
 #tabs24 ul li a.current,#tabs24 ul li a.current:hover{color:#894d12;background:transparent url("images/time2bed_left-ON.gif") no-repeat top left;}  
 #tabs24 ul li a.current span{background:transparent url("images/time2bed_right-ON.gif") no-repeat top right;height:43px;}  
 /* ---------------------- END Smasher Navigation Bar ---------------------- */

Save Your Template
Check Your blog

Now, we have made a custom navigation bar for blogger. The final work in your blog looks similar to this;

If you guys have any problems regarding this topic, you can comment below;

Regards,

Nischal Khanal

Read Our Other Useful Posts;

Add Beautiful E-mail Subscription Box For Blogger

1 Comment

Sometimes, our reliable visitors may not be able to view our blog posts. So, they'd like to subscribe via RSS. Each of the visitor subscribed by RSS would be updated immediately after updating the site. So, it is preety much cool. Visitors will be e-mailed automatically after the update of the website.

But, many of the users have the default blogger Feedburner E-mail Subscription Box which doesn't look preety and attractive. So, in this tutorial, We've brought you guys a beautiful e-mail subscription box for blogger.

So, let's get started;

Add Stylish E-mail Subscription Box For Blogger;

Go To Blogger Dashboard and select your blog
Click On Layout And Select Add A Gadget(Recommended To Add It On Footer)
Then Choose HTML/Javascript
Paste the Below Code There;

 <div id='footer-newsletter-wrap'>   
 <div id='footer-newsletter'>   
 <h2 class='title'>Subscribe to our newsletter<span style='color:#f54000;'>.</span></h2> <span>(Get fresh updates in your inbox. Unsubscribe at anytime)</span>  
  <div class='newsletter-inner'>   
 <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bloggersmasher", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'> <table> <tr> <td width='100%'> <input class='newsletter-address' name='email' placeholder='Your Email Address' type='text'/> </td> <td> <input class='newsletter-submit' type='submit' value='Subscribe'/>   
 </td>  
 </tr>   
 </table>  
  <input name='uri' type='hidden' value='newbloggerlab'/>   
 <input name='loc' type='hidden' value='en_US'/> </form>   
 </div> </div> </div>   
 <style> .newsletter-inner { margin-top:15px; } .newsletter-inner .newsletter-address{ color:#fff !important; width:100%; font-size:16px; border:0; background-color:#2B4052; padding:20px 0px 20px 25px; border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .newsletter-inner .newsletter-submit{ width:100%; margin:0px 0px 0px 29px; border:0; background:#a3d14f !important; color:#1E2D3A; font-size:16px; z-index:0 border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; font-weight:bold; padding:20px 20px 20px 20px; } .newsletter-inner .newsletter-submit:hover{ background:#93bc47 !important; } .grid a, .grid a:visited {color:#eeeeee} .grid a:visited {text-decoration:underline} .grid a:hover {color:#cccccc} #footer-newsletter-wrap { background:#1E2D3A; margin: 0 0 0 0; padding: 50px 0 60px 0; } #footer-newsletter-wrap a { color:#66665f; } #footer-newsletter { color:#5b5b5e; width: 520px; margin: 0 auto; } #footer-newsletter h2 { margin: 0px 0 10px 0; padding: 0; border-bottom: none; font-weight: bold; text-transform: none; color: #fff; font-size: 26px; text-shadow:2px 2px #151f28; } #footer-newsletter ::-webkit-input-placeholder { color: #fff; } </style>

Change Bloggesmasher with your Feedbuner URL
Save Your Layout
Done!

Now, we have successfully added stylish E-mail Subscription Box. If you have any problems, you can ask us below.

Regards,

Nischal Khanal

Read Our Other Useful Posts;

How To Create A Stylish Contact Form For Blogger

26 Comments

Visitors may need to contact the blog administrators for some reasons or for requesting something and many other reasons. Many visitor may have some difficulties in contacting the author. For an example, if the users don't mention their e-mail address or if they don't have contact form. Sometimes it becomes a great need to contact an author, and if there are no any sufficient measures for it readers may get disappointed and leave visiting the specific blog.
So, in this video tutorial, we will be discussing on creating the contact form. You guys just need to follow my easy tutorials.
So, let's get Started;