ဘေလာက္လုပ္ပုံအဆင့္ဆင့္ အပုိင္း(၁)

ကၽြန္ေတာ္ ကုိညီလင္းဆက္ဆီကေန သိလာတာေလးကုိ ေလ့လာသူမ်ားအေနႏွင့္ အက်ိဳးရွိမယ္ထင္လုိ႔ ပုိ႔စ္အျဖစ္တင္လုိက္ပါတယ္ ..
သာမန္ ဘေလာ႔ဂ္တစ္ခု တည္ေဆာက္ျခင္း

အဆင္႔ (၁)
Create Google Account
ဘေလာ႔ဂ္တစ္ခု တည္ေဆာက္ရန္အတြက္ သင္႔ထံတြင္ Google Account သို႔မဟုတ္ Gmail Account တစ္ခု ရွိရန္ လိုအပ္ပါသည္။ Google Account ကို ဒီေနရာမွာ ရယူႏိုင္သည္။

အဆင္႔ (၂)
First Step to Blog
www.blogger.com ကိုသြားပါ။ သင္၏ Google Account ႏွင္႔ စကားဝွက္ကို ထည္႔သြင္းပါ။




အဆင္႔ (၃)
Name Your Blog
သင္၏ ဘေလာ႔ဂ္အတြက္ နာမည္ (Blog Title)၊ လိပ္စာ (Blog Address) စသည္တို႔ကို ထည္႔သြင္းပါ။ ဘေလာ႔ဂ္ နာမည္မွာ ထိုဘေလာ႔ဂ္ကို ကိုယ္စားျပဳေသာ နာမည္ျဖစ္လွ်င္ ပိုေကာင္းပါသည္။ လိပ္စာကိုေတာ႔ အရွည္ႀကီး ေပးမည္႔အစား ခပ္တိုတိုေပးျခင္းက ပိုၿပီး အဆင္ေျပေစပါသည္။ (ထိုအရာမ်ားမွာ အခ်ိန္မေရြး ကိုယ္ႏွစ္သက္သလို ေျပာင္းလဲႏိုင္သည္ကို ေနာက္ပိုင္း သက္ဆိုင္ရာ အခန္းတြင္ ရွင္းျပသြားပါမည္)

သင္႔ဘေလာ႔ဂ္ လိပ္စာကို ေပးၿပီးပါက အဆိုပါ လိပ္စာမွာ အသံုးျပဳ၍ ရႏိုင္မရႏိုင္ကို အနီေရာင္ျဖင္႔ ျပထားေသာ Check Availability ဆိုသည္ကို ႏွိပ္ၿပီး စစ္ေဆးႏိုင္ပါသည္။ ထို႔ေနာက္ အျပာကြင္းျပထားေသာ ေနရာတြင္ အလိုအေလ်ာက္ ေပၚလာေသာ စာလံုးမ်ားကို မလြဲေအာင္ ျပန္ရိုက္ေပးရပါမည္။ အားလံုးၿပီးဆံုးလွ်င္ Continue ကိုႏွိပ္ရပါမည္။

အဆင္႔ (၄)
Choose Template
ထိုအဆင္႔တြင္ ကိုယ္႔ဘေလာ႔ဂ္၏ အသြင္အျပင္ ပံုသ႑ာန္ Template ကိုေရြးခ်ယ္ေပးရမည္ ျဖစ္သည္။ ကိုယ္ႏွစ္သက္ေသာ ေနာက္ခံအေရာင္၊ စာသား အထားအသို စသည္တို႔ႏွင္႔ ကိုက္ညီေသာ Template တစ္ခုကို ေရြးခ်ယ္ၿပီး အနီေရာင္ အဝိုင္းျပထားေသာ ေနရာတြင္ Mark လုပ္ေပးရမည္ ျဖစ္သည္။ ေရြးခ်ယ္ၿပီးလွ်င္ Continue ကိုႏွိပ္ပါ။ ထိုအခါ ေအာက္ေဖာ္ျပပါ ပံုတြင္ ေတြ႔ရသကဲ႔သို႔ သင္႔တြင္ ဘေလာ႔ဂ္တစ္ခု ဖန္တီးၿပီးျဖစ္ေၾကာင္း အသိေပးမည္ ျဖစ္သည္။ စာစတင္ ရိုက္သြင္းရန္အတြက္ ေအာက္ေျခမွ Start Posting ဆိုသည္ကို ႏွိပ္ေပးရန္ လိုအပ္ပါသည္။


