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

 

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

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/AVvXsEjtplwEbwdgtCaSJk0x_Xt2-Ur16ZkI6USlwW8eeBxkDOE0SOExMEqWbDp5fAe6XGzHGLd9_Dl8SA8pIuc8Qxy7Pi82E4mtPpnmuxEre58i1h1BZz7RkUzH3NTMmHj8L8eHUdrAkbzDkUfN/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/AVvXsEh1Y50_p1GToNf-Cod8S95sU-DKYiTtMy2y3WymV_mCAPy2aUH94dw-YVTdULmAu1KRoKD8Ei0fqWE8yKxKQg3ItY2-q7ikbJKEKLEwgWOC1FApqFK5DkNSRXV0XIjdXu30ZLRsfJeaI-a2/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6tvtTmslsBea9sj0tnP_4shPJ-o0oK21R3KRLFaoyopJzu5zH_iPzHOl2jM4jQ4-FMvrSParRpnPE33RfF-YPHV0h9tGrsjk6FCLmh8XlWeXzldj587pHKE2WduW02ISjqjxhnlZG5Uxd/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/AVvXsEhBVOYyQkOLNwNNKkCLDwimEojoUZtY9LT79zZvPuL7IrXz3WYDU7zqUxcQi3wJ_njgSAPdIqF2pKqHTojNJJCOTqd7NkDfm33PQ2z0FWN9Ydv6_PnvA6EShQp0sZ7u0lUj3KCQ28NO0zbh/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.

Read More

Older Post/Newer Postေနရာမွာ ပို႕title နဲ႕အစားထိုးၾကည့္မယ္

1. Log in  Blogger,ေနာက္ Design (or)Layout> Page Elements
2. ဆက္ျပီးကလစ္ပါ "Add A Gadget" 
3. "HTML/JavaScript" ကိုကလစ္ျပီးက်လာတဲ့ ေဘာက္ေလးထဲမွာ ေအာက္ကကုဒ္ေတြထည့္လိုက္ပါ။

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

ထည့္နည္းပုံေလးၾကည့္လိုက္ပါေနာ္...

4. ျပီးတာနဲ႕ save လို႕ရပါျပီ  အသစ္မွာဆိုအေပၚကေန save arrandement ဆိုတာကို ကလစ္ေဆ့လိုက္ပါး အိုေကပါျပီေနာ္...
ေအာင္ေအာင္(မကစ)
www.ledimyethar.com
 www.depelyin.co.cc
www.aungkyaw.com

Read More

ပို႕စ္တစ္ခုနဲ႕တစ္ခု ေနာက္ခံကာလာ မတူေအာင္တင္နည္....ေနာက္ခံ ပုံထည့္တင္နည္း

ပို႕စ္ေနာက္ခံကာလာနဲ႕ တစ္ခုနဲ႕တစ္ခုမတူေအာင္ တင္နည္း။

မိမိတို႕ဘေလာ့ပို႕စ္မွာ  Edit HTML, ကိုကလစ္ျပီးတင္ရပါမယ္...
အဲမွာ HTML ကလစ္တာနဲ႕ ကုဒ္ေလးက်လာမယ္ ဖ်က္လိုက္ပါ... ေအာက္ကေပးထားတဲ့ကုဒ္ကို ေကာ္ပီယူထည့္ပါ...

<div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
သည္ေနရာမွာမွ မိမိတို႕ရဲ႕ ပို႕စာသားမ်ားကိုထည့္လိုက္ပါ။

</div>

• အနီေရာင္စာသားေတြေနကို မိမိတို႕ ပို႕စ္ရဲ႕ ေရွ႕ဆုံးကေန ထားေပးလိုက္ပါ.
• အျပာေရာင္နဲ႕စာသား   </div>  ကိုေတာ့ မိမိတိုပို႕စ္ရဲ႕ အဆုံးေနာက္ကေန ထည့္ေပးပါ.
• အစိမ္းေရာင္ စာသား #DCC368 ကေတာ့ ကာလာကုဒ္ပါလိုအပ္သလို ခ်ိန္းနိဳင္ပါတယ္.
• အနီေရာင္နဲ႕  အျပာေလးၾကားမွာဘဲ မိမိတင္မဲ့ပို႕စ္ကိုထားရပါမယ္....
• ေအာက္မွာ ပုံေလးအတိုင္းၾကည့္လိုက္ပါ... အဆင္ေျပပါျပီေနာ္...

ဒါကေတာ့ မိမိတို႕ပို႕စ္ေတြရဲ႕ေနာက္ခံပုံထည့္နည္းေလးပါ။

ဒါကလဲ အထက္ပါနည္းအတိုင္း ထည့္ရမွာပါ ကုဒ္ေလးဘဲ အနည္းငယ္ကြာဟ သြားတာပါ..
ေအာက္ကကုဒ္ကို ယူထည့္လိုက္ပါ။

<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
သည္ေနရာေလးမွာ မိမိတင္မဲ့ပို႕စ္ထည့္ပါ

</div>

• အစိမ္းေရာင္ျပထားတဲ့ IMAGE-URL-HERE    ေနရာမွာ မိမိတို႕ ႏွစ္သက္ရာပုံရဲ႕ လင့္ကိုထည့္ေပးပါ..
• အနီေရာင္စာေၾကာင္းကိုေတာ့ မိမိပို႕စ္ရဲ႕ ေရွ႕ဆုံးကေန ထားပါ.
• အျပာေရာင္ကေတာ့ ေနာက္ဆုံးကထားရမဲ့ကုဒ္ပါ.
• အနီနဲ႕႕အျပာၾကားမွာမွ မိမိတို႕ရဲ႕ ပို႕စ္စာသားမ်ားကို ထည့္ရမွာပါ
• ဒါဆို ျပီးပါျပီေနာ္... Update (or) publish post ကိုကလစ္ျပီးတင္လိုက္ပါေတာ့ဗ်ာ..

ေအာင္ေအာင္(မကစ)
http://aungsanmks.blogspot.com/

Read More

How to Add A Comment Count Bubble To Blogger Post Titles

Step 1.

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

Step 2. (CTRL + F) အကူညီျဖင့္ ေအာက္ကကုဒ္ကိုရွာလုိက္ပါ

]]></b:skin>

Step 3. Place this code just above ]]></b:skin>:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbQ0CRGuK4X78n9TCO4fZnAzKHBpeS9-Z_MQfzmeBPkW48Yd_YOj3J_LuEg1vEFWdlxhdWXv1zhyphenhyphenaPYGEoo0O2RF-7HEs0kDp5yFB7090P6x0nmZ1Jh6ptwX1NUOzivorwSPRmCeohG9ID/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

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

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Note:   အေပၚကကုဒ္မေတြ႔ပါက ေအာက္ပါကုဒ္ကိုရွာပါ။.

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>

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

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

Step 6. ဆက္ျပီး  Preview  ျဖင့္ၾကည့္လိုက္ပါ ok,ျပီဆိုတာနဲ႕  Save the Template. လုပ္န္ိဳင္ပါတယ္။

ေရြးခ်ယ္နိဳင္ရန္ ပုံေလးမ်ား (မိမိႏွစ္သက္ရာပုံရဲ႕လင့္ကို step 3မွာ ရွိတဲ့ အနီေရာင္ လင့္ေနရာမွာ အစားထိုးေပးနိဳင္ပါတယ္.)

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

Read More