Navbar ဖြတ္မယ္၊ ေဖ်ာက္မယ္ဆုိရင္

Navbar ေဖ်ာက္ခ်င္သူေတြအတြက္၊ ဖြတ္ခ်င္သူေတြအတြက္ပါ။ ပထမဦးဆုံးအေနနဲ႔ ဖြတ္မယ္ဆုိရင္ မိမိဘေလာ့ဒ္ရဲ႕ HTML Edit ထဲက

<style>

ေနာက္မွာဒီေအာက္က ဟာေလးထည့္လုိက္ရင္အဆင္ေျပမယ္ထင္တယ္။

#navbar-iframe
{

height:0px;


visibility:hidden;


display:none;


}

ဘေလာ့အသစ္မွာ classia စတုိင္သုံးေနရင္ေတာ့ ဒီေကာင္

#b-navbar

ကုိရွာျပီးေတာ့ ဒါေလး

#navbar-iframe

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

<style type="text/css">


#b-navbar
{


height:0px;


visibility:hidden;


display:none


}

</style>

ေဖ်ာက္မယ္ဆုိရင္ဆုိရင္ေတာ့

<body>

ေနရာမွာ ဒီေကာင္ကုိ

<noscript><body></noscript>

ထည့္ၾကည္ပါ။ မရေသးဘူးဆုိရင္ ဒါကုိ

<noembed><body></noembed>

သုံးပါ။ Navbar ကုိေဖ်ာက္ထားရင္အဲဒီေနရာမွာ ကြက္လပ္က်န္ေနမွာပါ။ဒါကုိေတာ့ ဒီလုိေလး

body
{
margin-top:0px;
}

ေရးေပးလုိက္ပါ။ မရႏုိင္ေသးဘူးဆုိရင္

body
{
margin-top:0px;
position: relative;
top: -50px;
}

ေလးနဲ႔စမ္းၾကည့္ပါ။ တခုမရ တခုေပါ့ေနာ္….စမ္းၾကည့္ႏုိင္ပါတယ္။ Digital Inspiration
စာမ်က္ႏွာမွသင့္ေလ်ာ္ေအာင္ေလးျပန္ေရးေပးထားတာပါ။

သုံးခ်င္သူေတြလည္း....သုံးႏုိင္ၾကပါေစ.....

လုိ႔ ေမွ်ာ္လင့္မိပါတယ္။
ဒီလုိလုပ္ပါလုိ႔Google ကမေျပာထားသလုိ၊ မလုပ္ရဘူးလုိလဲမေျပာထားတဲ့အတြက္ စိတ္၀င္စားရင္စမ္းသပ္ၾကည့္ႏုိင္ပါတယ္။ ပညာတခုအေနနဲ႔ပါ....ျပင္ညာအေနနဲ႔ေတာ့မဟုတ္ႏုိင္ေၾကာင္းထင္မိပါတယ္။

အျပည့္အစံု

Random Rotating Banner လုပ္ရေအာင္ပါ

F5ႏွိပ္ရင္ ဒါမဟုတ္ စကရင္ရ္္ ရီဖရတ္ရ္ လုပ္ရင္သာမကပဲ လာလည္သူ တၾကိမ္လာတုိင္း Banner
တမ်ိဳးစီေျပာင္းေနေအာင္လုပ္ေပးေနသူေတြ ပထမဆုံးအေနနဲ႔

#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
font-family: "ZawGyi-One", ZawgyiOne, Zawgyi1, arial, sans-serif;
}
ကုိျဖစ္ေအာင္

Blog Header

ထဲမွာ သြားျပင္ပါ။ ျပီးရင္

<body>

ထဲမွာ

<script type="text/javascript">


var banner= new Array()


banner[0]="မိမိbanner တင္ထားရာအင္တာနက္လိပ္စာ"
banner[1]="မိမိbanner တင္ထားရာအင္တာနက္လိပ္စာ"
banner[2]="မိမိbanner တင္ထားရာအင္တာနက္လိပ္စာ"
banner[3]="မိမိbanner တင္ထားရာအင္တာနက္လိပ္စာ"
banner[4]="မိမိbanner တင္ထားရာအင္တာနက္လိပ္စာ"
var random=Math.round(4*Math.random());


document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

ထည့္ေပးလုိက္ပါ။ banner ၅ခုသုံးထားတဲ့အတြက္(4*Math.random()); ထဲမွာ ၄လုိ႔ေရးေပးထားတာပါ။ကုိယ္က ၃ ခုသာ သုံးရင္ ၂ လုိ႔ေျပာင္းေပးဖုိ႔လုိပါလိမ္မယ္။ ဒါဆုိရင္ အားလုံးျပည့္စုံပါျပီ။
မွ်ေ၀ႏုိင္ၾကပါေစ ....

အျပည့္အစံု

မိမိရဲ႕ပုိစ့္ေတြမွာ scrollable box ထည့္ျပီးေရးခ်င္ရင္

မိမိရဲ႕ပုိစ့္ေတြမွာ scrollable box ဒါမွမဟုတ္ scroll down box ေတြသုံးျပီးေရးခ်င္သူေတြအတြက္ရည္ရြယ္ေပးတင္ေပးလုိက္တာပါ။

မိမိရဲ႕ပုိစ့္ေတြမွာ scrollable box ဒါမွမဟုတ္ scroll down box ေတြသုံးျပီးေရးခ်င္သူေတြအတြက္ရည္ရြယ္ေပးတင္ေပးလုိက္တာပါ။
ဒီကုဒ့္ေတြကုိ အရင္ မိမိပုိစ့္ ေရးမဲ့ေနရာမွာ အရင္ထည့္ပါ။ ဒါမွမဟုတ္
၁.dashboard ထဲက Setting ကိုေရြးပါ...
၂. Formatting ကို ထပ္ေရြးပါ...
၃. Formatting စာမ်က္ႏွာကို ေရာက္ၿပီဆုိရင္ Post Template ဆုိတာကို ရွာပါ... ေအာက္ဆုံးမွာ ရွိပါတယ္... post template text box ထဲမွာ ေအာက္က code ကို ထည့္လိုက္ပါ...
<div style="overflow:auto; height:100px; width:200px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td>မိမိေရးသားမည့္အေၾကာင္းအရာကုိဒီေနရာမွာေရးပါ။</td>
</tr>
</table>
</div>
ဒါဆုိရင္ရပါျပီ။ တခုသတိထားရမွာက မိမိတင္ေသာ scrollable box ဒါမွမဟုတ္ scroll down box ဟာ မိမိစာမ်က္ႏွာရဲ႕အေနအထားအျပင္အဆင္ကုိခ်င့္ခ်ိန္ျပီး၊ ျပင္ဆင္ေပးရပါလိမ့္မယ္။ အနီေရာက္နဲ႔ျပေပးထားတဲ့ေနရာမွာမိမိလုိအပ္သလုိျပင္ေပးယုံပါဘဲ။
ဒါမွမဟုတ္ အဆင့္သင့္သုံးရန္မိမိစိတ္တုိင္းက် ျပဳလုပ္ေပးထားေသာ scrollable box ဒါမွမဟုတ္ scroll down box ကုိေတာ့ဒီမွာသြားလုိယူေဆာင္ျပဳလုပ္ႏုိင္ပါတယ္။

http://www.123mycodes.com/scrollbox-generator.php

အျပည့္အစံု

ဘေလာ့ဒ္ရဲ႕ ေန႔စြဲ ေလးေတြကုိ ပုံစံ ေျပာင္းမယ္

ဒီစာမ်က္ႏွာ ကလုိ ေျပာင္းထားလုိက္တဲ့ ေန႔စြဲ ပုံစံ မ်ိဳး လုပ္ခ်င္ေနသူေတြ အတြက္ ထပ္မံ လုိက္ဆင့္ ကမ္းလုိက္ပါတယ္။
Dashboard > Layout > Settings > Formatting မွ Date Header Format ကုိ ေအာက္ကလုိေျပာင္းေပးပါ။
မိမိေရြးထားေသာေနစြဲ စာတန္း ပုံစံ တြင္ spaces သာပါရမည္ျဖစ္ျပီး၊ က်န္ေသာ commas, - ပုံစံ တုိ႔ကုိ သုံးစြဲရန္မရပါ။


ေနာက္ျပီးေတာ့ Template > Edit HTML > Expand Widget Templates အမွတ္ေပးပါ။ ျပီးရင္ေတာ့

<head>

ရဲ႕ ေနာက္မွာ

<script>
function date_replace(d){
var da = d.split(' ');
day = "<span class='theDate'>"+da[0]+"</span>";
mon = "<span class='theMonth'>"+da[1].slice(0,3)+"</span>";
year = "<span class='theYear'>"+da[2]+"</span>";
document.write(day+mon+year);
}
</script>
အေပၚက ကုဒ့္ေတြ ကုိထည့္ေပးပါ။ ျပီးရင္ ေတာ့
div#post-date {
display: block;
margin-top:20px;
float:left; /* မိမိထားခ်င္ေသာ ေနရာ ဘယ္ဘက္ (သုိ႔မဟုတ္) ညာဘက္ကုိ ေရြးေပးပါ */
padding-right: .5em; /* ေန႔စြဲစာလုံးမ်ား၏ ညာဘက္ျခမ္း အကြာအေ၀း */
padding-left: .5em; /* ေန႔စြဲစာလုံးမ်ား၏ ဘယ္ဘက္ျခမ္း အကြာအေ၀း */
background-color: #CCC; /* မိမိထားခ်င္ေသာ ရုပ္ပုံအားထည့္ရန္ေနရာ */
border: 3px double gray; /* ေန႔စြဲကုိ ေဘာင္ခတ္ထားရန္မ်ဥ္း ေၾကာင္း */
}


div#post-date span.theDate {
display: block; /* to put this in a different line */
font-size: 13px; /* to make the date stand out */
font-weight:bold;
background-color: transparent; /* to let the background show through */
color: #000; /* ရက္စြဲ ၏ အေရာင္ /*
}


div#post-date span.theMonth {
display: block;
font-size: 10px; /* smaller compared to the date */
background-color: transparent;
color: #000; /* လ ၏ အေရာင္ /*
}


div#post-date span.theYear {
display: block;
font-size: 10px; /* smaller compared to the date */
background-color: transparent;
color: #000; /* ႏွစ္ ၏ အေရာင္ /*
}

ေတြကုိ

/* Page Structure အေပၚမွာ ျဖစ္ေစ၊

<b:skin>

ရဲ႕ေနာက္မဆုံးခင္ ၾကားထဲမွာ ျဖစ္ေစ ထပ္ထည့္ေပးပါ။
ေနာက္ဆုံးအေနနဲ႔က

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

ကုိရွာျပီးေတာ့

<data:post.dateHeader/>

ေနရာမွာ

<div id='post-date'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>

နဲ႔ အစားထုိးပါ။ ဒါဆုိရင္လုံေလာက္ပါျပီ။ Preview သြားၾကည့္ႏုိင္ျပီးေတာ့ ၾကိဳက္ရင္ Template ကုိ save လုပ္လုိ႔ရပါျပီ။
မူရင္း။ ။http://lastword.blogspot.com/

အျပည့္အစံု

Comments, Feeds ေတြထည့္မယ္ဆုိရင္..

မိမိအလုိရွိရာ၊ ႏွစ္သက္ရာ ဘေလာ့ဒ္မွ Comment ေတြ Feed ကုိ မိမိဘေလာ့ဒ္မွာျဖစ္ေစ၊ မိမိဘေလာ့ဒ္မွ Comment ေတြကုိ သက္ဆုိင္ရာပုိစ့္၏ေခါင္းစဥ္ မ်ားမပါပဲၿဖစ္ေစ၊ ေဖၚျပဖုိ႔အတြက္ပါ။ အဲဒီလုိ မိမိအလုိရွိရာ၊ ႏွစ္သက္ရာ ဘေလာ့ဒ္မွ Comments ေတြ Feeds ကုိ ထည့္သြင္းမည္ဆုိရင္ ဖတ္ရႈသူေတြအတြက္ အဆင္ေျပျပီး၊ အခ်ိန္ကုန္သက္သာ ေစမွာပါ။

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

ပုိစ့္ ရဲ႕ summary အတြက္ဆုိရင္

http://မိမိေပးထားေသာနာမည္.blogspot.com/feeds/posts/summary?alt=rss

ပုိစ့္ အျပည့္အစုံကုိဆုိရင္

http://မိမိေပးထားေသာနာမည္.blogspot.com/feeds/posts/full?alt=rss

ပုိစ့္ ရဲ႕ comments ကုိသာဆုိရင္

http://မိမိေပးထားေသာနာမည္.blogspot.com/feeds/comments/full?alt=rss

ေတြကုိ Dashboard > Template > Page Elements ကုိသြားျပီးရင္ မိမိတင္ထားခ်င္ေသာေနရာမွ
Add a Page Elements >Feed ကုိ ေရြၿပီးထည့္ပါ၊ ၿပီးရင္ Save ကုိႏွိပ္ပါ။ ဒါဆုိရင္ရပါျပီ။ တကယ္လုိ႔ ကုိယ္က ?alt=rss ကုိၿဖဳတ္ၿပီး ေတာ့ ?alt=rss&max-results=25 ကုိထည့္မယ္ဆုိရင္ မိမိဆီမွာ ၂၅ ခု လာေပၚမွာပါ။ မိမိလုိခ်င္သေလာက္ကုိ ကိန္းဂဏန္းထည့္ရင္ ထည့္သေလာက္လာျပပါလိမ့္မယ္။ အုိေကျပီထင္ပါတယ္။

အျပည့္အစံု

Blog တြင္ ဘာဂ်ာေခါက္ ေခါင္းစဥ္ငယ္လုပ္ခ်င္ရင္

 ဟုတ္လားမဟုတ္လားေတာ့မသိဘူး။ ဘာဂ်ာေခါက္ပုံစံလုိ႔ ေပးလုိက္ျပီ။ လာေမးသူေတြအားလုံးအဆင္ေျပေအာင္ ဒီေနရာကေနဘဲ တင္လုိက္ပါတယ္။ ဘယ္မွာလုိက္ ေျပာရမွန္း မသိတာနဲ႔ပါ။ ဒီကုဒ့္ေတြကုိ ကုိခ်မ္းျမစုိး စာမ်က္ႏွာမွာ သုံးစဥ္အခါက ကၽြန္ေတာ္လည္းသုံးမ လုိ႔ဘဲ။ သူကုိေမးဖုိ႔ လုပ္ေနတုန္း သူက တန္းပလတ္ေျပာင္း လုိက္လုိ႔ မေမးျဖစ္ခဲ့ဘူး။ ေနာက္မွ ကုိယ္သိမ္း ထားခဲ့တဲ့ သူ႔ရဲ႕ကုဒ့္ေတြကုိ သတိရတာ နဲ႔ျပန္ၾကည့္ျပီး ဟုိျပင္ဒီျပင္ နည္းနည္းလုပ္ျပီးေတာ့ တင္ထားလုိက္တာဘဲ။ သူကုိယူသုံးဖုိ႔ေျပာေတာ့ ရတယ္ဆုိတာနဲ႔ ကၽြန္ေတာ္ စာမ်က္ႏွာမွာ တင္ထားလုိက္တာပါ။ နမႈနာ ၾကည့္ခ်င္ရင္ေတာ့ ကၽြန္ေတာ္ စာမ်က္ႏွာရဲ႕ ေဘးေခါင္းစဥ္ငယ္ မ်ားေနရာမွာ

စိတ္၀င္စားဖြယ္ ကြန္ရက္မ်ား

ဆုိျပီးရွိပါတယ္။
ဘယ္လုိလုပ္လဲဆုိရင္ေတာ့ ....

ပထမ <head> ရဲ႕ေနာက္ ဒါမွမဟုတ္ မဆုံးခင္ၾကားထဲမွာ

<style type='text/css'>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF; မိမိထားခ်င္ေသာေနာက္ခံအေရာင္
color:#000000; မိမိထားခ်င္ေသာ စာသားအေရာင္
width:305px; မိမိထားခ်င္ေသာဆုိဒ့္ကုိျပင္ရန္
font-family: "ZawGyi-One", ZawgyiOne, Zawgyi1, Trebuchet MS, Trebuchet, arial, verdana, sans-serif;
padding:2px;
text-align:center;
font-weight:normal;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
font-family: "ZawGyi-One", ZawgyiOne, Zawgyi1, Trebuchet MS, Trebuchet, arial, verdana, sans-serif;
}
</style>


<script type='text/javascript'>
//<![CDATA[
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
 if(document.getElementById){
 var el = document.getElementById(obj);
 var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
  if(el.style.display != "block"){ //DynamicDrive.com change
   for (var i=0; i<ar.length ; i++){
    if (ar[i].className=="submenu") //DynamicDrive.com change
    ar[i].style.display = "none";
   }
   el.style.display = "block";
  }else{
   el.style.display = "none";
  }
 }
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener ("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
//]]>
</script><style type='text/css'>
.submenu{display: none;}
</style>

ကုိထည့္ပါ။ ျပီးရင္ထားခ်င္ေသာေနရာမွာ

<div id="masterdiv">

    <div class="menutitle" onclick="SwitchMenu('sub1')"><span>မိမိေပးခ်င္ေသာေခါင္းစဥ္ခြဲ</span></div>
    <span id="sub1" class="submenu">
        » <a href="မိမိတင္ခ်င္ေသာလိပ္စာ" target="_blank">မိမိတင္ထားေသာလိပ္စာ၏နာမည္<br/>
ေနာက္ထပ္ထည့္ခ်င္ရင္ ဒီ
  » <a href="မိမိတင္ခ်င္ေသာလိပ္စာ" target="_blank">မိမိတင္ထားေသာလိပ္စာ၏နာမည္<br/>
တေၾကာင္းလုံးကုိျပန္ copy ကူးထည့္ရင္ရပါျပီ။
 ကုိယ္က ေခါင္းစဥ္ထပ္လုပ္ခ်င္ေသးရင္ sub1 ဆုိတဲ့ေနရာကုိ sub2 လုိ႔ အစဥ္လုိက္ေျပာင္းေပးျပီး၊လုပ္ရင္ ေနာက္ထပ္ေခါင္းစဥ္ခြဲေတြကုိယ္လုိသေလာက္ထပ္ထည့္ႏုိင္ပါတယ္။
 အဲဒီမွာေျပာဖုိ႔က်န္ေသးတာက
 <div id="masterdiv">
ေအာက္မွာရွိတဲ့ေခါင္းစဥ္ငယ္ေတြ sub1, sub2, sub3, sub4 ေပးထားခဲ့မိ ရင္ ကုိယ္ ေနာက္ထပ္လုပ္မဲ့၊
  <div id="masterdiv">
 မွာ  sub1, sub2, sub3, sub4 အစား  subA, subB, subC, subD လုိ႔ ေျပာင္းေပးဖုိ႔ လုိအပ္ပါလိမ့္မယ္။
 ဒါမွမဟုတ္ ကုိယ္က ဒီဘက္ႏွိပ္၊ ေပၚတာက ဟုိဘက္ကျဖစ္ေနပါလိမ့္မယ္။ ဒါကုိသတိထားလုိက္ရင္အဆင္ေျပပါတယ္။

အျပည့္အစံု

Status Message ကုိေဖ်ာက္မယ္ဆုိရင္

Status Message ျဖစ္တဲ့ “Showing posts for query link. Show all posts” , Showing posts with label .... အစရွိတဲ့ Status Message ေလးေတြကုိ label တပ္ထားေသာ စာမ်က္ႏွာေတြ၊ စုစည္းထားတဲ့စာမ်က္ႏွာေတြ .... အစရွိတဲ့ စာမ်က္ႏွာေတြရဲ႕ ထိပ္ေတြမွာ ရွိလုိ႔ ဖ်တ္ပစ္ခ်င္သူေတြ၊ ျဖဳတ္ခ်င္ သူေတြအတြက္ပါ။ နမႈနာအားျဖင့္

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

အျပည့္အစံု