Showing posts with label Navigation Menu. Show all posts
Showing posts with label Navigation Menu. Show all posts

1/12/2018

How to make a Recent Post Mega Menu

How to make a navigation menu  

Hello friends, back again I will share an interesting tutorial to decorate your blog to be more interesting. The tutorial this time is how to create a navigation menu like Jalan Tikus , which is actually a more suitable tutorial for friends who are modifying your blog, this menu can make your friends better to match the theme of the blog you are using.
I have optimized this menu to match the device that you are using, although it is not entirely similar to the mobile version of Jalan Tikus website. For the latest Road Mouse template, it will follow, because the creation takes a long time.
Not only the Navigation Menu along with the Recent Post Mega Menu , but this menu also has features similar to the Tikus website, such as the Tiny Menu and similar search columns . 😎
Menu Road Rat with Search Form
Menu Road Rat with Search Form
In this tutorial I use Minify CSS, so it's easier to edit CSS, you can use the dirtymarkup.com website to make CSS easier to read.

First Step: Make sure your template is using jQuery and install the CSS Script Font  below just above the code </head>so that the text is similar to the Rat Road website.
 
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
  loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");loadCSS("https://fonts.googleapis.com/css?family=Bitter");
//]]>
</script>


Step Two: Enter CSS below right above the code ]]></b:skin>or  </style>
 
/* Menu Jalan Tikus Created by www.idblanter.com */
#headerblanter{height:65px;font-family:'Bitter',Roboto,Arial;width:100%;position:fixed;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);top:0;right:0;left:0;z-index:11;transition:all .5s ease-in-out;background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}.mega-wrapper{background:#fff;overflow:hidden;left:0;right:0;top:65px;position:absolute;padding:20px;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;-webkit-box-shadow:0 12px 50px rgba(0,0,0,0.17);box-shadow:0 12px 50px rgba(0,0,0,0.17);transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#navigation ul li:hover .mega-wrapper{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showkacatikus{color:#fff;position:fixed;top:12px;right:10px;display:none}#showjalantikus{color:#fff;position:fixed;top:12px;left:10px;display:none}#showkacatikus i,#showjalantikus i{font-size:35px}.megamenu{width:1100px;max-width:100%;margin:0 auto}.mega-wrapper li{width:205px;height:150px;margin-bottom:15px;margin-right:15px;border-radius:7px;overflow:hidden;position:relative}.mega-wrapper li:after{content:'';background:-webkit-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-o-linear-gradient(top,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-webkit-gradient(linear,left bottom,left top,color-stop(40%,rgba(0,0,0,.5)),color-stop(68%,hsla(0,0%,100%,0)));background:-o-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:linear-gradient(0deg,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);position:absolute;transition:all .3s ease-in-out;top:0;bottom:0;left:0;right:0}.mega-wrapper li:hover:after{opacity:.8}.mega-wrapper ul li a{font-size:13px!important;padding:0!important;z-index:9}.mega-wrapper ul li a:hover{background:transparent!important}.mega-wrapper ul li a:nth-child(2){position:absolute;width:195px;bottom:0;text-shadow:0 3px 6px #000;text-transform:none!important;padding:10px!important}.mega-wrapper li img{height:150px;width:220px}#search-blanter{position:fixed;background:#ffeddf;left:0;right:0;top:65px;padding:15px 15px 18px;text-align:center;transform:scaleY(0);transition:all .3s ease-in-out;-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#search-blanter.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#search-blanter:after{content:'';height:4px;background:linear-gradient(90deg,#ce0a46,#e98125);position:absolute;bottom:0;left:0;right:0}#bsearchbox{width:850px;max-width:100%;margin:0 auto;position:relative;overflow:hidden}#bsearchbox:before{content:'';background:#fff url(https://2.bp.blogspot.com/-fqToAW7WRHY/Wt8knWyb_rI/AAAAAAAAJ50/L8VhiQf-IEYbLLqP1TNc96Ah_zuYFWeogCLcBGAs/s35/searchblanter.png)no-repeat;position:absolute;width:33px;height:35px;left:17px;top:13px}input#searchteks{font-size:18px;padding:20px 20px 20px 70px;border:1px solid #e69f65;border-radius:4px;width:100%;outline:none;color:#666}button.bsearchbtn{position:absolute;top:1px;background:linear-gradient(0deg,#e3642d,#f5743c 56px,#fff);font-weight:700;background:-webkit-linear-gradient(bottom,#e3642d,#f5743c 56px,#fff);font-family:'Roboto',Arial;text-transform:uppercase;color:#fff;border-radius:0 4px 4px 0;border:none;font-size:20px;width:150px;height:61px;right:0;outline:none;cursor:pointer}button.bsearchbtn:hover{opacity:.9}button.bsearchbtn:before{bottom:0;border-top:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after{top:1px;border-bottom:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after,button.bsearchbtn:before{position:absolute;height:30px;left:0;content:"";border-left:10px solid #fff;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:9}#navigation ul li a.blanter-nav:hover:after{bottom:-1px;border-bottom:7px solid #fff}#navigation ul li a.blanter-nav:after{position:absolute;bottom:-7px;width:14px;left:50%;margin-left:-7px;content:"";-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:7px solid hsla(0,0%,100%,0);border-left:7px solid hsla(0,0%,100%,0);border-right:7px solid hsla(0,0%,100%,0);-webkit-transition:.2s;-o-transition:.2s;transition:.2s}#navigation ul li a:hover{background:rgba(255,255,255,.14)}#navigation ul li{float:left}#navigation ul li a.blanter-nav{position:relative}#navigation ul li a{color:#fff;font-size:15px;text-transform:uppercase;padding:21px;font-weight:600;display:block}#navigation ul{margin:0;padding:0;list-style:none}#header2{float:left;font-size:160%;text-transform:uppercase;font-weight:300;line-height:57px;margin-top:8px;margin-right:50px}#header2 img{margin:0;padding:0;max-width:240px;max-height:70px}.titlewrapper{margin:0;padding:0}.header h1.title,.header p.title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.4px;margin:5px 0}.header .description{display:none}.header a,.header a:hover{color:#fff}.logo{float:left;font-size:160%;text-transform:uppercase;font-weight:300;max-height:70px}.logo a{color:#fff;text-decoration:none;margin-top:-5px}.logo a:hover{color:#fff;text-decoration:none}.logo img{top:0;left:0!important}#jtheadermenu{font-family:'Bitter',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:100px;top:45px;padding:10px 15px 5px;width:18px;height:1px;transition:all .3s ease-in-out;z-index:9;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);opacity:0;border-radius:4px;overflow:hidden}#jtheadermenu li{width:100%;border-bottom:1px solid #ddd}#jtheadermenu li a{padding:8px 0;display:block;color:#444;font-weight:700;font-size:14px!important}#jtheadermenu li a:hover{color:#e56f2a}#jtheadermenu.shows{visibility:visible;height:167px;opacity:1;width:180px}a.blanter#showmenu i.material-icons{line-height:.6;font-size:35px;margin-top:5px}#menu-kiri{margin-right:30px}a.blanter#showsearch i.material-icons{line-height:.6;font-size:40px;margin-top:5px}#showsearch.aktif{background:#ffeddf;color:#e87e25!important}a.blanter i.fa{margin-top:5px}a.blanter{font-size:22px;color:rgba(255,255,255,0.73)!important;padding:15px 8px;text-align:center;float:right;margin-right:5px}a.blanter:hover{color:#fff!important}
@media screen and (max-width:1024px){#menu-kiri{display:none}}
@media screen and (max-width:768px){#headerblanter li a{width:100%;text-align:left;color:#fff}#headerblanter li{width:100%}.nav-menu2{width:100%}#search-box .fa-arrow-left,.blanter-back{display:block}#header2{width:220px;height:60px;overflow:hidden;float:none;margin:8px auto}a#showsearch{visibility:hidden}.mega-wrapper li{width:47%!important;height:120px}#search-blanter{background:#fff;padding:0}#bsearchbox{width:auto}input#searchteks{width:75%;font-size:15px;border:none}#bsearchbox:before{background-size:25px}#menu-wrapper{width:100%;position:absolute;top:60px;transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;overflow:hidden}#menu-wrapper,.mega-wrapper{background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}#menu-wrapper.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showjalantikus,#showkacatikus,#menu-kiri{display:block}.mega-wrapper li:nth-child(2),.mega-wrapper li:nth-child(4),.mega-wrapper li:nth-child(6){margin-right:0}.mega-wrapper{z-index:1;top:0}#jtheadermenu{right:80px;top:initial;bottom:70px}#jtheadermenu li a{color:#555}.mega-wrapper li img{height:120px}li.clearfix:nth-child(n+7),button.bsearchbtn,#navigation ul li a.blanter-nav:after{display:none}}


Also Read:  Creating a Material Design Dialog Box with jQuery on the Blog Step Three: Put the Javascript below right above the code

</head>
 
<script type='text/javascript'>
//<![CDATA[
// Javascript Jalan Blanter
function jalanblanter(t){document.write('<ul class="taglabel">');for(var e=0;e<numpostsx;e++){var r,n,m=t.feed.entry[e],i=m.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<m.link.length;o++){if("replies"==m.link[o].rel&&"text/html"==m.link[o].type){var u=m.link[o].title;m.link[o].href}if("alternate"==m.link[o].rel){r=m.link[o].href;break}}try{n=m.media$thumbnail.url,n=n.replace("/s72-c/","/w215-h150/")}catch(t){s=m.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),n=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png"}var l=m.published.$t,g=l.substring(0,4),p=l.substring(5,7),x=l.substring(8,10),f=new Array;if(f[1]="Jan",f[2]="Feb",f[3]="Mar",f[4]="Apr",f[5]="May",f[6]="Jun",f[7]="Jul",f[8]="Aug",f[9]="Sep",f[10]="Oct",f[11]="Nov",f[12]="Dec",document.write('<li class="clearfix">'),1==tagpostthumbnailsx&&document.write('<a href="'+r+'"><img alt="'+i+'" title="'+i+'" class="tagpost_thumb" src="'+n+'"/></a>'),document.write('<a href="'+r+'" title="'+i+'">'+i+"</a><br>"),"content"in m)h=m.content.$t;else if("summary"in m)h=m.summary.$t;else var h="";if(h=h.replace(/<\S[^>]*>/g,""),1==tagpostsummaryx)if(h.length<numcharsx)document.write(""),document.write(h),document.write("");else{document.write("");var w=(h=h.substring(0,numcharsx)).lastIndexOf(" ");h=h.substring(0,w),document.write(h+"..."),document.write("")}var A="",v=0;document.write("<br>"),1==tagpostdatex&&(A=A+x+"-"+f[parseInt(p,10)]+"-"+g,v=1),1==tagpostcommentnumx&&(1==v&&(A+=" | "),"1 Comments"==u&&(u="1 Comment"),"0 Comments"==u&&(u="No Comments"),A+=u=""+u,v=1),1==tagpostmorex&&(1==v&&(A+=" | "),A=A+'<a href="'+r+'" class="url" title="'+i+'">More »</a>',v=1),document.write(A),document.write("</li>"),1==tagpostseparatorx&&e!=numpostsx-1&&document.write("")}document.write("</ul>")}var numpostsx=10,tagpostthumbnailsx=!0,tagpostmorex=!1,tagpostseparatorx=!1,tagpostcommentnumx=!1,tagpostdatex=!1,tagpostsummaryx=!1,numcharsx=0;
//]]>
</script>


Step Four: Install the HTML Menu below just below the code<body
 
<header id='headerblanter' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<a href='javascript:void' id='showjalantikus' title='Show Navigation'><i class='material-icons'>&#58834;</i></a>
<a href='javascript:void' id='showkacatikus' title='Show Search'><i class='material-icons'>&#59574;</i></a>
<b:section class='header2' id='header2' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='(Editor) Anzrosone (Header)' type='Header' version='1'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>https://4.bp.blogspot.com/-BZwtscaajpM/WquBmAfCpgI/AAAAAAAAJqA/WQD2AmjWBiMSZIm9oygFVrL3AsSeKxXpQCK4BGAYYCw/s1600/JalanTikus.png</b:widget-setting>
      <b:widget-setting name='displayHeight'>61</b:widget-setting>
      <b:widget-setting name='sectionWidth'>322</b:widget-setting>
      <b:widget-setting name='useImage'>true</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
      <b:widget-setting name='displayWidth'>298</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
          </b:if>
  </b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;description&quot;'>
          <b:include name='description'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <h1 itemprop='headline' style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
      </b:if>
    </b:if>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>   
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <p class='title' itemprop='headline'><b:include name='title'/></p>
     <b:else/>
       <h1 class='title' itemprop='headline'><b:include name='title'/></h1>
     </b:if>
  <b:else/>
          <p class='title' itemprop='headline'><b:include name='title'/></p>
  </b:if>
     <b:include name='description'/>
      </div>
 </div>
  </b:if>
</b:includable>
    <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' itemprop='description'><span><data:description/></span></p>
  </div>
</b:includable>
    <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
  </b:if>
</b:includable>
  </b:widget>
</b:section>
<div id='menu-wrapper'>
<div id='jtheadermenu'>
  <li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Pasang Iklan</span></a></li>
  <li><a href='#' itemprop='url' title='Hubungi Kami'><span itemprop='name'>Hubungi Kami</span></a></li>
  <li><a href='#' itemprop='url' title='Tentang Kami'><span itemprop='name'>Tentang Kami</span></a></li>
  <li><a href='#' itemprop='url' title='Kerjasama'><span itemprop='name'>Kerjasama</span></a></li>
</div>
<div id='navigation'>
<ul>
<li><a class='blanter-nav' href='#' itemprop='url' title='Apps'><span itemprop='name'>Apps</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://www.idblanter.com/feeds/posts/default/-/Template?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter' type='text/javascript'/>
</div></div></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Games'><span itemprop='name'>Games</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://askblanter.blogspot.com/feeds/posts/default/-/Game?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter' type='text/javascript'/>
</div></div></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Tips &amp; Trik'><span itemprop='name'>Tips &amp; Trik</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://www.idblanter.com/feeds/posts/default/-/Tutorial?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter' type='text/javascript'/>
</div></div></li>
  <li><a class='blanter-nav' href='#' itemprop='url' title='Gadget'><span itemprop='name'>Gadget</span></a></li>
  <li><a class='blanter-nav' href='#' itemprop='url' title='Gokil'><span itemprop='name'>Gokil</span></a></li>
  <li><a class='blanter-nav' href='#' itemprop='url' title='Tech News'><span itemprop='name'>Tech News</span></a></li>
  </ul>
</div>
<div id='menu-kiri'>
<a class='blanter' href='javascript:;' id='showsearch' target='_blank' title='Show Search'><i class='material-icons'>&#59574;</i></a>
<a class='blanter' href='javascript:;' id='showmenu' target='_blank' title='Show More'><i class='material-icons'>&#57669;</i></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Google Plus'><i aria-hidden='true' class='fa fa-google-plus'/></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Twitter'><i aria-hidden='true' class='fa fa-twitter'/></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Facebook'><i aria-hidden='true' class='fa fa-facebook'/></a>
</div>
</div>
<div id='search-blanter' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
<form action='/search' id='bsearchbox' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get'>
<meta content='/search?q={q}' itemprop='target'/>
<input id='searchteks' itemprop='query-input' name='q' placeholder='Cari Tips, Apps dan Games...' required='required' type='text' value=''/>
<button class='bsearchbtn' type='submit'>Cari</button>
</form></div>
</header>


Last Step: Put the jQuery Show Hide script above the code</body>
 
<script type='text/javascript'>
$(document).ready(function(){$("#showsearch,#showkacatikus").click(function(){$("#showsearch,#search-blanter").toggleClass("aktif");});});
$(document).ready(function(){$("#showjalantikus").click(function(){$("#menu-wrapper").toggleClass("aktif");});});
$(document).ready(function(){$("#showmenu").click(function(){$("#jtheadermenu").toggleClass("shows");});});
</script>


Save Template.
 

To change the logo, you can change it through Layout .  

Credits: idblanter

5/12/2016

Add a Floating Drop Down Menu In Blogger With Search Box

Floating Drop Down Menu
A drop down menu is something that contains navigation URl's of your blog and making it easier to find the content users are looking for.
A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position.
Today I am sharing a drop down menu for blogger with search box.

Adding Floating DropDown menu to blogger

  1. Login to your blogger dashboard.
  2. Select your blog.
  3. Select Template .
  4. Click Edit HTML. 
  5. Add this code just above the </body> tag
<style>
  #naviopdropcont {
    width: 100%;
    height: 45px;
    display: block;
    padding: 0;
    margin: 0 0 20px 0;
    z-index: 100;
    top: 0px;
    left: 0px;
    position: fixed;
    box-shadow: 2px 2px 5px #444444;
    -moz-box-box-shadow: 2px 2px 5px #444444;
    -web-kit-box-shadow: 2px 2px 5px #444444;
    -goog-ms-box-shadow: 2px 2px 5px #444444;
    background: #000;
  }
  #naviopdropnav {
    float: left;
    width: 800px;
    height: 40px;
    display: block;
    padding: 0;
    margin-left: 40px;
  }
  #naviopdropnav ul {
    float: left;
    margin: 0;
    padding: 0;
  }
  #naviopdropnav li {
    float: left;
    list-style: none;
    line-height: 40px;
    margin: 0;
    padding: 0 background:#180000;
  }
  #naviopdropnav li a,
  #naviopdropnav li a:link {
    color: #fff;
    display: block;
    margin: 0;
    font: 16px georgia, verdana;
    padding: 10px;
    text-decoration: none;
  }
  #naviopdropnav li a:hover,
  #naviopdropnav li a:active,
  #naviopdropnav .current_page_item a {
    color: #fff;
    padding: 10px;
    background: #007acc;
  }
  #naviopdropnav li li a,
  #naviopdropnav li li a:link,
  #naviopdropnav li li a:visited {
    font-size: 12px;
    background: #180000;
    color: #fff;
    width: 150px;
    margin: 0;
    padding: 0px 10px;
    line-height: 30px;
    position: relative;
  }
  #naviopdropnav li li a:hover,
  #naviopdropnav li li a:active {
    color: #fff;
    background: #007acc;
  }
  #naviopdropnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px
  }
  #naviopdropnav li:hover ul,
  #naviopdropnav li li:hover ul,
  #naviopdropnav li li li:hover ul,
  #naviopdropnav li.sfhover ul,
  #topnaviopdropnav li li.sfhover ul,
  #topnaviopdropnav li li li.sfhover ul {
    left: auto
  }
  #naviopdropnav li:hover,
  #naviopdropnav li.sfhover {
    position: static;
  }
</style>
<style>
  . -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
  box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
  background: #f1f1f1;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  background: -moz-linear-gradient(top, #fff, #ededed);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
  /* ie7 */
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
  /* ie8 */
  }
  .searchform input {
    font: normal 12px/100% Arial, Helvetica, sans-serif;
  }
  .searchform .searchfield {
    background: #fff;
    padding: 6px 6px 6px 8px;
    width: 202px;
    border: solid 1px #bcbbbb;
    outline: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
  }
  .searchform .searchbutton {
    color: #fff;
    border: solid 1px #000;
    font-size: 11px;
    height: 30px;
    width: 30px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
    background: #007acc;
  }
</style>
<div id='naviopdropcont'>
  <div id='naviopdropnav'>
    <ul>
      <li><a href=''>Home</a></li>
      <li><a href='#'>About us</a></li>
      <li><a href='#'>Goofs</a>
        <ul>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
          <li><a href='#'>Item 4</a></li>
        </ul>
      </li>
      <li><a href='#'>Categories</a>
        <ul>
          <li><a href='#'>Category 1</a></li>
          <li><a href='#'>2</a></li>
          <li><a href='#'>3</a></li>
          <li><a href='#'>4</a></li>
          <li><a href='#'>5</a></li>
          <li><a href='#'>drop down</a></li>
        </ul>
      </li>
      <li><a href='#'>Contact us</a>
      </li>
      <li style='float:right;padding:0px 0px ;margin:5px 18px 11px 40px;
  '>
        <form class="searchform" action="/search" method="get">
          <input name="q" class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
          <input class="searchbutton" type="submit" value="Go" />
        </form>
      </li>
    </ul>
  </div>
