ဘလော့မှာ လှပတဲ့ Most Popular Post Slider/Image Gallery V2 လေးနော်

 

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

</head>  သည်ကုဒ်ကိုရှာလိုက်ပါ  တွေ့တာနဲ့  သူ့အပေါ်ကနေ ကပ်လျှက်  အောက်ကပေးထားသောကုဒ်တွေကို ထည့်ပေးလိုက်ပါ...

<style type="text/css">
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnNb9K8oW2qBhuHeDmeWSizqcFEuBljY0wqPCrapTy07ugxjSCxO5pddO__dVPzaWUHRt8tXJ5E45ivQZ077gisuM3EW-ZmRT5TzA5SiR4DPFRpk1rv4uoqrfPRN9M6QCcNFy27qBuC8/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://latest-hacks.googlecode.com/svn/gadgets/popularposts/popular-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuuZdUXTcXoapl2kP0ceyh6FAfV480vSSDx8Z24x_zzIO04CXYMv7QdZkFDrKhYtCjkj6VVdeuZtJPktOgOeRbI1iINDVh3FJKXldUbmdXfxGHNtJrpZVPHL8sDavoM6Tn2b_OkDWypyM/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTjWUuip2ZbfksEjz25KdPwPjWqPyjavv1yZJaUOxMTWGH2-ij8gOpTxg7FwxP2DmqwJPhq6IShqA10Kk5AkLx2RVJdNNRkXxvgNANWfZ4kmYAASRNJRLtzfFM7GWlwZ1GZlw2Y5AhYUs/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

• နောက်ထပ်  အောက်ကကုဒ်ကို  ထပ်ရှာလိုက်ပါအုံးးနော်...

<b:section class='sidebar' id='sidebar' preferred='yes'>

• တွေ့ပြီဆိုတာနဲ့  သူ့အောက်ကနေ ကပ်လျှက်   ပေးထားသောအောက်ကကုဒ်တွေကို ထည့်ပေးလိုက်ပါ....

<b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <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/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9qyXin-11GoPe-EwQhE8x6SxFjo1GUoVV7UlvSlcHz_AZBRSjp3sNdT4I3M0u43o64pCXI_w79goMsG9npDKAIvzlQqi11GdhTOs5F8fEfFAiY9xUeunT2YqeUxvnrck476XdrrxMe40/s1600/defaultimage.jpg'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

• Now save your template

thanks: http://www.snacktools.com

ခုလိုအားပေးတဲ့အတွက် အထူးကျေးဇူးတင်ပါတယ်... လိုအပ်တာများရှိပါက.. C-Box မှာပြောခဲ့ကြနိုင်ပါတယ်... အတတ်နိုင်ဆုံး ကြိုးစား ကူညီ မျှဝေသွားပါမည်... 

ဘလော့ခရီးသည် 

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.blogspot.com 

တို့မှာ လည်ပါတ်နိုင်ပါတယ်.....နော်

Blogger နည်းပညာများ,

Rate this posting:

{[['']]}

Posted in: Blogger နည်းပညာများ