Popular Post Style လွလွေလးဖန္တီးၾကမယ္ေနာ္

 

မဂၤလာပါ  သည္ေန႕ေရးျဖစ္တာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ 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>  ကုဒ္ကိုရွာပါ ေတြ႕ျပီဆိုတာနဲ႕  ေအာက္မွာ ေပးထားတဲ့ကုဒ္ေတြကို
သူ႕အေပၚကေန ကပ္လွ်က္  ထည့္ေပးလိုက္ရံုပါဘဲေနာ္

              <!-- Popular posts multi colored UI theme --> #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) ; } <!-- popular posts multicolored UI theme -->

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

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

Posted in: ဘေလာ့နည္းပညာ