အမွန္စစ္စစ္ အဆင္႔ေလးတြင္ ေယဘုယ် ဘေလာ႔ဂ္တစ္ခု ဖန္တီးျခင္းလုပ္ငန္း ၿပီးဆံုးၿပီျဖစ္သည္။ သို႔ရာတြင္ အဆိုပါ Start Posting ကိုႏွိပ္လိုက္ပါက ေအာက္ပါ စာမ်က္ႏွာကို ျမင္ရမည္ ျဖစ္သည္။ တဆက္တည္း ျမင္သာထင္ရွားေစရန္ ပထမဆံုး စာမူတစ္ခုကို စမ္းသပ္ တင္ၾကည္႔ပါ။ စာရုိက္တဲ့ေနရာမွာ Edit Html အကြက္ထဲမွာပဲ စာကုိရုိက္ရမွာပါ.. compose မွာ စာမရုိက္ရပါဘူး။ ေတာ္ေတာ္မ်ားမ်ားဟာ compose မွာပဲ ရုိက္ၾကတာပါ။ ပုိ႔စ္မေပၚဘူးလားလုိ႔ေမးစရာရွိပါတယ္။ ေပၚပါတယ္ ဒါေပမယ့္ ကုတ္ေတြထည့္ခ်င္တယ္ဆုိတာမ်ိဳး တစ္ခုခု html ကုတ္တစ္ခုခု တင္မယ္ဆုိရင္ အဲ့ဒီ့မွာ ကုတ္ေတြမ်ားေတာ့ ရႈပ္ကုန္ေရာေပါ့။ compose ဆုိတာ တစ္ကယ္ေတာ့ ကာလာထည့္မွာတုိ႔ကို စာလုံးညွိတာတုိ႔ကုိ လုပ္ေပးပါတယ္။ ဆုိလုိတာက ပုိ႔စ္ေတြကုိ ဘယ္ညွိလား၊ ညာညွိလား၊ အလယ္ညွိလား၊ ႏွစ္ဖက္ညီလား၊ ဒါမ်ိဳးေတြကို ညွိေပးတာကုိ အဓိကထားလုပ္ပါတယ္။ အဲ့ဒီ့ေတာ့ ကၽြန္ေတာ္တုိ႔ ပုိ႔စ္ေတြကို Edit Html နဲ႔ပဲေရးၾကရေအာင္ဗ်ာ။ ကုတ္ေတြေရာမေရာသိခ်င္ရင္ ကၽြန္ေတာ္တုိ႔ compose နဲ႔ရုိက္ၿပီးရင္ html နဲ႔ျပန္ၾကည့္ပါ ကုတ္ေတြထြက္က်လာပါလိမ့္မယ္။ html နဲ႔ရုိက္ရင္ေတာ့ ဘာကုတ္မွ ေပၚမွာမဟုတ္ပါဘူး။ အဲ စာအားလုံးရုိက္ၿပီးၿပီဆုိရင္ေတာ့ publish post ဆုိတာေလးကုိ ႏွိပ္ဖို႔မေမ့ပါနဲ႔ဗ်ာ။ ဘာျဖစ္လုိ႔လဲဆုိရင္ Publish ကုိမႏွိပ္ရင္ စာဖတ္သူ တင္တဲ့ပုိ႔စ္ကုိ သူက ေပၚေပးမွာမဟုတ္ပါဘူး။

ညီေနမင္း(နည္းပညာ)

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

Read More

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/AVvXsEh5EX0h7PV_5HaY196MvW1CcKeh9Skaa7sVkkkAK_jcd80lR3bdd4Hq15DlG7tGUN9JQF1JzIhff56cYx4z_7HJWr_cWw-fGp1DqPQjxUTUhvxU7v-MboTf3IOVqYlvVvJ2TJOEEQlgL5lR/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/AVvXsEhP49lP1IAX9pAOAXsSCE63EnG1NMMj8B07yzAjyejp2I2GHz6Meu7BQ0WLjOyDJmcPe4THg-KGpW6bJobCG7a7ETI-PHSSCT-dIjQyYa_aS-Gd9Crx9PeOjtH7Y3H9wth9HCp3bZEQfYvq/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5yiNFUthBxHPgbFkRaLhOeJVIIjIqNr_n5417CYy2px2XHeAncTesfq6LRUkFEGjYM1M2b2xSRHj2hmWsUakZYyIOVFc9TnnZUj3tUWovQt1u7rDBLmObD4YXjdU7SuxPq41X4_vl5SZT/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/AVvXsEjq-K7t62S7Bjb05FbElZR2K8dzXYcWBvewIUJ0AvjYpntFlXXRhw-kGuB2GtASNNO4de6zQVQi7APbSurEIwzVr2y9gzNhPLSUSBo4GjdPjNgp4wgHtnxxRbhsEampqtyzgEnDmpszgB2K/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

ဘေလာ့မွာrelated posts widget ေလးထည့္ၾကမယ္.

 

က်ေနာ့္ ဘေလာ့မွာလည္း တင္မထားရေသးတာနဲ႔ ဒီ related posts widget ေလးကို တင္အံုးမယ္လို႔ စိတ္ကူးလိုက္တာပါ။ အရင္ကေတာ့ thumbnails နဲ႔ ျပတဲ့ related post widgetကိုသုံးၾကပါတယ္..ဒါေလးကေတာ့အဆန္းေလးေပါ့ သုံးၾကည့္ပါေနာ္..

အဆင့္(၁)။ အေနနဲ႔ Relatedposts ဆိုတဲ့ .js ဖိုင္ေလးကို အရင္ download ယူထားလိုက္ပါ။ ၿပီးရင္ ျပန္တင္ေပးရမွာ ျဖစ္ပါတယ္။
အဆင့္(၂)။ က်ေနာ္တို႔ ထံုးစံအတိုင္း Layout ထဲက Edit HTML ကို သြားရပါမယ္။
အဆင့္(၃)။ backup ေလး လုပ္ဖို႔ မေမ႔နဲ႔ေပါ့ဗ်ာ။
အဆင့္(၄)။ ၿပီးရင္ html ကို၀င္လိုက္ပါ
အဆင့္(၅)။ ၿပီးရင္ေတာ့ </head> ဆိုတာေလးကို ရွာလိုက္ပါ။


အဆင့္(၆)။ ေအာက္က code ေတြကို အဲဒီ </head> ရဲ႕အေပၚ မွာ ထည့္ေပးလိုက္ပါ။

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://img38.imagefra.me/img/img38/6/4/29/thetnaing/f_i29o2gm_44959d9.gif) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://ေဒါင္းလုပ္ယူခဲ့တဲ့ relatedposts.js' type='text/javascript'/><!--RelatedPostsStops-->

အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။

အဆင့္(၇)။ <data:post.body/> ဆိုတာေလးကို ရွာလိုက္ပါ။
အဆင့္(၈)။ ေအာက္က code ေတြကို <data:post.body/> ဆိုတာရဲ႕ ေအာက္မွာ ထည့္ေပးလိုက္ပါ။

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။

