Related Posts Widget For Blogger

1)  Design > Page Elements > Edit HTML > Expand Widget Templates ကိုသြားလိုက္ပါ။

2) </head> ဒီကုဒ္ေလးကို ရွာပါ...။

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

<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http://www.webaholic.co.in/other/bw.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/1866208202/rlpost.js' type='text/javascript'/>
<!--Related Post Widget Ends-->

4) ဒီ<div class='post-footer'> ကုဒ္ေလးကိုရွာပါ...။


5) ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို <div class='post-footer'> ရဲ႔ေအာက္မွာထညိ့လိုက္ပါ။

<!--Related Post Widget 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 Post Widget Ends-->

6)  Template ကို Save လုိက္ပါ...။လုပ္ေဆာင္ခ်က္ျပီးဆံုးပါျပီ။

Remove - Subscribe to: Posts (Atom)

1. Go to dashboard/ template/ edit HTML
2. Click the 'Expand Widgets Templates' box
3. Find:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Remove this line:

<b:include data='feedLinks' name='feedLinksBody'/>

That should remove Posts (Atom)

ေနာက္တစ္မ်ိဳး

1. Go to Blogger Dashboard > Design tab > Edit HTML tab
2. Check Expand Widget Templates checkbox
3. Then serach for the following line of code and remove it.

   <b:include name='feedLinks'/>

4. Finally Save Your template.

How to Hide this links By CSS?

There is another way to hide this links By CSS
You just copy the below code and paste it before ]]></b:skin> tag

.blog-feeds{display:none !important;}

ေနာက္တစ္မ်ိဳး

1.  Log in to blogger account > Go to Design >> Edit Html

2. Make sure added check mark in Expand Widget Templates

3.  Find this tag by using Ctrl+F

 <b:include name='feedLinks'/>

Delete code Blue you found.
4. Now click save template. you are done.

Automatic Thumbnail and Read More Function for Blogger

Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.
This is automatic read more function with thumbnail. We just need to set up our HTML code.
Follow steps:
1. Go to "Design" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code
<data:post.body/>
4. Replace with this code below

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

5. Now, search for </head> and paste the following section of code immediately before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

clarification code above:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

post tittle ေရွ႕မွာ ပံုေလးထည့္ခ်င္ရင္

1.  blogger မွာ log in ျပီးရင္  Design >> Edit HTML သြားပါ။

2. "Expand Widget Templates"  ေရွ႕က box ေလးမွာ အမွန္ျခစ္ေလးေပးလိုက္ပါ။

3.  ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကိုရွာပါ။ Templates တစ္ခုနဲ႔ တစ္ခုေတာ့ ကြဲျပားမွဳရွိႏိုင္ပါသည္

<a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>

4. အနီေရာင္ ကုဒ္ႏွင့္ အျပာေရာင္ကုဒ္ ၾကားမွာ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကိုထည့္ေပးလိုက္ပါ
 <a expr:href='data:post.url'><data:post.title/></a>

<img src="ပံုရဲ႕ URL- link ထည့္ရန္" style="border-width: 0px;" />
ဥပမာ ဒီလိုေလး ျဖစ္သြားပါ လိမ္မယ္
<a expr:href='data:post.url'> <img src="ပံုရဲ႕ URL- link ထည့္ရန္" style="border-width: 0px;" /><data:post.title/></a> 
5. template ကို save လို႔ ရပါျပီ။လုပ္ေဆာင္ခ်က္ျပီးစီး ပါျပီ။ အဆင္ေျပၾကပါေစ။

မိမိ blog မွာ post တင္ရင္ လွလွေလးျဖစ္ေအာင္

မိမိ ဘေလာ့မွာ ကိုေရးထာတဲ့(post တင္တဲ့)စာေတြကို သိသိသာသာ သတိထားမိေစရန္ ဒီလိုေလးေရခ်င္ရင္ေတာ့ ေအာက္မွာေဖာ္ျပထားတဲ့ အတိုင္း လုပ္ၾကည့္ပါ အားလံုးကိုေလးစားလွ်က္ ေမာင္ေအးလြင္ ၁. အရင္ဆံုး blogger မွာ sign in ၀င္လို္က္ပါ.
2.  Design ကိုသြားပါ။ edit HTML ေရွ႕က box ေလးမွာ အမွန္ျခစ္ေလးေပးလိုက္ပါ။
3. ဒီကုဒ္ေလးကို ရွာပါ....  ]]></b:skin>
4.ေအာက္မွာ ေပးထားတဲ့ ဒီဇိုင္း (၇)ခုထဲက မိမိႏွစ္သက္ရာကို ဒီကုဒ္ အေပၚကထည့္ပါ ]]></b:skin>

5.မွတ္ခ်က္။   ။ မိမိ post တင္တဲ႔ အခ်ိန္မွာ မိမိ ေဖာ္ျပလို ေအာက္မွာျပထားတဲ့ အတိုင္းေတာ့ ေရးရပါမယ္

< textarea>
ဒီေနရာေလးမွာ မိမိေဖာ္ျပလို႔တဲ့ စာကိုေရးပါ
</textarea>

6. Save  template ကို Save လို႔ရပါျပီ။ ျပီးပါျပီ.။ အဆင္ေျပပါေစ။

မိမိ ၾကိဳက္ႏွစ္ရာကို ေရြးပါ

textarea {background: #000; font: 13px Verdana, sans-serif; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;}

textarea {background:#DAFFBF; font: 13px Comic Sans MS, Comic Sans, Arial; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;}

textarea {background:#BFFAFF; font:13px Tahoma; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;}

textarea {background: #EF0090; font: 13px Georgia; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;}

textarea {background: #FFDAAF; font: 14px Papyrus, Georgia; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;}

textarea {background:#FF000A; color:#fff; border:3px double #fff; line-height:1.5em; padding:5px;}

textarea {background: #FBEFFF; font: 13px Tahoma; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;}

scorce; http://blogandtipsblog.blogspot.com/2011/12/create-unique-text-area.html

Css3 vertical Slide Menu ေလးထည့္ခ်င္ရင္

 DEMO အေနနဲ႔ေတာ့ က်ေနာ့္ဘေလာ့ ရဲ႕ လက္၀ဲ ဘက္မွာ ၾကည့္ႏိုင္ပါတယ္ ခင္ဗ်ာ
1. ပထမဆံုးအေနနဲ႕Blogger DashBoard >> CLick on the Design Tab >>And then on Edit HTML. ကိုသြားလိုက္ပါ။
2. သင့္ Template ကို Backup လုပ္ထားပါ.
3.  Expand Template Widgets မွာ အမွန္ျခစ္ေလးေပးလိုက္ပါ
4. ဒီကုဒ္ေလးကိုရွပါ ]]></b:skin> 
5.  ]]></b:skin> ကိုေတြျပီဆိုရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို ]]></b:skin> အေပၚမွာထည့္လိုက္ပါ။

/* Css3 Stylish Vertical Side Menu - info @ http://www.trickstime.com */
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDY5nMxHw7rYI883dNW3IX_Qon8aloB3tbs9r5UINe53vINqS2Jd-QsJVOaKPVw0rD9TbQT815UQNF3m5OmaowuBiCZ7RR_8e__iO-LDIDe5mhA_X2NSw9xz9yZDIpqaLGly8ou2c_tikG/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End Css3 Stylish Vertical Side Menu - info @ http://www.trickstime.com */

6. တိန္းပလိတ္ ကို Save လိုက္ပါ။


7. ေနာက္တစ္ဆင့္အေနနဲ႔ >>Design Tab >> Page Elements ကိုသြားပါ။


8.  Add a widgetကိုေရြးပါျပီးရင္  "HTML/Javascript".ကိုေရြးပါ။


9. ေအာက္က ကုဒ္ေလဒေတြကို copy ယူျပီး "HTML/Javascript" မွာ paste လုပ္လိုက္ပါ။ 

10.Save လိုက္ပါ။

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="ayelwin-it.blogspot.com">
<span>မူလစာမ်က္ႏွာ</span>
</a>
</li>
<li>

<a class="about" href="link ထည့္ရန္">
<span>နာမည္ထည့္ရန္</span>
</a>
</li>

<li>
<a class="categories" href="link ထည့္ရန္">
<span>နာမည္ထည့္ရန္</span>
</a>

</li>

<li>
<a class="services" href="link ထည့္ရန္">
<span>နာမည္ထည့္ရန္</span>
</a>
</li>

<li>
<a class="contact" href="link ထည့္ရန္">

<span>နာမည္ထည့္ရန္</span>
</a>
</li>
</ul>
</div>

Note; အနီေရာင္ စာသားနဲ႔  အစိမ္းေရာင္ စာေတြကို ျပန္လည္ ျပင္ယူပါ။
အားလံုးပဲ အဆင္ေျပၾကပါေစ အားလံုးကို ေလးစားစြာျဖင့္ ေမာင္ေအးလြင္

ေမာင္ေအးလြင္ အားလံုးအဆင္ေျပၾကပါေစ ဆက္လက္ၾကိဳးစားပါဦးမည္

Back to Top button ေလးထည့္နည္း

ဒီတစ္ခါေရးမယ့္ အေၾကာင္ေလးကေတာ့ မိမိ ဘေလာ့မွာ စာမ်က္ႏွာ ရွည္ေနရင္ အေပၚကို ျပန္တက္တဲ့ေနရာ အသံုးျပဳဖို႔အတြက္ပါ က်ေနာ့္ ဘေလာ့ ေအာက္မွာ
အေနနဲ႔ ၾကည့္ ႏိုင္ပါတယ္ ဒီေကာင္ေလးကေတာ့ ဘေလာ့ဂါ သမားေတြ အတြက္ မရွိမျဖစ္ လိုအပ္တဲ့ Plug in ေလးတစ္ခုပါ jump to top လုပ္နည္းေလးေတြကိုေတာ့ ေတာ္ေတာ္ မ်ားမ်ား ရွိပါတယ္ ဒါေပမယ့္ က်ေနာ္ၾကိဳက္တဲ့ JQuery နည္းေလးပါ သူငယ္ခ်င္းတို႔လဲ သေဘာက်ၾကလိမ့္မယ္လို႔ေမွ်ာ္လင့္ပါတယ္ ကဲစလိုက္ၾကရေအာင္ဗ်ာ

ပထမဆံုးအေနနဲ႔ Design=>>Edit HTML ကိုသြားလိုက္ပါ။

expanded Wedget ကို အမွတ္ေလးေပးလိုက္ပါ

ဒီ </body> ကုဒ္ေလးကို ကီးဘုတ္မွ Ctrl+F အကူနဲ႔ ရွာလိုက္ပါ။ ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို အေပၚက ထည့္လိုက္ပါ

<style type='text/css'>
#amazi {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #cococo;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:30px;left:20px;cursor:pointer;color:#444;text-decoration:none;border:4px solid #9AFE2E;}
</style>
<script src='http://yourjavascript.com/22951137813/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr(&quot;href&quot;);
            if ($(window).scrollTop() != &quot;0&quot;) {
                $(this).fadeIn(&quot;slow&quot;)
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == &quot;0&quot;) {
                    $(scrollDiv).fadeOut(&quot;slow&quot;)
                } else {
                    $(scrollDiv).fadeIn(&quot;slow&quot;)
                }
            });
            $(this).click(function() {
                $(&quot;html, body&quot;).animate({
                    scrollTop: 0
                }, &quot;slow&quot;)
            })
        }
    });
    $(function() {
        $(&quot;#amazi&quot;).scrollToTop();
    });
</script>
<a href='ဒီေနရာမွာ မိမိရဲ့ဘေလာ့လိပ္စာထည့္ပါ' id='amazi' style='display:none;'>^^အေပၚသို႔^^ </a>

preview နဲ႔ အရင္ၾကည့္လိုက္ပါ error မတက္ရင္ေတာ့ Teamplate ကို save လိုက္လို႔ ရပါျပီ ။လုပ္ေဆာင္ခ်က္ ျပီးဆံုးသြားပါျပီ။

 

ဒီ javascript ==> http://yourjavascript.com/22951137813/jquery.min.js' ေလးကိုေဒါင္းေလ့ာယူျပီး မိမိကိုယ္တိုင္ upload တင္ျပီး သံုးရင္ပိုအဆင္ေျပပါတယ္

ျပန္ျပင္ရန္ အက်ယ္ width:100px; ေနာက္ခံအေရာင္ background-color: #cococo; မိမိထားလိုတဲ့ေနရာ ;bottom:30px;left:20px; ေအာက္ေခ် ဘယ္ဖက္ ညာဘက္မွာထားခ်င္ရင္ေတာ့ right လို႔ ျပန္ျပင္လို႔ရပါတယ္ ဒါကေတာ့ ;bottom:30px ေအာက္ေခ်ကေနအေပၚသို႔ 30px အျမင့္ပါ ကိုယ့္တိန္းပလိတ္ႏွင့္ ကိုက္ညီေအာင္ ျပန္ညွိယူပါ။ ဒါကေတာ့ left:20px လက္၀ဲဘက္ကေန 20px အကြာမွာထားမယ္လို႔ သတ္မွတ္လိုက္တာပါ လက္ယာဘက္မွာထားမယ္ ဆိုရင္ေတာ့ right:20px (သို႔မဟုတ္) right:မိမိထားလိုတဲ့အကြာအေ၀းနံပါတ္px လို႔ သတ္မွတ္ျပီး မိမိ Teamplate နဲ႔ ကိုက္ညီေအာင္ညွိယူပါ အားလံုးအဆင္ေျပၾကပါေစ။

မိမိဘေလာ့မွာ notice infomation box ေလးထည့္မယ္

ဒီတစ္ခါေတာ့ ဘေလာ့ သူငယ္ခ်င္းေတြ အတြက္ notice infomation box ေလးထည့္နည္းေလးကိုတင္ေပးလိုက္ပါတယ
္ ဒီေကာင္ေလးမွာေတာ့ ကိုသြားေရာက္လည္ပတ္ေစခ်င္တဲ့ link ေလးပါထည့္ေပးလို႔ ရသလို imfomation သီးသန္႔ထည့္ခ်င္ရင္လဲ
ရပါတယ္ က်ေနာ့္ ဘေလာ့ေလးရဲ့ ညာဘက္ေအာက္ေထာင့္ေလးမွာ <button>DEMO</button> အေနနဲ႔ ၾကည့္ႏိုင္ပါတယ္။
ၾကိဳက္တယ္ဆိုရင္ေတာ့ စမ္းၾကည့္ လို႔ ရေအာင္ က်ေနာ္နားလည္သေလာက္ ရွင္းျပပါမယ္....က်ေနာ္လုပ္တာေတာ့ အဆင္ေျပပါတယ္။
သူငယ္ခ်င္းမ်ားအေနနဲ႔ အဆင္မေျပခဲ့ရင္ comment ေလးေရးထားခဲ့ပါ ....အဆင္ေျပရင္တယ္ ၾကိဳက္တယ္ဆိုရင္ေတာ့ ေက်းဇူးတင္
စကားေလးေျပာေပးသြားပါလို႔ ေျပာရေစ သူငယ္ခ်င္းတို႔ရဲ့ comments ေလးေတြက က်ေနာ့္အတြက္ အားေဆးမို႔ပါ..........:D။
စလိုက္ၾကရေအာင္ေနာ္........

၁။ ပထမဆံုး  Dashboard –> Design tab –>Edit html –> ကိုသြားလိုက္ပါ။

၂။ expand webget ကို အမွတ္လးေပးလိုက္ပါ။

၃။ မိမိရဲ့ template ကို Download Full Template နဲ႔ download လုပ္ထားလိုက္ပါ.. မိမိ အမွတ္ရမယ့္       တစ္ေနရာမွာ သိမ္းထားလိုက္ပါ။ ဒီလိုလုပ္ရတာက မိမိဘေလာ့ေလးမွာ တစ္ခုခု မွားသြားခဲ့ရင္ မဂိုမူလ
    အတိုင္း ျပန္ယူလို႔ ရေအာင္ ၾကိဳတင္သိမ္းထားျခင္းျဖစ္ပါတယ္။ ဒီအဆင့္ထိျပီးသြားဆိုရင္ ဆက္မယ္ေနာ္

၄။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို ရွာလိုက္ပါ။(ရွာရန္...  ::.help???.::= ကီးဘုတ္မွ Ctrl+F ႏႈိက္လိုက္ပါ ကြန္ပ်ဴတာရဲ့
    ေအာက္ေျခမွာ bar ေလးတစ္ခု တတ္လာမွာပါ အဲမွာ လက္၀ဲဘက္ေထာင့္မွာ စာရုိက္ထည့္လို႔ ရတဲ့ ေနရာေလးရွိပါတယ္
    အဲဒီေနရာမွာ ေအာက္က ကုဒ္ေလးကို copy ယူျပီး ေပၚလာတဲ့ bar ေလးရဲ့စာရိုက္တဲ့ေနရာမွာ paste လုပ္လိုက္ပါ။)
   (စာၾကြင္း။   ။ အခုလိုေျပာရတာ ဘေလာ့စတင္လုပ္သူေတြပါ အဆင္ေျပေအာင္လို႔ပါ                        ....bolg ႏွင့္ရင္ႏွီးပီးသားသူငယ္ခ်င္းအတြက္မရည္ရြယ္ပါ)

</head>

၅။</head> ကိုရွာေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို </head> အေပၚမွာကပ္ထည့္လိုက္ပါ။

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://tntechie.googlecode.com/files/jquery.slidenote.min.js" type="text/javascript"></script>

၆။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကိ္ု ထပ္ရွာပါ။ [(၄)မွာေျပာခဲ့ သလိုေပါ့။]

]]></b:skin>

၇။ ]]></b:skin> ကိုရွာလို႔ေတြျပီဆိုရင္ ေအာက္က ကုဒ္ေလးကို အေပၚမွာ ထည့္လိုက္ပါ။ center>

/* ----- tntechie CSS START------ */
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
/* ----- tntechie CSS END------ */

၈။ ကိုယ္လိုခ်င္တဲ့ အက်ယ္ width: 540px ။အျမင့္  height: 140px ။ေနာက္ခံအေရာင္  background: #FBEC78 ေတြကို
    ျပန္ျပင္ႏိုင္ပါတယ္  ( { width: 540px; height: 140px; background: #FBEC78;) ။

၉။ ေနာက္ဆံုးအဆင့္အေနနဲ႔ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို ရွာပါ။

</body>

၁၀။ </body> ကိုရွာေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို </body>အေပၚမွာ ထည့္လိုက္ပါ။

<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>ဒီေနရာမွာ ေခါင္စဥ္ေရးပါ</h2>
<span><em>ဒီေနရာမွာ မိမိေရးလိုတဲ့ infomarions ေတြေရးပါ</em></span>

<p><a href='ဒီေနရာမွာ infomations ရဲ့ link ကိုထည့္ပါ' target="_blank">သြားလည္မယ္</a> </p>

</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N7f7H93FPG1PYPRHTgO5h9RSo3Hvi2351p44eAjVpJygCiA_Z_eENYXINt863ZZzLF2hQ08s9uadUELOt5dfpntJIXi4HHtOY6d3MXFnWng-Gjc9ZpKOtZJyJZrjP__3IwcxpYY0odyn/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider Ends -->

၁၀။ မိမိရဲ့  template ကိုpreview နဲ႔ ၾကည့္လိုက္ပါ error မတတ္ရင္ေတာ့ save လုပ္လိုက္ပါ။
     လုပ္ေဆာင္ခ်က္ ျပီးဆံုးသြားပါျပီ............အဆင္ေျပပါေစ.......Good luck!!!

၁၂။ မွတ္ခ်က္။  ။ မိမိေရးလိုတဲ့ infomations ေတြကို link မခ်ိတ္ ခ်င္ရင္ေတာ့
     <p><a href='ဒီေနရာမွာ infomations ရဲ့ link ကိုထည့္ပါ' target="_blank">သြားလည္မယ္</a></p>
    ဆိုတဲ့ စာေၾကာင္းေလးကို ျဖဳတ္လိုက္ပါ update

ဘေလာ့ဂါ post မွာ စာပိုဒ္ေလးေတြ ေဖ်ာက္ျပီးေရးနည္း

ေအာက္မွာ DEMO အေနနဲ႔ ေရးျပထားပါတယ္ ခင္ဗ်ာ အနီေရာင္စာေလးကို ႏႈိက္ၾကည့္လိုက္ပါ

ဒီေနရာကိုႏႈိက္၍ၾကည့္ပါ

က်ေနာ္သည္ ပညာသင္ေလ့လာေနသူ တစ္ဦးသာ ျဖစ္ပါသည္

က်ေနာ့္ ဘေလာ့ေလးမွာ အမွားေပါင္းမ်ားစြာနဲ႔ ျပည့္နက္ေနပါလိမ့္မယ္

က်ေနာ္ ေလ့လာေနေသာ

သိထားေသာ(တတ္ေျမာက္ကၽြမ္းက်င္ျခင္းမဟုတ္ပါ)

အေၾကာင္းအရာေလးေတြကို ျပန္လည္မွ်ေ၀ျခင္းသာျဖစ္ပါသည္

ဘေလာ့ေလး ကိုအလည္ေရာက္လာၾကသူ သူငယ္ခ်င္းမ်ား အေနနဲ႔

နားလည္ေပးၾကလိမ့္မယ္ ေမွ်ာ္လင့္ ရင္း

ဘာေတြလုပ္ရမလဲ လို စိတ္ကူးရင္း ဒီလိုမ်ိဳးေလး စာေလးေတြေဖ်ာက္ျပီး မိမိရဲ႕ ဘေလာ့မွာ post ေလးေတြ ေရးခ်င္ ေရးလို႔ ရေအာင္ ကုဒ္ဒင္း
ေလးေတြ တင္ေပးလိုက္ပါတယ္ က်ေနာ္ကေတာ့ လွ်ိဳ႕၀ွက္ရတာ ၀ါသနာပါလို႔ :) က်ေနာ့္လို ၀ါသနာတူသူမ်ားလဲ အသံုးျပဳလို႔ရေအာင္
ျပန္လည္ မွ်ေ၀ေပးလိုက္ပါတယ္

<div style="background-color: #a0ffff; border: 0px solid 00000; color: black; font-family: arial; font-size: 12px; height: 40px; overflow: auto; padding: 4px; text-align: left; width: 395px;">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
var haut_max, timer_glisse, action_glisse, haut_fenetre = "";function deplie(blid) {   var elm = document.getElementById(blid);   if (parseInt(elm.style.height) == 0 || !elm.style.height) {       elm.style.height = "auto";       elm.style.lineHeight = "120%";       init_glisse(blid, 'ouvre');   } else if (action_glisse == "") {       init_glisse(blid, "ferme");   }}function init_glisse(blid, sens) {   var elm = document.getElementById(blid);      haut_max = (document.getElementById(blid).offsetHeight) ? document.getElementById(blid).offsetHeight : document.getElementById(blid).style.pixelHeight;      if (sens == "ouvre") elm.style.height = "0px";   haut_fenetre = (document.body) ? document.body.clientHeight : window.innerHeight;      clearTimeout(timer_glisse);   timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);}function glisse(blid, sens) {   action_glisse = 1;   var elm = document.getElementById(blid);   var haut = parseInt(elm.style.height);   if (sens == "ouvre") {       haut = haut + 10;       if (haut > haut_max) haut = haut_max;   } else {       haut = haut - 10;       if (haut < 0) haut = 0;   }   elm.style.height = haut + "px";      if (sens == "ouvre") {       if (haut < haut_max) {           timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);       } else {           action_glisse = "";       }   } else {       if (haut > 0) {           timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);       } else {           action_glisse = "";           elm.style.lineHeight = "0";       }   }}
</script>


<h4 onclick="javascript:deplie('div1')"><blink>
ဒီေနရာကိုႏႈိက္၍ၾကည့္ပါ</blink></h4>
<div id="div1" style="height: 0px; line-height: 0px; overflow: hidden;">
<div style="background-color: #a0ffff; border: 0px solid 00000; color: black; font-family: arial; font-size: 14px; height: 60px; overflow: auto; padding: 4px; text-align: left; width: 420px;">
ဒီေနရာမွာမိမိ ၀ွက္ထားခ်င္တဲ့ စာေလးကိုေရးပါ</div></div>

ဘေလာ့ဂါ post မွာ Animated picture ထည့္မယ္

  အေပၚမွာ ပံုေလးတင္ျပထားပါတယ္ ...:P ဘာမွမဟုတ္ေပမယ့္ က်ေနာ္လို ၀ါသနာအရ ဘေလာ့ ေရးေနတဲ့
သူငယ္ခ်င္းေတြ အတြက္ တစ္ခါတစ္ေလ ကိုယ္ေရးတဲ့ post ေတြမွာ ဒီလိုပံု အရွင္ေလးေတြ ထည့္လို႔ ရေအာင္ ေရးသား ေပၚျပလိုက္ပါတယ္ ေအာက္မွာ ပံုထည့္ရမယ့္ ကုဒ္ေလးေတြကိုပါ

<center><img alt="Photo Sharing and Video Hosting at Photobucket" border="0" src="gif ပံု link ထည့္ရန္" title="animated gif image" /></center>

အာလံုးပဲ အမ်ားအတြက္လုပ္ရင္း စိတ္ခ်မ္းသာမႈ ရႏိုင္ၾကပါေစ