<span class="post-author vcard"> <span class="fn">By Kang Rohman.</span> <span class="date-header">Tuesday, September 9, 2008</span> </span> <div class="post-body entry-content"><style>.fullpost{display:inline;}</style> <p><span>Hello, Readers, do you still remember my post about making a <span style="border-bottom: 1px solid rgb(0, 0, 255); text-decoration: underline; color: rgb(0, 0, 255); font-weight: 400; font-style: normal;font-family:Arial,Tahoma,Verdana;font-size:12;" class="IL_LINK_STYLE" >label</span> menu or category in </span><strong><span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden">label</span> cloud</span></strong> that I posted <b><a href="http://www.blogspottutorial.com/2008/09/making-tag-label-cloud-in-new-blogger.html" target="_blank">here</a></b>. Now, Kang Rohman would like to give a<strong> tutorial</strong> about making a <strong><span><span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden">label</span> in </span><span style="border-bottom: 1px solid rgb(0, 0, 255); text-decoration: underline; color: rgb(0, 0, 255); font-style: normal;font-family:Arial,Tahoma,Verdana;font-size:12;" class="IL_LINK_STYLE" >drop down menu</span></span></strong>. If you have used a <strong><span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden">label</span> cloud</span></strong><span>, it seems that this tutorial is not suitable for you. This tutorial is suitable for those who still use the original <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">label</span> of blogger.</span></p> <p><span><span>Below is the sample of <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">label</span> in </span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden">drop down menu</span></span></p> <form><select style="width: 200px;" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" name="menu"> <option>Browse By Categories</option> <option value="http://www.blogspottutorial.com/search/label/3%20column%20template/">3 Column template (9)</option> <option value="http://www.blogspottutorial.com/search/label/d%27tree%20menu/">d'tree menu (1)</option> <option value="http://www.blogspottutorial.com/search/label/hack/">hack (2)</option> <option value="http://www.blogspottutorial.com/search/label/blog%20tutorial/">blogspot tutorial (41)</option></select></form> <div class="fullpost"> <p> </p> <p><span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden">Drop down menu</span><span> absolutely will use little space in your <span style="border-bottom: 1px solid rgb(0, 0, 255); text-decoration: underline; color: rgb(0, 0, 255); font-weight: 400; font-style: normal;font-family:Arial,Tahoma,Verdana;font-size:12;" class="IL_LINK_STYLE" >template</span> and drop down also makes your <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">template</span><span> look neater. If you are really interested in this kind of <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">label</span>, please follow the following steps but before following it, make sure that you have added a <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">label</span> gadget in your blog.</span></span></span></p> <ol><li>Log in into blogger with your ID. </li><li>Click layouts </li><li>Click Edit HTML. </li><li><span>Click download full <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">template</span> to back up your <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">template</span>.[ very important ] </span></li><li>Click <strong>expand widget templates</strong>. </li><li><p><a href="http://lh6.ggpht.com/rohmaN24/SMW3JoCml6I/AAAAAAAAAvw/wJdmDgujoi8/s1600-h/expand-widget_thumb%5B3%5D.png"><img alt="expand-widget_thumb" border="0" height="165" src="http://lh3.ggpht.com/rohmaN24/SMW3L2hKlXI/AAAAAAAAAv0/BN8Rv5m6rxs/expand-widget_thumb_thumb%5B1%5D.png?imgmax=800" style="border-width: 0px;" title="expand-widget_thumb" width="240" /></a> </p><code><br /><ul><br /><br />   <b:loop values='data:labels' var='label'><br /><br />     <li><br /><br />       <b:if cond='data:blog.url == data:label.url'><br /><br />         <data:label.name/><br /><br />       <b:else/><br /><br />         <a expr:href='data:label.url'><data:label.name/></a><br /><br />       </b:if><br /><br />       (<data:label.count/>)<br /><br />     </li><br /><br />   </b:loop><br /><br />   </ul><br /></code><br /></li><li>Delete the code above and then change it with the following code<b:loop values="'data:labels'" var="'label'"> </b:loop><br /><span style="font-family: monospace;"></span></li></ol></div></div><div style="text-align: left;"> <code><br /><select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'><br /><br /><br /><br /><option>Browse By categories</option><br /><br />   <b:loop values='data:labels' var='label'><br /><br />      <option expr:value='data:label.url'><data:label.name/><br /><br />         (<data:label.count/>)<br /><br />      </option><br /><br />   </b:loop><br /><br /></select><br /></code><br /><br /><ol><li value="8">Click <strong><span>save <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">template</span></span></strong> button. </li><li>Finish and see the result. </li></ol> <p><span>Now, your <span class="IL_SPAN"><input name="IL_MARKER" type="hidden">template</span> looks neater, doesn’t it? Have a nice trying</span></p><br /></div>

By Kang Rohman. Tuesday, September 9, 2008 Hello, Readers, do you still remember my post about making a label menu or category in l...

Read more »