How To Practise Drib Downward Card Inwards Blogger Amongst Pictures

Hello friends, welcome to the Blogger tutorial today I volition demonstrate yous how to add together practice Drop Down Menu inwards Blogger blog with pictures.

Guys nosotros insert add drop downwardly navigation carte du jour alongside sub carte du jour inwards Blogger blog, Tab Menu tin categories our Blogger weblog posts similar nosotros convey Html too windows play tricks postal service thus nosotros practice these categories or tabs like:-
" Web Design " convey 2 sub carte du jour [html] [CSS] and
" Computer Tricks " convey i sub carte du jour [Windows trick]

These are Following Steps:-

Step 1: First nosotros larn to Blogger Layout too click Add a Gadget Link.

Step 2: Click the HTML/JavaScript link.

Step 3: Paste the Code inwards Content surface area too Click Save button.

<ul id="menu_bar">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 0</a></li>
  <li>
    Menu 1
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
<li>
    Menu 2
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
 <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>

Step 4: Now Click Blogger Theme link too click the Customise button.

Step 5: Click the Advanced Link too scroll Down links thus Click Add CSS link. Here nosotros glue the CSS Code too click Apply to Blog button.

.tabs-inner .widget ul#menu_bar {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#menu_bar li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the carte du jour */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background color of the primary carte du jour */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#menu_bar li a {
padding:0;
font-family: sans-serif; /* Font for the carte du jour links */
border:0;
}
.tabs-inner .widget ul#menu_bar li:hover {
  background: #555; /* background color when yous gyre over a carte du jour championship */
  color: #fff; /* font color when yous gyre over a carte du jour championship */
}
.tabs-inner .widget ul#menu_bar li:hover a {
  background: transparent;
  color: #fff; /* font color when yous gyre over a carte du jour championship link */
}
.tabs-inner .widget ul#menu_bar li ul {
  z-index:1000;
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#menu_bar li ul li {
  background: #555; /* background color of the sub carte du jour items */
  display: block;
  color: #fff; /* font color of the sub carte du jour items */
  text-shadow: 0 -1px 0 #000;
}
ul#menu_bar li ul li a{
  color:#fff  /* link color of the sub carte du jour items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
  background: #666; /* background color when yous gyre over sub carte du jour items */
}
.tabs-inner .widget ul#menu_bar li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Step 6: Go to the Blogger Blog.

Note:- Here nosotros Replace # RED Code alongside Blog URL.

Read More:- 
How to Add Animated Download Buttons inwards Blogger
How to Make Money Using Affiliate Marketing
How to Remove Newer Post And Older Post Link inwards Blogger
How to Change Author Name inwards Blogger

I promise yous taste this Post. If whatever work comment it.