PDA

View Full Version : Blogspot နဲ႔ ပတ္သက္သမွ်



yartar
04-02-2009, 05:09 PM
Navigation Menu (OR) Drop Down Menu for Blogger

http://i44.tinypic.com/2ps4x21.png

Navigation Menu လုပ္နည္းကို ဘေလာ႔ဂ္ဂါ သမားေတာ္ေတာ္မ်ားမ်ားရဲ႕ ကိုယ္ပိုင္ဘေလာ႔ဂ္ေတြမွာ ေတြ႔ရပါတယ္ ..တစ္ခ်ိဳ႕လဲ ကိုယ္တိုင္ေရးထားသလို တစ္ခ်ိဳ႕လဲ သူမ်ားေတြဆီက Copy ယူျပီး ကိုယ္႔ ဘေလာ႔ဂ္မွာ ထည္႔လိုက္တယ္ ..Navigation Menu လုပ္နည္းေရးထားတာေတြလဲ ရွိပါတယ္ ..ဒါက တပိုင္းေပါ႔ ..အခု ကြ်န္ေတာ္ အဲဒီ Navigation Menu (OR) Drop Down Menu ကို ကိုယ္ပိုင္ ဘယ္လို ဖန္တီးၾကမလဲဆိုတာေလးကို ေျပာျပခ်င္ပါတယ္. အရမ္းလြယ္ကူပါတယ္.. ခဏေလး အခ်ိန္ေပးလိုက္တာနဲ႔ ကိုယ္ပိုင္ Navigation Menu ေတြကို စိတ္ၾကိဳက္လုပ္ႏိုင္ပါျပီ...Navigation Menu widget ေတြနဲ႔ Sidebar မွာ အေရးၾကီးတဲ႔ လင္႔ခ္ေတြ ၊ ကက္တေလာက္ေတြကို Drop Down Menu စတိုင္ေလးေတြနဲ႔ ျပဳလုပ္ေပးႏိုင္ပါတယ္.. Navigation Menu ဟာ အလြန္ေသးငယ္ျပီး လင္႔ခ္ေတြ အမ်ားၾကီး ခ်ိတ္ေပးႏိုင္ပါတယ္ ..အခု ကြ်န္ေတာ္တို႔ Navigation Menu (OR) Drop Down Menu နဲ႔ပတ္သက္ျပီး မိမိဘေလာ႔ဂ္မွာ ဘယ္လိုထည္႔ရတယ္ဆိုတာေလးပါ ေပါင္းျပီး လြယ္ကူတဲ႔ Tutorial ေလးတစ္ခုလုပ္ၾကည္႔ရေအာင္ ..

Navigation menu ရဲ႕ Default code က ဒီလိုေရးပါတယ္ .


<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'<span style="color: rgb(0, 153, 0);">_blank</span>')"size=1 name=menu>
<option value=0 selected> <span style="color: rgb(51, 102, 255);">Type your Navigation Menu Title Here!</span> </option>
<option value=" <span style="color: rgb(255, 0, 0);">Url of your Link here</span> "> <span style="color: rgb(204, 51, 204);">Title of your link</span> </option> </select></form>

Default code ေလးကို အနည္းငယ္ ရွင္းၾကည္႔ရေအာင္ ..

-'_blank' ဆိုတာက New window ( ေနာက္စာမ်က္ႏွာ တစ္ခု ) အေနနဲ႔ ေပၚခ်င္လို႔ ေရးထားတာပါ ..
{ Same Window မွာပဲ ေပၚခ်င္တယ္ဆိုရင္ေတာ႔ ျဖဳတ္ထားႏိုင္ပါတယ္ }
-Type your Navigation Menu Title Here! ဆိုတဲ႔ ေနရာမွာ မိမိ စိတ္ၾကိဳက္ ေျပာင္းလဲျပီး အမည္ေပးႏိုင္ပါတယ္ ..
-Url of your Link here ဆိုတဲ႔ေနရာမွာေတာ႔ မိမိ ညြန္းေပးခ်င္တဲ႔ လင္႔ခ္ကို ထည္႔ေပးရပါမယ္..
-Title of your link ဆိုတဲ႔ ေနရာမွာေတာ႔ အေပၚက ေရးထားတဲ႔ URL လင္႔ခ္ကို ကိုယ္စားျပဳတဲ႔ အမည္ေရးေပးရပါမယ္ ..

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

http://i39.tinypic.com/mq915.png

ေအာက္မွာ ေရးထားတဲ႔ ကုဒ္ေလးကို ထပ္ေလ႔လာၾကည္႔ပါ ...ဒါဆို ပိုနားလည္သြားပါလိမ္႔မယ္ ....


<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option>- Myanmar Forums- </option>
<option value="http://myanmarfamily.org">Myanmar Family Forum</option>
<option value="http://myanmarengineer.org">Myanmar Engineer Forum</option>
<option value="http://myanmarchatonline.org">Myanmar Chatonline Forum</option>
<option value="http://forums.nativemyanmar.net/">Myanmar Native Forum</option>
</select></form>

အေပၚမွာ ေရးထားတဲ႔ ကုဒ္ေတြကို Copy ကူးျပီး Notepad ထဲမွာ ထည္႔လိုက္ ..ျပီးရင္ Filename.html ဆိုျပီး Save လိုက္ပါ.. { Filename က ၾကိဳက္တာေပး ..အဓိက Extension က .html ( .htm ဆိုလဲရတယ္ ) ျဖစ္ဖို႔ပဲ လိုတယ္ } ျပီးရင္ Internet Browser တစ္ခုခုနဲ႔ ဖြင္႔ၾကည္႔လိုက္ပါ ...အေပၚမွာ ေရးထားတဲ႔ ကုဒ္ေတြရဲ႕ ရလဒ္ကို ဒီလိုေတြ႔ပါလိမ္႔မယ္ ..


http://i44.tinypic.com/2ps4x21.png

အခု ျပထားတဲ႔ လင္႔ခ္ေတြက နမူနာျပတာပါ ..မိမိစိတ္ၾကိဳက္ ျပင္ဆင္ႏိုင္ပါတယ္ ..ေနာက္ထပ္ လင္႔ခ္ေတြ ထပ္ထည္႔ခ်င္ေသးတယ္ဆိုရင္ေတာ႔ ေအာက္ဆံုးလိုင္းရဲ႕ ေနာက္ကေန ဆက္ျပီး မိမိစိတ္ၾကိဳက္ ထည္႔ႏိုင္ပါတယ္ ..ဒီေလာက္ဆို Navigation menu ရဲ႕ ကုဒ္ေတြနဲ႔ ပတ္သက္ျပီး နားလည္ျပီလို႔ ထင္ပါတယ္ ..

Navigation menu / Drop down Menu ေတြကို မိမိ ဘေလာ႔ဂ္ေတြမွာ ဘယ္လိုထည္႔မလဲ .. ???

Navigation menu ကုဒ္ေတြကို မိမိဘေလာ႔ဂ္မွာ ထည္႔နည္းကလဲ လြယ္ပါတယ္ ..မခက္ပါဘူး ..

* မိမိစိတ္ၾကိဳက္လုပ္ထားတဲ႔ Navigation menu က ကုဒ္ေတြကို Copy ကူးလိုက္ပါ ..
* မိမိ Template ရဲ႕ Layout section ကိုသြားလိုက္ပါ ..
* Sidebar မွ Add PageElement tab ကို Click လိုက္ပါ ..
* HTML/JAVASCRIPT subtab ကို ေရြးခ်ယ္ပါ ...
* ခုနက Copy ကူးယူလာတဲ႔ Navigation Menu code ကို Paste ေပးလိုက္ပါ ..

က်န္တာကေတာ႔ ထံုစံအတိုင္း ေနရာခ်တာ ေခါင္းစဥ္တပ္တာတို႔ လုပ္လိုက္ပါ ..ဒါဆိုရင္ မိမိစိတ္ၾကိဳက္ လုပ္ထားတဲ႔ Navigation Menu ေလးကို မိမိ ကိုယ္ပိုင္ ဘေလာ႔ဂ္ေလးမွာ ေတြ႔ရမွာ ျဖစ္ပါတယ္ ..

အဆင္ေျပပါေစ

တာယာ

yartar
04-02-2009, 05:20 PM
Page Navigation Menu Widget for Blogger

http://i40.tinypic.com/vh93px.png

ဘေလ႔ဂ္ေအာက္ေျခ Footer မွာ အေပၚမွာ ျပထားတဲ႔ပံုလို စာမ်က္ႏွာေလးေတြနဲ႔ ရွိေနတာကို ျမင္ဘူးၾကမယ္ထင္တယ္.. ႏွစ္သက္သူမ်ား မိမိဘေလာ႔ဂ္မွာ ျပဳလုပ္လိုသူမ်ားအတြက္ ကြ်န္ေတာ္ ျပန္ျပီးေ၀မွ်ေပးလိုက္ပါတယ္ ...လုပ္နည္းက မခက္ပါဘူး....သာမာန္ Sidebar မွာ ထည္႔ေနက် HTML / JAVASCRIPT မွာ ေအာက္ကေပးထားတဲ႔ ကုဒ္ကိုထည္႔ေပးလိုက္တာနဲ႔ အဆင္ေျပပါတယ္ ...လုပ္ၾကည္႔ရေအာင္ ...

* ထံုစံအတိုင္း Blogger ကို Username & Password နဲ႔ ၀င္လုိက္ပါ...
* ျပီးရင္ Layout Section ကို သြားလိုက္ပါ...
* Add a Gadget ကို ထပ္ျပီး Click လိုက္ပါ...
* Add a Gadget Window မွ HTML / JAVASCRIPT ကို ေရြးလိုက္ပါ ..
* HTML / JAVASCRIPT Window တက္လာရင္ ေအာက္မွာ ေပးထားတဲ႔ Code ေတြကို ထည္႔ျပီး Save လိုက္ပါ ..


<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

ျပီရင္ အဲဒီ Page Navigation Menu Widget ေနရာခ်ေပးဖို႔ လိုပါတယ္ ..ဘယ္ေနရာမွာ ထားမလဲဆိုေတာ႔ Blog Post ေအာက္ကို ဆြဲျပီး ထည္႔လိုက္ပါ ..ဒါဆို ရပါျပီ..ေအာက္က ပံုေလးကို ၾကည္႔လိုက္ရင္ သေဘာေပါက္မယ္ထင္တယ္ ...

http://i41.tinypic.com/s6n6zk.gif

var pageCount=5; ဆိုတဲ႔ ေနရာမွာ ႏွစ္သက္ရာ အဆင္ေျပသလို ျပင္ဆင္ႏိုင္ပါတယ္ ..

အားလံုးျပီးသြားရင္ေတာ႔ Save လိုက္ပါ ..ဒါဆို အားလံုးျပီးသြားပါျပီ.. မိမိ ဘေလာ႔ဂ္ေလးကို ၾကည္႔လိုက္ပါ Page Navigation Menu Widget ေလးနဲ႔ အတူရွိေနတာကို ေတြ႔ရပါလိမ္႔မယ္ ...

Ref : http://www.techieblogger.com

အဆင္ေျပပါေစ

တာယာ

yartar
04-02-2009, 05:22 PM
Add Search form to Blogger

http://i44.tinypic.com/2nhlvro.png

အေပၚက ပံုေလးအတိုင္း Search form ေလးတစ္ခု ကိုယ္ပိုင္ Blog ထဲမွာ ထည္႔ၾကည္႔ရေအာင္ ..တစ္ခ်ိဳ႕ Template ေတြမွာ တစ္ခါတည္းပါေပမယ္႔ Beta Template ေတြမွာ မပါတတ္ဘူး ..ဒါေၾကာင္႔ မိမိကိုယ္တိုင္ ထည္႔ၾကည္႔မယ္ ..မခက္ပါဘူး လုပ္ၾကည္႔ရေအာင္ ..လြယ္ပါတယ္.

* Blogger ကေန Layout section ကို သြားပါ ...
* Add a Gadget ကို ထပ္ျပီး Click လိုက္ပါ...
* Add a Gadget Window မွ HTML / JAVASCRIPT ကို ေရြးလိုက္ပါ ..
* HTML / JAVASCRIPT Window တက္လာရင္ ေအာက္မွာ ေပးထားတဲ႔ Code ေတြကို ထည္႔ျပီး Save လိုက္ပါ ..


<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>


အားလံုးျပီးသြားရင္ မိမိလိုခ်င္တဲ႔ ေနရာမွာ ေနရာခ်ျပီး Save လိုက္ပါ ...ဒါဆို မိမိဘေလာ႔ဂ္မွာ Search form တစ္ခုကို ထည္႔ျပီးသား ျဖစ္သြားပါျပီ ..Template ကို Save ျပီး Preview ၾကည္႔လိုက္ပါ ..Search form တစ္ခု Add ျပီးသား ျဖစ္ေနတာကို ေတြ႔ရပါလိမ္႔မယ္ ..

Ref : http://www.techieblogger.com

အဆင္ေျပပါေစ

တာယာ

yartar
04-02-2009, 05:24 PM
Add Yahoo Smileys to Blogger

http://i42.tinypic.com/a4bsyd.png

ဘေလာ႔ဂ္မွာ ပို႔စ္တင္တဲ႔အခါ အေပၚမွာ ျပထားတဲ႔ ပံုထဲကအတိုင္း Smileys ပံုေလးေတြ ထည္႔တဲ႔ နည္းေလးေျပာျပပါမယ္ ..တစ္ခုရွိတာက ဒီလုပ္နည္းေလးက Firefox Internet Browser တစ္မ်ိဳးတည္းမွာသာ အလုပ္လုပ္ပါတယ္ ..က်န္တဲ႔ Internet Browser ေတြအတြက္ မဟုတ္ပါဘူး ..အိုေက ..စမ္းၾကည္႔ရေအာင္ ...

ပထမဆံုး Firefox Internet Browser ကို ဖြင္႔ျပီး Greasemonkey Addon (https://addons.mozilla.org/en-US/firefox/addon/748) ကို Install လိုက္ပါ ..ျပီးရင္ Browser ကို Restart ခ်လိုက္ပါ ..

Grease Monkey ကို Install ျပီးရင္ေတာ႔ Javascript file (http://manawthar.googlepages.com/yahooiconforblogger.user.js) ကို ထပ္ျပီး Install လိုက္ပါ ..( Javascript file ကို ဖြင္႔လိုက္ရံုပါပဲ..Grease monkey က သူ႔အလိုလို Install ေပးပါလိမ္႔မယ္ .. )

ေနာက္ဆံုးအဆင္႔မွာေတာ႔ -

* Blogger ကေန Layout section ကို သြားပါ ..
* ထိုမွတဆင္႔ Edit HTML Subtab ကို ထပ္ျပီးသြားလိုက္..
* HTML ကုဒ္ေတြထဲမွာ ]]></b:skin> ကို လိုက္ရွာပါ ..
* ျပီးရင္ အဲဒီ ]]></b:skin> အေပၚမွာ ေအာက္က CSS ကုဒ္ကို ထည္႔လိုက္ပါ..


img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

ဒီလိုေလး ျဖစ္သြားမယ္ ..


img.emoticon {
padding: 0;
margin: 0;
border: 0;
}
]]></b:skin>

ျပီးရင္ Template ကို Save လိုက္ပါ ..ဒါဆို အားလံုး အဆင္ေျပသြားပါျပီ .. Post တင္တဲ႔ ေနရာကို သြားၾကည္႔လိုက္ပါ ..Compose View မွာ Smiles ေလးေတြ ေရာက္ေနတာကို ေတြ႔ရပါလိမ္႔မယ္ ..

Ref : http://www.techieblogger.com

အဆင္ေျပပါေစ

တာယာ

yartar
04-02-2009, 05:26 PM
Flash and Javascript Based Tag Cloud Widget for Blogger

http://i39.tinypic.com/jsyhxl.jpg

WP အတြက္ Tag Cloud က PlugIn ေပါ႔ ..အခု ဒီ Tag Cloud က Blogspot အတြက္ပါ ..Tag Cloud ဆိုတာကိုေတာ႔ သိမယ္ထင္ပါတယ္ ..မသိလဲ အေပၚကပံုကို ၾကည္႔လိုက္ပါ..ၾကိဳက္ရင္လုပ္ၾကည္႔ရေအာင္ ..

* Blogger ကို ၀င္လိုက္ပါ ..
* Blogger ကေန Layout section ကို သြား
* ထိုမွတဆင္႔ Edit HTML Subtab ကို ထပ္ျပီးသြားလိုက္..
* ေအာက္မွာ ျပထားတဲ႔ ကုဒ္ေလးကို လိုက္ရွာလိုက္ပါ ..


<b:section class='sidebar' id='sidebar' preferred='yes'>

(OR)

<b:section class='footer' id='footer' showaddelement='no'>

(OR)

<b:section class='anything' id='anything' preferred='yes'>

ရွာေတြ႔ျပီဆို ေအာက္မွာ ေပးထားတဲ႔ ကုဒ္ေတြကို ကူးထည္႔လိုက္ပါ ....


<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>

</div>


<b:include name='quickedit'/>
</b:includable>
</b:widget>

ျပီးရင္ Template ကို Save လိုက္ပါ ...ဒါဆို ရပါျပီ ..တကယ္လို Error တက္လာတယ္ဆိုရင္ ထံုးစံအတိုင္း Character Entities Reference လုပ္ေပးလိုက္ပါ..ျပီးရင္ Layout Section ျပန္သြားျပီး ကိုယ္ထားခ်င္တဲ႔ ေနရာမွာ ထားလိုက္ေပါ႔ ...

စိတ္ၾကိဳက္ျပဳျပင္ရန္အတြက္ -

250 : Width of the Blogumus ကို ခ်ိန္းရန္ ..

200 : Height of the Blogumus ကို ခ်ိန္းရန္ ..

000000 : Color of text ကို ခ်ိန္းရန္ ..

ffffff : Background color of Blogumus ကို ခ်ိန္းရန္ ..

12 : Size of labels ကို ခ်ိန္းရန္ ..

Ps ; ကြ်န္ေတာ္လုပ္တုန္းက ျပႆနာတက္ေနတာ တစ္ခုရွိတယ္ ..ဘာလဲဆိုေတာ႔ ပို႔စ္ေရးတဲ႔အခါ Labels ေတြ မတပ္လို႔ပါ ..Tag Cloud က ေပၚမလာဘူးေလ ..ကုဒ္ေတြ မွားလို႔လားဆိုျပီး ခဏခဏျပန္ျပန္လုပ္ေနလိုက္တာာ ..လံုး၀ မရဘူ..ေနာက္မွ သံလံုငယ္ ကိုေမးၾကည္႔ျပီး လုပ္မွ သိသြားတယ္ ..ေက်းဇူးပါပဲ သံလံုငယ္ ..

http://i43.tinypic.com/rhtw89.jpg

{ Labels ေတြကို ျမန္မာလို တပ္ရင္ မေပၚပါဘူး ..အဂၤလိပ္လို တပ္မွသာ ေပၚပါတယ္ }

Ref : http://blogger-godown.blogspot.com

အဆင္ေျပပါေစ

တာယာ

yartar
04-02-2009, 05:30 PM
Insert Total Posts & Comments In Blogspot

http://i42.tinypic.com/2jayvc7.jpg

အေပၚက ပံုအတိုင္း Total Posts & Total Comments ေတြကို မိမိ ဘေလာ႔ဂ္မွာ ထည္႔ခ်င္တယ္ဆိုရင္ ေအာက္မွာ ေပးထားတဲ႔ ကုဒ္ေတြကိုထည္႔လိုက္ရင္ အဆင္ေျပပါတယ္ ..လုပ္ၾကည္႔မယ္ ..

* Blogger ကေန Layout section ကို သြားပါ ...
* Add a Gadget ကို ထပ္ျပီး Click လိုက္ပါ...
* Add a Gadget Window မွ HTML / JAVASCRIPT ကို ေရြးလိုက္ပါ ..
* HTML / JAVASCRIPT Window တက္လာရင္ ေအာက္မွာ ေပးထားတဲ႔ Code ေတြကို ထည္႔ျပီး Save လိုက္ပါ


{ တစ္ခုတည္း ထည္႔မယ္ဆို တစ္ခုပဲ ထည္႔လိုက္ေပါ႔ ..ႏွစ္ခုစလံုးထည္႔ခ်င္တယ္ဆိုရင္ေတာ႔ ႏွစ္ခုစလံုးေပါင္းျပီး ထည္႔လိုက္ပါ }

Javascript Code to Display Total Number of Posts :


<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');
}
</script><script src="http://www.yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>



Javascript Code to Display Total Number of Comments :


<script style="text/javascript"></script><script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script><script src="http://www.yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

အေပၚက ကုဒ္ေတြကိုထည္႔ျပီးရင္ ေနရာခ်ျပီး Save လိုက္ပါ ...ဒါဆို ရပါျပီ ..yourblog လို႔ ေရးထားတဲ႔ ေနရာေတြမွာေတာ႔ ျပင္ဖို႔ မေမ႔နဲ႔ဦးေနာ္ ..

Ref : http://blogger-godown.blogspot.com

အဆင္ေျပပါေစ

တာယာ

yartar
04-02-2009, 05:38 PM
Search Box for Blogspot

အရင္တေခါက္က Search Form တစ္ခု ေရးထားတယ္ .. အခုလဲ Search Box တစ္ခု ေရးနည္း ေျပာျပပါမယ္ ..မိမိဘေလာ႔ဂ္မွာ ထည္႔ခ်င္ရင္ ထည္႔ႏိုင္တာေပါ႔ ..