အဆင့္(၉)။ အားလံုးၿပီးသြားၿပီ ဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လုပ္လိုက္ပါ။ ဒါဆို related post widget ထည့္တာ ၿပီးသြားပါၿပီ။ ပို႔စ္ title သို႔မဟုတ္ readmore ဆိုတာေတြ ႏွိပ္ၾကည့္မွ related post က ေပၚမွာျဖစ္ပါတယ္။တကူးတက ဖတ္ေပးတာ ေက်းဇူးပဲဗ်ာ....

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

Read More

Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ

ဘေလာ့ Template တစ္ခုလံုးကိုပဲျဖစ္ျဖစ္ ဘေလာ့ Template ထဲက Widget တစ္ခုခ်င္းစီကိုပဲျဖစ္ျဖစ္
ကိုယ္ႏွစ္သက္သလို ေဘာင္ခပ္တဲ့ နည္းပညာေလးတစ္ခုကို မွ်ေ၀ေပးခ်င္ပါတယ္ ..
အရင္ဆံုး Template ႀကီး တစ္ခုလံုးကို ေဘာင္ခပ္တဲ့နည္းကို မွ်ေ၀ေပးပါ့မယ္
ဒီနည္းရဲ႕ နမူနာ ( Demo ) ကို ၾကည့္ခ်င္တယ္ဆိုရင္ေတာ့ ကၽြန္ေတာ္အခုသံုးထားတဲ့ Template ႀကီးတစ္ခုလံုးရဲ႕ ေဘးပတ္ပတ္လည္မွာခပ္ထားတဲ့ ေဘာင္ကိုသာ ၾကည့္လိုက္ၾကပါလို႔ ..


ကဲ .. အရင္ဆံုး Blogger ကို Lon in ၀င္လိုက္ပါ ..
ၿပီးရင္ Template က ေန Edit HTML ကို ၀င္ပါ
HTML ကုဒ္ေတြထဲက ]]></b:skin>  ကို လိုက္ရွာပါ ...
ေတြ႕ၿပီဆိုရင္ အဲဒီ ]]></b:skin> ရဲ႕ အေပၚမွာ ေအာက္ကကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးလိုက္ပါ

#mblwrap {       background: #Ffffff;       width: 960px;       margin: 10px auto 5px auto;        padding: 0;       position: relative;       border-right: 15px solid #333;       border-left: 15px solid #333;       border-top: 10px solid #333;       border-bottom: 15px solid #333;       -moz-border-radius:10px;       -webkit-border-radius:10px;       border-radius:10px;       box-shadow: #333 0px 1px 3px;     }

 


အဲဒီကုဒ္ေတြထဲက ကၽြန္ေတာ္ အနီေရာင္နဲ႔ ျပထားတဲ့ေနရာမွာ ကိုယ္ႏွစ္သက္တဲ့ အေရာင္ကုဒ္ကို ေျပာင္းလဲေပးႏိုင္သလို Border ရဲ႕ အထူအပါးကိုလည္း 15px, 15px, 10px စတဲ့ေနရာေတြမွာ လိုက္ၿပီး ခ်ိန္ၫွိေပးႏိုင္ပါေသးတယ္

ၿပီးရင္ <body> ကို ထပ္ရွာပါ ..
ေတြ႕ၿပီဆိုရင္ အဲဒီ <body> ရဲ႕ ေအာက္မွာ

<div id='mblwrap'>

အဲဒီကုဒ္ကို ကူးထည့္လိုက္ပါ

ၿပီးရင္ </body> ကို ထပ္ရွာပါ ..
ေတြ႕ၿပီဆိုရင္ အဲဒီ </body> ရဲ႕ အေပၚမွာ</div> ဆိုတဲ့ကုဒ္ကို ထည့္ေပးလိုက္ပါ
အေပၚမွာထည့္တာ ေအာက္မွာထည့္တာေတြကို ေသခ်ာ ဂ႐ုစိုက္ေပးေစခ်င္ပါတယ္
Preview Template ကေန ဘေလာ့ကို ၾကည့္လို႔ အဆင္ေျပသြားၿပီဆိုရင္ေတာ့
Save Template ကို ႏွိပ္လိုက္႐ံုပါပဲ ...
ဒါဆိုရင္ေတာ့ Template ႀကီးတစ္ခုလံုးကို ေဘာင္ခပ္လို႔ ၿပီးသြားပါၿပီ ..

