[html]<style>
body{
   padding-top:0px !important;
}
@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
background-color:#f9f9f9;
font-size:16px
color:#444;
}
.post-body h2{
color:#f54325;
font-family:'Oswald';
font-weight:400;
text-align:center;   
}
.post-body {
max-width:680px;
margin:20px auto;
border:10px solid #f0f0f0;
padding:15px 20px;
background-color:#fff;
color:#444;
font-family:'Arial';
font-size:13px;
}
.admenus * {
margin:0;
padding:0;
}

ul.admenus {
list-style:none;
line-height:1;
overflow:visible!important;
}

ul.admenus:after {
margin:0;
padding:0;
content:' ';
display:block;
height:0px;
clear:both;
}

ul.admenus li {
float:left;
display:inline;
position:relative;
font-size:14px;
font-weight:400;
text-transform:uppercase;
}

ul.admenus li a {
display:block;
line-height:50px;
padding:0 20px;
text-decoration:none;
color:#2c2c2c;
font-family:'Oswald';
font-size:13px;
font-weight:400;
transition:all 0.3s ease-in-out;
}

ul.admenus li a:hover,ul.admenus li a.hoverover {
background:#f54325;
color:#fff;
}

ul.admenus ul {
position:absolute;
display:none;
top:100%;
border:1px solid #ccc;
}

ul.admenus li:hover > ul {
display:block;
}

ul.admenus ul li {
z-index:72;
float:none;
min-width:160px;
background:#f5f5f5;
text-shadow:none;
}

ul.admenus ul li a {
text-transform:none;
font-weight:normal;
color:#aaa;
font-family:'Arial';
}

ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover {
background:#f54325;
}

ul.admenus ul ul {
display:none;
left:100%;
top:0;
}

ul.adajaxmenu li div.submenu {
position:absolute;
width:600px;
z-index:90;
left:0;
top:100%;
overflow:hidden;
min-height:150px;
background:#f0f0f0;
-moz-transform:translate(0,30px);
-webkit-transform:translate(0,30px);
-o-transform:translate(0,30px);
transform:translate(0,30px);
transform-origin:50% 0;
visibility:hidden;
opacity:0;
color:#929292; 
box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);   
transition:all 0.3s ease-in-out;
}

ul.adajaxmenu li:hover div.submenu {
visibility:visible;
opacity:1;
-moz-transform:translate(0,0);
-webkit-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}

ul.adajaxmenu ul ,ul.adajaxmenu ul li {
display:block!important;
border:0 none!important;
margin:0!important;
padding:0!important;
}

ul.adajaxmenu ul li {
background:none!important;
float:none!important;
}

ul.adajaxmenu ul.verticlemenu {
position:absolute;
width:33%;
left:0;
top:0;
bottom:0;
background:#202020;
}

ul.adajaxmenu ul.postslist {
position:relative;
display:block;
width:65%;
float:right;
margin:0 0 15px 0!important;
background:none;
}

ul.adajaxmenu ul.postslist li {
display:block;
overflow:hidden;
position:relative;
min-height:60px;
padding:15px 8px 15px 110px!important
}

ul.adajaxmenu ul.postslist li .imgCont {
position:absolute;
left:0;
top:15px;
width:100px;
height:70px;
overflow:hidden;
font-size:0;
line-height:0;
border:1px solid #929292;
}

ul.adajaxmenu ul.postslist li .imgCont img {
position:relative;
top:-20px;
padding:0;
width:100px;
height:100px;
display:block;
}

ul.adajaxmenu ul.postslist li a {
display:block;
line-height:1.4;
padding:0!important;
color:#666;
font-family:'Arial';
font-size:12px;
transition:all 0.3s ease-in-out;
}

ul.adajaxmenu ul.postslist li a:hover {
color:#f54325;
background:transparent;
}

ul.adajaxmenu .loader {
background: url('https://4.bp.blogspot.com/-sRHd2OR7omQ/VFBOax0jdNI/AAAAAAAABgg/ei6bgO1agM0/s1600/adloading.gif') no-repeat scroll 0 0 transparent;
width:22px;
height:22px;
position:absolute;
top:50%;
margin-top:-11px;
right:5px;
}

ul.adajaxmenu .menuArrow {
border-bottom:4px solid transparent;
border-top:4px solid transparent;
border-left:4px solid #fff;
display:block;
height:0;
margin-top:-4px;
position:absolute;
right:11px;
top:50%;
width:0;
}

