Haq Hai Humara Haq Hai Hamara - Vishal Mishra | Lyrics | Mp3 Download

Title Name  - Haq Hai Humara Cast/Starring  - Shahrukh Khan Singer Name - Vishal Mishra Lyric - Manoj Muntashir Print Lyri...

How to put three line menu on your blogger / blogspot Website

Three Line Side Menu - HINDI

If you want to install Threeline Menu in your website, and you want that it is only in the Mobile View site then you can do so. Today, I will tell you the method that you will follow and then the Threeline menu will be added to your website.

How to put Threeline Side Menu-

>> First you open your Blogger account.
>> Now go to Layout.
>> Now select Java / html Gadget and paste the following code -

<style>
.sidebarmobilemenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebarmobilemenu a {
  padding: 8px;
  text-decoration: none;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebarmobilemenu a:hover {
  color: #f1f1f1;
}

.closemobilemenu {
}

.openmobilemenu {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding-top: 0px; margin-top: -3px;
  border: none;
}

.openmobilemenu:hover {
  background-color: #444;
}


@media screen and (max-height: 450px) {
  .sidebarmobilemenu {padding-top: 15px;}
  .sidebarmobilemenu a {font-size: 18px;}
}

.tksearch {
  width: 90%;
  position: relative;
  display: flex;
  left: 5%; right: 5%;
}

.tksearchButton {
  border: 1px solid white;
  background: white;
  text-align: center;
  color: red;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.tksearchTerm {
  width: 100%;
  border: 3px solid white;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}
</style>

<div style=" text-align: center;" id="mysidebarmobilemenu" class="sidebarmobilemenu">

<img align="center" src="https://1.bp.blogspot.com/-8GxwVFbV1Wg/XrJSBJO_InI/AAAAAAAAEM4/Rs-GqzjlEsos2d86CesJs2kBCTbNQDbGgCLcBGAsYHQ/s1600/2019animationss2200KB.gif" alt="TheKroyaard Logo" style="width:160px;height:80px; padding-top: 10px; " />
<br/>
www.TheKroyaard.com 
<div style="clear:both;"></div>
<form class="tksearch" method="get" action="/search">
<input name="q" autocomplete="off" type="text" class="tksearchTerm " placeholder="Type here..." />
<input class="tksearchButton" type="submit" value="➩" /></form>
<div style="clear:both;"></div>
  <a href="http://www.thekroyaard.com/p/about.html">About</a>
 <a href="https://www.thekroyaard.com/p/whats-your-demand.html">What's Your Demand</a>
<hr />
 <a href="javascript:void(0)" onclick="closeNav()">Hide</a>
</div>

<div id="main">
  <button class="openmobilemenu" onclick="openNav()">☰</button>  
</div>

<script>
function openNav() {
  document.getElementById("mysidebarmobilemenu").style.width = "100%";
}

function closeNav() {
  document.getElementById("mysidebarmobilemenu").style.width = "0";
}
</script>

>> Now save it by clicking on the SAVE button.

Watch Video



No comments:

Post a comment