Myanmar Blogger Helpdesk

Learning, Sharing and Growing Together at Blogging Community!
Showing posts with label Peekaboo. Show all posts
Showing posts with label Peekaboo. Show all posts

Peekaboo Comments ေလးမ်ား လုပ္ၾကမယ္...  

Contributor: ရန္ေအာင္


အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.

ဒီတစ္ခါလက္ဆင္႔ကမ္းေျပာျပခ်င္တာကေတာ႔ Peekaboo Comments ေလးေတြ အေၾကာင္းပါ. ဒီအေၾကာင္းကို ေရးမယ္လုိ႔ အားခဲထားခဲ႔တာ ၾကာပါျပီ. အခုမွပဲ ေရးျဖစ္ေတာ႔တယ္ဗ်ာ.

Peekaboo Comments ဆုိတာ ဘာလဲလုိ႔ သိခ်င္ေနသူမ်ား ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ပုိ႔စ္ေတြထဲက ေကာ္မန္႔ရွိတဲ႔ပုိ႔စ္တစ္ခုခုကို သြားၾကည္႔ျပီး ေကာ္မန္႔ကို Click ေခါက္ၾကည္႔လုိက္ပါ. (Friendly Neighbors လုိ႔ ကၽြန္ေတာ္က နာမည္တစ္မ်ဳိးေပးထားတယ္ဗ်).

ကဲ. ဘာသတိထားမိလဲ.

ေတြ႔ျပီေနာ္.

ပုံမွန္အရဆုိရင္ Comments ဆုိတာကုိ Click ေခါက္လုိက္ရင္ ေနာက္ထပ္ စာမ်က္ႏွာ အသစ္တစ္ခု ပြင္႔လာပါတယ္. အဲဒီ႔မွာပဲ ကၽြန္ေတာ္တုိ႔က Comments ေရးတာတုိ႔၊ ဖတ္တာတုိ႔ကုိ လုပ္ရပါတယ္.

Peekaboo Comments က်ေတာ႔ သူ႔ကို click ေခါက္လုိက္တာနဲ႔ ေရးထားတဲ႔ comments ေလးေတြကုိ same page မွာပဲ ဖတ္လုိ႔ရႏုိင္သလုိ ေရးလုိ႔လည္း ရပါတယ္. အခ်ိန္ကုန္သက္သာသလုိ ေကာ္နက္ရွင္လည္း ျမန္ဆန္သြက္လက္လာေစပါတယ္.

ကဲ. ဒါကုိ ဘယ္လုိလုပ္ရမလဲဆုိေတာ႔ ဒီလုိလုပ္ပါခင္ဗ်ာ.

အဆင္႔ (၈) ဆင္႔နဲ႔ ခြဲျပီး ေျပာျပသြားပါမယ္. တစ္ဆင္႔ခ်င္းကုိ ေသခ်ာဖတ္ျပီး လုပ္ရင္ ၁၅ မိနစ္နဲ႔ ဒီကိစၥ ေအာင္ျမင္ျပီးစီးပါလိမ္႔မယ္. စိတ္ေလာျပီး ဟုိေက်ာ္ဒီေက်ာ္ဖတ္ရင္ေတာ႔ Error ၾကီးနဲ႔ တုိးသြားမွာ ျဖစ္ပါေၾကာင္း….

(၁) မိမိဘေလာ႔ဂ္ထဲကေန Settings> Edit HTML ကိုသြားပါမယ္. Template ကုိ Backup လုပ္ရပါမယ္. ဒါမွ မေတာ္လုိ႔ မွားသြားရင္ အရင္ Template ကုိ restore ျပန္လုပ္လုိ႔ရမွာ ျဖစ္ပါတယ္. ဒီတုိင္း Backup လုပ္ခ်င္ရင္လုပ္. မဟုတ္ရင္ေတာ႔ Template တစ္ခုလုံးကုိ ကူးျပီး Ms Word ထဲမွာ Save လုပ္ထားလုိက္ပါ. အဓိကက Template ကုိ မျပင္ခင္ ကုိယ္႔မွာ Hard Copy ရွိေနဖုိ႔ပါပဲ.

(၂) Expand Widgets Box ေသးေသးေလးကုိ Tick လုပ္ေပးခဲ႔ရပါမယ္. ဒါဟာလည္း သိပ္အေရးၾကီးပါတယ္. Template ျပင္တဲ႔အခါမွာ တစ္ခ်ိဳ႔ Code ေလးေတြ ရွာမေတြ႔ဘူးလုိ႔ ခဏခဏ ေျပာတတ္ၾကပါတယ္. အဲဒါဟာ Expand Widgets ဆုိတဲ႔ Box ေလးကို Tick မလုပ္ခဲ႔တဲ႔ ျပႆနာေၾကာင္႔ပါပဲ.

(၃) </head> ဆုိတဲ႔ Tag ေလးမဆုံးခင္မွာ ဒီ Coding ေလးေတြကုိ ထည္႔ေပးလုိက္ပါ

<script type='text/javascript'>
//<![CDATA[
var comment_form_template = '<div class="commentelem" style="clear:both">\n'
+ '<div style="float:left;margin-right:5px;clear:both;" id="commentphoto[[CID]]"></div>'
+ '<div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2941927' type='text/javascript'/>

(၄) ဒီ စာေၾကာင္းေလးေတြကုိ လုိက္ရွာပါ

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

ေတြ႔ရင္ ဒုတိယလုိင္းကုိ ဒီလုိေလး အစားသြင္းေပးလုိက္ပါ.

<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>

(၅) ခုနက စာေၾကာင္းေလးေတြရဲ႔ ေအာက္ဖက္နားေလးမွာပဲ <dl id='comments-block'> ဆိုတာေလး ရွိပါတယ္. အဲဒါေလးကုိ ေတြ႔ေအာင္ရွာျပီးရင္ အဲဒီ႔စာေၾကာင္းေလး မတုိင္ခင္မွာ ဒါေလးကို ထည္႔ေပးလုိက္ပါ.

<div expr:id='"commentsul" + data:post.id'> </div>

(၆) ဒီထိရပါေသးတယ္ေနာ္. ျပီးခါနီးပါျပီ. ဒီတစ္ခါေတာ႔ ဒီစာေၾကာင္းေလးေတြကုိ ရွာပါခင္ဗ်ာ.

<b:includable id='main' var='top'>
<!-- posts -->

ေတြ႔ရင္ ဆက္ဖတ္ၾကည္႔ပါ. ဒီလုိမ်ိဳး Coding ေလးေတြ ေရးထားတာ ေတြ႔ရပါလိမ္႔မယ္.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

အဲဒါကုိ ေတြ႔ေအာင္ရွာျပီးရင္ ဒီလုိျပန္အစားသြင္းေပးလုိက္ပါ.


<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>

(၇) ေနာက္ဆုံးအဆင္႔ပါ.

ဒီ စာေၾကာင္းေလးကို ရွာပါခင္ဗ်ာ.

<b:includable id='post' var='post'>

ျပီးရင္ သူ႔ေအာက္နားေလးကို ဆက္ဖတ္ပါ. ဒါေလးေတြကိုေတြ႔တဲ႔ အထိေပါ႔

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

ေတြ႔ျပီေနာ္.

အုိေက.

အဲဒီ႔တစ္ပုိဒ္လုံးကုိ ဒီလုိ ျပန္အစားသြင္းေပးရပါမယ္.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display(&quot;" + data:f.url + "&quot;,&quot;commentsul" + data:post.id + "&quot;,&quot;&quot;,&quot;" + data:post.url + "#comments&quot;,&quot;max comments&quot;);toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

Max comments ဆုိျပီး အနီေရာင္ေလးနဲ႔ ေရးထားတဲ႔ ေနရာမွာ ကုိယ္ၾကိဳက္သလုိ Edit လုပ္လုိ႔ရပါတယ္. ဥပမာ. ေကာ္မန္႔ေတြကုိ အမ်ားဆုံး (၅) ခုပဲ ေပၚေစခ်င္ရင္ 5 လု႔ိရုိက္ထည္႔ေပးရမွာပါ. အဲလုိမဟုတ္ဘဲ ရွိသမွ်၊ ေရးေပးထားသမွ် ေကာ္မန္႔ေတြ ေပၚေစခ်င္ရင္ေတာ႔ max comments ေနရာမွာ false လုိ႔ ရုိက္ေပးပါခင္ဗ်ာ.

(၈) Template ကုိ Save လုပ္လုိ႔ရပါျပီ.

(၉) Enjoy!!!!


Acknowledgement:

ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိ ေရးသားပါတယ္…

Peekaboo ႏွင္႔ပတ္သက္ျပီး ေရးခဲ႔သမွ်ပုိ႔စ္မ်ား

(၁) Peekaboo ပုိ႔႔စ္ေခါက္ျခင္း
(၂) Peekaboo Sidebar လုပ္ျခင္း
(၃) Peekaboo Navigation Bar လုပ္ျခင္း

အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္

Read More...
AddThis Social Bookmark Button

Peekaboo Sidebar လုပ္နည္း  


Contributor: ရန္ေအာင္

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ. ဒါကေတာ႔ Peekaboo Sidebar လုပ္နည္းေလးပါ. ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ရဲ႔ ေဘးနားမွာ My Links တုိ႔ Red links တုိ႔ ရွိပါတယ္. စမ္းၾကည္႔ပါခင္ဗ်ာ. ၾကိဳက္တယ္ေနာ္. အုိေက. ဒါဆုိ ဘယ္လုိလုပ္ရလဲ ေျပာျပမယ္.

ဂလုိလုပ္ပါခင္ဗ်ာ..

အဆင္႔ (၃) ဆင္႔ပါပါတယ္.

အဆင္႔ (၁)

ပထမဦးဆုံး ဒီစာေၾကာင္းေလး နွစ္ေၾကာင္းကုိ style sheet ထဲမွာ ထည္႔ေပးပါခင္ဗ်ာ. Style Sheet ဆုိတာကေတာ႔ ]]></b:skin> ဆုိတဲ႔ စာေၾကာင္းေလး မေတြ႔မခ်င္းအထိ အပုိင္းကုိ ေခၚပါတယ္. ဒါေၾကာင္႔ အဆင္ေျပတဲ႔ တစ္ေနရာရာမွာ အခုလုိ ထည္႔လုိက္ႏုိင္ပါတယ္ ခင္ဗ်ာ. အေပၚက ေရးထားတဲ႔ /* Peekaboo Sidebar …. */ ဆုိတာက ျပန္ရွာရလြယ္ေအာင္ လုပ္ထားတာပါ. ဘာမွ အက်ိဳးသက္ေရာက္မႈမရွိပါဘူး.

/* Peekaboo Sidebar
------------------------------------- */
.commenthidden {display:none}
.commentshown {display:inline}

အဆင္႔ (၂)

ဒုတိယအဆင္႔မွာေတာ႔ ဒီ script ေလးေတြကုိ </head> tag မဆုံးခင္ေလးမွာ ထည္႔ေပးပါ.

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

အဆင္႔ (၃)

ဒါဆုိရင္ coding အပုိင္းမွာ ေတာ္ေတာ္ေလး ျပီးသြားပါျပီ. အခုလုပ္မွာကေတာ႔ ကုိယ္ထည္႔မယ္႔ လင္႔ခ္ေလးေတြပါပဲ. New Blogger Template အတြက္ေရာ Classic Template အတြက္ပါ သုံးလုိ႔ရပါတယ္. New Blogger ဆုိရင္ေတာ႔ Add a page element> HTML/Java Script ကုိ ေရြးပါ. Classic ဆုိရင္ေတာ႔ ဒီတုိင္းပဲ ထည္႔ပါခင္ဗ်ာ.
<a aiotitle="click to expand" href="javascript:togglecomments('YouNameIt')">Title</a><br />
<div class="commenthidden" id="YouNameIt">
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.gmail.com">Gmail</a></li>
</ul>
</div>

YouNameIt ဆုိတာကေတာ႔ ကုိယ္ေပးခ်င္တဲ႔ နာမည္ေပးတာကုိ ဆုိလုိတာပါ. သူတုိ႔ (၂)ခုက တူရပါမယ္ခင္ဗ်ာ.

ဥပမာကုိၾကည္႔ရင္ ပုိရွင္းသြားပါလိမ္႔မယ္.

Example:

<a aiotitle="click to expand" href="javascript:togglecomments('Zawgyi')"><span style="color:red;">+/- Zawgyi ရယူရန္</span></a><br/><br/>
<div id="Zawgyi" class="commenthidden">
<ul>

<li>
<a href="http://www.fileden.com/files/2007/2/17/784534/Zawgyi-One-20051130.ttf "><
img border="0" src="http://static.flickr.com/40/74230378_f794a1e17a_m.jpg"/></a></li>
<li><a href="http://www.fileden.com/files/2007/2/17/784534/ZawgyiKb_installer_I.zip"> Zawgyi Keyboard Installer</a></li>

<li><a href="http://www.fileden.com/files/2007/2/17/784534/zawgyi_keyboard_map0_4.gif">Zawgyi Keyboard Layout</a></li>

</ul>
</div>

ဒါပါပဲခင္ဗ်ာ.

+/- Zawgyi ရယူရန္ ဆုိတာက အရုိးရွင္းဆုံးလုပ္ထားတာပါ. Graphic ကၽြမ္းက်င္သူမ်ားကေတာ႔ ပုံေလးေတြ အစားထုိးျပီး ပုိလွေအာင္ဖန္တီးယူႏုိင္ပါတယ္ ခင္ဗ်ာ..

အားလုံးပဲ ေပ်ာ္ရႊင္ခ်မ္းေျမ႔စြာ ဘေလာ႔ဂင္းႏုိင္ၾကပါေစ…

ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ပါတယ္ခင္ဗ်ာ.

Read More...
AddThis Social Bookmark Button

Peekaboo ပုိ႔စ္ေခါက္ျခင္း  


Contributor: ရန္ေအာင္

ကၽြန္ေတာ္႔ရဲ႔ ဘေလာ႔ဂ္မွာ ပုိ႔စ္ေလးေတြကို မိတ္ဆက္ေလးတင္ျပီးေတာ႔ က်န္တာေတြကုိ ဆက္ဖတ္ႏုိင္ေအာင္ Read More… Collapse ဆုိတာေလး လုပ္ထားတာ အားလုံးအသိပဲ ျဖစ္မွာပါ.

အဲဒါကုိ အဂၤလိပ္လုိ Peek-A-Boo Post ေလးေတြ လုိ႔ေခၚျပီးေတာ႔ ျမန္မာမႈျပဳရရင္ေတာ႔ `တူတူေရ၀ါးပုိ႔စ္´ ေလးေတြလုိ ျပန္ဆုိရပါလိမ္႔မယ္။ ပုန္းေနရာက ၀ါးဆုိ ထြက္လာလုိ႔ေလ… ဟုတ္တယ္ဟုတ္…

ခဏခဏလာေမးတဲ႔ ေဘာ္ေဘာ္ဘေလာ႔ဂါမ်ားလည္း ေျပလည္ေအာင္၊ ေနာက္ေနာင္ မည္သူမဆုိ ကုိးကားႏုိင္ေအာင္လုိ႔ ဒီပုိ႔စ္ေလးကုိ ေရးသားလုိက္ပါတယ္ ခင္ဗ်ာ…. Template ကုိ မြမ္းမံျဖည္႔စြက္တာေတြ လုပ္ေတာ႔မယ္ဆုိရင္ ဘာမွမလုပ္ခင္ အရင္ဆုံး Backup လုပ္တာဟာ အေလ႔အထေကာင္းေလး တစ္ခုပါပဲ။ ဒါေၾကာင္႔ Template ကုိ Backup လုပ္လုိက္ပါ။ ျပီးရင္ေတာ႔ စပါျပီ...

အဆင္႔ (၁)

ဒီ script ေလးကို ကူးျပီးေတာ႔ </head>-tag မဆုံးခင္ေလးမွာ ထည္႔လုိက္ပါ။

<script src="http://yanaung.prospect.googlepages.com/myhacko.js" type="text/javascript" />

Update: (As of August 19, 2007)

Peekaboo ပုိ႔စ္ေတြ ခဏခဏ ေဒါင္းသြားတတ္တယ္လုိ႔ ျပန္ေျပာေနၾကတာ ၾကားရပါတယ္. ကၽြန္ေတာ္လုပ္ထားတဲ႔ Coding က ကၽြန္ေတာ္႔ရဲ႔ google pages မွာ တင္ထားတဲ႔ ဖုိင္နဲ႔ပါ. အဲဒါကုိ တုိက္ရုိက္ကူးမခ်ဘဲနဲ႔ ကုိယ္အဆင္ေျပတဲ႔ file hosting site တစ္ခုခုမွာ တင္ေပးဖုိ႔ ကၽြန္ေတာ္ တုိက္တြန္းခဲ႔ဖူးပါတယ္. ခုျဖစ္ရတာက တုိက္ရုိက္ယူသြားတာေတြ မ်ားေနေတာ႔ ကၽြန္ေတာ္႔ရဲ႔ google pages ေဒါင္းသြားတာပါ.

ကဲဗ်ာ. ဖုိင္ေပးလုိက္မယ္ေနာ္. ဒါကုိ အရင္ဆုံး save လုပ္ပါ.

http://yanaung.prospect.googlepages.com/myhacko.js

ျပီးရင္ File hosting site တစ္ခုခုမွာ သြားတင္ပါ. ျပီးသြားရင္ေတာ႔

< script src='http://yanaung.prospect.googlepages.com/myhacko.js' type='text/javascript'></script>

ဆုိတဲ႔ေနရာမွာ ဒီလုိ္အစားသြင္းေပးလုိက္ပါ.

<script src='Your URL' type='text/javascript'></script>

အေပၚက coding ေလးေတြက </head> မဆုံးခင္ေလးမွာ ထည္႔ခဲ႔တဲ႔ coding ေလးေတြပါ. မွတ္မိမယ္ထင္ပါတယ္. ကဲ. အဲဒါဆုိရင္ ေနာက္ထပ္ peekaboo ေဒါင္းသြားတတ္တဲ႔ ျပႆနာ မရွိႏိုင္ေတာ႔ပါဘူး. File Hosting ဘယ္လုိလုပ္ရမလဲ သိခ်င္ရင္ေတာ႔ ဒီေနရာမွာ သြားဖတ္ပါခင္ဗ်ာ.

အဆင္႔ (၂)

Template ထဲမွာ includable id=’post’ ဆုိတာေလးကို ရွာပါ။ ျပီးရင္ ေအာက္မွာ ေဖာ္ျပထားတဲ႔ အတုိင္း Code ေလးေတြကုိ အစအဆုံး အစားသြင္းလုိက္ပါ.

(အဆင္႔ (၂) အတြက္ မိမိရဲ႔ ဘေလာ႔ဂ္ဟာ New Blogger Template ကုိ သုံးေနတာ ျဖစ္ရပါမယ္. Template Tab မွာ Expand Widgets ဆုိတဲ႔ Box ေလးကို Tick လုပ္ေပးခဲ႔ဖုိ႔လည္း မေမ႔ပါနဲ႔ခင္ဗ်ာ. လုိခ်င္တဲ႔ ကုဒ္ေလးေတြကုိ အလြယ္တကူရွာေတြ႔ခ်င္ရင္ေတာ႔ Template ကုိ ေကာ္ပီကူးယူျပီး Microsoft Word ထဲမွာပဲ ျဖစ္ျဖစ္၊ Notepad ထဲမွာပဲ ျဖစ္ျဖစ္ Paste ျပန္လုပ္ပါ. ျပီးရင္ Ctrl+F ကုိႏွိပ္ျပီး လုိခ်င္တဲ႔ စာလုံးေလးေတြကုိ လုိ္က္ရွာယူပါ. )


<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

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

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Collapse...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

.... the rest of the template goes here...


Template ကုိ Save လုပ္လုိက္ပါ။

အဆင္႔ (၃)

Setting ထဲက Formatting Tab ကုိသြားျပီး Post-Template ေနရာမွာ ေအာက္ပါစာသားေလးမ်ားကုိ ရုိက္ပါ။


Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>


Save လုပ္ပါ။

ျပီးပါျပီ…

ပုိ႔စ္ေလးေတြ တင္တဲ႔အခါမွာ မိတ္ဆက္သေဘာေလာက္ တင္ျပခ်င္တဲ႔ စာပုိဒ္ေလးေတြကုိ တစ္ပုိဒ္ေလာက္ ေဖာ္ျပေပးျပီး က်န္တာေတြကုိေတာ႔ <span id="fullpost"> ရဲ႔ ေနာက္မွာ ထည္႔လုိက္ရုံပါပဲ…

လြယ္ပါတယ္ေနာ္…. Read More, Summary Only မထည္႔ခ်င္ဘဲ ျမန္မာလုိ `အက်ယ္ဖတ္´၊ `အက်ဥ္းဖတ္´ လုိ႔ေရးရင္လည္း ရတာပါပဲ. စိတ္ခ်မ္းသာ သလုိသာ လုပ္ၾကပါ ဘေလာ႔ဂါေမာင္ႏွမတုိ႔ေရ... ကၽြန္ေတာ္ကေတာ႔ Summary ေနရာမွာ ကြန္႔ျပီးေတာ႔ Collapse လုိ႔ လုပ္ထားတယ္ဗ်...

မွတ္ခ်က္။ ။ ဒီပုိ႔စ္ေလးကုိ အဆင္ေျပေအာင္ ဘာသာျပန္ေပးထားပါတယ္. ဒီပုိ႔စ္ေခါက္တာကို လုပ္တာ ၁၀ မိနစ္ထက္ပုိမၾကာပါဘူး ခင္ဗ်ာ. စိတ္ရွည္ရွည္ထားျပီး step by step လုပ္သြားပါ. ေအာင္ျမင္ၾကပါေစ…

Read More...
AddThis Social Bookmark Button

Peekaboo Navigation Bar လုပ္ျခင္း  


Contributor: ဘုရင္႔ေနာင္

ဘေလာ႔ဂါ ေတာ္ေတာ္မ်ားမ်ားက ပုိ႔စ္လည္းေရးၾကတယ္. ကုိယ္႔ဘေလာ႔ဂ္ေလး ကုိလည္း လွသည္ထက္လွေအာင္ ျပဳျပင္မြမ္းမံ တတ္ၾကပါတယ္. အဲဒီ႔မွာ ဘာတစ္ခုက လာအရုပ္ဆုိးေစလဲ ဆုိေတာ႔ ဘေလာ႔ဂ္ရဲ႔ အေပၚဆုံးမွာ ရွိေနတဲ႔ Blogger Navigation Bar ၾကီးပါ.

ကဲကဲ.. ဒီေလာက္ဆုိ သေဘာေပါက္ေရာေပါ႔. ဒီ Bar ၾကီးကို ေဖ်ာက္ခ်င္တယ္ေနာ္. ဟုတ္. တစ္ခ်ိဳ႔က အျပီးေဖ်ာက္ထားၾကတယ္. အဲဒါက ဘာမေကာင္းဘူးလဲဆုိေတာ႔ ကိုယ္ကုိယ္တုိင္ Sign in ၀င္ခ်င္ရင္ https://www.blogger.com/start ကုိ ျပန္သြားေနရေရာ. အလုပ္ရႈပ္တာေပါ႔ဗ်ာ.

ဘာလုပ္မလဲ.

ေဖ်ာက္ထားမယ္. Mouse ေလးတင္လုိက္မွ ေပၚလာမယ္. ဒါမ်ိဳးေလး လုပ္ရင္ မေကာင္းဘူးလား..

အုိး. ဂြတ္ဒ္..

ဘယ္လုိလုပ္ရမလဲ ဆုိေတာ႔ ဂလုိလုပ္ပါခင္ဗ်ာ..



/*Peekaboo Navigation Bar
------------------------------ */

#navbar-iframe
{
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover
{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}




ဆုိတာေလးကုိ template ထဲက <body> Tag မတုိင္ခင္မွာ ထည္႔ေပးလုိက္ရုံပါပဲ.

ဥပမာ.

<Variable name = …..> blah blah blah..
*/

/*Peekaboo Navigation Bar
------------------------------ */
ဒီမွာလာထည္႔





body {
background:#aba;
margin:0;
text-align:left;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:#000000;
font-size/* */:/**/small;
font-size: /**/small;
}

The rest of the template goes here….

မွတ္ခ်က္။ ။ Firefox မွာပဲ အလုပ္လုပ္ပါတယ္ခင္ဗ်ာ...

Read More...
AddThis Social Bookmark Button