Articles by "Blogger"
Twitter Facebook

February 04, 2012 , , , ,
မိမိတို ့ဘေလာ့မွာ လိုက္ကာ အဖြင့္ အပိတ္ေလး တပ္ခ်င္ၾကရင္ေတာ့ ေအာက္မွာပါ .. လိုက္လုပ္ၾကည့္လို္က္ပါ..
Design > Edit Html > ကိုဝင္ပါ ၿပီးရင္ ကုဒ္ေတြထဲက <head> သို ့မဟုတ္ </head> ကိုရွာပါ.. ၿပီးရင္
<head> ရဲ႕ ေအာက္ </head> ရဲ႕ အေပၚမွာေပါ့ သူတို ့၂ ခုရဲ႕ အတြင္းျဖစ္ရင္ ရပါၿပီ..အဲ့မွာ ေအာက္က ကုဒ္ကို ထည့္ပါ..
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/><script src='http://joomlamyanmar.net/c1/jquery.easing.1.3.js' type='text/javascript'/>   <script type='text/javascript'>  $(document).ready(function() {     $curtainopen = false;     $(".rope").click(function(){    $(this).blur();    if ($curtainopen == false){      $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});      $(".leftcurtain").stop().animate({width:'60px'}, 2000 );     $(".rightcurtain").stop().animate({width:'60px'},2000 );     $curtainopen = true;    }else{     $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});      $(".leftcurtain").stop().animate({width:'50%'}, 2000 );     $(".rightcurtain").stop().animate({width:'51%'}, 2000 );     $curtainopen = false;    }    return false;   });     });  </script>
အေပၚကကုဒ္ေတြထဲကမွ က်ေနာ္ အျပာေရာင္နဲ ့ျပထားတဲ့ေနရာေတြမွာ စိတ္ႀကိဳက္ ျပင္ဆင္ႏို္င္ပါတယ္
' ေလးတခုကစ က်န္ခဲ့လို ့မရပါဘူး ဂရုစိုက္ပါေနာ္.. ၿပီးၿပီဆိုရင္ေတာ့ ေနာ္ကတဆင့္အေနနဲ ့ Css ထည့္ပါမယ္
<body> ကိုရွာပါ ၿပီးရင္ အဲ့ေအာက္မွာ ထည့္ပါမယ္ ပံုထဲက အတိုင္းေပါ့ လြတ္တဲ့ၾကားတေနရာရာမွာ ထည့္ပါ

Curtrin on blogger

ၿပီးရင္ေတာ့ ေအာက္က ကုဒ္ကို ထည့္ပါဗ်ာ..

/***************** Curtrin        **********************/ 
.leftcurtain{   width: 50%;   height: 100%;   top: 0px;   left: 0px;   position: fixed;   z-index: 10002;  }   .rightcurtain{   width: 51%;   height: 100%;   right: 0px;   top: 0px;   position: fixed;   z-index: 1003;  }  .rightcurtain img, .leftcurtain img{   width: 100%;   height: 100%;   z-index: 100000;  }  .rope{   position: fixed;   top: -40px;   left: 90%;   z-index: 1004;  }

ဒါဆိုရင္ေတာ့ မၿပီးေသးပါဘူးဗ်ာ တဆင့္က်န္ပါေသးတယ္.. အဲ့တာကေတာ့
Design > Page Elements > HTML/Javascript 
ကိုယူပါ ၿပီးရင္ ေအာက္က ကုဒ္ေလးကို ထည့္ၿပီး သိမ္းလိုက္ေတာ့ဗ်ာ ၿပီးပါၿပီ..
<div class="leftcurtain"><img src="http://joomlamyanmar.net/c1/images/frontcurtain.jpg"></div><div class="rightcurtain"><img src="http://joomlamyanmar.net/c1/images/frontcurtain.jpg"></div><a class="rope" href="#">  <img src="http://joomlamyanmar.net/c1/images/rope.png"> </a>
 အဲ က်န္ေသးတယ္..
အခုလို ထည့္ရင္ Html/Javascript ေဘာက္ကိုယူၿပီးထည့္တဲ့အခါ ေခါင္းစဥ္မတတ္ပါနဲ ့ေခါင္းစဥ္တတ္လိုက္ရင္
သူ ့ကိုထည့္ထားမွန္းသိသာတယ္ ၿပီးေတာ့ Widgets ရဲ႕ Header ကေပၚေနေတာ့ ၾကည့္မလွေတာ့ဘုူးေပါ့..
အဆင္ေျပၾကပါေစ..အားလံုးၿပီးၿပီဆိုရင္ေတာ့ ေအာက္ကလို ရၿပီေပါ့ေနာ္..
Twitter Facebook

February 04, 2012 , , , ,
မိမိတင္သမွ် ပို ့ေတြတိုင္းရဲ႕ ေအာက္ေျခမွာ Facebook Like Buttom , ေလးထည့္ခ်င္ၾကရင္ျဖင့္ ...
ေအာက္မွာ က်ေနာ္ျပထားေပးပါတယ္..
အရင္ဆံုး Design > Edit HTML > Edit Template > Expand Widget Templates (ကိုကလစ္ေပးထားလိုက္ပါ)
ၿပီးရင္ေတာ့ HTML ထဲက မိမိသိလိုေသာ code ကိုရွာဖို့အတြက္ Ctrl+F ကိုနိပ္ေပးလိုက္ၿပီးေအာက္က အကြက္ထဲမွာ </head> ဆိုတာကိုရွာလိုက္ပါ။ၿပီးရင္ ေအာက္က ကုဒ္ေလးကို ထည့္ပါ..
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript">
</script>
 ၿပီးၿပီဆိုရင္ ေနာ္ကတဆင့္သြားပါမယ္.. <data:post.body/> အဲ့ဒါကို ျပန္ရွာေပးပါ။ ေတြ႕ရင္ေတာ့ <data:post.body/> ရဲ့ေအာက္မွာ ေအာက္က code ေတြကိုယူထည့္ေပးရပါမယ္။ ဒီေနရာမွာေျပာစရာ
ရွိပါတယ္ တခ်ိဳ႕က Template ေတြ ေျပာင္းထားရင္ ရွာရခက္ေနမယ္ အဲ့ေတာ့ <div class='post-share-buttons'> ဆိုတာကို ရွာလိုက္ပါ ဒါမွမဟုတ္  <div style='clear: both;'/> ေတြ ့ၿပီဆိုရင္ ေအာက္ကပံုကို
ၾကည့္ပါ အဲ့တိုင္ေလး ေပးထားတဲ့ကုဒ္ကို ထည့္လိုက္ပါ.. 

ကုဒ္ကေတာ့ ေအာက္ကဟာေလးပါ ကူးထည့္လိုက္ေပ့ါေနာ္..
<div>
<fb:like action="like" colorscheme="light" font="verdana" href="data:post.url" layout="standard" send="true" show_faces="false"></fb:like>
</div>


ကဲ ဒါဆိုရင္ေတာ့ အားလံုးပဲအဆင္ေျပေလာက္ပါၿပီေနာ္..

Twitter Facebook

January 16, 2012 , , ,

How to do ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

You can use (Ctrl+F) to find easily

If you can not find it, find code of HTML below :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

You can use (Ctrl+F) to find easily

4. Remove it (which one you can find) with code of HTML below :

<!--Read-More-Link-Icon-BEGIN-->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' src='Your Read More Link Icon URL'/></a>
</div>
</b:if>
<!--Read-More-Link-Icon-END-http://ayeyarmyae.blogspot.com-->

NOTES :
a. Change Your Read More Link Icon URL

Example : http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif

b. The result is :



<!--Read-More-Link-Icon-BEGIN-->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' src='http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif'/></a>
</div>
</b:if>
<!--Read-More-Link-Icon-END-http://ayeyarmyae.blogspot.com-->

5. Click Save Template and Done.

Now you've already Added Read More Link Icon For Blogger.
Twitter Facebook

January 16, 2012 , ,
How to do :

First Step

1. Use account of Gmail

2. Visit http://www.google.com/cse site.

3. Click Create a Custom Search Engine

Like this below :

4. Fill the Form : (Example)
  • search engine name : ayeyarmyae Search Engine
  • search engine description : A search engine for ayeyarmyae
  • search engine language : choose English
  • what do you want to search ? : Only sites I select
  • sites to search : ayeyarmyae.blogspot.com/* (see Tips on formatting URLs)
  • editions : Standard Edition
  • click I have read and agree to the Term of Service

5. Click Next

6. Click Send confirmation email to accountname@gmail.com

7. Click Finish

8. Click Control Panel

9. Click Get Code

Second Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML provided by Google Custom Search into 'HTML/JavaScript'

Example of code of HTML provided by Google Custom Search below :

<!--Google-Search-Box-BEGIN-->
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="004009945176770424364:Example7m8" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=id"></script>
<!--Google-Search-Box-END-http://ayeyarmyae.blogspot.com-->

4. Click Save and Done.

Now you've already added Google Custom Search Box in Blogger.
Twitter Facebook

January 16, 2012 , , ,

How to Create Related Posts with Scroll in Blogger ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :

<data:post.body/>

You can use (Ctrl+F) to find easily

4. Right After <data:post.body/> place code of HTML below :

<!--Related-Posts-Scroll-BEGIN-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
<!--Related-Posts-Scroll-END-http://ayeyarmyae.blogspot.com-->

NOTES :Related Post : you can change it with any word-phrase you like.

5. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

6. Right Before ]]></b:skin> place code of HTML below :

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f2f2f2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

NOTES :
background-color : #f2f2f2; it's a background color, you can change it with any HTML color code you like.

7. Click Save Template and Done.

Now you've already Created Related Posts with Scroll in Blogger.
Twitter Facebook

January 16, 2012 , , , ,


How to add Top Commentators Widget in Blogger ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Fayeyarmyae.blogspot.com&num=15&filter=Blogfuel" type="text/javascript"></script>

<small><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.ayeyarmyae.blogspot.com/2012/01/top-commentators-widget-in-blogger.html" target="_blank" title="widget top commentators">Add this widget to your blog</a></div></small>

NOTES :

You can change :
  • ayeyarmyae.blogspot.com with your blog URL.
  • 15 number of commentators displayed.
  • Blogfuel an author of blog.

4. Click Save and Done.

Now, you've already added Top Commentators Widget in Blogger.
Twitter Facebook

January 16, 2012 , , , ,
How to add HTML Color Code Table in Blogger ? ...

First Step

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below :

</head>

you can use (Ctrl+F) to find easily

3. Right Before </head> place code of HTML below :

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script><!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
</script>
<![endif]-->


4. Click Save Template.

Second Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click 'HTML/JavaScript'

3. Place code of HTML below into 'HTML/JavaScript'

<!--HTML-Color-Code-BEGIN-->
<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody>
<tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr>
<tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody>
<tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>
Selected Color Code: <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p>
</td></tr>
</tbody></table>
</form>
</center>
<!--HTML-Color-Code-END-http://ayeyarmyae.blogspot.com-->

NOTES : Selected Color Code : you can change it with any word-phrase you like.

4. Click Save and Done.

Now, you've already added HTML Color Code Table in Blogger.
Twitter Facebook

January 16, 2012 , , ,
For Example picture

how to Create Horizontal Tabs Menu in Blogger ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:


]]></b:skin>
     you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> - place code of HTML below:


<!--Horizontal-Tabs-BEGIN-->
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}

.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvTgDqoMAUDF-E2876ASEluH7-y-I8aM-1veYWIq8qGabAOCC79H-ZPysTt-J5gldJgfsDYT8797Ru5Q0O72if_KcGjc6q4CSIO1Vg52wMmPiGBO2b5uyzxmSqOs9KBcma2FjRULAXqI/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeL_7pDWuzcgIV2uU8VFwG-sbrKy4CGKvihyphenhyphenB55sx1_mhfQkOHmnrx2Gven2BfixJSdWMixhFhqlTZks8K8cY64Nxt3KdgtjB8_oe_hBKBIoP6oo1p84Hdq8BNY2fMAh7cSV7tx0HZIzU/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */

.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
<!--Horizontal-Tabs-END-http://ayeyarmyae.blogspot.com-->

4. Find code of HTML below:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title' type='Header'/>
</b:section>
</div>
     you can use (Ctrl+F) to find easily

5. Right after it - place code of HTML below:


<div class='animatedtabs'>
<ul>
<li><a href= 'http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
<li><a href='http://ayeyarmyae.blogspot.com' title='Add link title'><span>Name</span></a></li>
</ul>
</div>

Notes:
You can change:
#  http://ayeyarmyae.blogspot.com
#  Add link title
#  Name
6. Click Save Template and Done.

Now, you've already Created Horizontal Tabs Menu in Blogger.
Twitter Facebook

January 16, 2012 , , ,
This is Drop Down Menu. Drop Down Menu displays huge lists of links of a blog.

How to add Drop Down Menu Widget in Blogger ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<!--Drop-Down-Menu-BEGIN-->
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>The Main Title</option>

<!-- change the links with your own -->
<option value="http://linkofsite.com">First Title</option>
<option value="http://linkofsite.com">Second Title</option>
<option value="http://linkofsite.com">Third Title</option>
</select></form>
<!--Drop-Down-Menu-END-http://ayeyarmyae.blogspot.com-->

NOTES :
  • The Main Title: It's a main title, you can change it as you like. Example: Favourite Sites
  • http://linkofsite.com : It's URL of link, you can change it with your URL of link. Example : http://www.google.com, http://www.yahoo.com
  • First Title, Second Title, Third Title: These are title of URL of Links, you can change these with your title of URL of links. Example: Google, Yahoo, Youtube

4. Click Save and Done.

Now you've already displayed Drop Down Menu Widget in Blogger.
Twitter Facebook

January 16, 2012 , , ,
How to Install Google Translate Widget ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<!--Google-Translate-BEGIN-->
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!--Google-Translate-END-http://ayeyarmyae.blogspot.com-->

NOTES :
'en' means blog language is english, you can change it to your blog language. Example: 'fr' for french, 'de' for german, 'it' for italian and 'id' for indonesian.

4. Click Save and Done.

Now you've already Installed Google Translate Widget.
Twitter Facebook

January 16, 2012 , , ,
Let's review a topic about how to add Numbered Page Navigation Blogger. Have you ever seen Numbered Page Navigation ? ...

Like this below :



Numbered Page Navigation Blogger means a Page Navigation by Numbers in Blogger. The function of Numbered Page Navigation is to navigate your blog friendly for visitor or viewers.

How to add Numbered Page Navigation Blogger ? ...

First Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {display: none;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}.showpageNum a:link,
.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">
var pageCount=2;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";
</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js">
</script>


4. Click Save.

Second Step

1. Go to Edit HTML

2. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> place code of HTML below :

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}



Third Step

1. Find code of HTML below :

</body>

you can use (Ctrl+F) to find easily

2. Right Before </body> place code of HTML below :

<!--Numbered-Page-Navigation-BEGIN-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=2;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Numbered-Page-Navigation-END-http://ayeyarmyae.blogspot.com-->

