ကလစ္ႏွိပ္ႏိုင္ေသာ ပံုတစ္ပံု ထည့္သြင္းျခင္း

မိမိေပၚလိုေသာ ပံုကို အရင္ Upload လုပ္ပါ။ ထုိေနာက္ မိမိ ပံုေပၚလိုေသာ ေနရာတြင္

<a href=”ေပၚလိုေသာ လိပ္စာ“>
<img src=”ေပၚလိုေသာပံု ရွိရာလိပ္စာ“></a>

ဥပမာအားျဖင့္

<a href=”http://pikay.myanmarbloggers.org” target=”_blank”>
<img src=”http://img294.imageshack.us/img294/8762/stickypkpy1.jpg” height=”40” width=”80“>
</a>



target=”_blank” မွာ ကလစ္ႏွိပ္လွ်င္ စာမ်က္ႏွာ အသစ္ျဖင့္ ေပၚရန္ ျဖစ္သည္။
height=”80″ ႏွင့္ width=”40″ မွာ ပံု၏ အရြယ္အစားကုိ သက္မွတ္ျခင္းျဖစ္သည္။ အရြယ္အစားသက္မွတ္ေပးျခင္းျဖင့္ တင္ရမည့္ ပံုကို ကန္႔သတ္လိုက္ေသာေၾကာင့္ တင္ရေသာ ၾကာခ်ိန္ ပိုတုိေတာင္းသြားႏိုင္ပါသည္။

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

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

ပို႔စ္ေခါက္နည္းမွာ ႏွစ္မ်ဳိးႏွစ္စားရွိ၍ မိမိသက္မွတ္ထားေသာ စာလံုးကို ကလစ္ႏွိပ္လိုက္လွ်င္
(၁) သီးျခား တစ္ပို႔စ္တည္းသာ ေဖာ္ျပျခင္း ႏွင့္
(၂) လက္ရွိ စာမ်က္ႏွာတြင္ ခ်ဲ႕၍ ေဖာ္ျပျခင္း တို႔ျဖစ္သည္။

ပထမ အမ်ဳိးအစားမွာ ဘေလာ့ဂ္ကို (Refresh) ျပန္တင္သည္။ ထုိအမ်ဳိးအစား၏ အားနည္းခ်က္မွာ ေကာ္နက္ရွင္ ေႏွးေသာ ကၽြန္ေတာ္တို႔လို ႏိုင္ငံအတြက္ စာတစ္မ်က္ႏွာ ျပန္တင္မည္ဆိုလွ်င္ အေတာ္ေလး ေစာင့္ဆိုင္းရေသာေၾကာင့္ ျပန္ျပန္တင္ေနလွ်င္ ေစာင့္ေနရသည္ႏွင့္ပင္ အခ်ိန္ကုန္သြားမည္။ ေနာက္တစ္မ်ဳိးမွာ ဘေလာ့ဂ္စတက္ကတည္းက စာအျပည့္အစံုကို တင္ထားၿပီး ေခါက္၍ မျပျခင္းသာ ျဖစ္သည္။ ဒုတိယ အမ်ဳိးအစားကို လူႀကိဳက္ပိုမ်ားသည္။ ႏွစ္မ်ဳိးစလံုးမွာ တတိယ အဆင့္၌သာ ထည့္သြင္းေသာ Code အနည္းအက်ဥ္းကြာျခားသည္။

အဆင့္ (၁) မူရင္း Javascript အား Upload လုပ္ျခင္း

ထုိ http://h1.ripway.com/phyoekyaw/myhacko.js ဖုိင္ကို ကလစ္ႏွိပ္ ဆြဲခ်၍ မိမိႀကိဳက္ႏွစ္သက္ရာ File Hosting Site တြင္ Upload ျပဳလုပ္ပါ။

အဆင့္ (၂) ထို JS အား ေၾကျငာျခင္း

ေအာက္ပါ Code အား </head> မတိုင္ခင္တြင္ ထည့္သြင္းေပးပါ။

< script src=’http://h1.ripway.com/phyoekyaw/myhacko.js‘ type=’text/javascript’></script>

http://h1.ripway.com/phyoekyaw/myhacko.js ေနရာတြင္ မိမိ တင္ထားေသာ ဖိုင္လိပ္စာ ထည့္ေပးပါ။

အဆင့္ (၃) Blog1 Widget တြင္ Code ထည့္ျခင္း

Template Html တြင္ <data:post.body/> ကို ရွာေပးပါ။ ပံုမွန္အားျဖင့္ ဤသုိ႔ ရွိေနႏိုင္ပါသည္။

<div class=’post-body>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

သို႔ေသာ္ div class=’post-body’ ေနရာတြင္ တခါတရံ၌
div class=’post’
div class=’entry’
div class=’post-body entry-content’ ဟူ၍လည္း ျဖစ္ႏိုင္ပါသည္။ ထိုေၾကာင့္ <data:post.body/> ႏွင့္ ရွာၾကည့္ၿပီး ေတြ႕လွ်င္ ေအာက္ပါအတိုင္း အနီေရာင္ Code မ်ားကို ျဖည့္စြပ္ေပးပါ။

နံပါတ္ (၁) သီးျခား တစ္ပို႔စ္တည္းသာ ေဖာ္ျပျခင္း အတြက္မွာ

<div class=’post-body’ expr:id='”post-” + data:post.id’ >

<b:if cond=’data:blog.pageType == “item”‘>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

<p><data:post.body/></p>

<span id=’showlink’>
<a expr:href=’data:post.url’>Read More……</a>
</span>
<script type=’text/javascript’>
checkFull(“post-” + “<data:post.id/>”);
</script>
</b:if>

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

နံပါတ္ (၂) လက္ရွိ စာမ်က္ႏွာတြင္ ခ်ဲ႕၍ ေဖာ္ျပျခင္း အတြက္မွာ

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

အထက္ပါ Code ႏွစ္ခုတြင္ Bold လုပ္ထားေသာ Read More… ႏွင့္ Collapse… ေနရာမ်ားတြင္ မိမိႏွစ္သက္ရာ စာလံုးမ်ား ထည့္သြင္းေပးပါ။ ဥပမာ Read More… ေနရာတြင္ ဆက္ဖတ္ခ်င္ရင္ … ဟု အစားထုိးႏိုင္သည္။

အဆင့္ (၄) ပို႔စ္အား ေခါက္လိုေသာ နယ္နိမိတ္ ပိုင္းျဖတ္ျခင္း

ဥပမာ မိမိ၏ပို႔စ္တြင္ စာပိုဒ္ ငါးပိုဒ္ရွိရာ ဒုတိယအပိုဒ္အထိသာ ဘေလာ့ဂ္တက္တက္ခ်င္းတြင္ ေပၚလို၍ က်န္သံုးပုဒ္ကို Read More … ႏွိပ္ေသာအခါမွသာ ျမင္ေစလိုသည္ ဆိုပါစို႔။

ဒုတိယစာပိုဒ္၏ ေအာက္တြင္ <span id=”fullpost”> ကို ထည့္သြင္းေပး၍ ပို႔စ္အားလံုး၏ အဆံုးတြင္ </span> ထည့္သြင္းေပးျခင္းျဖင့္ ပို႔စ္ေခါက္ျခင္းကို ျပဳလုပ္ႏိုင္သည္။

ပို႔စ္အသစ္ေရးတုိင္း ေရးတုိင္း ထို Code ကို ထည့္ရန္ ေမ့ေနမည္ စိုးပါက
Settings ၏ Formatting Tab ရွိ Post Template ေနရာတြင္ ေအာက္ပါ Code ကို ထည့္သြင္း၍ Save ေပးပါ။

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

ထိုအခါ ပို႔စ္အသစ္ေရးမည္ဆိုတိုင္း ထို Code ေပၚေနမည္ျဖစ္၍ ေမ့မွာ ပူစရာ မလိုေတာ့ပါ။

Tab ပံုစံျဖင့္ ျမင္ႏိုင္ေသာ Widget ျပဳလုပ္ျခင္း


အဆင့္ (၁) Json Widget အတြက္ Javascript ထည့္သြင္းျခင္း

အထက္ပါ ေခါင္းစဥ္ကို ကလစ္ႏွိပ္၍ ဤပို႔စ္၏ လမ္းၫႊန္မႈအတုိင္း ျပဳလုပ္ပါ။ အကယ္၍ ယခင္က Json Javascript ထည့္သြင္းၿပီးပါက ထပ္မံ၍ ထည့္သြင္းရန္ မလုိအပ္ေတာ့ပါ။

အဆင့္ (၂) Tab စတိုင္ သတ္မွတ္ျခင္း

ေအာက္တြင္ ေဖာ္ျပထားေသာ Code မ်ားကို အဆင့္ (၁) မွ Code ၏ ေအာက္နား သို႔မဟုတ္ </head> ၏ အထက္နားတြင္ ထည့္သြင္းေပးပါ။

<link href=’http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css’ rel=’stylesheet’ type=’text/css’/>
<link href=’http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css’ rel=’stylesheet’ type=’text/css’/>

<script src=’http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js’ type=’text/javascript’/>
<script src=’http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js’ type=’text/javascript’/>
<script src=’http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js’ type=’text/javascript’/>

<style type=’text/css’>

.yui-content {
padding:1em; /* pad content container */
}

.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}

.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}

/* top oriented */

.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}

.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>

အဆင့္ (၃) Tabview Widget ထည့္သြင္းျခင္း

ေအာက္တြင္ ေဖာ္ျပထားေသာ Code အား </b: widget> ႏွင့္ <b: widget id=” ….. အၾကားတြင္ ထည့္သြင္းေပးပါ။

<b:widget id=’HTML102′ locked=’false’ title=’MultiTab Widget’ type=’HTML’>
<b:includable id=’main’>
<div class=’widget-content’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’
></h2>
</b:if>
<div id=’doc’>
<div>
<h2>Hoctro’s Place</h2>
<div class=’yui-navset’ id=’multiTab1’/>
</div>

</div>
<div id=’103’/>
</div>

<script type=’text/javascript’>
// Developed by Hoctro – All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement(‘h6’);
document.getElementById(‘103’).appendChild(p1);
p1.innerHTML = cb.txt(‘TabView’);

function listOneTab(json, tabView, title, act) {
var label = ”;
var text = ”;
var nPost = 10;

if (title == “”)
label += cb.getLabelFromURL(json);
else
label += title;

text += “<div id='” + label + “‘><ul>”;

var numberPost = (json.feed.entry.length <= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i < numberPost; i++) {
var entry = json.feed.entry[i];
text += “<li>” + “<a href='” + cb.getLink(entry, “alternate”)
+ “‘>” + cb.getTitle(entry) + “</li>”;
}

text += ‘</ul></div>’;

tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));

}

var blog1 = “hoctro.blogspot.com“;
var tabView1 = new YAHOO.widget.TabView(‘multiTab1’);
var labels1 = [‘JSON Hacks‘, ‘Label Hacks‘,’Free Templates‘];
function listTab1(json) {
listOneTab(json, tabView1, “”, false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, “Latest Posts”, true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, “Latest Comments”, false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, “posts”, 1, 25, ‘listLatestPostsTab1’);

// Latest Comments
cb.search( blog1, “comments”, 1, 25, ‘listLatestCommentsTab1’);

// Preferred Labels
for (var i=0; i < labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], ‘listTab1’);

</script>
</b:includable>
</b:widget>

အထက္တြင္ ေဖာ္ျပထားေသာ Code မ်ားတြင္ ေအာက္ပါတို႔ကို ျပင္ဆင္ေပးရမည္။
<h2>Hoctro’s Place</h2>
var nPost = 10;
var blog1 = “hoctro.blogspot.com“;
var labels1 = [‘JSON Hacks‘, ‘Label Hacks‘,’Free Templates‘];

Hoctro’s Place ေနရာတြင္ မိမိႏွစ္သက္ရာ Widget နာမည္ေပးႏိုင္သည္။
nPost မွာ မိမိေဖာ္ျပလိုေသာ ပို႔စ္ေခါင္းစဥ္ အေရအတြက္ ျဖစ္ပါသည္။
blog1 မွာ မိမိ၏ ဘေလာ့လိပ္စာအား သက္မွတ္ရန္ျဖစ္သည္။
label1 တြင္ မိမိ ေဖာ္ျပလိုေသာ Label မ်ားကို ထည့္သြင္းေၾကျငာေပးရမည္။

Label တစ္ခုခ်င္းစီအား ပို႔စ္ေခါင္းစဥ္ႏွင့္တကြ ေဖာ္ျပျခင္း

အဆင့္ (၁) Json Widget အတြက္ Javascript ထည့္သြင္းျခင္း

အထက္ပါ ေခါင္းစဥ္ကို ကလစ္ႏွိပ္၍ ဤပို႔စ္၏ လမ္းၫႊန္မႈအတုိင္း ျပဳလုပ္ပါ။ အကယ္၍ ယခင္က Json Javascript ထည့္သြင္းၿပီးျဖစ္ပါက ထပ္မံ၍ ထည့္သြင္းရန္ မလုိအပ္ေတာ့ပါ။

အဆင့္ (၂) HTML Page Element ထည့္သြင္းျခင္း

ေအာက္တြင္ ေဖာ္ျပထားေသာ Code အား </b:widget> ႏွင့္ <b:widget id= ….. အၾကားတြင္ ထည့္သြင္းေပးပါ။

<b:widget id=’HTML50′ locked=’false’ title=’Contents By Category’ type=’HTML’>
<b:includable id=’main’>
<!– *****************http://hoctro.blogspot.com*****Dec,2006****************** –>
<!– <b:if cond=’data:blog.pageType == “item”‘> –>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>

<div class=’widget-content’>
<div id=’data2006’/>
<script type=’text/javascript’>

var homeUrl2 = “hoctro.blogspot.com“;
var labels = [“Killer Hacks“,”Simple Hacks“,
3 Column Templates“, “Ajax Hacks“,”Custom Widgets“, “Hacking Techniques“];

// Given a json label search, this function return the decoded label.
function getLabelFromURL(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == ‘alternate’) {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani’s Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf(‘/’)+1);
return decodeURIComponent(label);
}
}
}

function listEntries2(json) {
var ul = document.createElement(‘ul’);

for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(‘li’);
var a = document.createElement(‘a’);
a.href = alturl;

var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}

for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == ‘alternate’) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl2.length+21);

var label = getLabelFromURL(json);
var txt = document.createTextNode(label);
var h = document.createElement(‘h4’);
h.appendChild(txt);
var div1 = document.createElement(‘div’);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(‘data2006’).appendChild(div1);
}
}
}

function search2(query, label) {

var script = document.createElement(‘script’);
script.setAttribute(‘src’, ‘http://’ + query + ‘/feeds/posts/default/-/’ + encodeURIComponent(label) +
‘?alt=json-in-script&callback=listEntries2’);
script.setAttribute(‘type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
}

for (var i=0; i < labels.length; i++)
if (labels[i])search2(homeUrl2, labels[i]);
</script>
</div>

<b:include name=’quickedit’/>
<!– </b:if> –>
</b:includable>
</b:widget>

အထက္ပါ Code တြင္
var homeUrl2 = “hoctro.blogspot.com“;
var labels = [“Killer Hacks“,”Simple Hacks“,
3 Column Templates“, “Ajax Hacks“,”Custom Widgets“, “Hacking Techniques“];
အထက္ပါ Bold လုပ္ထားေသာ ေနရာမ်ား၌ မိမိ၏ ဘေလာ့လိပ္စာႏွင့္ Label နာမည္မ်ားကို ထည့္ေပးပါ။

Json Widget အတြက္ Javascript ထည့္သြင္းျခင္း

(၁) Setting မ်ား ျပင္ဆင္ျခင္း

Settings >> Site Feed မွ Allow Blog Feed အား Short အျဖစ္ ေျပာင္းလဲ သက္မွတ္ေပးရမည္။


Settings >> Archiving မွ Enable Post Pages? အား Yes အျဖစ္ ေျပာင္းလဲ သက္မွတ္ေပးရမည္။

အဆင့္ (၂) Javascript ထည့္သြင္းျခင္း

ေအာက္ပါ Code ကို </head> ၏ အေပၚနားတြင္ ထည့္ေပးပါ။

<script type=’text/javascript’>
// Developed by Hoctro – All rights reserved 2007
// This credit must be included in all your derived usages.

// “cb” is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {

// search function requires these parameters:
// 1. query: a blogger address, such as “hoctro.blogspot.com”,
// 2. type: type of return data, either “comments” or “posts”,
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {
var script = document.createElement(‘script’);
script.setAttribute(‘src’, ‘http://’ + query + ‘/feeds/’ + type + ‘/default?alt=json-in-script&start-index=’
+ start + ‘&max-results=’ + increment + ‘&callback=’ + func + ‘&orderby=published’);
script.setAttribute(‘type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
},

// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as “hoctro.blogspot.com”,
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement(‘script’);
script.setAttribute(‘src’, ‘http://’ + query + ‘/feeds/posts/default/-/’ + encodeURIComponent(label) +
‘?alt=json-in-script&callback=’ + func + ‘&orderby=published’);
script.setAttribute(‘type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
},

// getTotalResults needs the json object, and it’ll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},

// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},

// getLink return a href link if “name” matches the content inside “a” tags) of the link
getLink: function(entry, name) {
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},

// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},

// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},

// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},

// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == ‘alternate’) {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani’s Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf(‘/’)+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + ” Widget by <a href=’http://hoctro.blogspot.com” + “‘>Hoctro</a>”;
}
};
</script>

အထက္ပါ Code သည္ ဘံုသံုးႏုိင္ေသာ လုပ္ေဆာင္ခ်က္မ်ား ပါ၀င္ပါသည္။ Json Object ၏ ေခါင္းစဥ္ရွာျခင္း၊ လင့္ရွာျခင္း စေသာ လုပ္ေဆာင္ခ်က္မ်ားအား ေရးသားထားျခင္းျဖစ္သည္။ ထုိ႔ေၾကာင့္ ထုိ Code ကို ထည့္သြင္းၿပီးေနာက္ပိုင္း ဤ Json Object ကို အသံုးျပဳထားေသာ မည့္သည္ လုပ္ေဆာင္ခ်က္အတြက္မဆို တစ္ခါ ထည့္သြင္းထား႐ံုျဖင့္ ထပ္မံ ထည့္သြင္းစရာ မလိုေတာ့ပါ။

ေနာက္ဆံုးတင္ပို႔စ္မ်ားေဖာ္ျပျခင္း

အဆင့္ (၁) Json Widget အတြက္ Javascript ထည့္သြင္းျခင္း

အထက္ပါ ေခါင္းစဥ္ကို ကလစ္ႏွိပ္၍ ဤပို႔စ္၏ လမ္းၫႊန္မႈအတုိင္း ျပဳလုပ္ပါ။ အကယ္၍ ယခင္က Json Javascript ထည့္သြင္းၿပီးျဖစ္ပါက ထပ္မံ၍ ထည့္သြင္းရန္ မလုိအပ္ေတာ့ပါ။

အဆင့္ (၂) “Latest Post” Widget ထည့္သြင္းျခင္း

ေအာက္တြင္ ေဖာ္ျပထားေသာ Code အား </b:widget> ႏွင့္ <b:widget id= ……… အၾကားတြင္ ထည့္ေပးပါ။

<b:widget id=’HTML101′ locked=’false’ title=’Latest Posts’ type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
<ul><div id=’dataPost’/></ul>
</div>

<script type=’text/javascript’>
// Developed by Hoctro – All rights reserved 2007
// This credit must be included in all your derived usages.
// This widget lists the available posts based on the uP.nPost value below
// Use -1 if you want them all.
var uP = {
nPost : -1
};

var cP = {
// private variable to store the total results
totCount : 0,
// the number of elements for each json call
increment : 10,
// this is the place to define the blog name for subsequent retrieval data
web : “pikay.myanmarbloggers.org“,

listPosts: function(json, tag) {

var text=””;

for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];

text += “<li>” + “<a href='” + cb.getLink(entry, “alternate”)
+ “‘>” + cb.getTitle(entry) + “</li>”;
}
var p = document.createElement(‘span’);
document.getElementById(tag).appendChild(p);
p.innerHTML = text;
},

callPostJson: function(json) {
this.listPosts(json, “dataPost”);
},

getCo : function(json) {
this.totCount = cb.getTotalResults(json);
var count = (uP.nPost < 0) ? this.totCount : uP.nPost;
var i=1;
while(i<=count) {
var incr = (count-i < this.increment) ? count-i+1 : this.increment;
cb.search( cP.web, “posts”, i, incr, ‘cP.callPostJson’);
if (incr==0) incr=incr+1;
i = i+incr;
}
}
};

cb.search( cP.web, “posts”, 1, 2, ‘cP.getCo’);

</script>
</b:includable>
</b:widget>

အထက္ပါ Code တြင္
var uP = {
nPost : -1
};

မွ -1 ေနရာတြင္ မိမိေဖာ္ျပလိုေသာ ပို႔စ္ အေရအတြက္အား သက္မွတ္ရန္ျဖစ္သည္။
-1 ဟု သက္မွတ္လိုက္လွ်င္ ပို႔စ္ အကန္႔အသတ္ မရွိ ေဖာ္ျပရန္ သက္မွတ္ျခင္းျဖစ္သည္။

ထုိေနာက္ pikay.myanmarbloggers.org ေနရာတြင္ မိမိ၏ ဘေလာ့ လိပ္စာ ထည့္ရန္ျဖစ္သည္။

Label ႏွင့္ Blog Archive မ်ားအတြက္ ပို႔စ္ေခါင္းစဥ္သာ ေပၚရန္ ျပဳလုပ္ျခင္း

အဆင့္ (၁) Edit HTML တြင္ Expend Widget Templates ကို အမွန္ျခစ္ ျခစ္ထားေပးပါ။

အဆင့္ (၂) <'b:include data='post' name='post'/> ကို ရွာေပးပါ။

အဆင့္ (၃) ထို Code ေနရာတြင္ ေအာက္ပါ ေဖာ္ျပထားေသာ Code ကို အစားထုိးေပးပါ။

<b:if cond=’data:blog.homepageUrl!= data:blog.url’>
<b:if cond=’data:blog.pageType != “item”‘>
<h3 class=’post-title’><a expr:href=’data:post.url’><data:post.title/></a></h3>
<b:else/>
<b:include data=’post’ name=’post’/>
</b:if><b:else/><b:include data=’post’ name=’post’/>
</b:if>

ထိုအခါ Label တြင္ ကလစ္ႏွိပ္လွ်င္ျဖစ္ေစ၊ Blog Archive တြင္ ကလစ္ႏွိပ္လွ်င္ျဖစ္ေစ ပို႔စ္၏ စာကိုယ္မေပၚေတာ့ဘဲ သက္ဆိုင္ရာ ပုိ႔စ္မ်ား၏ ေခါင္းစဥ္မ်ားကိုသာ ေတြ႕ႏိုင္ပါသည္။

Label မ်ားကို ေဒါင္လိုက္ Menu ပံုစံျဖင့္ ေဖာ္ျပျခင္း

အဆင့္ (၁) ေဒါင္လိုက္ Menu စတိုင္ သက္မွတ္ျခင္း

ေအာက္ပါ Code အား ]]></b:skin> မတိုင္ခင္တြင္ ထည့္သြင္းေပးပါ။

#MyMenu li{
margin:0;

padding:0 0 .25em 0;

text-indent:0px;
line-height:1.5em;
}

အဆင့္ (၂) ႀကိဳက္ႏွစ္သက္ရာ Menu ပံုစံ ေရြးခ်ယ္သက္မွတ္ျခင္း

အထက္ပါပံုအတိုင္း ေပၚႏိုင္မည့္ Menu ပံုစံျဖင့္ နမူနာျပပါမည္။ *အျခားပံုစံမ်ားအတြက္ Code ကို ေအာက္ေျခတြင္ ၾကည့္ပါ။

#MyMenu {
width: 200px;

margin: 10px;
border-style: solid solid none solid;

border-color: #3D261D;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;
height: 24px;
text-decoration: none;
}

#MyMenu li a:link, #MyMenu li a:visited {
color: #E4D6CD;

display: block;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FFF;

background: url(
http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;
padding: 8px 0 0 10px; }

အထက္ပါ Code အား အဆင့္ (၁) ရွိ Code ၏ ေအာက္ေျခတြင္ ထည့္သြင္းရပါမည္။ Bold ထားေသာ ဖုိင္ရွိရာ လိပ္စာကို မိမိပံု တင္ထားေသာ လိပ္စာသို႔ ေျပာင္းေပးရမည္။

အဆင့္ (၃) Label Widget အား ျပင္ဆင္ျခင္း

Template ၏ HTML မွ Label Widget ကို ရွာၿပီးရင္ သူ၏ ေနရာတြင္ ေအာက္ပါ Code ျဖင့္ အစားထုိးပါ။

မူလရွိေနမည့္ Code မွာ <b:widget id=’Label ျဖင့္ အစျပဳမည္ျဖစ္သည္။

ေျပာင္းလဲ Code မွာ

<b:widget id=’Label10′ locked=’false’ title=” type=’Label’>
<b:includable id=’main’>

<div id=’
MyMenu‘>
<ul>
<li>
<a expr:href=’data:blog.homepageUrl’>
<span>Home</span>
</a>
</li>

<b:loop values=’data:labels’ var=’label’>
<li>
<a expr:href=’data:label.url’>
<span><data:label.name/></span>

<span dir=’ltr’>(<data:label.count/>)</span>
</a>
</li>

</b:loop>

</ul>

<b:include name=’quickedit’/>

</div>
</b:includable>

</b:widget>

ထိုအဆင့္အားလံုး ၿပီးစီးပါက အထက္ပါပံုအတိုင္း ျမင္ေတြ႕ႏိုင္မည္ျဖစ္သည္။

ေအာက္ပါတို႔မွာ အဆင့္ (၂) တြင္ မိမိႀကိဳက္ႏွစ္သက္ရာ ေရြးခ်ယ္ထည့္ႏိုင္ရန္ တင္ျပလိုက္ရပါသည္။

ပံုစံ (၁)


#MyMenu {
width: 200px;

margin: 10px;

border-style: solid solid none solid;

border-color: #3D261D;
border-size: 1px;
border-width: 1px;
}

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #E4D6CD;

display: block;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);

padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #FFF;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;

padding: 8px 0 0 10px; }

ပံုစံ (၂)


#MyMenu {
width: 200px;

margin: 10px;

border-style: solid solid none solid;

border-color: #D8D5D1;

border-size: 1px;

border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;

height: 24px;

text-decoration: none;
}

#MyMenu li a:link, #MyMenu li a:visited {
color: #3688BA;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif);
padding: 8px 0 0 30px; }

#MyMenu li a:hover {
color: #3688BA;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}

ပံုစံ (၃)


#MyMenu {
width: 200px;
margin: 10px;

border-style: solid solid none solid;

border-color: #BCD2E6;

border-size: 1px;

border-width: 1px;
}

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;
height: 24px;

text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #8BADCF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif);

padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #627EB7;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၄)


#MyMenu {
width: 200px;
margin: 10px;

border-style: solid solid none solid;

border-color: #000;

border-size: 1px;

border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;

height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #CCC;

display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);

padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

ပံုစံ (၅)


#MyMenu {
width: 200px;

margin: 10px;
}

#MyMenu li a {
height: 32px;

voice-family: “”}””;

voice-family: inherit;

height: 24px;

text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;
display: block;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif);

padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #FFF;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif) 0 -32px;

padding: 8px 0 0 10px;
}

ပံုစံ (၆)


#MyMenu {
width: 200px;

margin: 10px;
}

#MyMenu li a {
height: 32px;

voice-family: “”}””;

voice-family: inherit;

height: 24px;
text-decoration: none;
}

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;
display: block;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif);

padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif) 0 -32px;

padding: 8px 0 0 10px;
}

ပံုစံ (၇)


#MyMenu {
width: 200px;

margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: “”}””;
voice-family: inherit;
height: 24px;

text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;

display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif);
padding: 8px 0 0 30px;
}

#MyMenu li a:hover {
color: #FFF;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif) 0 -32px;
padding: 8px 0 0 30px;
}

ပံုစံ (၈)


#MyMenu {
width: 200px;

margin: 10px;

border-style: solid;

border-color: #656556;

border-size: 1px;

border-width: 1px;
}

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;
height: 24px;

text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #656556;

display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif);

padding: 8px 0 0 20px;
}

#MyMenu li a:hover {
color: #474739;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif) 0 -32px;

padding: 8px 0 0 20px;
}

ပံုစံ (၉)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;

voice-family: “”}””;
voice-family: inherit;

height: 24px;
text-decoration: none;
}

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;

display: block;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif);

padding: 8px 0 0 35px;
}

#MyMenu li a:hover {
color: #FFF;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif) 0 -32px;

padding: 8px 0 0 35px; }

ပံုစံ (၁၀)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: “”}””;
voice-family: inherit;

height: 24px;

text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #4D4D4D;
display: block;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif);

padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #FF9834;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif) 0 -32px;

padding: 8px 0 0 10px;
}

ပံုစံ (၁၁)


#MyMenu {
width: 200px;

margin: 10px;

border-style: solid solid none solid;

border-color: #889944;
border-size: 1px;

border-width: 1px;
}

#MyMenu li a {
height: 32px;

voice-family: “”}””;

voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #889944;

display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif);
padding: 8px 0 0 25px;
}

#MyMenu li a:hover {
color: #889944;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif) 0 -32px;

padding: 8px 0 0 27px; }

ပံုစံ (၁၂)


#MyMenu {
width: 200px;

margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;

height: 22px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #666;

display: block;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif);

padding: 10px 0 0 35px;
}

#MyMenu li a:hover {
color: #000;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif) 0 -32px;
padding: 10px 0 0 35px; }

ပံုစံ (၁၃)


#MyMenu {
width: 200px;

margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: “”}””;

voice-family: inherit;
height: 24px;

text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #C7377D;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif);
padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #C7377D;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif) 0 -32px;

padding: 8px 0 0 10px; }

ပံုစံ (၁၄)


#MyMenu {
width: 200px;

margin: 10px; }

#MyMenu li a {
height: 32px;

voice-family: “”}””;

voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #333;

display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif);

padding: 8px 0 0 10px;
}

#MyMenu li a:hover {
color: #FFF;

background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif) 0 -32px;
padding: 8px 0 0 10px; }

Label မ်ားကို Menu ပံုစံျဖင့္ ေဖာ္ျပျခင္း

အဆင့္ (၁) Menu ပံုမ်ားကို ဆြဲခ်ယူရန္

http://phyoekyaw.googlepages.com/CSSmenus.zip

အဆင့္ (၂) Header တြင္ Menu ထည့္ႏိုင္ရန္ ျပင္ဆင္ျခင္း

<b:section class=”header” id=”header” maxwidgets=”1″ showaddelement=”no”>

အား

<b:section class=”header” id=”header” maxwidgets=”2” showaddelement=”yes“>

အျဖစ္သုို႔ ေျပာင္းလဲေပးပါ။

အဆင့္ (၃) Menu စတိုင္ သက္မွတ္ျခင္း

မိမိႀကိဳက္ႏွစ္သက္ရာ Menu ပံုစံကို ဤေနရာ တြင္ ၾကည့္၍ ေရြးခ်ယ္ေပးပါ။

Menu ပံုစံ F ကို ေရြးခ်ယ္သည္ ဆိုၾကပါစို႔။ *အျခားပံုစံမ်ားအတြက္ Code ကို ေအာက္ေျခတြင္ ၾကည့္ပါ။

/*- Menu Tabs F By http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/—— */
#tabsF {

float:left;
width:100%;
font-size:80%;

line-height:normal;

border-bottom:1px solid #000;}

#tabsF ul {
margin:0;

padding:10px 10px 0 50px;
list-style:none; }

#tabsF li {
display:inline;

margin:0;

padding:0;
}

#tabsF a {
float:left;
background:url(“
http://www.yourwebsite.com/labeltabs/tableftF.gif“) no-repeat left top;
margin:0;

padding:0 0 0 4px;

text-decoration:none;
}

#tabsF a span {
float:left;
display:block;
background:url(“
http://www.yourwebsite.com/labeltabs/tabrightF.gif“) no-repeat right top;
padding:5px 15px 4px 6px;

color:#666;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}

/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF; }
#tabsF a:hover { background-position:0% -42px; }
#tabsF a:hover span { background-position:100% -42px; }

အထက္ပါ Code အား ]]></b:skin> မတိုင္ခင္တြင္ ထည့္သြင္းေပးပါ။

အဆင့္ (၄) Label Widget အား ျပင္ဆင္ျခင္း

Template ၏ HTML မွ Label Widget ကို ရွာၿပီးရင္ သူ၏ ေနရာတြင္ ေအာက္ပါ Code ျဖင့္ အစားထုိးပါ။

မူလရွိေနမည့္ Code မွာ <b:widget id=’Label ျဖင့္ အစျပဳမည္ျဖစ္သည္။

ေျပာင္းလဲ Code မွာ

<b:widget id=’Label10′ locked=’false’ title=” type=’Label’>
<b:includable id=’main’>

<div id=’tabsF‘>
<ul>
<li>
<a expr:href=’data:blog.homepageUrl’>
<span>Home</span></a></li>

<b:loop values=’data:labels’ var=’label’>

<li>
<a expr:href=’data:label.url’>
<span><data:label.name/></span>
</a>
</li>

</b:loop>

</ul>
</div>
</b:includable>

</b:widget>

က်ေနာ္တုိ႔ မူလကတည္းကပင္ ပံုစံ F ကို သေဘာက် ေရြးခ်ယ္ထားေသာေၾကာင့္ id=’tabsF’ ဟု သက္မွတ္ျခင္းျဖစ္သည္။ အကယ္၍ ပံုစံ A ကို သေဘာက်သည္ ဆိုပါမူ id=’tabsA’ ဟု ေျပာင္းလဲ ေရးသားရေပမည္။ ထိုအျပင္ အဆင့္ (၃)တြင္လည္း Tab A ႏွင့္သက္ဆိုင္ေသာ Code အျဖစ္ ေျပာင္းလဲေပးရမည္။

ထိုအဆင့္အားလံုး ၿပီးစီးပါက ျမင္ရႏိုင္ေသာ ပံုစံမွာ နမူနာအားျဖင့္ ေအာက္ပါအတို္င္းျဖစ္သည္။

ေအာက္ပါတို႔မွာ အဆင့္ (၃) တြင္ မိမိႀကိဳက္ႏွစ္သက္ရာ Menu ပံုစံသို႔ ေျပာင္းလဲႏိုင္ရန္ Code တုိ႔ျဖစ္သည္။

/*- Menu Tabs————————— */

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url(“tableft.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url(“tabright.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs B————————— */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url(“tableftB.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url(“tabrightB.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs C————————— */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url(“tableftC.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url(“tabrightC.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs D————————— */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url(“tableftD.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url(“tabrightD.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs E————————— */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url(“tableftE.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url(“tabrightE.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs F————————— */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(“tableftF.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(“tabrightF.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs G————————— */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url(“tableftG.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url(“tabrightG.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs H————————— */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url(“tableftH.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(“tabrightH.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs I————————— */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url(“tableftI.gif”) no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url(“tabrightI.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs J————————— */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url(“tableftJ.gif”) no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url(“tabrightJ.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs K————————— */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url(“tableftK.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url(“tabrightK.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}