Blog Information: menu

Tampilkan postingan dengan label menu. Tampilkan semua postingan

Jumat, 20 September 2013

Add Css Jquery fixed horizontal menu to blogger blog

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.

-> SEE DEMO <-

Lets start adding it...

1. Go To Blogger - Template - Edit HTML

....and select the "expand widget templated" box:

2. Search (using CTRL + F) for this piece of code:

</head>

3. Just above/before the </head> tag, add this code:

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
<script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $(#nav).stop().animate({opacity:0.2},400);
                    else
                        $(#nav).stop().animate({opacity:1},400);
                });

                $(#nav).hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(#nav).stop().animate({opacity:1},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(#nav).stop().animate({opacity:0.2},400);
                        }
                    }
                );
            });
        </script>

4) Now search for this tag:

<body>

If you cant find it, search for this one:

<body expr:class="loading" + data:blog.mobileClass>

5) Just below/after this code, copy and paste the following code:

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href=URL address><span>Link 1</span></a></li>
<li><a href=URL address><span>Link 2</span></a></li>
<li><a href=URL address><span>Link 3</span></a></li>
<li><a href=URL address><span>Link 4</span></a></li>
<li><a href=URL address><span>Link 5</span></a></li>
<li><a href=URL address><span>Link 6</span></a></li><li class="search">

<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu.

6) Now click on the Save Template button and youre done ;)

Credit goes to the original author. This widget was inspired by David Walsh’s top navigation bar.

Sabtu, 14 September 2013

A Beautiful jQuery Drop Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.

Steps Adding the jQuery Drop-Down menu

Step 1. Go to Dashboard - Template - Edit HTML - Proceed

Step 2. Expand Widget Template (make a backup)

Step 3. Search for the following code:

]]></b:skin>

Step 4. Add the following CSS code before/above it:

#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 5. Now find this piece of code:

</head>

Step 6. Add this code immediately before/ABOVE it:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(ul).css(visibility, visible);}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(visibility, hidden);}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $(#jsddm > li).bind(mouseover, jsddm_open)
$(#jsddm > li).bind(mouseout, jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Step 7. Click on Save Template button.

Step 8. Go to Layout > click on "Add a gadget" link

Step 9. Choose HTML/JavaScript from the pop-up window

Step 10. Paste the following code in the empty box:

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>

Note :

You must change links titles and replace the # symbol with the URL address of each of your links

Step 11. Click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Template > Edit HTML and search (CTRL + F) for this code:

<b:section class=header id=header maxwidgets=1 showaddelement=no>

You should change 1 with 3 and no with yes like this:

<b:section class=header id=header maxwidgets=3 showaddelement=yes>

Save the Template.

Next thing to do is to go to Layout and drag your menu immediately below your header

Then click on Save Arrangement

Here you can see the DEMO.

Enjoy! :)

Minggu, 08 September 2013

Horizontal menu with sub tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

blogger navigation menu, css menu, drop-down menu

The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.

Click on the "Add a Gadget" link just under your header image
From the Gadgets List, select "HTML/JavaScript" option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

<div id=menucol>
<div id=topwrapper>
<ul id=top>
<li><a href=http://YOUR URL HERE.com>Tab 1 Title Here</a></li>
<li><a href=http://YOUR URL HERE.com>Tab 2 Title Here</a></li>
<li><a class=submenucol href=#>Tab 3 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.3</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.4</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.5</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class=submenucol href=#>Tab 4 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.3</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.4</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.5</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class=submenucol href=#>Tab 5 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.3</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.4</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.5</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.6</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.7</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href=http://YOUR URL HERE.com>Tab 6 Title Here</a></li>

</ul>
<br class=clearit/>
</div>
</div>

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be clickable. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href=http://YOUR URL HERE.com>Tab 7 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 7.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 7.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 7.3</a></li>
</ul>
</li>

STEP 3: Now lets go a step further and add the CSS style in our Template

Go to Template > Edit HTML

Click on the sideways arrow next to <b:skin>...</b:skin>

Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQS4moc-UWvsA7Faz64FNpgjiFCxgxpGNfRlQ8pVoz3B86NX_MZxIjgMlCBxi8FazlHYqoYfyp__PU-TfduiPFzqza3gBHQX_Mk6XR4xgkwc_WRvjxzGti5PKVYuJydIFSCM3GwEZZOHI/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Now find (CTRL + F) this line:

/* Tabs

It will also have some little lines beneath:

/* Tabs
----------------------------------------------- */

And just below these little lines, delete the code below until you reach at:

/* Columns
----------------------------------------------- */

Instead of the code that you have removed, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for more info:

menu for blogger, blogger gadgets, blogger widgets

STEP 4: The final step is to Save the Template and you are done!

Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.

Blog Information

Ads 468x60px

Pages