NOTES :
  • Var pageCount=2 means 2 posts would be shown in each page, you can change it as you like.
  • Var displayPageNum=5 means 5 numbers would be displayed in Numbered Page Navigation, you can change it as you like.
  • Var upPageWord ='Previous' you can change word 'previous' in to other words, such as 'before' or 'newer' or, anything you like.
  • Var downPageWord ='Next' you can change word 'Next' in to other words, such as 'older' or, anything you like.

3. Click Save Template and done.

Now you've already Added Numbered Page Navigation Blogger.
Twitter Facebook

January 16, 2012 , ,
Let's review a topic about how to create Thumbnail Related Post With Marquee. Have you ever seen Thumbnail Related Post With Marquee ? ...



Like this below :

This can display you 10 (Ten) Thumbnail Related Posts in each post of blog and it is moved by marquee.

How to create Thumbnail Related Post With Marquee ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :

</head>

you can use (Ctrl+F) to find easily

4. Right Before </head> place code of HTML below :

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
<!-- remove --></b:if>


5. Find code of HTML below :

<div class='post-footer-line post-footer-line-1'>

you can use (Ctrl+F) to find easily

If you can not find it, find code of HTML below :

<p class='post-footer-line post-footer-line-1'>

you can use (Ctrl+F) to find easily

6. Right After <div class='post-footer-line post-footer-line-1'> Or, <p class='post-footer-line post-footer-line-1'>
(which one you can find)

Place code of HTML below :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://ayeyarmyae.blogspot.com' style='display:none;'>Blogfuel</a>
</b:if>
</b:if>

NOTES :
var maxresults=10; means 10 Thumbnail Related Posts displayed, you can change it. Example : var maxresults=5; or, anything you like.

7. Click Save Template and Done.

Now, you've already created Thumbnail Related Post With Marquee.
Twitter Facebook

January 16, 2012 , ,


ဒီေကာင္ေလးကေတာ့ဘေလာ့ပို ့ေတြကို PDF format နဲ ့တိုက္ရိုက္ထုတ္တဲ့ေကာင္ေလးပါ.

How to Add Save as PDF Button to Blogger Posts ? ...
အရင္ဆံုူး http://web2.pdfonline.com ဒီလင့္ေလးမွာ အေကာင့္သြားေဖာက္လိုက္ၾကပါ

အေကာင့္ေဖာက္တာေတာ့ မေျပာျပေတာ့ပါဘူးေနာ္
သိၾကမွာပါ.. အဲ့မွာ အေရးႀကီးတာက
your blog or website address : http://yoursite.blogspot.com ျဖစ္ရပါမယ္
  • ပါတ္ဝက္ေတြ နာမည္ေတြက ဘေလာ့ဂါနဲ ့အတူတူျဖစ္ရပါမယ္..
  • ေနာက္တဆင့္အေနနဲ ့ကေတာ့ အေကာင့္ေဖာက္လို႕ၿပီးၿပီဆိုရင္ Sign in ဝင္ပါ ေအာက္မွာ နမူနာျပထားေပးပါတယ္ ျဖည့္ရမည့္စာသားေတြကို..
  • paper orientation : Portrait
  • top margin : 0.5
  • bottom margin : 0.5
  • left margin : 0.5
  • right margin : 0.5
  • convert a web page to PDF : http://www.pdfonline.com
  • click Generate the Java Script. ဆိုတာေလးကို ႏွိပ္ၿပီး Java ကုဒ္ေလးကို ယူလိုက္ပါၿပီးရင္..

ေနာက္တဆင့္အေနနဲ ့
1.  Dashboard>> Design>> Edit HTML ကိုသြားလိုက္ပါ

2.  Expand Widget Templates ဆိုတာမွာ ကလစ္ေပးခဲ့ပါ

3.ေအာက္က ကုဒ္ကို ရွာပါ:

<div class='post-footer'>

  (Ctrl+F) ျဖင့္လည္းရွာေဖြႏိုင္ပါတယ္
4. <div class='post-footer'>   ဒီကုဒ္ရဲ႕ေနာက္မွာ
ေအာက္ နမူနာျပထားတဲ့ကုဒ္ ပါ.. သူငယ္ခ်င္းတို ့က ေစာေစာက ရလာတဲံ ကုဒ္ကို ထည့္ရပါမယ္..
<!--Save-as-PDF-Button-BEGIN-->
<script type='text/javascript'>
var authorId = &quot;DC97C971-DEDD-42FD-80A7-contohsaja&quot;;
var pageOrientation = &quot;0&quot;;
var topMargin = &quot;0.5&quot;;
var bottomMargin = &quot;0.5&quot;;
var leftMargin = &quot;0.5&quot;;
var rightMargin = &quot;0.5&quot;;
</script>
<script src='http://web2.pdfonline.com/pdfonline/pdfonline.js' type='text/javascript'>
</script>
<!--Save-as-PDF-Button-END-http://ayeyarmyae.blogspot.com-->

5. save template ကိုႏွိပ္ေပါ့ဗ်ာ ၿပီးပါၿပီ...
Twitter Facebook

