post author, date, labels and comments ေတြကို ပုံေလးေတြနဲ႕ အလွဆင္မယ္

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

(1)-    ဘေလာ့ကာ၀င္ပါ  Dashboard > Template> Edit HTML  အစဥ္လုိက္သြားလိုက္ပါ။
(3)-    Ctrl + F  အကူညီျဖင့္ ေအာက္ကကုဒ္ကို ရွာလိုက္ပါ။

<div class='post-header-line-1'>

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

    <div class='post-header'>

(4. )  ေတြ႕ျပီဆိုတာနဲ႕ ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို အေပၚကေန ထည့္ေပးလိုက္ပါ..

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHv1OC90SQ_QcLX19qO7ka8V275WSOMd3eC6SvWtMeN520_WLfVdRicDqKmULzsb9IQKtohrvycygu4ryVPYjPdrG3cjpwrK9g1a970rjngi0J4IvYSiIllE7KgqokjhlPvCRksPLkxXE0/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmfANo4hb9Nk4XqMUPG9te6Zg9-EdaLbUVyH-ToiPy1TjwBwxUDURh18OlSvikLzKbE-Ct0pwoqkjXE8ivmCOrA7FTNQWiKgIlGSNJcjdBt_cpGNJ9kRSjjaMBw89AjIGjN1dqSQEI7EgP/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxw86YBHlDnsxx-FsVbJCuoXho0qQT16aPZGgdvZYFjy2kPhnQaBIqHbAVxPPUZ7QzJDQS_k9NLVNOorrdDuhszZ4jHnAimUgHvvscm1EyCXQ8yoeOAEoA3vxgc65owQJ5-aO9-VSXXvXz/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho2XnSSWRsKnW_vS3FCDRZXIJC4fguHYlYnxhQIZ-bLdmk0Kl_Qgp5CorjqkG_raNrQlU6p9N5Cpy8lKVeA7n8exRrLuMRuo3BklKKqHFWPVFklw7yeiL6KfoBSsBewVNhmPM5Mh1C8Z6c/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

ကာလာနဲ႕ျပထားတာေလးေတြကေတာ့......

Red (Author)

Green (Date)

Blue (Labels)

Pink (Comment bubble)

မိမိတို႕ စိတ္ၾကိဳက္ ပုံရဲ႕ လင့္ေတြကို ဖန္တီးေျပာင္းးလည္း နိဳင္ပါတယ္...

(5.)  Save template..လုပ္လို႕ ရပါျပီေနာ္....

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

Posted in: Social Widget