Horizontal Floating Bar For Blogger | InfoTechBlogging InfoTechBlogging: Horizontal Floating Bar For Blogger

Posted by Syed Muhammad Ali

Today I am Sharing Horizontal Bar For Blogger which you can easily install on Blogger and You can display your Pages and Posts here

Just Follow the Below Steps to Add to Blogger

  • Go to Blogger
  • Log-In to Your Dashboard
  • Go to Template Section
  • Click Edit Html
  • Find ]]> by Pressing Ctrl+F Key.
  • Paste the below code just Above/Before  ]]>

.adspot { float: right; margin-top: -5px; width: 731px; } .dropdown.leftro { float:right; width:110px; margin-right:30px; } .homeage { padding-bottom:14px!important; padding-top:10px!important; height:18px!important; } .dropdown > div { position:absolute; z-index:1000; top:100%; left:-9999px; opacity:0; transition:opacity 0.2; -o-transition:opacity 0.2; -ms-transition:opacity 0.2; -moz-transition:opacity 0.2; -webkit-transition:opacity 0.2; border-top:1px solid #3c3c3c; } #menuheader { float:left; width:100%; height:42px; background-color:#46A28D; position:fixed; z-index:1000000000000; -webkit-box-shadow:rgba(0,0,0,0.3) 0 2px 2px -1px; -moz-box-shadow:rgba(0,0,0,0.3) 0 2px 2px -1px; box-shadow:rgba(0,0,0,0.3) 0 2px 2px -1px; } ul.righthead li { display:block; float:left; font-family:Arial,Helvetica,sans-serif; font-weight:700; text-transform:capitalize; font-size:14px; border-left:1px solid #3D8272; height:18px; padding:12px 25px; } ul.righthead li:hover { background-color:#3D8272; } ul.righthead li a { color:#fff; text-decoration:none; } li.dropdown { padding-right:0!important; border-right:1px solid #ff873c; } .righthead .dropdown > a { padding-right:38px; } .righthead .dropdown > a:after { border-left:3px solid transparent; border-right:3px solid transparent; border-top:4px solid #ddd; content:””; height:0; margin-top:-1px; position:absolute; right:23px; top:50%; width:0; } .righthead .dropdown.leftro > a:after { border-left:0 solid transparent; border-right:0 solid transparent; border-top:0 solid #ddd; content:””; height:0; margin-top:-1px; position:absolute; right:23px; top:50%; width:0; } .righthead .dropdown:hover > div { left:0; opacity:1; } .righthead .navigation-right.dropdown:hover > div { right:0; left:auto; } .righthead .search-dropdown { width:389px; } .righthead form { text-align:right; padding:20px; } .righthead input,.righthead textarea,.righthead input:focus,.righthead textarea:focus { border:none; background:#fff; } .righthead { background:#658db5; border-right:1px solid #7397BB; border-left:1px solid #7397BB; max-width:1248px; margin:0 auto; } .righthead .dropdown > div { background:#2d2520; }

  • Now Search for tag and Paste the Below code Just Below/After tag.

You are Done!

Follow Us!

About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter