Popular Post Style လွလွေလးဖန္တီးၾကမယ္ေနာ္ ~ Myo Zaw Htet IT

မဂၤလာပါ သည္ေန႕ေရးျဖစ္တာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ POPULAR POST ေလးေတြကို

စတိုင္ က်က်လွလွ ပပကာလာခြျေလးေတြနဲ႕ အလွဆင္ျခင္သေူတြအတြက္ပါ အရင္ကလည္း သည္နည္းကိုဘဲ တင္ေပးခဲ့ဘူးပါတယ္.. ဒါကေတာ့ ေနာက္ တၾကိမ္ ဆိုပါေတာ့ စမ္းသတ္ ေအာင္ျမင္

ထားျပီး ျဖစ္ပါတယ္ေနာ္... စိတ္တိုင္းက် သုံးဆြဲ လိုက္ပါေနာ္

လုပ္နည္းနဲ႕ လိုအပ္ေသာ ကုဒ္ေတြကေတာ့
======================

ပထမဆုံးအေနနဲ႕
=========
   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
အဲမွာ က်လာတဲ့ ဇယားထဲမွာဘဲ... popular post ဆိုတာရွိပါတယ္.. ေနာ္ အဲတာကိုကလစ္ပါ
ေအာက္က ပုံေလးမွာ ျပထားသလိုေပါ့ေနာ္..ဆက္လုပ္လိုက္ပါ...

ဒုတိယ အဆင့္အေနနဲ႕ကေတာ့
================

►1- Blogger Singin ၀င္လိုက္ပါ။
►2- Dashboard ကိုသြားလိုက္ပါ။
►3- Template ကိုကလစ္ပါ..။
►4- Edit Html ကို၀င္ပါ..
►5- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

]]></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:#ff4c54;width:97%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} #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:#f6993d;width:72%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;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:70px;height:70px;} #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts1 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; padding:4px; border:1px solid #fff !important; } #PopularPosts1 img:hover { border-radius: 0 0 0 0; -moz-transform: scale(1.2) rotate(-711deg) ; -webkit-transform: scale(1.2) rotate(-711deg) ; -o-transform: scale(1.2) rotate(-711deg) ; -ms-transform: scale(1.2) rotate(-711deg) ; transform: scale(1.2) rotate(-711deg) ; }

ကဲ မိမိတို႕ တက္ပလက္ကို စိတ္ခ်ယုံၾကည္စြာ ေဆ့လိုက္ပါေတာ့ေနာ္... မေဆ့ဘဲ preview နဲ႕ျပန္စစ္မယ္ဆိုလည္း ေသျခာေအာင္စစ္ေဆးၾကည့္လုိက္ပါေနာ္...ေသျခာျပီဆုိတာနဲံ႕ ေဆ့လိုက္ေပါ့..

အိုေက... လွပေသသပ္ေသာ ေပၚပ်ဴလာပို႕စ္ေလးေတြ ပိုင္ဆိုင္ေနပါျပီ...

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