drop down menu classic templates footers

Disini saya akan menerangkan cara-cara untuk membuat drop down menu untuk blogger classic templates dan drop down menu itu diletakkan dimana-mana bahagian yang anda sukai tetapi untuk tutorial kali ini drop doen menu itu diletakkan pada footers seperti rajah di bawah.
    Sebelum anda mencipta drop down menu untuk archive anda haruslah fikirkan. apakah tujuan anda ingin mencipta drop down menu untuk archive anda. Saya mencipta drop down menu untuk  archive untuk memudahkan pencarian setelah terlalu banyak post dan bagi mempastikan page blog saya kelihatan kemas.

Jadi bagaimana anda hendak lakukan?


1 Cari  #footer atau seumpamanya yang sepadan

2   Pastekan dengan html code dibawah ini
<!-- Freeware Homes Archived -->
<select name="archivemenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>

3 HTML code anda seharusnya kelihatan begini

<BloggerPreviousItems>
<li><a title="<$BlogTitle$>" href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$> </a></li>
</BloggerPreviousItems>
</ul>
<!-- Freeware Homes Archived -->
<select name="archivemenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>

harap membantu anda dalam mencipta drop down menu archice 

Anda juga mungkin berminat untuk remove blog archive dalam classic templates

buat drop down menu blogger templates

Ini adalah drop down menu yang telah dihasilkan daripada HTML source code

Jika anda berminat anda bolehlah berkunjung ke HTML source code dropdown menu

HTML source code drop down menu copy paste

<!-- mula html source code sini -->
<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>
<!-- end navbar -->
<!-- hingga html code sini -->

nice drop down menu

</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() {


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

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

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //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'>

Add Navigate Bar on blogger templates

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

remove navigate bar

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
----------------------------------------------- * /

Insert share this button on blogger template

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

 <div class='post-body'>

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='&quot;http://www.facebook.com/sharer.php?&amp;u=&quot; + 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='&quot;http://twitthis.com/twit?url=&quot; + 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='&quot;http://www.stumbleupon.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://del.icio.us/post?v=4&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + 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='&quot;http://technorati.com/signup/?f=favorites&amp;Url=&quot; + 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='&quot;http://www.furl.net/storeIt.jsp?&amp;u=&quot; + 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;'/> <!-- clear for photos floats -->
    </div>