Vertical Menu တစ္ခု ဖန္တီးျခင္း....

မဂၤလာပါခင္ဗ်ာ....

ကြၽန္ေတာ္ ေက်ာင္းပိတ္ရက္ေလးမွာ အားလံုးအတြက္ အဆင္ေျပမယ့္ POST ေလးတစ္ခု မွ်ေ၀ခ်င္ပါတယ္။Vertical Menu လုပ္တဲ့ပံုစံေလးပါ။ကိုယ့္ရဲ ့ ဘေလာဂ့္ကို အလွဆင္မယ္၊ သူမ်ားေတြနဲ ့မတူေစခ်င္ရင္ေတာ့ စမ္းလုပ္ႀကည့္ပါခင္ဗ်ာ။
အရင္ဆံုး ကိုယ့္ရဲ ့ဘေလာဂ့္ကို Login ၀င္လိုက္ပါ ခင္ဗ်ာ။ Layout>>Edit HTML ကိုသြားပါ။ေရာက္ျပီဆိုရင္ေတာ့ Ctrl+F နဲ ့ ]]></b:skin> ဆိုတာေလးကိုရွာလိုက္ပါ။ ေတြ ့ျပီဆိုရင္ ေအာက္က Script ေလးကို ]]></b:skin>
အေပၚကေန ထည့္ေပးပါ။

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

အနီေရာင္နဲ ့ေရးထားတဲ့ေနရာမွာ ေအာက္မွာေပးထားတဲ့ အထဲက ကိုယ္ႀကိဳက္ရာကို ေျပာင္းေပးလို ့ရပါတယ္ခင္ဗ်ာ။ႀကိဳက္ျပီဆိုရင္ေတာ့ ဘေလာဂ့္ကို Save Template လုပ္လိုက္ပါ။

black1.gif
black2.gif

blue1.gif
blue2.gif

green1.gif

green2.gif

pink1.gif
pink2.gif

red1.gif red2.gif

ျပီးတာနဲ ့"Page Elements" Menu ကိုသြားပါ။ "Add a Gadget ႇ>>>HTML/JavaScript" မွာ ေအာက္က Code ေတြ ထည့္ေပးပါ ခင္ဗ်ာ။

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>




အနီေရာင္နဲ ့ေရးတားတဲ ့Link ေနရာမွာ ကိုယ္အသံုးျပဳမယ့္ Link ေတြကိုထည့္ေပးပါ။
အျပာေရာင္နဲ ့ေရးထားတဲ ့စာသားေတြေနရာမွာေတာ့ ကိုယ္ေပၚေစခ်င္တဲ ့နာမည္ကိုေရးလိုက္ရင္ ရပါျပီခင္ဗ်ာ။
ကြၽန္ေတာ္ verticle menu Post ေလးကို ဒီေနရာကေန သင့္ေတာ္သလို ျပန္ဆိုပါတယ္။
အဆင္ေျပပါေစ ခင္ဗ်ာ။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ....

ျပန္သိမ္းေပးခဲ့ပါခင္ဗ်ာ.....

www.f1.cc မွာ Domain Name ယူႀကရေအာင္။

ကၽြန္ေတာ္တို ့www.co.cc မွာ DOMAIN NAME ေျပာင္းရတာ အဆင္မေျပတာေတြ
ျဖစ္လာပါတယ္ဗ်ာ။ဒီေတာ့လည္း အလကားရတဲ့ www.f1.cc ဆိုတာေလးအေႀကာင္း
ေလးကို ေျပာျပခ်င္ပါတယ္ ခင္ဗ်ာ။ ကၽြန္ေတာ္ကေတာ့စမ္းျပီးျပီ အိုေကတယ္ဗ်ာ။သိျပီး
သားဆိုရင္လည္း နားလည္ေပးေစခ်င္ပါတယ္။ကၽြန္ေတာ္က အဆင္ေျပေစ ခ်င္တဲ့ဆႏၵ
ပါဗ်ာ။ကၽြန္ေတာ္ www.f1.cc မွာ Register လုပ္တာကေနစျပီး အဆင့္ေလးေတြကိုအ
ဆင္ေျပေစရန္ မွ်ေ၀လိုက္ပါတယ္။
အရင္ဆံုး www.f1.cc ကို ၀င္လိုက္ပါ ခင္ဗ်ာ။
mydomain ဆိုတဲ့ေနရာေလးမွာ ကိုယ္လိုခ်င္တဲ့ နာမည္ကိုေရးေပးပါ။
ကိုယ္ေပးလိုက္တဲ့ နာမည္က Available ျဖစ္ျပီဆိုရင္ Register လုပ္မလားလို ့ေမးတာပါ။ Yes ေပါ့။
Register လုပ္ရင္ေတာ့ ထံုးစံအတိုင္းေပါ့ Email ေနရာမွာ ကိုယ့္ရဲ ့Blog ကိုလုပ္ထားတဲ့ Mail ကိုထည့္ေပးပါ။
Target URl ဆိုတာကေတာ့ အရင္ blogspot လိပ္စာကိုေရးေပးပါ။ဥပမာ-www.peacefulforever3.blogspot.com
အဲလိုေလးေပၚလာရင္ Ok ေပးလိုက္ေပါ့ဗ်ာ။ ကိုယ့္ရဲ ့Mail ထဲကို၀င္လိုက္ပါ။
http://www.ဘာညာသာလကာ ေရးထားတဲ့ Link ေလးကို ႏွိပ္လိုက္ေပါ့။
login ၀င္လိုက္ပါ ခင္ဗ်ာ။ login ဆိုတဲ့ေနရာမွာ ဥပမာ-www.peacefulforever3.f1.cc လို ့ေရးပါ။
ူlogin ၀င္ျပီးတာနဲ ့ထားလိုက္ပါ။Mail ကိုျပန္ Check လိုက္ရင္ အေပၚကပံုေလးမွာေပၚသလို
Your domain is active ဆိုျပီး Mail ထပ္၀င္လာပါလိမ့္မယ္။ဒါဆိုရင္ေတာ့ Ok သြားျပီေပါ့။
ူlogin ေဘးက ကိုယ္ရဲ ့လိပ္စာေလးကို Click လုပ္လိုက္ပါ။
အေပၚက ပံုေလးအတိုင္း f1.cc မွာ Domain Name ေလးတစ္ခုရသြားျပီေပါ့ဗ်ာ။
အားလံုးပဲ အဆင္ေျပႀကပါေစ ခင္ဗ်ာ။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ....

ျပန္သိမ္းေပးခဲ့ပါခင္ဗ်ာ.....

ကိုယ့္ဘေလာဂ္ကေန ဘာေတြကို COPY လုပ္သြားတယ္ဆိုတာကို သိခ်င္တယ္ဆိုရင္။

မဂၤလာပါခင္ဗ်ာ....
ကိုယ္ရဲ ့ ဘေလာဂ္ကေနျပီးေတာ့ ဘာေတြကို COPY လုပ္သြားတယ္ဆိုတာကို
သိခ်င္ေနသူေတြ အတြက္ပါခင္ဗ်ာ။ဘာလို ့လဲဆိုေတာ့ ကိုယ္ေရးတဲ့ စာေတြကို
ဘေလာဂ္ကို လာလည္တဲ့ မိတ္ေဆြေတြက COPY လုပ္သြားတယ္ဆိုရင္ သိခ်င္
မယ္ထင္ပါတယ္ ခင္ဗ်ာ။ ၀မ္းသာရတာေပါ့ဗ်ာ ကိုယ္ေရးတဲ့ မေတာက္္တေခါက္
ေလးေတြကို ငါ့ရဲ ့မိတ္ေဆြေတြ အသံုးျပဳေနပါလားဆိုတဲ့ အေတြးေလးေတြနဲ ့
၀မ္းသာေနလို ့ရတာေပါ့ဗ်ာ။ လြယ္လြယ္ေလးပါဗ်ာ။
http://www.copyscape.com/ ဆိုတာေလးကို သြားလိုက္ပါ။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ....

ျပန္သိမ္းေပးခဲ့ပါခင္ဗ်ာ.....

Search Engine ဘေလာ့မွာ ထည့္မယ္ဆိုရင္

ကိုယ့္ရဲ ့ဘေလာ့ထဲမွာ "Search Engine" ေလးထည့္ခ်င္တယ္၊
ကိုယ့္ ဘေလာ့ထဲက အခ်က္အလက္ေတြကို လာေရာက္ဖတ္ရႈတဲ့
သူေတြ အလြယ္တကူ ရွာေဖြလို ့ ရေအာင္ လုပ္ေပးႏိုင္ေပးပါတယ္၊
ကိုယ့္ရဲ ့ဘေလာ့အတြင္းက အခ်က္အလက္ကိုပဲ ရွာေပးမွာ ျဖစ္ပါ
တယ္။ Search Engine is use to find articel in your blog, not
to find articel at all website in the world. အဂၤလိပ္လို ေရးလို ့
တစ္မ်ိဳး မထင္ပါနဲ ့ကူးခ်ထားတာပါ ခင္ဗ်ာ။ :D
"Layout ->Page Elements" ကိုသြားျပီးေတာ့"HTML/Java Script"

မွာေအာက္က Codeေလးကို Copy ကူးလိုက္မယ္ဆိုရင္ျဖင့္ မိိမိိ္ပိုင္တဲ့
ဘေလာ့ေလးထဲမွာ "Search Engine" တစ္ခုရရွိသြားမွာပါ။ :Y :D

<form action="http://yourblogname.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
yourblogname ဆိုတဲ့ေနရာမွာ ကိုယ္ဘေလာ့လိိပ္စာကို ထည့္ေပးပါ။
"30" ကေတာ့ "Search Engine" ရဲ ့Wide ျဖစ္ပါတယ္။
လြတ္လပ္ လြယ္ကူစြာ ရွာေဖြႏိုင္ပါေစသား...... :)

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ....

ျပန္သိမ္းေပးခဲ့ပါခင္ဗ်ာ.....

ကိုယ္ေရးတဲ့ Post ေတြကို အျပံဳးေလးေတြနဲ ့ အလွဆင္မယ္

မဂၤလာပါခင္ဗ်ာ...........
ကိုယ္ေရးတဲ့ Post ေတြကို အျပံဳးေလးေတြနဲ ့ အလွဆင္ခ်င္တယ္
ဆိုရင္ ...အျပံဳးေလးေတြကို ထည့္သြင္းအသံုးျပဳရတာ လြယ္ကူပါ
တယ္။ :Y :L :D :o :r :~ :d :c :z :v :k :x :O :s :#
ဟဲဟဲ လုပ္ခ်င္တယ္။ ဆိုရင္ေတာ့ ေအာက္က Code ေလးကိုထည့္
ေပးလိုက္ပါ။ "layout --> Edit HTML" ေရာက္ျပီဆိုရင္

]]></b:skin> ကိုရွာျပီးေတာ့ ေအာက္က အစိမ္ေရာင္ Code ကို
ေအာက္ကေန ကပ္ျပီး ထည့္ေပးလိုက္ရင္ ရပါျပီ။
<script src='http://skin4mm.googlepages.com/freemmsmile.js'
type='text/javascript'/>
ျပံဳးေပ်ာ္ ရႊင္ျမဴး ေစသား :) :) :)

:) --> :)
:( --> :(
:p --> :p
:D --> :D
:$ --> :$
;) --> ;)
:@ --> :@
:# --> :#
:k --> :k
:x --> :x
:o --> :o
:O --> :0
:L --> :l
:r --> :r
:s --> :s
:y --> :y
:~ --> :-
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ....

ျပန္သိမ္းေပးခဲ့ပါခင္ဗ်ာ.....

Hide Your Post Date, Time and Author

ဒီတစ္ခါကေတာ့ ကိုယ္ေရးတဲ့ Post မွာ ရက္၊အခ်ိန္၊စာေရးတဲ့ သူေတြ
စတဲ့ အခ်က္ အလက္ေတြကို မေဖာ္ျပခ်င္ဘူး ဆိုရင္ေတာ့ ေအာက္က
အဆင့္ေလးေတြ အတိုင္းလုပ္လို ့ရပါတယ္ ခင္ဗ်ာ။ ဘာမွေတာ့ မဟုတ္
ပါဘူး စမ္းႀကည့္ခ်င္တယ္ ဆိုရင္ လုပ္ႀကည့္လို ့ရေအာင္ပါ ။ ကိုယ္ေရး
တဲ့ BLOG က ထူးထူးျခားျခားေလး ျဖစ္ခ်င္ရင္ စမ္းႀကည့္ေပါ့ ။ :Y :L
အရင္ဆံုးကေတာ့ လုပ္ေနက် ဘေလာ့ကို "Layout --> Edit HTML"
မွာ "Download Full Template" လုပ္လိုက္ပါ။
"Expand Widget Templates" ဆိုတဲ့ ဟာေလးကို Check လုပ္လိုက္ပါ။

(Hide Post Date ) ရက္ကို မေဖာ္ျပခ်င္ဘူးဆိုရင္ ေအာက္က Code ေလး
ကိုရွာျပီး DELETE လုပ္လိုက္ပါ။
<data:post.dateHeader/>.

(Hide Post Time) အခ်ိန္ကို မေဖာ္ျပခ်င္ဘူးဆိုရင္ ေအာက္က Code ေလး
ကိုရွာျပီး DELETE လုပ္လိုက္ပါ။
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>.

(Hide Post Author) စာေရးသူ ကို မေဖာ္ျပခ်င္ဘူးဆိုရင္ ေအာက္က Code ေလး
ကိုရွာျပီး DELETE လုပ္လိုက္ပါ။

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
အဆင္ေျပပါေစ ခင္ဗ်ာ။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ....

ျပန္သိမ္းေပးခဲ့ပါခင္ဗ်ာ.....

CHANGE POST DATE BECOME CLANDER ICON

မဂၤလာပါခင္ဗ်ာ........
ကြၽန္ေတာ္အခု ေျပာျပမွာကေတာ့ ကိုယ့္ရဲ ့POST ထိပ္ဆံုးမွာေပၚေနတဲ့
POSTING DATE ေလးကို CLANDER ICON ပံုစံေလး ေျပာင္းႀကည့္
ရေအာင္ခင္ဗ်ာ။ကြၽန္ေတာ္ကေတာ့ ညမအိပ္ပဲနဲ ့ လုပ္လိုက္ရပါတယ္ ။
ကြၽန္ေတာ္ ကိုကလည္း ညံ့တာပါတယ္ေလ :Dကြၽန္ေတာ္ POSTDATE
ကေန CLANDER ICON ေလးေျပာင္းတာကို ေျပာျပပါ့မယ္ ခင္ဗ်ာ။ :P
အဆင့္ေလးကေတာ့ နည္းနည္းေတာ့ ရႈပ္တယ္ခင္ဗ်ာ။ ကြၽန္ေတာ္တက္
ႏိုင္သမွ် အေကာင္းဆံုး ျဖစ္ေအာင္ ေရးေပးပါမယ္ ခင္ဗ်ာ။ေအာက္ကအ
ဆင့္ေလးေတြ အတိုင္း လုပ္ႀကည့္လိုက္ရေအာင္ဗ်ာ။

၁။ Setting > Formatting မွာ "date header format" ဆိုတဲ့ေနရာေလး
ရွိပါတယ္။ (1.24.2008).ပံုစံေလးျဖစ္ေအာင္ ေျပာင္းလိုက္ပါ ခင္ဗ်ာ။ျပီးရင္
Save Settings ကိုႏွိပ္လိုက္ပါခင္ဗ်ာ။

၂။ ဒုတိယ အဆင့္ကေတာ့ "Template --> Edit HTML" ကိုသြားပါ။ေရာက္
ျပီဆိုရင္ေတာ့ "Expand Widget Templates" ေလးကို အမွတ္ေလးျခစ္လိုက္
ပါ ခင္ဗ်ာ။အမွတ္ေလး ျခစ္ျပီးရင္ေတာ့<TITLE><data:blog.pageTitle/>
</TITLE>ဆိုတာေလးကိုရွာပါ ၊ ေတြ ့ျပီဆိုရင္ေတာ့ အစိမ္းနဲ ့ ေရးထားတဲ့
CODE ေတြကို ေအာက္ကေန ကပ္ျပီး ထည့္လိုက္ပါ။
ကိုယ္လိုခ်င္တဲ့ Code ကိုရွာရင္ Ctrl+F ေလးကို အသံုးျပဳျပီးရွာပါ ခင္ဗ်ာ။

<SCRIPT type='text/javascript'>
//<![CDATA[

function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

၃။ေအာက္ကေပးတဲ့ Code ေတြကိုရွာပါ။

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
မေတြ ့ဘူးလား၊ဒါဆိုရင္ မပူပါနဲ ့
h2.date-header {
margin:1.5em 0 .5em;
}
ေလးကို ထပ္ရွာလိုက္ပါ ခင္ဗ်ာ။
ေတြ ့ျပီလား ? ေတြျပီဆိုရင္ေတာ့ အစိမ္းေရာင္ Code ေလးေတြကို ေအာက္ကေန ကပ္ျပီး
ထည့္ေပးပါဦးခင္ဗ်ာ။

.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}

အဲဒီမွာ တစ္ခုျဖတ္ျပီးေျပာပါရေစ။ http://blogoholic.info/files/kalender/bluecalend.gif
ဆိုတာကို ေတြ ့မွာပါ၊bluecalend.gif ေနရာမွာ ေအာက္ကေပထားတဲ့ ပံုစံေတြထဲက ႀကိဳက္ရင္
bluecalend.gif ဆိုတဲ့ ေနရာေလးမွာ orangecalend.gif ဆိုျပီး ေျပာင္းလိုကေပ့ါ ခင္ဗ်ာ။
တတိယ အဆင့္ျပီးပါျပီ ခင္ဗ်ာ။ေနာက္တစ္ဆင့္ပဲ လိုပါေတာ့တယ္၊ :) :L

၄။ေနာက္ဆံုပိတ္ အဆင္ပါ ခင္ဗ်ာ။ ထံုးစံအတိုင္း <data:post.dateHeader/> ေလးကိုရွာလိုက္ပါ
ေတြ ့ရင္ <data:post.dateHeader/> ေနရာမွာ
<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
အစိမ္းေရာင္ Code ေလးကို အစားသြင္းေပးပါ ။
ေန ့ကေအာက္က လကို အေပၚမွာ ရွိေနေစခ်င္ရင္ padding: 4px 0px 0px 0px; ဆိုတာေလးကို
.month { ေအာက္မွာတည့္ ၊ျပီးရင္ .day { ဆိုတာေလးရဲ ့ေအာက္မွာပါ ထည့္ေပးလိုက္ပါ။ PREVIEW
နဲ ့ႀကည့္ အဆင္ေျပျပီဆိုရင္ Template ကို Save လို ့ရပါျပီ။
အဆင္မေျပတာရွိရင္ Cbox ကေန ေျပာခဲ့ပါ ခင္ဗ်ာ။ ကြၽန္ေတာ္ ထပ္ျပီးေျပာျပေပးပ့ါမယ္။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ....

ျပန္သိမ္းေပးခဲ့ပါခင္ဗ်ာ.....