Now click save and you are done.
You have just added a sticky drop down menu for blogger.
Leave your comments and suggestions.

11/03/2015

3D Flying Book Navigation Menu Bar

3D Flying Book Navigation Menu Bar widget for blogger. Fast in loading developed in html and css without any javascript. Best and one of the top widget for blogger blog.

3D Flying Book Navigation Menu Bar
  1.     Login to Blogger → Dashborad
  2.     Click on Drop Down Menu and select Layout
  3.     Add a HTML/JavaScript Gadget
  4.     Paste below code in it.



      5. Save template and you'rre done.
      6. Replace your codes and URLs


This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this 3D navigation menu widget for blogger then please share it and write comments as your feedback.

5/03/2015

Hammer Effect Mega Drop Down Menu Bar Widget For Blogger

Hammer Effect Mega Drop Down Menu Bar Widget For Blogger. It works very well in all browsers and looks very professional and beautiful .



We have shared many navigation menu bar widget for blogger and this time it is a mega drop down menu bar widget for blogger. That is fast in loading and compatible with all browsers. Blue color is known as the professional color that is the reason you see most of the website in blue colors so we decided to make this navigation menu bar in blue color and will be liked you, That is guaranteed.


We shared many social media sharing widget and navigation menu bar widget for fashion websites and entertainment websites and now we are developing codes and creating widgets for professional websites. Installation is pretty easy. You just have to copy the entire code and paste it where you want it to appear. Below is the code and the installation process. This widget is completely customizable. You can edit the background color, Texts and even fonts too and make it according to your own wishes. So let's find out how to install and add this beautiful and professional navigation menu bar widget for blogger.

Installation

Installation is very simple just copy the below code and paste it into the place where you want this widget to appear.

  • Go to blogger dashboard.
  • Go to layout.
  • Click on add a gadget.
  • Choose html/javascript.
  • Copy the below code and paste it.
  • You are done.

<style type="text/css">
#multimenu{
background:#156AA6;
overflow:hidden;
}
#multimenu ul {
float:left;
height:30px;
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
#multimenu li {
float:left;
text-shadow:1px 1px 2px #0066B3;
padding:0;
}
#multimenu li a {
background:#156AA6;
color:#eee;
display:block;
font-weight:400;
line-height:30px;
border-left:1px solid #4B88B3;
border-right:1px solid #043457;
text-align:center;
text-decoration:none;
margin:0;
padding:0 25px;
}
#multimenu li.depan a {
border-left:none;
}
#multimenu li ul {
background:#156AA6;
height:auto;
border:0;
position:absolute;
width:225px;
z-index:80;
box-shadow:0 1px 5px #034257;
display:none;
margin:0;
padding:0;
}
#multimenu li li {
display:block;
float:none;
width:225px;
border-top:1px solid #4B88B3;
border-bottom:1px solid #043457;
margin:0;
padding:0;
}
#multimenu li:hover li a {
background:#156AA6;
}
#multimenu li ul a {
display:block;
height:30px;
font-size:12px;
font-style:normal;
text-align:left;
margin:0;
padding:0 10px 0 15px;
}
#multimenu li a:hover,#multimenuli:hover > a {
color:#fff;
}
#multimenu li:hover ul.hidden {
display:block;
}
</style>
<nav id='multimenu'>
<ul>
<li class='depan'><a href='/'>Home</a></li>
<li><a href='#'>Widgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Gadgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Blogging Tips</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#multimenu li ul').removeClass('hidden');
$('#multimenu li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>
 
Customization
You can edit the entire code of this navigation menu bar widget for blogger. To change the text . See in code words like home, blogging tips, widgets and gadgets. Change it of your own wish and all the words like drop down you can change it with your own words.

5/02/2015

35+ Drop Down Menu Widget in Blogger Horizontal Menus CSS & CSS3

Drop down Navigation menu is an essential part of any blog or website. This is the awesome CSS dropdown navigation menu which is built with pure CSS, HTML, CSS3 and images Don’t uses JQUERY or JavaScript. This Beautiful drop down menu really great to see in a blog. It helps visitors to easily get the required content the whole blog. This new pure CSS3 drop down menu widget will make your blog outlook more professional. A dropdown widget is a good solution sidebar space saving problem slove and easy to install. So let’s get started add dropdown menu in blogger.


How To Add Drop Down Navigation Menu In Blogger

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard. Click on Layout tab from left pane and click on Add a Gadget link. (In The Header Area)

Drop Down Navigation Menu
Step 2. After click on Add a Gadget link A pop-up box will open now with many gadget list. Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.


Step 3. Select 'HTML/Javascript' and add the one of code given below.



Step 4. Now Click On Save 'JavaScript' You are done.


01-Light Opera Drop Down Menu








02-Animated Drop Down CSS3








03-Colored Tab Dropdown 







04-Black Apple Drop Down Menu







05-Apple CSS3






06-Red & Grey Rough Drop Down Menu 







07-Apple Light Drop Down Menu






08-Silver Salmon Button Dropdown






09-Orange CSS3






10-Grey Impression Drop Down Menu






11-Flat Horizontal Drop Down Menu






12-Platinum Tabbed Dropdown Menu





13-Blue Drop Down Menu





14-Rounded Slate Dropdown Menu





15-Blue & Yellow Rough Drop Down Menu
15-Blue & Yellow Rough Drop Down Menu







16-Grey Red Drop Down Menu






17-Simple Red






18-Simple Blue






19-Blue Tabbed Menu





20-Tabbed Chrome and Blue





21-Dark Orange Tabbed Menu 






22-Grey Tabbed Menu






23-Light Orange Tabbed Menu






 24-Purple Tabbed Menu






 25-Blue and Grey Sprite






 26-Aqua Bubble Wrap






27-Skinny Green 





 28-Indented Horizontal Menu





29-Skinny Orange 





 30-Sky Blue





31-Purple Bubble Wrap





32-Simple Grey Hover






 33-Blue Bubble Wrap






34-Green Algea





35-Red Bubble Wrap