HTML source code dropdown menu

1 Cari /* Content of ---------------------------------------------- */ atau #content

2 Copy HTML code dibawah

/* ----- dropdown NAVBAR MENU ----- */
#NavbarMenu {

width: 880px;
height: 35px;
background:#527F76 url() repeat-x top;
color: #FFFFFF
margin: 0 auto 0;
padding: 0;
font: bold 10px Arial, Tahoma, Verdana;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFFFFF;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#527F76;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #527F76 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOM6U4UOTbCTtNdTX18cEmtpc3a_IQQJ8vparZaAa3dqSvRZEcqu-gjL6eJXyIoD334oqHkKGUzb9PoRJ5-SNYZXt9QO5jltVcjmKenzMXjKurq1gXJrRHLhBrZwYLGbHuZC1Wz7kOcI5/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
/* --------------------YG BERI WARNA BAR--------------------------- */
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #527F76;
border-right: 1px solid #527F76;
font: normal 14px Georgia, Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background: #527F76;
color: #FFFFFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

3 Pastekan HTML code tadi sebelum /* Content of ---------------------------------------------- */ atau #content

4 Fikirkan dimanakah anda mahu meletakkan dropdown menu, pada blog saya saya ingin meletakkan dropdown menu diatas daripada google ads. (anda boleh cuba ditempat lain contohnya diatas sebelum posting atau lain-lain tempat pada blog anda)

5 Untuk itu saya cari
adalah sesuai untuk saya meletakkan drop down menu

6 HTML code div id untuk header adalah seperti dibawah
(Pastekan HTML code dibawah html code ini )

7 Copy semua HTML source code dibawah dan pastekan selepas sebagaimana diatas

8 Ini adalah html source code untuk blog saya jika anda tidak menyukainya anda boleh cipta sendiri dengan menggunakan apa-apa aplikasi HTML Editor tapi kalau anda indin mencuba yang freeware portable HTML Editor anda boleh mencuba kompozer portable. Kompozer portable HTML Editor boleh didapati di web pembuatnya portableapps untuk digunakan

9 selamat mencuba untuk create dropdown simple menu for SEO

anda mungkin ingin melihat bagaimana drop down menu yang terhasil

Labels: Add Navigate Bar on blogger templates, HTML source code dropdown menu

HTML source code drop down menu copy paste

Share

<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
<li class="top"><a href="#nogo2" id="products"
class="top_link"><span class="down">Products</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Cameras</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li class="mid"><a href="#nogo7"
class="fly">Lenses</a>
<ul>
<li><a href="#nogo8">Wide Angle</a></li>
<li><a href="#nogo9">Standard</a></li>
<li><a href="#nogo10">Telephoto</a></li>
<li><a href="#nogo11" class="fly">Zoom</a>
<ul>
<li><a href="#nogo12">35mm to 125mm</a></li>
<li><a href="#nogo13">50mm to 250mm</a></li>
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="#nogo15">Mirror</a></li>
<li><a href="#nogo16" class="fly">Non
standard</a>
<ul>
<li><a href="#nogo17">Bayonet mount</a></li>
<li><a href="#nogo18">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo19">Flash Guns</a></li>
<li><a href="#nogo20">Tripods</a></li>
<li><a href="#nogo21">Filters</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="services"
class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="#nogo23">Printing</a></li>
<li><a href="#nogo24">Photo Framing</a></li>
<li><a href="#nogo25">Retouching</a></li>
<li><a href="#nogo26">Archiving</a></li>
</ul>
</li>
<li><a href="http://uppsmtkk.blogspot.com/">Home</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/News"
rel="nofollow">News</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/All%20Software"
rel="nofollow">Software</a>
<ul>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Anti%20Virus%20Software"
rel="nofollow">Antivirus</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Audio%20and%20Video%20Software"
rel="nofollow">Audio and Video</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Desktop%20Enhancements"
rel="nofollow">Desktop Enhancements</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Graphic%20and%20Web%20Design"
rel="nofollow">Graphic and Web Design</a></li>
<li><a href="#">Internet</a>
<ul>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Dial-up%20and%20Connectivity"
rel="nofollow">Dial-Up n Connectivity</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Internet%20Security%20and%20Spyware"
rel="nofollow">Security and Spyware</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Internet%20Utilities"
rel="nofollow">Utilities</a></li>
</ul>
</li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/System%20Utilities"
rel="nofollow">System Tools</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Tools%20and%20Utilities"
rel="nofollow">Others</a></li>
</ul>
</li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Free%20Blogger%20Template"
rel="nofollow">Template</a>
<ul>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/New%20Blogger%20Template"
rel="nofollow">New Blogger Template</a></li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/Classic%20Blogger%20Template"
rel="nofollow">Classic Blogger Template</a></li>
</ul>
</li>
<li><a
href="http://uppsmtkk.blogspot.com/search/label/TiPs%20and%20TriCk"
rel="nofollow">Tips and Trick</a></li>
</ul>
</div>

