Leung

Make Drop Menu

2008-07-06T00:22:00.000-07:00

Make drop menu for your blogger by using script from dynamic drive.You Have to save your template first before edit your blogger HTML.1. adding class above "]]></b:skin>"#dropmenudiv{position:absolute;border:1px solid black;border-bottom-width: 0;font:normal 12px Verdana;line-height:18px;z-index:100;}#dropmenudiv a{width: 100%;display: block;text-indent: 3px;border-bottom: 1px solid black;padding: 1px 0;text-decoration: none;font-weight: bold;}#dropmenudiv a:hover{ /*hover background color*/background-color: #7e90fe ;}#menu{text-align: left;background:#e0d40e;height:20px;font-weight: bold;}#menu a{margin: 0 ; font-size:130%;font-weight:bold;padding-left:5px;padding-right:5px;letter-spacing:1px;color: #000000;font-family:georgia,verdana,arial;text-decoration:none;}#menu a:hover{color: #ED1E2A;background: #e0d40e;}.menutitle{cursor:pointer;margin-bottom: 5px;background-color:#ECECFF;color:#000000;width:140px;padding:2px;text-align:center;font-weight:bold;/*/*/border:1px solid #000000;/* */}.submenu{margin-bottom: 0.5em;}2. Adding script below "]]></b:skin>"<script type="text/javascript">//<![CDATA[/************************************************ AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit http://www.dynamicdrive.com/ for full source code***********************************************///Contents for menu 1var menu1=new Array()menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'//Contents for menu 2, and so onvar menu2=new Array()menu2[0]='<a href="http://cnn.com">CNN</a>'menu2[1]='<a href="http://msnbc.com">MSNBC</a>'menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'var menuwidth='165px' //default menu widthvar menubgcolor='lightyellow' //menu bgcolorvar disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)var hidemenu_onclick="yes" //hide menu when user clicks within menu?/////No further editting neededvar ie4=document.allvar ns6=document.getElementById&&!document.allif (ie4||ns6)document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}return totaloffset;}function showhide(obj, e, visible, hidden, menuwidth){if (ie4||ns6)dropmenuobj.style.left=dropmenuobj.style.top="-500px"if (menuwidth!=""){dropmenuobj.widthobj=dropmenuobj.styledropmenuobj.widthobj.width=menuwidth}if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")obj.visibility=visibleelse if (e.type=="click")obj.visibility=hidden}function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function clearbrowseredge(obj, whichedge){var edgeoffset=0if (whichedge=="rightedge"){var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15dropmenuobj.contentmeasure=dropmenuobj.offsetWidthif (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth}else{var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffsetvar windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18dropmenuobj.contentmeasure=dropmenuobj.offsetHeightif (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeightif ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge}}return edgeoffset}function populatemenu(what){if (ie4||ns6)dropmenuobj.innerHTML=what.join("")}function dropdownmenu(obj, e, menucontents, menuwidth){if (window.event) event.cancelBubble=trueelse if (e.stopPropagation) e.stopPropagation()clearhidemenu()dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudivpopulatemenu(menucontents)if (ie4||ns6){showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)dropmenuobj.x=getposOffset(obj, "left")dropmenuobj.y=getposOffset(obj, "top")dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"}return clickreturnvalue()}function clickreturnvalue(){if (ie4||ns6) return falseelse return true}function contains_ns6(a, b) {while (b.parentNode)if ((b = b.parentNode) == a)return true;return false;}function dynamichide(e){if (ie4&&!dropmenuobj.contains(e.toElement))delayhidemenu()else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))delayhidemenu()}function hidemenu(e){if (typeof dropmenuobj!="undefined"){if (ie4||ns6)dropmenuobj.style.visibility="hidden"}}function delayhidemenu(){if (ie4||ns6)delayhide=setTimeout("hidemenu()",disappeardelay)}function clearhidemenu(){if (typeof delayhide!="undefined")clearTimeout(delayhide)}if (hidemenu_onclick=="yes")document.onclick=hidemenu//]]></script>After it, you can save your template.3. Now in your body tag you can put HTML code anywhere you like. I like put this between content and main it's up to you..<div id='menu'><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)</div>Just try and you can edit a color, font,text and manu more....ad you want to...Have a nice try.

Denim Three Columns

2008-07-05T10:59:00.000-07:00

Demo | Download

Simple Minima Ochre

2008-06-21T13:00:00.000-07:00

Demo | Download

Make Number on Label Disappear

2008-06-21T06:48:00.000-07:00

How to make your "count" on your label disappear is :
- Go to HTML site.
- Check a How to make your "count" on your label disappear is :
- Go to HTML site.
- Check a Expand Widget Templates.
- Find this code :
<span dir='ltr'>(<data:label.count/>)</span>
- Delete and Save it.
Now label count on your label disappear.
Note: I already delete that code and it's work.

Adding Image In Label

2008-06-21T05:47:00.000-07:00

Adding image in your label can make your blog looks nice. all you have to do is :

- Open your HTML.
- Click a Expand Widget Templates.
- Find HTML like this...

<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

<data:label.name/>

After you find it, add this code " <img src=' your image url ' /> " between <b:else/>
and <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

The code like this :

<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<img src=' your image url ' />

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

Denim left sidebar

2008-06-21T05:25:00.001-07:00

Demo | Download

Denim Right Sidebar

2008-06-20T10:08:00.001-07:00

Demo | Download | See it my blog

Adding Three Columns

2008-06-20T07:32:00.000-07:00

Adding three columns is a best way to add more space for your template. Before adding three columns. All you have to do is :

1. Create a new blog for testing or back up your template. My suggestion is create a new blog for test.
2. This code works for my blog, if this code not work for your blog, PLEASE DON"T BLAME ON ME.
3. Before i write, i already test 6 times and revised until perfect(for me).

- Change a code like :
1. in outer wrapper :

#outer-wrapper {
width: 660px; change ===> width 100%;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
Write ====>margin-$endSide: 1.5%;
width: 410px; change ====> width : 50%;
float: $endSide; change ====>float: left;
===> display: inline;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper { change ====> #left-sidebar-wrapper {
write ====> margin-$startSide: 1%;
width: 220px; change ====> width: 27%;
float: $startSide; change ====> float: left;
write ====> display: inline;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#right-sidebar-wrapper {
width: 22%;
float: right;
word-wrap: break-word;
overflow: hidden;
}

2. Now change a code between <body> </body>

<div id='sidebar-wrapper'> change it to => <div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'> change it to =><b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

3. Save then you got your three columns blogger template.