January 16, 2012 , , ,
နည္းပညာေရးသားမွ်ေဝတဲ့ဘေလာ့တိုင္းအတြက္ Add Print Button to Blogger Posts ဆိုတာေလးက အမွန္တကယ္ လိုအပ္ပါတယ္ လာေရာက္ေလ့လာ ဖတ္ရွု႕သူေတြအတြက္ နည္းပညာမ်ားကို ပရင့္ထုတ္ယူ
ၿပီး သိမ္းစည္းႏိုင္ရန္အတြက္ပါ..
Print Buttonေလးကိုဘယ္လို ထည့္မလဲဆိုေတ့ာ ေအာက္မွာ ေျပာျပထားေပးပါတယ္.. 
ပထမဆံုးအေနနဲ ့
1. Dashboard ကိုဝင္ပါ, Design ကိုဝင္ပါ,  Edit HTML ကိုဝင္ပါ

2.  Expand Widget Templates ဆိုတာေလးကို အမွန္ျခစ္ေလးေပးထားခဲ့ပါ

3. ေအာက္က Html ကုဒ္ေလးကိုရွာပါ:


</head>

(Ctrl+F)ကိုအသံုးျပဳၿပီး လြယ္ကူစြာ ရွာေဖြႏိုင္ပါတယ္

4. </head> ဒီကုဒ္ေလးရဲ႕ အေရွ႕မွာေအာက္က HTML ကိုထည့္ပါ :


<style media='print' type='text/css'>#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}#main-wrapper {width: 100%}</style>


ဒုတိယ အဆင့္အေနနဲ ့က
1. ေအာက္က ကုဒ္ေလးကို HTML ထဲမွာရွာပါ :


<data:post.body/>

(Ctrl+F)ကိုအသံုးျပဳၿပီး လြယ္ကူစြာ ရွာေဖြႏိုင္ပါတယ္
2.<data:post.body/> ဒီကုဒ္ေလးရဲ႕ေနာက္မွာေအာက္ကေပးထားတဲ့ Code ေလးကို ထည့္ပါ :


<!--Print-Button-BEGIN-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><a href='javascript:window.print()' style='text-decoration:none;' target='_blank'><img src='http://www.iconarchive.com/icons/artua/dragon-soft/24/Printer-icon.png' style='margin-bottom:-12px; cursor: pointer; border:none;-moz-box-shadow: none;-webkit-box-shadow:none;box-shadow:none;'/><span style='color:#1A67B8; font: normal bold 15px Arial.Helvetica,sans-serif; letter-spacing: 0.85px;'><i>Print This Post</i></span></a></b:if>
<!--Print-Button-END-http://ayeyarmyae.blogspot.com-->

NOTES :
အေပၚက ကုဒ္ထဲက အနီေရာင္နဲ ့ေရးတဲ့Print This Post ဆိုတဲ့ေနရာမွာ စိတ္ႀကိဳက္စာသားေျပာင္းလဲ၍
အသံုးျပဳႏိုင္ၾကပါတယ္..
3. ၿပီးၿပီဆိုရင္ေတာ့ save template ကိုႏွိပ္ၿပီး သိမ္းလိုက္ၾကပါ..
Print Buttom ထည့္တာေလး ၿပီးဆံုးသြားပါၿပီ.. အဆင္ေျပၾကပါေစဗ်ာ ..
Twitter Facebook

January 15, 2012 , , ,




Twitter Facebook

January 13, 2012 , , ,
မိမိဆိုဒ္ရဲ႕ Tab Bar မွာ စာသားေလးေတြ ေျပးေနေအာင္ လုပ္တဲံ့ကုဒ္ေလးပါ..
ပံုထဲက ေဘာင္ေလးေတြနဲ ့ျပထားတဲ့ေနရာေလးပါ.. စာသားကေတာ့မိမိ စိတ္ႀကိဳက္ ထည့္လို ့ရပါတယ္ ေအာက္မွာ သူ ့ရဲ႕ သံုးရမည့္ Java ကုဒ္ေလး ေပးထားပါတယ္.. Blogger သမားေတြကေတာ့
လြယ္လြယ္ကူကူဆိုရင္ Dashboard >> Layout >> Page Element မွ Add Gadget ယူ Html/Java ကို
ယူၿပီး ထည့္သံုးႏိုင္ပါတယ္ Java Effect ေတြတိုင္းကို အဲ့လို Tex box ယူၿပီး သံုးေနမယ္ဆိုရင္ေတာ့ ဆိုဒ္က ေလးလာမွာေသခ်ာတယ္ဗ်.. ေနာ္ကတနည္းေပါ့ဗ်ာ.. Dashboard >> Layout >>Edit Html ကိုဝင္ပါ
body Tag ရဲ႕ မဆံုးခင္နားမွာ ထည့္ေပးႏိုင္ပါတယ္.. </body></html> ဒီကုဒ္ေလးကိုရွာၿပီး သူရဲ႕ အေပၚမွာ ထည့္နိုင္ပါတယ္.. မွားယြင္းတာ ရွိရင္ေတာ့ ခြင့္လႊတ္ၾကပါဗ်ာ က်ေနာ္ စမ္းၾကည့္ဖူးတဲ့အရာေလးေတြကို သူငယ္ခ်င္းတို ့လဲ ကလိခ်င္ရင္ ကလိလို ့ရေအာင္ ေျပာျပေပးတာပါ..

<script language="javascript" type="text/javascript">
 msg = " ဒီေနရာမွာ စာသားထည့္ပါ ";
 msg = "..." + msg;pos = 0;
 function scrollMSG() {
 document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
 pos++;
 if (pos > msg.length) pos = 0
 window.setTimeout("scrollMSG()",150);
 }
 scrollMSG();
 </script>

အနီနဲ ့ေရးထားတဲ့ေနရာမွာ မိမိ ဆိုဒ္အတြက္ ထည့္ခ်င္တဲ့ စာသား ထည့္ႏိုင္ပါတယ္..
Twitter Facebook

January 09, 2012 1 ,
ဒီ widget ေလးကေတာ့ တျခား recent posts widget ေတြနဲ႔ မတူပါဘူး၊ ေတာ္ေတာ္ေလး လန္းတယ္လို႔ ဆိုရမွာပါ။ လုပ္နည္းေလးကလည္း လြယ္ကူလြန္းပါတယ္။ က်ေနာ့္ဘေလာ့မွာ ထည့္ထားတဲ့ recent posts widget ပံုစံေလးပါ။ ထည့္ခ်င္လို႔ ရွိရင္..


ပထမဆံုးက်ေနာ္တို႔ ဒီေနရာ ေလးကို သြားလိုက္ပါ။ ေအာက္ကပံုအတိုင္း ေပၚလာပါလိမ့္မယ္။

ပံုထဲကအတိုင္း ကိုယ့္စိတ္ႀကိဳက္ ျပင္ၿပီးရင္ေတာ့ ေအာက္က ပံုအတိုင္း အနီေရာင္နဲ႔ ေဘာင္ခတ္ထားတဲ့အတိုင္း Customize ဆိုတာကို ႏွိပ္ပါမယ္။

ၿပီးရင္ ေအာက္ကပံုအတိုင္း အနီေရာင္ ျပထားတဲ့ Add Widget to My Blog ဆိုတာကို ႏွိပ္ေပးလိုက္ပါ။

ဒါဆိုရင္ ေအာက္က ပံုအတိုင္း ျဖစ္သြားပါမယ္.

 ဒီေနရာမွာ ADD WIDGET ဆိုတာကိုႏွိပ္ၿပီး တစ္ခါတည္း ထည့္လို႔ ရပါတယ္. (သို႔မဟုတ္)
Edit content: ဆိုတာကိုႏွိပ္လိုက္ၿပီး Box ထဲက code ေတြကို copy ကူးထားလိုက္ပါ....
ၿပီးရင္ Layout ထဲက Page Element ထဲက Add Gatget ဆိုတာကို ႏွိပ္ၿပီး HTML/Java Script မွာ သြားထည့္လိုက္ပါ။ ၿပီးရင္ Save ေပးလိုက္ပါ။ gatget ကို ေနရာခ်ၿပီး Save ေပးလိုက္ရံုပါပဲ။ 

ဒါဆိုရင္ Recent Posts widget ကို ထည့္လို႔ ၿပီးသြားပါၿပီခင္ဗ်ာ။
Twitter Facebook

January 09, 2012 , , ,
ဒါေလးကေတာ့ ဘေလာ့မွာ Share and Save button widget ထည့္နည္းေလးပါ။ ပို႔စ္တစ္ပုဒ္ဆံုးတိုင္း ဒီ button ေလး အၿမဲရွိေနမွာ ျဖစ္ပါတယ္။ ထည့္နည္းေလးကလည္း လြယ္ပါတယ္။




(၁)
က်ေနာ္တို႔ widget ေတြ ထည့္တဲ့ ထံုးစံအတိုင္း Layout ထဲက Edit HTML ကိုသြားပါမယ္။
(၂)
Template ကို backup လုပ္ဖို႔ မေမ့ပါနဲ႔။
(၃)
backup လုပ္ၿပီးသြားရင္ Expand Widget Template ဆိုတာေလးကို Check ေပးလိုက္ပါ။
(၄)
ၿပီးရင္ <data:post.body/> ဆိုတာေလးကို (Ctrl+F) နဲ႔ ရွာလိုက္ပါ။
(၅)
ေတြ႔ၿပီဆိုရင္ ေအာက္က Code ေတြကို သူ႕ရဲ႕ ေနာက္မွာ ကပ္ၿပီးထည့္ေပးလိုက္ပါ။ Read More ထည့္ထားတဲ့သူေတြအတြက္ Read More widget ရဲ႕ ေနာက္မွာ ထည့္ေပးရပါမယ္။


<!-- AddToAny Share/Save BEGIN -->
<br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171' height='16'/><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p></a><script type='text/javascript'>a2a_linkname_escape=1;a2a_linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script>
<!-- AddToAny Share/Save END -->

(၆)
ထည့္ၿပီးၿပီဆိုရင္ေတာ့ Preview အရင္ၾကည့္ လိုက္ပါအံုး။ အဆင္ေျပတယ္ဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လိုက္ပါ။
ဒါဆိုရင္ေတာ့ ပို႔စ္တစ္ပိုဒ္ ဆံုးတိုင္းဆံုးတိုင္းမွာ share & save ဆိုတာေလး အၿမဲပါေနေတာ့မွာပါ။ ဒီ widget ေလးထည့္ေပးထားျခင္းအားျဖင့္ ကိုယ္ေရးထားတဲ့ ပို႔စ္တစ္ပုဒ္ကို လြယ္လြယ္ကူကူ Sharing လုပ္သြားႏိုင္ပါတယ္။ ဘေလာ့လာလည္တဲ့သူေတြ အဆင္ေျပေစမယ့္ widget တစ္ခုပါခင္ဗ်ာ။ အားလံုး အဆင္ေျပၾကပါေစ..
Widget ကို ကိုယ့္စိတ္ႀကိဳက္လုပ္ခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္ကလင့္အတိုင္း မူရင္းေနရာကို သြားၾကည့္ႏိုင္ပါတယ္။

Twitter Facebook

January 09, 2012 , , , ,
က်ေနာ့္ ဘေလာ့မွာလည္း တင္မထားရေသးတာနဲ႔ ဒီ related posts widget ေလးကို တင္အံုးမယ္လို႔ စိတ္ကူးလိုက္တာပါ။ အရင္ကေတာ့ thumbnails နဲ႔ ျပတဲ့ related post widget ကိုေတာ့ တင္ေပးထားဖူးပါတယ္။ လိုရမယ္ရေပါ့ဗ်ာ။



အဆင့္(၁)။ အေနနဲ႔ Relatedposts ဆိုတဲ့ .js ဖိုင္ေလးကို အရင္ download ယူထားလိုက္ပါ။ ၿပီးရင္ ျပန္တင္ေပးရမွာ ျဖစ္ပါတယ္။
အဆင့္(၂)။ က်ေနာ္တို႔ ထံုးစံအတိုင္း Layout ထဲက Edit HTML ကို သြားရပါမယ္။
အဆင့္(၃)။ backup ေလး လုပ္ဖို႔ မေမ႔နဲ႔ေပါ့ဗ်ာ။
အဆင့္(၄)။ ၿပီးရင္ expand widget template ဆိုတာေလးမွာ ကလစ္ေပးခဲ့လိုက္ပါ။
အဆင့္(၅)။ ၿပီးရင္ေတာ့ </head> ဆိုတာေလးကို ရွာလိုက္ပါ။


အဆင့္(၆)။ ေအာက္က code ေတြကို အဲဒီ </head> ရဲ႕အေပၚ မွာ ထည့္ေပးလိုက္ပါ။

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://img38.imagefra.me/img/img38/6/4/29/thetnaing/f_i29o2gm_44959d9.gif) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://ေဒါင္းလုပ္ယူခဲ့တဲ့ relatedposts.js' type='text/javascript'/><!--RelatedPostsStops-->

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

အဆင့္(၇)။ <data:post.body/> ဆိုတာေလးကို ရွာလိုက္ပါ။
အဆင့္(၈)။ ေအာက္က code ေတြကို <data:post.body/> ဆိုတာရဲ႕ ေအာက္မွာ ထည့္ေပးလိုက္ပါ။
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->
အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။
အဆင့္(၉)။ အားလံုးၿပီးသြားၿပီ ဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လုပ္လိုက္ပါ။ ဒါဆို related post widget ထည့္တာ ၿပီးသြားပါၿပီ။ ပို႔စ္ title သို႔မဟုတ္ readmore ဆိုတာေတြ ႏွိပ္ၾကည့္မွ related post က ေပၚမွာျဖစ္ပါတယ္။တကူးတက ဖတ္ေပးတာ ေက်းဇူးပဲဗ်ာ....

Twitter Facebook

January 09, 2012 , , ,
ဒီ widget ေလးကလည္း အထူးအဆန္းေတာ့ မဟုတ္ပါဘူး။ တန္းပလိတ္ေျပာင္းတုန္းမို႔ တင္ေပးဖို႔ စိတ္ကူးမိတာေလးပါ။ အရင္လည္း တင္ထားတာ ဒီေနရာမွာ ၾကည့္လို႔ရပါတယ္။ ဒါေလးကေတာ့ ဒီဇိုင္းေလးက ဆန္းလို႔ ထပ္တင္လိုက္တာပါ။ ႀကိဳက္တာသံုးလို႔ ရတာေပါ့ဗ်ာ။ ထည့္နည္းေလးကလည္း မခက္ပါဘူး .. ေအာက္က အဆင့္ေတြအတိုင္းတစ္ဆင့္ခ်င္း လုပ္သြားရံုပါပဲ..


က်ေနာ္တို႔ ဒါေလးကို ထည့္မယ္ဆိုရင္.. ထံုးစံအတိုင္း Blogger.com ကိုေတာ့ Sign in လုပ္ရပါမယ္။ ၿပီးရင္ Layout tab ထဲက Edit HTML ကို သြားရပါမယ္။ တန္းပလိတ္ကို backup လုပ္ဖို႔လည္း မေမ့နဲ႔အံုးေနာ္..

ၿပီးရင္ ေအာက္က Code ကို ရွာလိုက္ပါ။

]]></b:skin>


ေတြ႔ၿပီ ဆိုရင္ ေအာက္မွာ ေပးထားတဲ့ Code ေတြကို သူ႕ရဲ႕အေပၚမွာ ထည့္ေပးလိုက္ပါ။




.showpageArea {
padding : 10px;
color : #003366;
text-align : left;
width : 530px;
}
.showpageArea a {
float : left;
background : url(http://img2.pict.com/96/d6/a0/560d85d87b7c3fea73e4f41131/y4c23/backbutton.gif) no-repeat 0 0;
text-align : center;
width : 127px;
height : 42px;
text-align : center;
display : block;
margin : 0 5px;
color : #333;
padding-top : 6px;
}
.showpageArea a:hover {
color : #333;
margin : 0 5px;
padding-top : 6px;
}
.showpageNum a {
background : url(http://img2.pict.com/56/25/a3/e5bd7a9aee1773cf20cd242307/UUzOf/pagenum.gif) no-repeat 0 0;
width : 37px;
height : 42px;
display : block;
text-align : center;
float : left;
margin : 0 5px;
padding-top : 6px;
text-decoration : none;
color : #333;
}
.showpageNum a:hover {
background : url(http://img2.pict.com/fb/78/73/0fd48455927b7543953f6f1637/KG3bY/pagenum.gif) no-repeat 0 100%;
color : #fff;
}
.showpagePoint {
background : url(http://img2.pict.com/fb/78/73/0fd48455927b7543953f6f1637/KG3bY/pagenum.gif) no-repeat 0 100%;
width : 37px;
height : 42px;
display : block;
float : left;
text-align : center;
margin : 0 5px;
padding-top : 6px;
font-weight : bold;
color : #fff;
}
.showpageNum a:link, .showpage a:link {
text-decoration : none;
color : #cc0000;
}


ေနာက္တစ္ဆင့္အေနနဲ႔ ေအာက္က code ကိုရွာလိုက္ပါ။

</body>


ေတြ႔ရင္ ေအာက္မွာ ေပးထားတဲ့ Code ကို သူ႕ရဲ႕ အေပၚမွာ ထည့္ေပးလိုက္ပါ။

<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i ){var timestamp1=post.published.$t.substring(0,19) post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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 '&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){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">' thisNum '</span>'}else{if(p==0){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 }}}if(thisNum>1){html='' upPageHtml ' ' html ' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages (' (postNum-1) ')</span>' html;if(thisNum<(postNum-1)){html =downPageHtml}if(postNum==1)postNum ;html ='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/' thisLable '?&max-results=' pageCount '">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i ){var timestamp1=post.published.$t.substring(0,19) post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum ;htmlMap[htmlMap.length]='/search/label/' thisLable '?updated-max=' timestamp '&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){upPageHtml=labelHtml upPageWord '</a></span>'}else{upPageHtml='<span class="showpage"><a href="' htmlMap[p] '">' upPageWord '</a></span>'}fFlag }if(p==(thisNum-1)){html ='<span class="showpagePoint">' thisNum '</span>'}else{if(p==0){html=labelHtml '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 }}}if(thisNum>1){if(!isLablePage){html='' upPageHtml ' ' html ' '}else{html='' upPageHtml ' ' html ' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages (' (postNum-1) ')</span>' html;if(thisNum<(postNum-1)){html =downPageHtml}if(postNum==1)postNum ;html ='</div>';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}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/") 14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/") 14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="' home_page 'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="' home_page 'feeds/posts/full/-/' lblname1 '?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

ကုဒ္ေတြကိုင္သံုးရတာ မ်ားတယ္ဆိုရင္ေတာ့ ေအာက္ ဟာေလးသံုးလိုက္ဗ်ာ က်ေနာ္ ျပန္ခ်ဳ႕ံေပးထာပါတယ္
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;ေနာက္စာမ်က္ႏွာသို ့&quot;;
var downPageWord=&quot;ေရွ႕စာမ်က္ႏွာသို ့&quot;;
</script>
<script type="text/javascript" src="http://api.ning.com/files/Ly3kyS2FnJtrLzNWWISbAUiBvSWrEbTlQP4JtpapWB-MkVNNKt8-9R56UJL8H7PBXajPP6UUSad5oEZ1GhiwiEVk6KEJLD6b/pagetab.js"></script> 
ဒီဟာေလးပါပဲဗ်ာ ႏွစ္ပိုဒ္ပဲ ပါတယ္..  
ၿပီးရင္ေတာ့ Save Template လုပ္လိုက္ပါ။ ဒါဆို စာမ်က္ႏွာ ထည့္တဲ့ widget ထည့္လို႔ၿပီးသြားပါၿပီ။ အထက္မွာ အနီေရာင္နဲ႔ ျပထားတဲ့ ေနရာေတြမွာ ကိုယ့္ဘေလာ့တန္းပလိတ္နဲ႔ ကိုက္ညီေအာင္ ျပင္ႏိုင္သလို ပံုေတြရဲ႕ link ေတြကိုလည္း ကိုႀကိဳက္သလို ထည့္ႏိုင္ပါတယ္။ အဆင္ေျပပါေစခင္ဗ်ာ...

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget