Scrolling Title marquee code ေလးပါဗ်ာ

<script type='text/javascript'>
//<![CDATA[
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()",200);
}
scrollMSG();
//]]>
</script>

ထည့္နညး္ေတာ့ေျပာျပေတာ့ဘူးေနာ္ လြယ္ပါတယ္ဗ်ာ

သူငယ္ခ်င္းတို႔ ဘေလာ့စာမ်က္ႏွာမွာ fireworks ေလးေတြနဲ႔အလွဆင္ရေအာင္

အဟီး တင္သာတင္လိုက္ရတယ္ ကြ်န္ေတာ္ စမ္းတာအဆင္မေျပဘူးဗ် ကြ်န္ေတာ္အလို႔ေနမွာပါ
သံုးတတ္တဲ့သူငယ္ခ်င္းေတြသံုးလို႔ရရင္ ျပန္ေျပာၾကအုန္းေနာ္
အဆင္ေျပၾကပါေစဗ်ာ

Check Demo 

 Step1:

• Go To Blogger Dashboard: 
• Go To template>>edit html:
• Now search for  ]]></b:skin> 
• Past the the below given code before  ]]></b:skin> 

 #pbtfireworks{
            display: block;   
            width: 1000px;
            height: 735px;
            float: center;
            color:#6F6F6F;
            text-align: center;
            font-size: 12px;
        }
        #pbtfireworks a {
            color:#6F6F6F;

Step2:

• Now search For </body> 
• Past the below jquery code before </body>  

 <div id="pbtfireworks">  </div>
   <script src="https://mybloggerlab.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="https://mybloggerlab.googlecode.com/files/fireworks.js" type="text/javascript"></script>
    <script>
    /**Fire Works By ProBloggerTricks.com**/ 
    jQuery(function($){             
    Xteam.fireworkShow('#pbtfireworks', 100);               
    }); 
    </script>

Finally save your template and you done almost:

dropdown Navigation menu with Flying Effects ကုတ္အလန္းစားေလးမို႔တင္လိုက္ျပီး

<style> #BloggerSpicemenufly,#BloggerSpicemenufly ul { list-style: none outside none; margin: 0; padding: 0; height:500px;} #BloggerSpicemenufly { font-family: "Trebuchet MS Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 3px 3px #04BDFA; -webkit-box-shadow: 0px 3px 3px #04BDFA; box-shadow: 0 3px 4px #004065; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #005C91), color-stop(0.51, #005C91), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #04BDFA 0%, #04BDFA 50%, #04BDFA 51%, #838383 100%); background-color:#04BDFA; } #BloggerSpicemenufly ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #BloggerSpicemenufly li { border-bottom: 1px solid #005C91; border-left: 1px solid #005C91; border-right: 1px solid #005C91; border-top: 1px solid #005C91; display: block; float: left; height: 34px; position: relative; width: 105px; } #BloggerSpicemenufly li:first-child { border-left: 0 none; margin-left: 5px; } #BloggerSpicemenufly li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #5E5E5E), color-stop(0.51, #111111), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* widget by www.bloggerspice.com #BloggerSpiceAnim */ @-webkit-keyframes BloggerSpiceAnim { 0% {-webkit-transform: scale(1);} 30% {-webkit-transform: scale(1.3);} 100% {-webkit-transform: scale(1);}} @-moz-keyframes BloggerSpiceAnim { 0% {-moz-transform: scale(1);} 30% {-moz-transform: scale(1.3);} 100% {-moz-transform: scale(1);}} #BloggerSpicemenufly li > a:hover { -moz-animation-name: BloggerSpiceAnim; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: BloggerSpiceAnim; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #BloggerSpicemenufly li:hover > a { z-index: 4; } #BloggerSpicemenufly li:hover ul.subs { left: 0; top: 34px; width: 150px; } #BloggerSpicemenufly ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* keyframes #bsfly */ @-webkit-keyframes bsfly { 0% {margin-left:185px;} 100% {margin-left:0px;opacity:1;} } @-moz-keyframes bsfly { 0% {margin-left:185px;} 100% { margin-left:0px;opacity:1;} } #BloggerSpicemenufly li:hover ul li { /* css3 animation */ -moz-animation-name: bsfly; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: bsfly; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* animation delays by www.bloggerspice.com */ #BloggerSpicemenufly li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #BloggerSpicemenufly li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #BloggerSpicemenufly li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #BloggerSpicemenufly li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #BloggerSpicemenufly li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #BloggerSpicemenufly li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #BloggerSpicemenufly li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #BloggerSpicemenufly li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; } </style> <ul id="BloggerSpicemenufly"> <li><a href="http://www.bloggerspice.com/">Home</a></li> <li><a class="flybsmenu" href="#">Tips</a> <ul class="subs"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a class="flybsmenu" href="http://namkna.blogspot.com/">Tricks</a> <ul class="subs"> <li><a href="#">Submenu 2-1</a></li> <li><a href="#">Submenu 2-2</a></li> <li><a href="#">Submenu 2-3</a></li> <li><a href="#">Submenu 2-4</a></li> <li><a href="#">Submenu 2-5</a></li> <li><a href="#">Submenu 2-6</a></li> <li><a href="#">Submenu 2-7</a></li> <li><a href="#">Submenu 2-8</a></li> </ul> </li> <li><a class="flybsmenu" href="#">Tools</a> <ul class="subs"> <li><a href="#">Submenu 3-1</a></li> <li><a href="#">Submenu 3-2</a></li> <li><a href="#">Submenu 3-3</a></li> <li><a href="#">Submenu 3-4</a></li> <li><a href="#">Submenu 3-5</a></li> </ul> </li> <li><a href="#">Widget</a></li> <li><a href="#">SEO</a></li> <li><a href="#">AdSense</a></li> <li><a href="#">Contact Us</a></li> </ul> ဘယ္လိုထဲ့ရမလည္းဆိုေတာ့
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place gadget below header. that's it.