* Blogger ကေန Layout section ကို သြားပါ ...
* Add a Gadget ကို ထပ္ျပီး Click လိုက္ပါ...
* Add a Gadget Window မွ HTML / JAVASCRIPT ကို ေရြးလိုက္ပါ ..
* HTML / JAVASCRIPT Window တက္လာရင္ ေအာက္မွာ ေပးထားတဲ႔ Code ေတြကို ထည္႔ျပီး Save လိုက္ပါ ..


<form method="get" action="/search/"> <input type="text" name="q" size="20" value="Search My Blog..." onfocus="this.value='';return false;"> <input type="submit" value="Go"> <a href="http://blogger-godown.blogspot.com/"> </a> </p> <div align="'right'"> </div> </form>


အားလံုးျပီးသြားရင္ မိမိလိုခ်င္တဲ႔ ေနရာမွာ ေနရာခ်ျပီး Save လိုက္ပါ ...ဒါဆို မိမိဘေလာ႔ဂ္မွာ Search Box တစ္ခုကို ထည္႔ျပီးသား ျဖစ္သြားပါျပီ ..Template ကို Save ျပီး Preview ၾကည္႔လိုက္ပါ ..Search Box တစ္ခုကို ေတြ႔ပါလိမ္႔ယ္ ..

Ref : http://blogger-godown.blogspot.com

အဆင္ေျပပါေစ

တာယာ

yartar
04-02-2009, 05:39 PM
Install code syntax highlighter on blogspot

http://i44.tinypic.com/2nrox21.jpg

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

* ထံုးစံအတိုင္း မ၀င္မျဖစ္ မသြားမျဖစ္တဲ႔ Blogger ကေန ၀င္လိုက္ပါ ..
* Blogger ကေန Layout section ကို သြားပါ ..
* ထိုမွတဆင္႔ Edit HTML Subtab ကို ထပ္ျပီးသြားလိုက္..
* HTML ကုဒ္ေတြထဲမွာ </body> ကို လိုက္ရွာပါ ..
* ျပီးရင္ အဲဒီ </body> အေပၚမွာ ေအာက္က ကုဒ္ေတြကို ထည္႔လိုက္ပါ..

ထည္႔ရမည္႔ ေနရာက ဒီလို ..

http://i40.tinypic.com/21d0lza.jpg



<link href='http://alexgorbatchev.com/pub/sh/1.5.1/styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPython.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushXml.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>


ျပီးရင္ Template ကို Save လိုက္ပါ ..ဒါဆို ဘေလာ႔ဂ္ပို႔မွာ ကုဒ္ေတြ စေရးလို႔ ရပါျပီ ..ေရနည္းက ဒီလို ေရးတယ္ ..


<pre name="code" class="[LANGUAGE]">
[PUT CODE HERE]
</pre>

[LANGUAGE] ေနရာမွာ မိမိေရးတဲ႔ ကုဒ္ေပၚမွာ မူတည္ျပီး ထည္႔ေပးရမယ္....LANGUAGE အမ်ိဳးအစားေတြ ေအာက္မွာ ေရးေပးလိုက္ပါတယ္ ..လိုသလို ထည္႔သံုးေပါ႔ ...

1. cpp, c, c++
2. csharp
3. css
4. delphi, pascal
5. java
6. javascript
7. php
8. python
9. rb, ruby, rails, ror
10. sql
11. vb, vb.net
12. xml, html, xhtml, xslt

