အျခားေသာ ၀က္ဆိုဒ္ေတြမွ စာအုပ္မ်ားကို မွ်ေ၀လိုက္ပါတယ္ ပိုင္႐ွင္မ်ားအေနျဖင့္ခြင့္ျပဳမယ္လို့ေမွ်ာ္လင့္ပါတယ္

မိမိရဲ့ ဘေလာဂ္အတြက္ image moving menu

1. အရင္ဆံုး........ Design >> Edit HTML

2.  မိမိရဲ့. ဘေလာဂ္ template ကို ျပန္ေဒါင္းထားလိုက္ပါ။ ဒါမွာ မိမိမွားျပီးလုပ္ခဲ့မိရင္..မူလ template မေပ်ာက္ေအာင္လို့ ပါ.....

3. ျပီးရင္   Expand Widget Templates အမွတ္ ေလးျခစ္ေပးလိုက္ပါ။

4. ဒီ ကုတ္ေလး ကို႐ွာပါ   .......................................... ]]></b:skin>

5.  ေတြျ့ပီဆိုရင္    ]]></b:skin> code ေအာက္မွာ    ေအာက္ကုတ္ေတြ ကို past ခ်လိုက္ပါ


#imagemove {            
        padding:0;             
        margin-left:30px;             
        list-style-type:none;             
        height:120px;             
        }             
#imagemove li {             
        display:block;             
        float:left;             
        width:120px;             
        height:120px;             
        position:relative;             
        margin:0 15px 7px 0;             
        }             
#imagemove li a {             
        display:block;             
        width:120px;             
        height:120px;             
        background:transparent;             
        overflow:hidden;             
        position:relative;             
                padding:5px;             
        } 
#imagemove li a img {            
        width:100%;             
        height:100%;             
        border:0;             
        margin-right:30px;             
        padding:5px;             
        }             
#imagemove li a:hover{             
        position:absolute;             
        left:0px;             
        top:20px;             
        padding:5px;             
        width:120px;             
        height:120px;             
        z-index:100;             
        }

6. ျပီးရင္  save template ပါ..................

7. ေနာက္ထပ္    Page Element  ကေန   Add gadget ကို သြားပါ...........

8.  JavaScript/HTML  မွာ  ေအာက္က ေပးထာတဲ့ code. ေတြ ကို copy& past ခ်လိုက္ပါ........


<ul id="imagemove">              
<li><a href="http://blogboy-walls.blogspot.com/"><img alt="menu 1" src="http://i43.tinypic.com/2arep5.png" title="home"/>home</a></li>

<li><a href="http://blogboy-walls.blogspot.com/"><img alt="download" src="http://i41.tinypic.com/20pxbmc.png" title="download"/>download</a></li>

<li><a href="http://blogboy-walls.blogspot.com/"><img alt="music" src="http://i41.tinypic.com/2rhqtlf.png" title="menu 3"/>menu 3</a></li>  

<li><a href="http://blogboy-walls.blogspot.com/"><img alt="feed" src="http://i40.tinypic.com/vqkvbl.png" title="feed"/>feed</a></li>  

<li><a href="http://blogboy-walls.blogspot.com/"><img alt="search" src="http://i44.tinypic.com/2lus08g.png" title="search"/>search</a></li>               
</ul>

*  http://blogboy-walls.blogspot.com/ ေနရာမွာ   မိမိရဲ့ URL လင့္ ကုိ ထည့္ပါ..............
* အစိမ္ေရာင္ လင့္  ေနရာမွာ   မိမိ လိုခ်င္တဲံ့  icon URL လင့္ ကို ထည့္ပါ..............

9. ျပီးရင္.......save လိုက္ပါ............


ဘေလာဂ္စိတ္၀င္စားသူမ်ား~~~~~~~~~~~~~အဆင္ေျပပါေစ~~~~~~~~~~

0 comments:

Post a Comment