ကဲအဆင္ေျပၾကပါေစဗ်ာ

menu bar အလန္းေလးပါ

Demo

Add Underline Hover Css Navigation bar

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
#arrowunderlinebtrix{
list-style-type:none;
margin:0;
padding:0;
text-align:center; 
font: bold 16px Georgia;
}
#arrowunderlinebtrix li{
display:inline;
margin-right:25px; 
}
#arrowunderlinebtrix li a{
position:relative;
color:black;
padding-bottom:8px; 
text-decoration:none;
}
#arrowunderlinebtrix li a:hover{
border-bottom:3px solid #25bd0d; 
}
#arrowunderlinebtrix li a:hover:after{ 
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; 
bottom: 0;
border-width:5px; 
border-style:solid;
border-color: transparent transparent #25bd0d transparent; 
}

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div id="arrowunderline">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://www.bloggertrix.com/"><span>Contact Us</span></a></li>
</ul>
</div>

Replace # with your links.

9. Now save your HTML/Javascript'. You are done.

popular-posts ကို ေဘာင္ခတ္ေပးမဲ့ကုတ္ကေလး

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #dddddd;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;}.popular-posts ul li:hover {

border:1px solid #6BB5FF;

}.popular-posts ul li a:hover {

text-decoration:none;

}

How To Use These Code

ကဲဘယ္လိုလုုပ္ရမလည္းဆိုေတာ့ အရင္ဆံုး
 No.1 သူငယ္ခ်င္းတို႔ရဲ့ Blogger Dashboard >>ကို အရင္သြားလိုက္ပါ ok ေနာ္
 NO.2 ျပီးရင္ေတာ့ Template ကို၀င္ျပီး Edit HTML ကို ကလစ္လိုက္ျပီးေနာက္တစ္ဆင့္ေနာ္
 No.3 ok ျပီးဆိုရင္ ]]></b:skin>  ဒီကုတ္ေလးကို ရွာလိုက္ပါ မရွာတတ္ရင္ Ctrl+F ကိုအကူညီေတာင္လိုက္ပါဗ်ာ ok ေလာက္ပါတယ္ေနာ္ မရွင္းရင္ ဒီအေကာင့္ကို အပ္ျပီး ျပသနာရွာႏိုင္ပါတယ္ anyataya.poet@gmail.com အားလံုးကို ေက်းဇူးတင္လွ်က္

အညတရ

photos shadow code ေလးပါ

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

CSS Codes for Images in Blog Post

Use these simple image codes for your blog post

Simple Thin Border