<div id="search">
<form action="/search/" id="searchform" method="get"
style="display: inline;"><input id="searchbox"
maxlength="255" name="q"
onblur='if (this.value == "") {this.value = "Search This Site...";}'
onfocus='if (this.value == "Search This Site...") {this.value = ""}'
value="Search This Site..." type="text" />
<input id="searchbutton" value="GO" type="submit" /></form>
</div>

</div>
</div>

Labels: Add Navigate Bar on blogger templates, drop down menu

nice drop down menu

Share

</script>
</b:if>

<style type='text/css'>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 99%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:30px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #111;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #ffffff;
}
ul#topnav a { color: #111111; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFab4enKuEJJx71katr3U06-2JP724sshGgpAAM9acPrldrcYD_zCMEO64ol3_bjVHCRu1TsgWB9RKEsw8s_8wqkP0jrt88c5-8C5roxinCnyV9NsS8r5-3cPaGTjJ4Fi3yjE3UZhmD0k/) repeat-x left top;
}
ul#topnav.v2 a{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFab4enKuEJJx71katr3U06-2JP724sshGgpAAM9acPrldrcYD_zCMEO64ol3_bjVHCRu1TsgWB9RKEsw8s_8wqkP0jrt88c5-8C5roxinCnyV9NsS8r5-3cPaGTjJ4Fi3yjE3UZhmD0k/) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});

});
</script>
</head>

<body>

dan ni

<div class='container'>

<ul id='topnav'>

<li><a href='http://blo-temp.blogspot.com/'>Home</a></li>
<li><a href='http://blo-temp.blogspot.com/search?max-results=999'>TOC</a></li>
<li><a href='http://blo-temp.blogspot.com//search/label/widget?max-results=1000'>Widgets</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/Templates?max-results=1000'>Templates</a></li>
<li><a href='http://blo-temp.blogspot.com//search/label/jQuery?max-results=1000'>jQuery</a></li>
<li><a href='http://blo-temp.blogspot.com/'>Advertise</a></li>
<li><a href='http://blo-temp.blogspot.com/contact-me.html'>Contact</a></li>

</ul>

</div>

<div class='container'>

<ul id='topnav'>

<li><a href='http://blo-temp.blogspot.com/'>Home</a></li>
<li><a href='http://blo-temp.blogspot.com/search?max-results=999'>TOC</a></li>
<li><a href='http://blo-temp.blogspot.com//search/label/widget?max-results=1000'>Widgets</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/blogger templates?max-results=1000'>Templates</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/jQuery?max-results=1000'>jQuery</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/seo-and-meta-tag.html/'>seo and meta tag</a></li>
<li><a href='http://blo-temp.blogspot.com/contact-me.html'>Contact</a></li>

</ul>

</div>

<div id='content-wrapper'>

<div id='side-wrapper1'>

Labels: Add Navigate Bar on blogger templates, drop down menu, offline seo

Add Navigate Bar on blogger templates

Share

This is the main problem when i try create or Add Navigate Bar on blogger templates

This is my new navigate bar i was create

Labels: Add Navigate Bar on blogger templates, drop down menu, How to

remove navigate bar

Share

First of all find the first / * Navbar

If you do not find it do not panic because you probably do not have templates / * Navbar

If the HTML code above is not found then find the / * Content
which must be present for HTML code that is no mean your blog will not be there / * Content.

on the / * Content Enter to insert the following html code

/ * Navbar
----------------------------------------------- * /
# navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
   }

and add the following HTML code before the / * Content

Your HTML code should look like this

/ * Navbar
----------------------------------------------- * /
# navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
   }
/ * Content
----------------------------------------------- * /

tetepi if you have found the HTML code to convert HTML navbar codenya be like this
/ * Navbar
----------------------------------------------- * /
# navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
   }
/ * Content
----------------------------------------------- * /

Labels: Add Navigate Bar on blogger templates, drop down menu, remove navigate bar

Insert share this button on blogger template

Share

Inserting a share this button in your blogger templates is one of the fastest ways for you to share content of your blog to your friends on twitter and facebook.
The problem is?
How do I add share this button to enter into your HTML code. So here I want to share some knowledge about what I do on my blogger HTML code to insert share this button on HTML code . HTML code share this button that I put here is not much, so you can add your own if you want it

Find the following html code

till

At the top of the html code

Enter the following code and html code share this button

HTML code will look as

<div class='spacer' style='border-top:solid 0px #DEDEDE;'/>
<table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8pWq6FJJenGUod15vLqR0TaVigrBQeRDecIzZii6v_F1NNgobbAYbVoMQhLf_SIfPW3B39S84XYgEZbwQZxiA5EorXOikIoapsc3FKib81DI_8hq1YeyedDzT2-lyIxk1vFS0LLFKJY0/' width='16'/></td>
<td height='24'><a expr:href='"http://www.facebook.com/sharer.php?&u=" + data:post.url' target='_blank'>Share on Facebook</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0speQl0_eW-vKufQjTgd_lvqfLsuqAkTZMWXDabNI1M79l57qAUc2R6758YOaSyqwSzzWKaBnzQ4SbSLKRjYtMQlKadLYnWxUSeu3kg1z3ysjoz6-YkStLJLaRfUz9BM_Bw7n0_2ALo/'/></td>
<td height='24'><a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'>Share on Twitter</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgefWZ2ocAw4_J_cCoIrRsezATO4HBjAAKHt3I4GcrCz0TMM9b5AsBc6v9ZOI68DTJGztrMTsgnZpPNCf-ZY9KzutUyjG_LQ08qYcFGUrRYdw8WWm4OMzdHqKvO6meUk9paqKTc3NNw63U/' width='16'/></td>
<td height='24'><a expr:href='"http://www.stumbleupon.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on StumbleUpon</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSb354kkHnx1HQf4xEno6Q21coY2w0GLVQBTim9P4sp-FAtyvmxRedrFmaJ4vyQEG1fEguD1B-LFFy-_FPRTGOOqQsnQJbOwgmO4rgIMqi7fgBubnnL2rZAz1Td2EEVOOwuRI7U2hDLJE/' width='16'/></td>
<td height='24'><a expr:href='"http://del.icio.us/post?v=4&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Delicious</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivSCYzM5gVJ5A0kGYY1u1BTSt4S_mzokCbT3TVX2y5lihrJdAP5y_ej_u7smxkP0I5iAkh8qKqwaNJ8BfgYR5aGeV0KhPzvzEn-MFDbAXDRNhz9irbLXVuFY1tiwYcFI0mI80NE20blWs/' width='16'/></td>
<td height='24'><a expr:href='"http://reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Reddit</a>
</td>
</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3vu5R55MnkDAT6qtLCu3wTjrdNuCGmf_UDgKSZ0EfNjIYBgjE2idemp3hIU0PPAu-ogfWdn5os3ce_97YeQytpC0mfhaG3tdK3roF8Y7HpKc3q0jYdZr_thSlahkBgeh1kodvS8x0_M8/' width='16'/></td>
<td height='24'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Digg</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfKAjr8cTEbxb5eH1yoO_Ez0muzEwcUO8rZQNW3Lpc_UAlnnOAER1JMLk8ocqYf-J9IEAtxYdyNJg_EOqpv9Z2yfumG6oYh75YD3UW2ZnWIWWXn_hYUMbKwhq4PI8-TsCD_Uk_gEVVhdE/' width='16'/></td>
<td height='24'><a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url' rel='nofollow' target='_blank'>Share on simpy</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhL-zOUM-O87wKeCYFDPGpt7GmEM2cqfsFUslGHo3RMHPqqfLhbBsBaPkgk-dJabCGKzwWtJ4JRE7P0WKt9RG1xpqSDF5-Bk-WPAtS7upQVPIeCOYKxwq5bxkaIdDhrakZkntR_aRln18/' width='16'/></td>
<td height='24'><a expr:href='"http://technorati.com/signup/?f=favorites&Url=" + data:post.url' rel='nofollow' target='_blank'>Share on Technorati</a></td>
</tr>
<tr>
<td height='24'><img alt='furl' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLLWnUvXvgfdZxyRy4dprxZTvkz1xAfQbXG_a7z6ltqR3PAKr6Hov4iTEgJqPMbNNREmmibZ6wD2Ge6fPUtmA6AMrXwhZtCwY-4__MswOwzojgacxbMpBtwFROuiGV0fze4zkLSzvve6M/' width='16'/></td>
<td height='24'><a expr:href='"http://www.furl.net/storeIt.jsp?&u=" + data:post.url' rel='nofollow' target='_blank'>Share on furl</a>
</td>
</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYSXDsb392xX1QyHqhy7RPjN7g_-_g5RjPujmwiF2mkiot9FrTvMmut4kn04e9VWD-ijFmhAkAateKkZeYZgDQVhkOii4-Oj_VVsaxGnk3m6ie7QMFRu5H2y6KPhWOP6nU6ANPtGer0v0/' width='16'/></td>
<td height='24'><a href='http://feeds.feedburner.com/blogspot/theliomainfo' target='_blank'>Subscribe to Feeds RSS</a>
</td>
</tr>
</table></td>
</tr>
</table>

<div style='clear: both;'/> 
</div>

Labels: Add Navigate Bar on blogger templates, blogger tools, drop down menu, How to, share this button

blog template

Friday, July 22, 2011

HTML source code dropdown menu

Wednesday, July 20, 2011

HTML source code drop down menu copy paste

Tuesday, July 19, 2011

nice drop down menu

Friday, February 4, 2011

Add Navigate Bar on blogger templates

remove navigate bar

Friday, November 19, 2010

Insert share this button on blogger template

Best link

Other blog blog template

Links of blog template

Previous Posts of blog template

Archives of blog template s

Previous Posts blog template

Archive blog template s

More Blogs blog template

eb-Exchange blog template