ေနာက္တစ္နည္းကေတာ့ Template ထဲမွာ ရွိတဲ့ Widget တစ္ခုခ်င္းစီကို ေဘာင္ခပ္မယ္ေပါ့
အရင္ဆံုး ကိုယ္ေဘာင္ခပ္ခ်င္တဲ့ Widget ID ကို သိေအာင္လုပ္ထားပါ ..
ဥပမာ .. Post ရဲ႕ Widget ID ကို သိခ်င္တယ္ေပါ့ .. Layout ကေန အဲဒီ Post ရဲ႕ ညာဖက္ေအာက္ေဒါင့္က Edit ကိုႏွိပ္လိုက္ရင္ ပြင့္လာတဲ့ ၀င္းဒိုးအေသးေလးရဲက Address bar ထဲမွာ Widget ID ကို ရွာလို႔ရပါတယ္ .. Template ထဲမွာ ရွာတတ္ရင္လည္း ရပါတယ္ ..
မ်ားေသာအားျဖင့္ေတာ့ Post ရဲ႕ Widget ID က Blog1 ျဖစ္ေနေလ့ရွိပါတယ္ ..
ကဲ .. အဲဒီ Post ေတြကို ေဘာင္ခပ္ေတာ့မယ္ေပါ့ဗ်ာ ..
Template က ေန Edit HTML ကို သြားလိုက္မယ္ေပါ့

HTML ကုဒ္ေတြထဲက ]]></b:skin> ကို လိုက္ရွာပါ ..
ေတြ႕ၿပီဆိုရင္ သူ႕ရဲ႕ အေပၚမွာ ေအာက္ကကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးလိုက္ပါ

#YourWidgetID { padding: 5px; border: 1px solid #ff0000; }

ကုဒ္ေတြထဲက #ff0000 ကေတာ့ ကိုယ္ ေဘာင္အျဖစ္ခပ္မယ့္ အေရာင္ေပါ့ .. 
ကုဒ္ေတြထဲမွာ အနီေရာင္နဲ႔ျပထားတဲ့ YourWidgetID ဆိုတဲ့ေနရာမွာ ကိုယ္ ေဘာင္ခပ္ခ်င္တဲ့ Widget ရဲ႕ ID ကို ထည့္ေပးရမွာပါ
ဥပမာ .. ကၽြန္ေတာ္က Post ေတြကို ေဘာင္ခပ္ခ်င္တယ္ဆိုပါေတာ့ Post ရဲ႕ ID က Blog1 ဆိုပါေတာ့
ကုဒ္က ဒီလိုျဖစ္သြားမယ္

#Blog1 {
padding: 5px;
border: 1px solid #ff0000;
}

ၿပီးရင္ေတာ့ Save Template ေပါ့ ...
ကဲ .. အဆင္ေျပပါေစဗ်ာ

နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး

Read More

Popular Post Style လွလွေလးနဲ႕ အလွဆင္မယ္...

 

ကဲ လာျပီဗ်ိဳ႕..... ဘေလာ့တစ္ခုရဲ႕  ေပၚပ်ဴလာ ပို႕ေလးေတြကို  လွလွပပနဲ႕ အလွဆင္ ထားျခင္သူေတြအတြက္  နည္းလမ္းေလး လာပါျပီေနာ္..ေအာက္မွာ နည္းလမ္းကိုေသျခာ ေလ့လာ ျပီးအသုံးျပဳနိင္ပါျပီ...

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

]]></b:skin>  ကိုရွာလိုက္ပါ ေတြ႕တာနဲ႕  သူ႕အေပၚဘက္ကပ္လွ်က္  ေပးထားေသာကုဒ္မ်ားကို ထည့္လိုက္ပါ။

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #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:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

