စာတစ္ပိုဒ္လံုးကို ကလစ္ႏွိပ္ႏိုင္ေအာင္ ျပဳလုပ္ျခင္း

Link Block Hover Effect

က်ေနာ္တို႔ ပံုမွန္အားျဖင့္ စာတစ္ပိုဒ္လံုးကို ကလစ္ႏွိပ္ႏိုင္ေအာင္ လုပ္ခ်င္ရင္ ဒီလို ပံုစံေတာ့ လုပ္လို႔ရမယ္။

Reduce your code.
12 Jul 2008

Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!

ဒီ ပံုစံ အေဟာင္းမွာ စာပုိဒ္တစ္ပုိဒ္လံုးမွာ စာလံုး ရွိတဲ့ ေနရာေတြမွာပဲ ကလစ္ႏွိပ္လို႔ ရပါတယ္။ တကယ္လို႔ တစ္ပိုဒ္လံုးမွာ ေနရာမေရြး ကလစ္ႏွိပ္ႏိုင္ေအာင္ ဘယ္လို လုပ္မလဲ။ အခု ဒီလုပ္ေဆာင္ခ်က္ကို က်ေနာ္တို႔ ဘယ္လုိ လုပ္မလဲဆိုတာ တင္ျပခ်င္ပါတယ္။ အခု ေအာက္မွာ ျမင္ရသလိုေပါ႔။ စာတစ္ပုိဒ္လံုး ႀကိဳက္တဲ့ ေနရာမွာ ကလစ္ႏွိပ္လို႔ ရႏိုင္ေအာင္ လုပ္နည္းကို တင္ျပခ်င္ပါတယ္။

Reduce your code.
12 Jul 2008

Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!

အဆင့္ (၁) စတုိင္ သက္မွတ္ျခင္း

ေအာက္ပါ CSS ကို Style Sheet မွာ သြားထည့္ေပးပါ။ Layout >> Edit HTML က ]]></b:skin> ရဲ႕ အေပၚနားမွာ ထည့္ေပးပါ။ ၿပီးရင္ Template ကို Save ေပးပါ။

<br />.h-links ul {<br />list-style-type: none;<br />width:450px;<br />margin:0; padding:0;<br />}<br /><br />.h-links li {<br />border-bottom:1px dotted #777;<br />}<br /><br />.h-links span{<br />font-size:0.75em;<br />color:#777;<br />font-weight:normal;<br />}<br /><br />.h-links p{<br />margin:5px 0 0 0; padding:0;<br />color:#000;<br />font-weight:normal;<br />}<br /><br />.h-links li a {<br />color: #CC0033;<br />text-decoration: none;<br />font-weight:600;<br />display:block;<br />padding: 15px 15px 15px 10px;<br />}<br /><br />.h-links li:hover{<br />background: #eee;<br />}

အဆင့္ (၂) စကားစုကို လင့္ခ္ ျပဳလုပ္ျခင္း

ပို႔စ္ထဲမွာ လုပ္ခ်င္တာ ျဖစ္လို႔ Postings က New Post လုပ္ေပးပါ။ အထက္က ဥပမာအတုိင္း လိုခ်င္တယ္ ဆိုရင္ ေအာက္မွာျပထားတဲ့ Code ကို Post Editor ထဲ ကူးထည့္ၾကည့္လိုက္ပါ။ ဒီ ဥပမာကို ၾကည့္ၿပီး လုိသလို ျပင္သံုးႏိုင္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

<br /><div class="h-links"><br />    <li><br />    <a href="http://www.bloggingtips.com/" >Reduce your code.<br />    <span>12 Jul 2008</span><br /><br />    <p>Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!</p><br /><br />    </a><br /><br />    </li><br /></div>