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 အားလံုးကို ေက်းဇူးတင္လွ်က္

အညတရ