img { border:1px solid #021a40; }

Double Border

img { padding:1px; border:1px solid #021a40; }

Border and Back Ground

img { padding:5px; border:1px solid #021a40; background-color:#ff0; }

Border and a grey drop shadow

img { padding:5px; border:1px solid #021a40; background-color:#ff0; -moz-box-shadow: 5px 5px 0px #999; -webkit-box-shadow: 5px 5px 0px #999; box-shadow: 5px 5px 0px #999; }

Border and Grey Drop Shadow With Image link hover effect

img { padding:5px; border:1px solid #021a40; background-color:#ff0; -moz-box-shadow: 5px 5px 0px #999; -webkit-box-shadow: 5px 5px 0px #999; box-shadow: 5px 5px 0px #999; } a:hover img{ border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999; }

How To Use These Code

ကဲဘယ္လိုလုုပ္ရမလည္းဆိုေတာ့ အရင္ဆံုး
 No.1 သူငယ္ခ်င္းတို႔ရဲ့ Blogger Dashboard >>ကို အရင္သြားလိုက္ပါ ok ေနာ္
 NO.2 ျပီးရင္ေတာ့ Template ကို၀င္ျပီး Edit HTML ကို ကလစ္လိုက္ျပီးေနာက္တစ္ဆင့္ေနာ္
 No.3 ok ျပီးဆိုရင္ ]]></b:skin>  ဒီကုတ္ေလးကို ရွာလိုက္ပါ မရွာတတ္ရင္ Ctrl+F ကိုအကူညီေတာင္လိုက္ပါဗ်ာ ok ေလာက္ပါတယ္ေနာ္ မရွင္းရင္ ဒီအေကာင့္ကို အပ္ျပီး ျပသနာရွာႏိုင္ပါတယ္ anyataya.poet@gmail.com အားလံုးကို ေက်းဇူးတင္လွ်က္

အညတရ

Marquee code သူငယ္ခ်င္းတို႕ဆိုဒ္မွာ လင့္ကိုေထာင္လိုက္ရင္ လင့္ေလးေရြ႕သြားေအာင္လုပ္ႏိုင္တဲ့ကုတ္ေလးပါ

ကုတ္ေလးက

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'> $(document).ready(function()  { $('a').hover(function() { $(this).animate({ marginLeft:  '15px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

ဒါပါပဲ ထဲ့နည္းကေတာ့ မေျပာေတာ့ဘူးေနာ္ လြယ္လြယ္ေလးမို႔ပါ

ကိုေက်ာ္စိုးမိုးဆိုဒ္က ကူးယူလာတာပါဗ်

Popular Posts အတြက္ html code အလန္းေလးပါဗ်ာ

ကဲဘယ္လိုလုုပ္ရမလည္းဆိုေတာ့ အရင္ဆံုး
 No.1 သူငယ္ခ်င္းတို႔ရဲ့ Blogger Dashboard >>ကို အရင္သြားလိုက္ပါ ok ေနာ္
 NO.2 ျပီးရင္ေတာ့ Template ကို၀င္ျပီး Edit HTML ကို ကလစ္လိုက္ျပီးေနာက္တစ္ဆင့္ေနာ္
 No.3 ok ျပီးဆိုရင္ ]]></b:skin>  ဒီကုတ္ေလးကို ရွာလိုက္ပါ မရွာတတ္ရင္ Ctrl+F ကိုနိိပ္လိုက္ပါ ေအာက္မွာ box ေလးေပၚလာပါလိမ့္မယ္အဲ့မွာ ရိုက္ျပီးရွာလိုက္ပါ ေတြ႕ျပီးဆိုရင္ေတာ့ ကဲ ကုတ္ေလးေတြ ေအာက္မွာပါ
 ဒီကစ
 <style type="text/css">
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>
 ဒီမွာဆံုးပါျပီးဗ်ာ
နမူနာၾကည့္မယ္ဆိုရင္ ကြ်န္ေတာသံုးထားပါတယ္ၾကည့္ၾကည့္ပါဗ်ာ အားလုံးပဲအဆင္ေျပၾကပါေစ အညတရ

back to top code ေလးပါ

NO..{1}

<!-- www.myhowtricks.com Scroll back to top code start -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >

var scrolltotop={

 //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control

 //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).

 setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

 controlHTML: '<img src="http://myhowtricks.com/media/images/back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

 controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner

 anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){

 if (!this.cssfixedsupport) //if control is positioned using JavaScript

 this.$control.css({opacity:0}) //hide control immediately after clicking it

 var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)

 if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists

 dest=jQuery('#'+dest).offset().top

 else

 dest=0

 this.$body.animate({scrollTop: dest}, this.setting.scrollduration);

 },

