သည္နည္းပညာေလးကေတာ့ ကြ်န္ေတာ္ အဂၤလိပ္ဆိုဒ္တစ္ခုကေန ေတြ႕ရွိကူးယူ
ခဲ႕တယ္ဆိုတာ ပထမဆုံး ၀န္ခံလိုက္ပါရေစ.. ႏွစ္သက္သေဘာက်လို႕ ခုလို ျပန္လည္တင္ျပေပးလိုက္ရျခင္းပါ.. သည္နည္းေလးကို စမ္းသတ္ၾကည့္လိုက္ပါ..အရမ္းေသသပ္လွပတဲ့ ေပၚျပဴလာပို႕စ္ေလးေတြကို မိမိတို႕ဘေလာ့မွာ ေတြ႕ျမင္ရမွာ ျဖစ္ပါတယ္...
လက္ေတြ႕စမ္းသတ္ၾကည့္လိုက္ပါေနာ္....
နည္းလမ္းေလးနဲ႕ လုိအပ္တဲ့ကုဒ္ေတြကို ေပးထားပါတယ္...
►1- Blogger Singin ၀င္လိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- TEMPLATE ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5- EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- TEMPLATE ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5- EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
/* Variable definitions ကုဒ္ကိုရွာလုိက္ပါ ေတြ႕တာနဲ႕ သူ႕ေနာက္ကေန ေပးထားတဲ့
ေအာက္ကကုဒ္ေတြကို ထည့္ေပးလုိက္ပါေနာ္....
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>
ေနာက္တဆင့္ေအနနဲ႕ ]]></b:skin>ကုဒ္ကိုရွာလုိက္ပါေနာ္ေတံ႕တာနဲ႕ ]]></b:skin> သည္ကုဒ္ေလးမတိုင္မွီမွာ ေအာက္ကကုဒ္ေတြကို ထည့္ေပးလို္က္ပါ။
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
ေနာက္ထပ္ ရွာရအုံးမယ္ သည္းခံေနာ္....ဟိဟိ...
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> ေတြ႕ျပီဆိုတာနဲ႕ </b:widget>သည္ကုဒ္ေလးထိေရာက္ေအာင္ ဖ်က္ေပးလိုက္ပါ.. ျပီးတာနဲ႕ ေအာက္ကကုဒ္ေတြကို ခုဏ ဖ်က္ထားတဲ့ ေနရာကို အစားထိုးထည့္ေပးလိုက္ပါ..
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> ေတြ႕ျပီဆိုတာနဲ႕ </b:widget>သည္ကုဒ္ေလးထိေရာက္ေအာင္ ဖ်က္ေပးလိုက္ပါ.. ျပီးတာနဲ႕ ေအာက္ကကုဒ္ေတြကို ခုဏ ဖ်က္ထားတဲ့ ေနရာကို အစားထိုးထည့္ေပးလိုက္ပါ..
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1HczHVCiPW2YbqvVrgfBp0CZnqGljdEdqlhEd5vBB8X0qW1o8yXQQdgGWvhlfFCKHMlU8fligMPtRzQpqFKyuWDx5qTEti6O3FZM4iwjPEmacDuV2cpFAiC5VJiX3FAaFFiqozFldtA/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1HczHVCiPW2YbqvVrgfBp0CZnqGljdEdqlhEd5vBB8X0qW1o8yXQQdgGWvhlfFCKHMlU8fligMPtRzQpqFKyuWDx5qTEti6O3FZM4iwjPEmacDuV2cpFAiC5VJiX3FAaFFiqozFldtA/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
မရွင္းလင္းတာက သည္မွာ မူရင္းလင့္ေပးထားတယ္ သြားၾကည့္လိုက္ပါေနာ္။
ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..
ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။
လယ္တီေျမသား www.ledimyethar.com
ဘေလာ့ခရီးသည္ http://aungsanmks.blogspot.com/
မွတ္စုစာအုပ္ http://aungsan96.blogspot.com/
ဓမၼဗိမာန္ http://dhamabimarn.blogspot.com/
0 comments:
Post a Comment