ကြ်န္ေတာ္ အခုေပးထားတဲ႔ ကုဒ္ေတြက အေပၚက LANGUAGE ေတြ အကုန္မပါပါဘူး (python) နဲ႔ (xml, html, xhtml, xslt) အတြက္ပဲ ေရးထားတာပါ..က်န္တဲ႔ LANGUAGE ေတြကို သိခ်င္ရင္ ဒီေနရာ (http://www.fileden.com/files/2008/11/4/2172771/SyntaxHighlighter_1.5.1.rar) မွာ ေဒါင္းျပီး လိုခ်င္တဲ႔ Js Script ကို Upload ဆိုဒ္တခုခုမွာ တင္လိုက္ပါ ျပီးရင္ေတာ႔ ရလာတဲ႔ လင္႔ခ္ကို လက္ရွိ ေရးထားတဲ႔ ကုဒ္ေနရာမွာ သြားျပီး ထပ္ထည္႔လိုက္ေပါ႔ ..ဒီေလာက္ပါပဲ ..


သတိထားရမွာ တစ္ခုေတာ႔ ရွိတယ္ ..အဲဒါဘာလဲဆိုေတာ႔ .. ပို႔စ္မွာ ေရးတဲ႔ အခါ Character Entities Reference လုပ္ေပးရမယ္ ...

http://i40.tinypic.com/demb75.jpg

က်န္တဲ႔ Character Entities Reference ေတြကို သိခ်င္ရင္ ဒီေနရာ (http://www.fileden.com/files/2008/11/4/2172771/HTMLLatin.doc) မွာ သြားယူျပီး ၾကည္႔ႏိုင္ပါတယ္ ...

Ref : http://interestingwebs.blogspot.com/

အဆင္ေျပပါေစ

တာယာ

yartar
04-03-2009, 07:33 PM
Read More & Collapse in Blogspot

ဒီပို႔စ္က ေတာ္ေတာ္မ်ားမ်ားသိျပီးသားျဖစ္မွာပါ ..ဘေလာ႔ဂ္ေတာ္ေတာ္မ်ားမ်ားမွာလဲ ေရးျပီးသားေတြ ရွိသလို အသံုးျပဳေနၾကတာလဲ ေတာ္ေတာ္မ်ားမ်ားရွိပါတယ္ ..အခု မသိေသးသူမ်ားအတြက္ ရည္ရြယ္ျပီး ထပ္ေရးေပးလိုက္ပါတယ္ ကြ်န္ေတာ္က ဒီနည္းကို ကိုရန္ေအာင္ (http://www.yanaung.net/) ဘေလာ႔ဂ္ကေန နည္းပညာရထားတာပါ ..အခုလဲ ကြ်န္ေတာ္အဲဒီကေနယူျပီး မွတ္ထားတာေလးကို ျပန္လည္တင္ျပေပးမွာပါ ..အေၾကာင္းအရာက Blogspot ေတြမွာ ပို႔စ္ေတြ ရွည္ေနရင္ ေခါက္ထားတဲ႔ နည္းေလးပါ ...

ကဲ ..ဘာမွမလုပ္ေသးခင္ Template ေလးကို Backup ေလးလုပ္ထားလိုက္ပါဦး ..ေတာ္ေန နဂိုရွိတာေလး လစ္ကုန္အုန္းမယ္ .. :D ဘယ္လိုလုပ္ရမလဲဆိုတာ မသိရင္ တခါတည္းေျပာျပလိုက္ပါမယ္ .. { မသိေသးသူမ်ားအတြက္ }

- http://www.blogger.com/ ကို သြားပါ...
- Username & Password ရိုက္ထည္႔ျပီး ၀င္လိုက္ပါ ...
- Dashboard ေရာက္ရင္ Layout ကို သြားလိုက္ပါ..
- အဲဒီကမွတဆင္႔ Edit HTML ကို သြားလိုက္ပါ..
- Backup / Restore Template ဆိုတာကို ေတြ႔လိမ္႔မယ္ ..
- Download Full Template ကို ႏွိပ္ျပီး Download ခ်ယူထားလိုက္ပါ..
- ဒါဆို Backup လုပ္ျခင္း ျပီးပါျပီ ...

http://i40.tinypic.com/2ia7u5c.png

အဆင္႔ ( ၁ )

- http://www.blogger.com/ ကို သြားပါ...
- Username & Password ရိုက္ထည္႔ျပီး ၀င္လိုက္ပါ ...
- Dashboard ေရာက္ရင္ Layout ကို သြားလိုက္ပါ..
- အဲဒီကမွတဆင္႔ Edit HTML ကို သြားလိုက္ပါ..
- Edit Template ဆိုတာေလး ရွိပါတယ္ ..အဲဒီေအာက္မွာ Code ေတြေပါ႔ ..
- အဲဒီ Code ေတြထဲမွာ </head> ဆိုတာကို လိုက္ရွာလိုက္ပါ ..

ရွာနည္း ( In Firefox Browser )

ကီးဘုတ္မွ Ctrl + F ကို ႏွိပ္လိုက္ပါ ..Firefox ရဲ႕ Button ေလးမွာ Find Box ေလးတက္လာပါမယ္ ..အဲဒီ Box ေလးမွာ ကိုယ္ရွာခ်င္တဲ႔ Words ကို ရိုက္ထည္႔လိုက္ပါ ...ေအာက္မွာ </head> ဆိုတာေလးကို ရွာတာ နမူနာျပထားတယ္ ..တျခား Words ေတြ ရွာရင္လဲ ဒီနည္းအတိုင္းပါပဲ ..

http://i42.tinypic.com/28qqa7b.png

- ခုနက ရွာတဲ႔ </head> ဆိုတာကို ေတြ႔ျပီဆို အဲဒီအေပၚမွာ ေအာက္က ကုဒ္ေလးကို ထည္႔လိုက္ပါ ..


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

ဒီလိုေလးျဖစ္သြားမယ္ ..

http://i40.tinypic.com/o5e54y.png

- ျပီးရင္ Save Template ကို ႏွိပ္ျပီး Save လိုက္ပါ ...

အဆင္႔ ( ၂ )

- အေပၚက အဆင္႔ ( ၁ ) က အတိုင္း Edit HTML ထိ ေရာက္ေအာင္သြားပါ ..
- ျပီးရင္ ကုဒ္ေတြကို Expand လုပ္လိုက္ပါ ..

Expand လုပ္နည္း

Template Codes ရဲ႕ အေပၚေလးမွာ ရွိပါတယ္ .. Expand Widget Template ဆိုတာေလးကို Check ေပးလိုက္ပါ ..

http://i44.tinypic.com/30v2bv8.png

- ျပီးရင္ Code ရွာဖို႔အတြက္ Ctrl + F ႏွိပ္လိုက္ပါ ..{ ရွာနည္းကို အေပၚမွာ ေရးျပီးသားပါ }
- Find Box မွာ id='post' var='post' ဆိုတာေလးကို ရွာလိုက္ပါ ..
- ေတြ႔ျပီဆို ေအာက္ကို အနည္းငယ္ဆြဲခ်ၾကည္႔ <!-- clear for photos floats --></div> ဆိုတာကို ေတြ႔လိမ္႔မယ္ ..
- အဲဒီ ၂ ခုၾကားမွာ ေအာက္က ေပးထားတဲ႔ Codes ေတြကို အစားထိုးလိုက္ပါ ...


<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>


Read More...& Collapse... ေနရာေတြမွာ မိမိၾကိဳက္တဲ႔ စာသားမ်ား အစားထိုး အသံုးျပဳႏိုင္ပါတယ္ ..
အားလံုးျပီးသြားရင္ေတာ႔ Save Template ဆိုတာေလးကို ႏွိပ္ျပီး Save လိုက္ပါ ..

အဆင္႔ (၃)

အေပၚအဆင္႔ေတြလိုပဲ -

- http://www.blogger.com/ ကို သြားပါ...
- Username & Password ရိုက္ထည္႔ျပီး ၀င္လိုက္ပါ ...
- Dashboard ေရာက္ရင္ Setting ကို သြားလိုက္ပါ ..
- Setting ထဲက Formatting Tab ကုိသြားျပီး Post-Template ေနရာမွာ
ေအာက္က ကုဒ္ေလးကို ကူးထည္႔ျပီး Save လိုက္ပါ ...ဒါဆို ပို႔စ္တင္တိုင္း သူက အျမဲပါရွိေနပါလိမ္႔မယ္ ..


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

ဒါဆိုရင္ လုပ္နည္းအပိုင္း အကုန္ျပီးသြားပါျပီ ..

အခု ပို႔စ္တင္တဲ႔ အပိုင္းကို အနည္းငယ္ေျပာျပသြားပါမယ္ ..လြယ္ပါတယ္ ..

ပုိ႔စ္ေတြ တင္တဲ႔အခါမွာ အျမည္းသေဘာအေနနဲ႔ ( ေဖာ္ျပထားလိုတဲ႔ ) တင္ျပခ်င္တဲ႔ စာပုိဒ္ေလးေတြ တစ္ပုိဒ္ေလာက္ကို ပထမဆံုး ျမင္ရတဲ႔ Type your summary here ဆိုတဲ႔ ေနရာမွာ ေဖာ္ျပေပးျပီး က်န္တာေတြကုိေတာ႔ ရဲ႕ ေနာက္မွာ ရွိတဲ႔ Type your summary here မွာ ထည္႔လုိက္ရုံပါပဲ…ဒါဆို အားလံုး အဆင္ေျပပါျပီ ...။

အဆင္မေျပတာရွိရင္ ေမးျမန္းႏိုင္ပါတယ္ ..

Ref : http://yanaung.net/

ခင္မင္စြာျဖင္႔

တာယာ