အိုေခ........
မိမိတို႕ တက္ပလက္ကို ေဆ့လုိက္ပါေနာ္.... ေနာက္ထပ္ က်န္တာကေတာ့...
 မိမိတို႕ဘေလာ့ကာကို၀င္လိုက္ပါ......

Blogger  Layout  ကို၀င္ပါ.....
Add a Gadget  ကိုကလစ္ပါ....
Popular  Post  ကိုကလစ္ပါ....

 ေရြးခ်ယ္ရမွာျဖစ္ပါတယ္.. "display up to 9 posts"  and uncheck image thumbnail and snippet

 ဒါဆို မိမိတို႕လိုျခင္ေသာအေပၚကပုံစံအတိုင္းး လွပေသာ  ေပၚပ်ဴလာပို႕စ္  ေလးကိုရပါျပီ.....

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

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

Read More

ဘေလာ့မွာ တင္တဲံပုံေလးေတြ ယိမ္းႏြဲ႕ကျပေနသလို လုပ္ၾကမယ္...

 

အားလုံးမဂၤလာပါ..... ဘေလာ့ခရီးသည္ မိတ္ေဆြမ်ားအား  သည္ေန႕ လက္ေဆာင္ေလးတစ္ခုေပးပါရေစ.

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

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

]]></b:skin>   သည္ကုဒ္ကိုရွာပါ ေတြ႕တာနဲ႕ သူ႕အေပၚကပ္လွ်က္  ေပးထားေသာ ေအာက္ကကုဒ္မ်ားကို ထည့္ေပးပါ

.swing { transform-origin:50% 0; -moz-transform-origin:50% 0; -webkit-transform-origin:50% 0; animation:swinging 10s ease-in-out 0s infinite; -moz-animation:swinging 10s ease-in-out 0s infinite; -webkit-animation:swinging 10s ease-in-out 0s infinite; } @-webkit-keyframes swinging { 0% { -webkit-transform: rotate(0);} 5% {-webkit-transform: rotate(10deg);} 10% {-webkit-transform: rotate(-9deg);} 15% {-webkit-transform: rotate(8deg);} 20% {-webkit-transform: rotate(-7deg);} 25% {-webkit-transform: rotate(6deg);} 30% {-webkit-transform: rotate(-5deg);} 35% {-webkit-transform: rotate(4deg);} 40% {-webkit-transform: rotate(-3deg);} 45% {-webkit-transform: rotate(2deg);} 50% {-webkit-transform: rotate(0);} 100% {-webkit-transform: rotate(0);} } @-moz-keyframes swinging { 0% {-moz-transform: rotate(0);} 5% {-moz-transform: rotate(10deg);} 10% {-moz-transform: rotate(-9deg);} 15% {-moz-transform: rotate(8deg);} 20% {-moz-transform: rotate(-7deg);} 25% {-moz-transform: rotate(6deg);} 30% {-moz-transform: rotate(-5deg);} 35% {-moz-transform: rotate(4deg);} 40% {-moz-transform: rotate(-3deg);} 45% {-moz-transform: rotate(2deg);} 50% {-moz-transform: rotate(0);} 100% {-moz-transform: rotate(0);} } @keyframes swinging { 0% {transform: rotate(0);} 5% {transform: rotate(10deg);} 10% {transform: rotate(-9deg);} 15% {transform: rotate(8deg);} 20% {transform: rotate(-7deg);} 25% {transform: rotate(6deg);} 30% {transform: rotate(-5deg);} 35% {transform: rotate(4deg);} 40% {transform: rotate(-3deg);} 45% {transform: rotate(2deg);} 50% {transform: rotate(0);} 100% {transform: rotate(0);} }

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

<img alt="post-image" class="swing" src="PASTE YOUR IMAGE URL HERE"

"style="animation-delay: 0.8s;-webkit-animation-delay: 0.8s;-moz-animation-delay: 