keepfixed:function(){

 var $window=jQuery(window)

 var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx

 var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety

 this.$control.css({left:controlx+'px', top:controly+'px'})

 },

togglecontrol:function(){

 var scrolltop=jQuery(window).scrollTop()

 if (!this.cssfixedsupport)

 this.keepfixed()

 this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false

 if (this.state.shouldvisible && !this.state.isvisible){

 this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])

 this.state.isvisible=true

 }

 else if (this.state.shouldvisible==false && this.state.isvisible){

 this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])

 this.state.isvisible=false

 }

 },

 init:function(){

 jQuery(document).ready(function($){

 var mainobj=scrolltotop

 var iebrws=document.all

 mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode

 mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')

 mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')

 .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})

 .attr({title:'Scroll Back to Top'})

 .click(function(){mainobj.scrollup(); return false})

 .appendTo('body')

 if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text

 mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text

 mainobj.togglecontrol()

 $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){

 mainobj.scrollup()

 return false

 })

 $(window).bind('scroll resize', function(e){

 mainobj.togglecontrol()

 })

 })

 }

}

scrolltotop.init()

</script>

<!-- www.myhowtricks.com Scroll back to top code End -->

..................................................................................
ဒါကေတာ့ ဒီကုတ္အတြက္ပံုေလးေတြပါ
 

blogger page html codes ေတြ တင္တဲ့အခါ html codes ေတြကို ေဘာင္ခတ္လို႕ရတဲ့ကုတ္ေလးေတြပါ

Box Style 1

The box style 1 code

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexjQcUJ1VoNzzuXj_IoZQL30P3cZf_TlJwwRRMMR8kZlxes0g6uSmRi25m7J9zPnY5kRHfzfYsSMwvFby33UouxRleeVJjzr1_UGxLwQpS9n4Zyf1O4lumrqIUdIZ_jKyUyl-_KtEyOAi/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

Box Style 2

The box style 2 code

.code{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFnX8hVaYTYQnCmYjlwrkl9QPGItlbgX_TfKiF-iYTnZqXEGuCN0UgNslpPLHTtnhfN6EhNldlCAmhyphenhyphenRfPYOwhh_4M2H2fqu2WQqcl8tiNn0rsoroHiN2FMZD1Yc6N_PWTu5Lu9MuZh6m/s1600/codeview2.gif) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}

Box Style 3

The box style 3 code

.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkhOCqc_HA1D_a9WYImS8GXDlphW8vuxvpwtq9eQuwK0swumgen7rSQmu4um-EnM9keCWjeoLe_7g933jNAcQ78_1n0zVJLHWhiE5lmL0D61yPH3lwb_TY_wwjVwMY7FOT-uv0QAvUx89/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}

Once you Choose your favorite box, copy it’s code and go to your blogger account, navigate to Dashboard >> layout >> edit html > and find the following code and paste your code box af

Box Style 4

The box style 4 code

.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDRb28Eciv9sY960k_F8IQdY-ErbmhaazLrU2xIRqIiYnE5dyVddWHajUp2T5kUlrrVMBQaW9XAqdlD8fQ2kRlufE6FY_jIMr-56ZVVs6UCoXC55t5G92qvyFfnntQr8fynYHgkaXPVw8/s1600/codesbg1.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

 ခု ဘယ္လိုအတ္ရမလည္းေျပာပါ့မယ္ အရင္ဆံုး blogger Dashboard >> layout >> edit html
ကို သြားပါ ျပီးရင္ 

]]></b:skin> ဒီကုတ္ေလးကိုရွာပါ မရွာတတ္ရင္ ctrl+z ကို ႏွိပ္ျပီး ေအာက္မွာေပၚလာတဲ့ box ေလးမွာ]]></b:skin>

ဒီကုတ္ကို  paste လုပ္ျပီးရွာႏိုင္ပါတယ္ ျပီရင္ေတာ့ save လုပ္လိုက္ရင္ရပါျပီး

    အညတရမင္းသားေလး