#adajaxmenu {
background:#fff;
height:50px;
width:100%;
position:relative;
border:1px solid #e6e6e6;
max-width:980px;
margin:0 auto;
padding:0 20px;   
}

li.search-form{
float:right!important;   
line-height:50px;
margin:0 20px 0 0;   
}
li.search-form .searchbar{
border:none;
padding:10px 5px;
background:#f9f9f9;
color:#fff;
width:130px;
}
li.search-form .searchbar:focus{
border:none;
outline:none;
background:#fafafa;   
color:#666;   
}
li.search-form .searchsubmit{
background:#f54325;
border:none;
color:#fff;
cursor:pointer;
padding:10px 5px; 
transition:all 0.3s ease-in-out;   
}
li.search-form .searchsubmit:hover{
opacity:0.9;   
}
.search-alert{
color:#f9f9f9;
padding:2px 15px 2px 40px;
display:none;
margin:5px;
background:#333 url(https://4.bp.blogspot.com/-Pzf65SZdXYo/ … dicate.png) no-repeat;
background-position:10px;
border-radius:5px;
text-transform:lowercase;
}

</style>
<script>
jQuery(document).ready(function($) {
$('#adajaxmenu').ajaxBloggerMenu({
    numPosts : 4, // Number of Posts to show
    defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});

$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
});
</script>

<body> 
<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>   
<li>
<a href="#">Rooting</a>
<ul>
<li><a href="http://www.smartphoneroot.in/search/label/Sony">SONY</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Samsung">SAMSUNG</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Acer">ACER</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/HTC">HTC</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Gionee">GIONEE</a></li>
</ul>
</li>
<li>
<a href="#">ANDROID</a>
<ul>
<li><a href="http://www.smartphoneroot.in/search/label/Micromax">MICROMAX</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Karbonn">KARBONN</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Huawei">HUAWEI</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/LG">LG</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/HP">HP</a></li>
</ul>
</li>
<li>
<a href="#">NEW TUTORIALS</a>
<ul>
<li><a href="http://www.smartphoneroot.in/search/label/Lenovo">LENOVO</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Google">GOOGLE</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Motorola">MOTOROLA</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Xolo">XOLO</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Prestigio">PRESTIGIO</a></li>
</ul>
</li>
<li>
<li><a href="http://www.askwithloud.com/p/sitemap.html">Sitemap</a></li>
<li><a href="http://www.askwithloud.com/p/contact.html">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!
</li>   
</ul>
<div class='clear'/>   
</ul>
<div class='clear'/>   
  <div class='post-body'>
    <h2 class='post-title'>Simple Ajax Menu By Askwithloud</h2>       
    <p>How to add a dynamic drop down mega menu navigation bar into your blogger blog - As you already know that, the navigation menu (Drop down menu) is coming with every blogger templates. However, some premium templates are coming with a dynamic mega menu navigation bar. And the best part of this navigation bar is that it's looking more attractive, comparing to the other menu bar. So don't worry friend, I'm here with a new ajax mega menu bar and today I'm going to show you how you can easily set up this mega navigation menu bar into your blogger blog without any problems.</p>
    <br>
    <center><a href="http://www.askwithloud.com/2015/08/ajax-mega-drop-down-menu-for-blogger.html"> <b>Go To The Main Article Page :) </b> </a></center>
</div>
</body>

[/html]

[html]<style>
body{
   padding-top:0px !important;
}

*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: verdana;
        }
        nav{
            width: 450px;
            height: 110px;
            margin: 50px auto;
            text-align: center;
            padding: 10px;
            overflow: hidden;
            border-bottom: 2px solid #fff;
        }
        nav a{
            text-decoration: none;
            display: block;
            width: 140px;
            float: left;
            color: #fff;
            padding: 15px;
            transform: rotate(-45deg);
            margin-top: 50px;
            padding-left: 45px;
            box-shadow: 0 0 5px #000;
            position: relative;
            font-size: 15px;
            text-shadow: 1px 1px 1px #000;
        }
        #red{
            background-color: #dc143c;
        }
        #purple{
            background-color: #8b008b;
            margin-left: -72px;
        }
        #pink{
            background-color: #ff1493;
            margin-left: -72px;
        }
        #blue{
            background-color: #1e90ff;
            margin-left: -72px;
        }
        #green{
            background-color: #228b22;
            margin-left: -72px;
        }
        #red:hover,#purple:hover,#pink:hover,#blue:hover,#green:hover,
        #red:focus,#purple:focus,#pink:focus,#blue:focus,#green:focus{
            background-color: #fafafa;
            color: #000;
            text-shadow: none;
        }
</style>
<script>

</script>
<div class="main">
    <nav>
    <a href="#" id="red">Home</a>
    <a href="#" id="purple">Gallery</a>
    <a href="#" id="pink">Download</a>
    <a href="#" id="blue">About</a>
    <a href="#" id="green">Contact</a>
    </nav>
</div>

[/html]

[html]<style>
body{
  background-color: #f0f0f0;
  width: 700px;
  float: center;
}

hr.style1{
border-top: 1px solid #8c8b8b;
}

hr.style2 {
border-top: 3px double #8c8b8b;
}

hr.style3 {
border-top: 1px dashed #8c8b8b;
}

hr.style4 {
border-top: 1px dotted #8c8b8b;
}

hr.style5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}

hr.style6 {
background-color: #fff;
border-top: 2px dotted #8c8b8b;
}

hr.style7 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

hr.style8 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style8:after {
content: '';
display: block;
margin-top: 2px;
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

hr.style9 {
border-top: 1px dashed #8c8b8b;
border-bottom: 1px dashed #fff;
}

hr.style10 {
border-top: 1px dotted #8c8b8b;
border-bottom: 1px dotted #fff;
}

hr.style11 {
height: 6px;
background: url(http://ibrahimjabbari.com/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

hr.style12 {
height: 6px;
background: url(http://ibrahimjabbari.com/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

hr.style14 {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

hr.style15 {
border-top: 4px double #8c8b8b;
text-align: center;
}
hr.style15:after {
content: '\002665';
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}

hr.style16 {
  border-top: 1px dashed #8c8b8b;
}
hr.style16:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -12px;
  left: 40px;
  padding: 0 3px;
  background: #f0f0f0;
  color: #8c8b8b;
  font-size: 18px;
}

hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}

hr.style18 {
  height: 30px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr.style18:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

</style>
<br>
<hr class="style1">
<br>
<hr class="style2">
<br>
<hr class="style3">
<br>
<hr class="style4">
<br>
<hr class="style5">
<br>
<hr class="style6">
<br>
<hr class="style7">
<br>
<hr class="style8">
<br>
<hr class="style9">
<br>
<hr class="style10">
<br>
<hr class="style11">
<br>
<hr class="style12">
<br>
<hr class="style13">
<br>
<hr class="style14">
<br>
<hr class="style15">
<br>
<hr class="style16">
<br>
<hr class="style17">
<br>
<hr class="style18">
[/html]

[html]
<style>
:root {
--icon: #b0bfd8;
}

nav.menu {
display: flex;
justify-content: space-between;
position: relative;
height: 150px;
padding: 0 29px 10px;
background: #fff0;
align-items: flex-end;
width: 600px;
}

nav.menu:before {
content: "";
width: 100%;
height: 150px;
background: #181818;
position: absolute;
left: 0;
bottom: 0;
border-radius: 20px;
z-index: -1;
box-shadow: 1px 1px 2px 0px #fff;
}

input { display: none; }

label {
text-decoration: none;
font-family: sans-serif;
text-transform: uppercase;
font-size: 14px;
min-width: 100px;
height: 100px;
margin: 10px 10px 20px;
text-align: center;
display: inline-grid;
align-items: end;
color: #b0bfd8;
position: relative;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
cursor: pointer;
}

label:hover {
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}

input:checked + label {
color: #fff;
height: 130px;
}

.selector {
--hole: #2196f3;
background:
    radial-gradient(circle at 50% 50%, #fff8 30px, #fff0 45px, #fff 50px, #fff0 50px 100%),
    radial-gradient(circle at 50% 50%, var(--hole) 0 45px, #fff0 50px 100%),
    radial-gradient(circle at 50% 75px, #181818 0 70px, #fff0 71px 100%);
width: 95px;
height: 95px;
position: absolute;
bottom: 47px;
left: 0;
z-index: -1;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
border: 19px solid #181818;
border-radius: 100%;
}

#m-home:checked ~ .selector {
left: 23px;
}

#m-search:checked ~ .selector {
left: 143px;
filter: hue-rotate(535deg);
}

#m-notification:checked ~ .selector {
left: 263px;
filter: hue-rotate(950deg);
}

#m-favorites:checked ~ .selector {
left: 383px;
filter: hue-rotate(1580deg);
}

#m-profile:checked ~ .selector {
left: 502px;
filter: hue-rotate(1850deg);
}

.selector:after {
content: "";
position: absolute;
bottom: -80px;
width: 80px;
height: 10px;
background: #181818;
left: calc(50% - 40px);
border-radius: 5px 5px 15px 15px;
}

input:checked ~ .selector:after {
box-shadow: 0 -17px 35px 8px var(--hole);
}

/*** ICONS ***/
label:before,
label:after {
content: "";
position: absolute;
box-sizing: border-box;
transition: all 0.5s ease 0s;
}

label:hover:before,
label:hover:after {
filter: brightness(1.5) drop-shadow(0px 0px 4px #fff);
transition: all 0.5s ease 0s;
}

input:checked + label:before,
input:checked + label:after {
filter: brightness(1.5) drop-shadow(0px 0px 2px var(--sel));
transition: all 0.5s ease 0s;
}

label[for=m-home]:before {
width: 40px;
height: 40px;
left: 30px;
top: 30px;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
border-radius: 2px;
background:
    conic-gradient(from 90deg at 65% 60%, var(--icon) 0 25%, #fff0 0 100%),
    conic-gradient(from 180deg at 35% 60%, var(--icon) 0 25%, #fff0 0 100%),
    conic-gradient(from 135deg at 50% 0%, var(--icon) 0 25%, #fff0 0 100%);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%, 100% 27px;
}

label[for=m-home]:after {
width: 40px;
height: 40px;
left: 30px;
top: 24px;
border: 6px solid var(--icon);
border-right-width: 0;
border-bottom-width: 0;
transform: rotate(45deg);
border-radius: 5px;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

label[for=m-search]:before {
width: 40px;
height: 40px;
left: 20px;
top: 17px;
border: 6px solid var(--icon);
border-radius: 100%;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

label[for=m-search]:after {
width: 22px;
height: 9px;
left: 60px;
top: 50px;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
background: var(--icon);
transform-origin: left top;
transform: rotate(45deg);
border-radius: 0 10px 10px 0;
}

label[for=m-notification]:before {
width: 50px;
height: 42px;
left: 25px;
top: 20px;
z-index: 1;
border-radius: 30px 30px 0 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
background:
    linear-gradient(90deg, #fff0 0 6px, var(--icon) 0 calc(100% - 6px), #fff0 calc(100% - 6px) 100%),
    conic-gradient(from 135deg at 50% 33%, var(--icon) 0 25%, #fff0 0 100%);
}

label[for=m-notification]:after {
width: 10px;
height: 57px;
left: 45px;
top: 14px;
z-index: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
background: radial-gradient(circle at 50% 6px, var(--icon) 3px, #fff0 4px 100%), #fff0;
transform-origin: left top;
border-bottom: 6px solid var(--icon);
border-radius: 5px;
}

label[for=m-favorites]:before {
width: 50px;
height: 50px;
left: 18px;
top: -9px;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
background:
    radial-gradient(circle at 16px 16px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%),
    radial-gradient(circle at 34px 34px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%),
    linear-gradient(45deg, var(--icon) 0 37px, #fff0 38px 100%);
border-radius: 17px 22px 17px 4px;
transform: rotate(-45deg);
transform-origin: center right;
}

label[for=m-profile]:before {
width: 50px;
height: 54px;
top: 16px;
background:
    radial-gradient(circle at 50% 15px, var(--icon) 0 12px, #fff0 13px 100%),
    radial-gradient(circle at 50% 100%, var(--icon) 0 22px, #fff0 23px 100%);
left: 25px;
border-radius: 8px;
}

input:checked + label {
color: var(--sel);
text-shadow: 0 0 5px var(--sel), 0 0 10px var(--sel);
}

input:checked + label[for=m-home] {
--sel: #39a1f4;
}

input:checked + label[for=m-search] {
--sel:  #f48d4e;
}

input:checked + label[for=m-notification] {
--sel:  #84a91c;
}

input:checked + label[for=m-favorites] {
--sel:  #ff6275;
height: 125px;
}

input:checked + label[for=m-profile] {
--sel:  #9d74ff;
}

@media only screen and (orientation: portrait) {
label { color: transparent !important; text-shadow: none !important;}
}
</style>
<nav class="menu">

<input type="radio" name="nav-item" id="m-home" checked><label for="m-home">Home</label>
<input type="radio" name="nav-item" id="m-search"><label for="m-search">Search</label>
<input type="radio" name="nav-item" id="m-notification"><label for="m-notification">Notification</label>
<input type="radio" name="nav-item" id="m-favorites"><label for="m-favorites">Favorites</label>
<input type="radio" name="nav-item" id="m-profile"><label for="m-profile">Profile</label>

<div class="selector"></div>
</nav>

[/html]