0.8s;animation-delay: 0.8s;"/>

 အဲကုဒ္ေလးကို သုံးရမွာပါ သုံးနည္းကေတာ့ မိမိတို႕ ပို႕စ္တင္တဲ့ ခါ  ပို႕ဇယားထိပ္မွာ  Compose  နဲ႕

HTML  ဆိုတဲ့စာသားေလးေတြ႕မွာပါ..  အဲႏွစ္ခုက  HTML ဆိုတာကိုကလစ္ပါ ကုဒ္တခ်ိဳ႕ က်လာတာေတြ႕မယ္..ဖ်က္လိုက္ပါ... အဲေနာက္  အေပၚက  ကုဒ္ကို ေကာ္ပီ ယူထည့္လိုက္ပါ....

PAST  YOUR  IMAGE  URL  HERE  ဆိုတဲ့ေနရာမွာ မိမိတို႕ ထည့္လိုေသာ ပုံရဲ႕လင့္ကိုထည့္ေပးလိုက္ပါ.... ဒါဆို  အိုေကပါျပီ...ျပီးတာနဲ႕  Compose  ျပန္ကလစ္ပါ  ပုံေလးကိုေတြ႕ေနရပါျပီ... သည္ထဲမွာေတာ့ ယိမ္းးမေနပါဘူးေနာ္  Publish  လုပ္ျပီးမိမိဘေလာ့ေပၚေရာက္မွသာလွ်င္  ယိမ္းႏြဲ႕ ကျပေနမွာပါဗ်ာ..... အဆင္ေျပပါေစ....

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

Read More

ဘေလာ့အတြက္ နာရီအလန္းစားမ်ားစြာ...

 သည္ေန႕ တင္မယ့္အေၾကာင္းရာေလးေကတာ့ ဘေလာ့ကာသမားမ်ားအတြက္ အလွဆင္နိဳင္မယ့္
မရွိမျဖစ္ လိုအပ္ေသာ နာရီ... အခ်ိန္နာရီ  အတြက္ပါ.. နာရီ အလန္းစားေတြကို အရင္ကလဲ တင္ဘူးပါတယ္... သည္ဆစ္ခါက ပိုျပီး စိတ္တိုင္းၾက ရွာေဖြ နိဳင္တဲ့ ဆိုဒ္ေလးတစ္ခု ဆီကို ေခၚေဆာင္သြားမယ္ေနာ္...
လိုျခင္သူမ်ားကေတာ့  သည္မွာ   သြားလုိက္ၾကပါေနာ္....

မိမိတို႕ လိုျခင္တဲ့ နာရီ ဒီဇိုင္းကို ရွာလုိက္ပါ page 1-2-3-4-5-6---- စသျဖင့္ အမ်ားၾကီး

စာမ်က္ႏွာေတြ ရွိပါတယ္.. စိတ္ၾကိဳက္ ရွာပါ ေတြ႕ျပီဆိုတာနဲ႕ HTML CODE  ဆိုတာကိ္ုကလစ္လိုက္ပါ။

သူ႕ရဲ႕ ကုဒ္ေတြ ေအာ္တိုက်လာမယ္.. ေကာ္ပီယူျပီး မိမိဘေလာ့ကို ထည့္ပါ။

ထည့္နည္းကေတာ့..

(၁) ဘေလာ့ကာ၀င္လုိက္ပါ

(၂) ဘေလာ့ကာ LAYOUT ကို၀င္ပါ

(၃) Add a gadget ကို၀င္ပါ

(၄) Html/Javascript ကိုကလစ္ပါ...

က်လာတဲ့ ေဘာက္ထဲမွာ ေစာေစာက ယူလာတဲ့ ေကာ္ပီ ကုဒ္ေတြကို past ခ်လိုက္ျပီး save လိုက္ပါ။

အဆင္ေျပပါျပီေနာ္... ကဲ စမ္းၾကည့္လုိက္ပါ။

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ 

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

Read More