Popular Posts ကို slider ေလးနဲ႕ ဘေလာ့ထိပ္ကေနအလွဆင္မယ္

Popular Posts ကို slider ေလးနဲ႕ ဘေလာ့ထိပ္ကေနအလွဆင္မယ္

By: ဘေလာ့ခရီးသည္

  

အေပၚကပုံထဲ႕လိုေလးး လုပ္ၾကည့္မယ္ေနာ္....ကဲ စမယ္

1.ဘေလာ့ကာအေဟာင္းပုံစံအတြက္၀င္နည္း: 
Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template ဘေလာ့ကာအသစ္ပုံစံကိုေတာ့ သည္တိုင္း၀င္ပါ 
Go - Tto Dashboard emplate - Edit HTML - - (make a backup)2.  (CTRL + F) အကူညီျဖင့္ ေအာက္ကကုဒ္ကိုရွာလိုက္ပါ

]]></b:skin>

3.ေတြ႕ျပီဆိုရင္ သူ႕ရဲ႕အေပၚကပ္ျပီးး ေအာက္ကေပးထားတဲ့ကုဒ္ေတြ ထည့္ေပးပါ:

#gallery{position:relative;margin:0 35px 20px;width:590px;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/AVvXsEgsMNn4Vdv26pU1W3M4ILdQlfAsKCHfcH4cTjFwMvDaQ7N6GgEROOSe1UM199ZkCUqu3QVdr4TkMDSqFQzeYE9bvoAO1mZMwOvZkY1mntJePriP_TGA8eNbn73HkRPtNdLO_ShPn-qIOrV_/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}

Note: ဒါဆိုအဆင္ေျပပါျပီ အနီေရာင္နဲ႕ နံပါတ္ေတြကို မိမိဆိုဒ္နဲ႕ သင့္ေတာ္သလို ေျပာင္းသုံးပါ (590 and 126). ကိုေပါ့

4. ေနာက္ထပ္ ေအာက္ကကုဒ္ကို ထပ္ရွာလုိက္ပါ:

</head>

5. ေတြ႕တာနဲ႕ အေပၚကေန ကပ္ျပီး ေပးထားတဲ့ေအာက္ကကုဒ္ေတြထည့္ပါ:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigwqb9_SiccRq51TmMFGvh_0Q5upDIPG4BG7rjyiAfsLQADSj4IgnRLU8s_xXUNpul6Zk4GWVFCRzWvhq649Egu3_8pGr7f1ZnR2qbXkMWODqT9Nx45yQGh1Qm4bcaxMkagsIVUE2HXtaT/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_k_0u5M9MxggBMxngPm9tZ5HGUIRFawM4Zpb4_78O6ATm0Ub8w2LmZ_NvwQGtF0ZZ3VN1TJ1kQVnrsCSthtlhmpeaOLK2pLAABrIQE8MtFZHh2_G-QWZXbqsDD7m4VJlY_ru0rBgD9NEw/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

မိမိတို႕ရလာတဲ့ ဟာေလးကို post ရဲ႕အထက္မွာ ေရႊ႕ေပးလိုက္ပါ.

6. ေအာက္ကကုဒ္ကို ထပ္ရွာပါ:

<b:section class='main' id='main' showaddelement='yes'>

...အကယ္လို႕ အေပၚကကုဒ္မေတြ႕ခဲ့ပါက ေအာက္ကကုဒ္ရွာပါ:

<b:section class='main' id='main' showaddelement='no'>

7. ေတြ႕တာနဲ႕ သူ႕ရဲ႕ေအာက္ကေနကပ္ျပီးေပးထားတဲ့ ေအာက္ကကုဒ္ေတြထည့္ေပးလုိက္ပါ:

<b:widget id='PopularPosts2' 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/AVvXsEj-oOcZjkJA0q0fJhJddBnWnfAHnYIMbOTvNa5MGEdAvWghuGnFiT4bm6bWDGNsUaRSBUsl4__0JXleeJzuL-ac-BWk0XhTWQ9m0Eab8QgTq4-_NG83eAeL-uOlJZoYwSAdBlGcSGetVOBF/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.

8. Preview နဲ႕ျပန္စစ္ၾကည့္လိုက္ပါ အိုေကတာနဲ႕ Save the Template.

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

Posted via Blogaway