How to add Horizontal Line and Anchor Tags in Blog Posts?


#1

Greetings,

Hello People I would like to ask a Question that how to put a line after a header in a blogger post

For Example This is my Header Text and after that i want to insert an line break.

I also have a Subquestion that I want to create an menu before my post and there are some categories and if the reader directly wants to jump in one of the categories in the post or in simple words how can we jump from one place to another place on the same post.


#2

I don’t get your first question :confused: can you be more specified ? or add some image maybe…

On your second question, do you mean put a menu navigation ?

Add this CSS and HTML on your template:

/*Site Navigasi*/
#site-nav,#site-nav ul{background-color:#333;height:40px;color:white;text-transform:uppercase}
#site-nav{border-bottom:4px solid #00AFAF}
#site-nav li{float:left;position:relative}
#site-nav a{display:block;height:40px;line-height:40px;padding:0 15px;color:inherit;white-space:nowrap;font-family:Oswald,"Arial Narrow","Source Sans Pro",Calibri,Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DeJavu Sans","Helvetica Neue",Arial,Sans-Serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#site-nav a.home-menu,#site-nav a.home-menu:hover{background-color:#00AFAF;color:white;padding:0 10px;line-height:45px}
#site-nav a:hover,#site-nav li:hover>a{background-color:#00AFAF;text-decoration:none;color:white}
#site-nav li ul{border-top: 4px solid #00a7eb;height:auto;position:absolute;z-index:999;top:-99999px;left:-99999px;width:170px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.js #site-nav li ul{top:100%;left:0;display:none}
#site-nav li li{float:none;display:block}
#site-nav li li a{height:30px;line-height:30px;padding:0 10px}
.js #site-nav li li ul{top:0;left:100%}
.no-js #site-nav li:hover>ul{top:100%;left:0}
.no-js #site-nav li li:hover>ul{top:0;left:100%}
#site-nav .search-form{float:right;text-transform:none}
#site-nav .search-form form{margin:0;height:40px;line-height:40px;padding:0 14px}
#site-nav .search-form .text-input{width:150px;border-color:transparent;font-family: Oswald,"Arial Narrow","Source Sans Pro",Calibri,Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DeJavu Sans","Helvetica Neue",Arial,Sans-Serif;
color: #333;}

And put this too:

  <nav class='nav' id='site-nav'>
    <ul>
      <li><a class='home-menu' expr:href='data:blog.homepageUrl' title='Home'>Home<span class='screen-reader'> Home</span></a></li>
      <li><a href='URL HERE'>Some Text Here</a></li>
      <li><a href='URL HERE'>Some Text Here</a></li>
      <li><a href='URL HERE'>Some Text Here</a></li>
      <li><a href='URL HERE'>Some Text Here</a></li>
      <li><a href='URL HERE'>Some Text Here</a></li>
      <li class='search-form'>
        <form expr:action='data:blog.homepageUrl + &quot;search&quot;'>
          <input class='text-input' name='q' type='text'/>
          <button class='submit-button' type='submit'>Search</button>
        </form>
      </li>
      <!--
      <li><a href='#'>Submenus</a>
        <ul>
          <li><a href='#'>Submenu 1</a></li>
          <li><a href='#'>Submenu 2</a></li>
          <li><a href='#'>Submenu 3</a></li>
          <li><a href='#'>Submenu 4</a>
            <ul>
              <li><a href='#'>Submenu 4.1</a></li>
              <li><a href='#'>Submenu 4.2</a></li>
              <li><a href='#'>Submenu 4.3</a></li>
            </ul>
          </li>
          <li><a href='#'>Submenu 5</a></li>
        </ul>
      </li>
      -->
    </ul>
  </nav>

#3
  1. For adding a horizontal line break anywhere in your blog posts use this tag <hr> in the HTML mode.

For example Lets add a horizontal line separator between these texts.

Text above the line
<hr>
Text Below the line

Output would be

Text above the line


Text Below the line
  1. For your second question on how to add anchor links inside your posts please read this post