kp3 Marquee Post title test: 01 October 2009

kp3နည္းပညာ၊၅၉၊မိမိရဲ့ဘေလာ့မွာComments ေတြကိုနံပါတ္အစဥ္လိုက္ထည့္ခ်င္ရင္

Posted by KP-3မိသားစု | Labels: Blogger Hack

အခုဟာေလးကေတာ့မိမိရဲ့Commentsေတြကိုနံပါတ္အစဥ္လိုက္ထည့္နည္းေလးပါ။
ဒါလည္းဘဲရိုးရိုးရွင္းရွင္း Code ေလးတစ္ခုပါဘဲ။

ေအာက္မွာပံုနဲ႕တကြ Code

၁။click Layout
၂။click edit HTML
၃။Expand Widget Template’ကိုမွန္ျခစ္ေပးပါ။

ေအာက္ကCodeကိုရွာပါ၊

ေတြ႕ျပီဆိုရင္ေအာက္က Code နဲ႕အစားထိုးေပးလိုက္ပါ။

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

ေနာက္တစ္ခုရိွေသးတယ္ေနာ္ ေအာက္ကCodeကိုထပ္ရွာပါ

]]></b:skin>:

ေတြ႕ၿပီဆိုရင္ေအာက္မွာ ေအာက္ကCodeေတြကိုထည့္လိုက္ပါ၊

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

၄။Save Template button.ႏိုပ္ပါ ၿပီးပါၿပီ။။။
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

kp3နည္းပညာ၊၅၉၊

Posted by KP-3မိသားစု | Labels: Blogger Tips, Blogger Widget

kp3နည္းပညာ၊၅၈၊မိမိရဲ့ဘေလာ့မွာကိုယ္ပိုင္ Menu တည္ေဆာက္ခ်င္ရင္

Posted by KP-3မိသားစု | Labels: Blogger Widget, MENU

ဒါေလးကေတာ့ကိုယ္ပိုင္ Menu တည္ေဆာက္နည္းေလးေပါ့ေနာ္။
ရိုးရိုးရွင္းရွင္း Code ေလးတစ္ခုပါဘဲ။
ေအာက္မွာပံုနဲ႕တကြ Code
ထည့္နည္းေလးကလည္းထံုးစံတိုင္ပါဘဲ
၁။Layout
၂။ Add a Gadget
၃။ HTML/JavaScript

<center><div id="menu">
<ul>
<li><a class="current" href="http://kp3family.blogspot.com">home</a></li>
<li><a href="http://about.com">about as</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://contact.com">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1y457QYK3QNz09SUGJw479d0Td-maMeO3qH84CEuYQIKS7llC40IOR-SoKWhRZ_M2Y7OCPI8xEJWZ-JjSI02DOBGi5RUVIgRSZZvksAipVug-BLBvEG98ox6KhpKJvnE5LiTabZMHrms/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi45jGEtOdkWNyOdZOcIkBUrzzy7aVJgLoCsgCbc0TWo-QiEif2ak6c155nuXaWAQsBo-kzZIadTrZFgXgbugUic_h1ziO9R6Ehnhyth3GHwIuvlD5Yd2mveVLGdXtxPH8yQcEl2eH8l6E/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6o3EqCQ3nWOdeqTvpWJBWgw5xiuqy8D8iElojGLwqKGo8DCIOU0rovfiZBPgDMqJj3hDGQEHg5nkaq9hSWJoGHfA835CZNwK90lzWoTFsioP4FWhphhg54HNnWNOphMmimthHq9AAgmw/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6o3EqCQ3nWOdeqTvpWJBWgw5xiuqy8D8iElojGLwqKGo8DCIOU0rovfiZBPgDMqJj3hDGQEHg5nkaq9hSWJoGHfA835CZNwK90lzWoTFsioP4FWhphhg54HNnWNOphMmimthHq9AAgmw/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6o3EqCQ3nWOdeqTvpWJBWgw5xiuqy8D8iElojGLwqKGo8DCIOU0rovfiZBPgDMqJj3hDGQEHg5nkaq9hSWJoGHfA835CZNwK90lzWoTFsioP4FWhphhg54HNnWNOphMmimthHq9AAgmw/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>

အေပၚကCodeကိုpasteလုပ္ၿပီးရင္
၄။Save နိုပ္လိုက္ပါ။ ၿပီးပါၿပီ။။
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ

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