Popular Post လွလွေလးဖန္တီးၾကရေအာင္

သည္နည္းပညာေလးကေတာ့ ကြ်န္ေတာ္ အဂၤလိပ္ဆိုဒ္တစ္ခုကေန ေတြ႕ရွိကူးယူ

ခဲ႕တယ္ဆိုတာ ပထမဆုံး ၀န္ခံလိုက္ပါရေစ.. ႏွစ္သက္သေဘာက်လို႕ ခုလို ျပန္လည္တင္ျပေပးလိုက္ရျခင္းပါ.. သည္နည္းေလးကို စမ္းသတ္ၾကည့္လိုက္ပါ..အရမ္းေသသပ္လွပတဲ့ ေပၚျပဴလာပို႕စ္ေလးေတြကို မိမိတို႕ဘေလာ့မွာ ေတြ႕ျမင္ရမွာ ျဖစ္ပါတယ္...

 
 

 လက္ေတြ႕စမ္းသတ္ၾကည့္လိုက္ပါေနာ္....

နည္းလမ္းေလးနဲ႕ လုိအပ္တဲ့ကုဒ္ေတြကို ေပးထားပါတယ္...

 

►1-  Blogger Singin ၀င္လိုက္ပါ။
►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: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 == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <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 == &quot;false&quot;'>
         <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/