ဘေလာ့မွာဘုရားပုံေတာ္အရွင္ေလးေတြနဲ႕ထည့္ထားခ်င္ေသာသူမ်ားအတြက္

မိမိဘေလာ့မွာဘုရားပုံေတာ္ပုံအရွင္ေလးနဲ႕ထားခ်င္းေသာသူမ်ားအတြက္ေအာက္မွာလုိအပ္တဲ႕ကုဒ္ေတြယူထည့္ပါ

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

]]></b:skin> ကိုရွာပါ၊မေတြ႕ပါက b:skin   ကိုသာေရြးရွာလုိက္ပါ သူ႕ေရွ႕မွာ မွ်ားအနက္ေလးေတြ႕တာနဲ႕ မွ်ားေလးတခ်က္ကလစ္ေျဖလိုက္ပါ ေနာက္ အန္းတားေခါက္လိုက္ပါ..ေတြ႕ျပီဆိုရင္

]]></b:skin> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။

မွတ္ခ်က္ ။    ။ အေပၚကကုဒ္ မွာ ရွာေဖြရခက္ခဲတတ္ပါသည္.. ကုဒ္ေတြကို ေခါက္ထားျခင္းေၾကာင့္သာ ျဖစ္ပါတယ္.. ထို႕ေၾကာင့္  b:skin  ဆိုတာေလးဘဲ ေရးရွာလိုက္ပါ.. ေတြ႕တာနဲ႕ သူ႕ေဘးမွာ မွ်ားအနက္ေလး ေတြ႕မယ္ ကလစ္ေျဖ လိုက္ပါ ဒါဆို b:skin  ကို အန္းတား ဆက္ေခါက္ေပးတာနဲ႕ ေတြ႕ပါျပီ..

*************************
/* fade slider www.bloggertrix.com*/ .content h1 {  font-size:48px;  color:#000;  text-shadow:0px 1px 1px #f4f4f4;  text-align:center;  padding:60px 0 30px;  }  /* LAYOUT */ .container {  margin:0 auto;  overflow:hidden;  width:960px; }  /* CONTENT SLIDER */ #content-slider {  width:100%;  height:360px;  margin:10px auto 0; } /* SLIDER */ #slider {  background:#000;  border:5px solid #eaeaea;  box-shadow:1px 1px 5px rgba(0,0,0,0.7);  height:320px;  width:680px;  margin:40px auto 0;  overflow:visible;  position:relative; } #mask {  overflow:hidden;  height:320px; } #slider ul {  margin:0;  padding:0;  position:relative; } #slider li {  width:680px;  height:320px;  position:absolute;  top:-325px;  list-style:none; }  #slider li.firstanimation {  -moz-animation:cycle 25s linear infinite;   -webkit-animation:cycle 25s linear infinite;   } #slider li.secondanimation {  -moz-animation:cycletwo 25s linear infinite;  -webkit-animation:cycletwo 25s linear infinite;   } #slider li.thirdanimation {  -moz-animation:cyclethree 25s linear infinite;  -webkit-animation:cyclethree 25s linear infinite;   } #slider li.fourthanimation {  -moz-animation:cyclefour 25s linear infinite;  -webkit-animation:cyclefour 25s linear infinite;   } #slider li.fifthanimation {  -moz-animation:cyclefive 25s linear infinite;  -webkit-animation:cyclefive 25s linear infinite;   }  #slider .tooltip {  background:rgba(0,0,0,0.7);  width:300px;  height:60px;  position:relative;  bottom:75px;  left:-320px;  -moz-transition:all 0.3s ease-in-out;  -webkit-transition:all 0.3s ease-in-out;   } #slider .tooltip h1 {  color:#fff;  font-size:24px;  font-weight:300;  line-height:60px;  padding:0 0 0 20px; } #slider li#first:hover .tooltip,  #slider li#second:hover .tooltip,  #slider li#third:hover .tooltip,  #slider li#fourth:hover .tooltip,  #slider li#fifth:hover .tooltip {  left:0px; } #slider:hover li,  #slider:hover .progress-bar {  -moz-animation-play-state:paused;  -webkit-animation-play-state:paused; }  /* PROGRESS BAR */ .progress-bar {   position:relative;  top:-5px;  width:680px;   height:5px;  background:#000;  -moz-animation:fullexpand 25s ease-out infinite;  -webkit-animation:fullexpand 25s ease-out infinite; }  /* ANIMATION */ @-moz-keyframes cycle {  0%  { top:0px; }  4%  { top:0px; }   16% { top:0px; opacity:1; z-index:0; }   20% { top:325px; opacity:0; z-index:0; }   21% { top:-325px; opacity:0; z-index:-1; }  92% { top:-325px; opacity:0; z-index:0; }  96% { top:-325px; opacity:0; }  100%{ top:0px; opacity:1; }   } @-moz-keyframes cycletwo {  0%  { top:-325px; opacity:0; }  16% { top:-325px; opacity:0; }  20% { top:0px; opacity:1; }  24% { top:0px; opacity:1; }   36% { top:0px; opacity:1; z-index:0; }   40% { top:325px; opacity:0; z-index:0; }  41% { top:-325px; opacity:0; z-index:-1; }   100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclethree {  0%  { top:-325px; opacity:0; }  36% { top:-325px; opacity:0; }  40% { top:0px; opacity:1; }  44% { top:0px; opacity:1; }   56% { top:0px; opacity:1; }   60% { top:325px; opacity:0; z-index:0; }  61% { top:-325px; opacity:0; z-index:-1; }   100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefour {  0%  { top:-325px; opacity:0; }  56% { top:-325px; opacity:0; }  60% { top:0px; opacity:1; }  64% { top:0px; opacity:1; }  76% { top:0px; opacity:1; z-index:0; }  80% { top:325px; opacity:0; z-index:0; }  81% { top:-325px; opacity:0; z-index:-1; }  100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefive {  0%  { top:-325px; opacity:0; }  76% { top:-325px; opacity:0; }  80% { top:0px; opacity:1; }  84% { top:0px; opacity:1; }  96% { top:0px; opacity:1; z-index:0; }  100%{ top:325px; opacity:0; z-index:0; } }  @-webkit-keyframes cycle {  0%  { top:0px; }  4%  { top:0px; }  16% { top:0px; opacity:1; z-index:0; }   20% { top:325px; opacity:0; z-index:0; }  21% { top:-325px; opacity:0; z-index:-1; }  50% { top:-325px; opacity:0; z-index:-1; }  92% { top:-325px; opacity:0; z-index:0; }  96% { top:-325px; opacity:0; }  100%{ top:0px; opacity:1; }   } @-webkit-keyframes cycletwo {  0%  { top:-325px; opacity:0; }  16% { top:-325px; opacity:0; }  20% { top:0px; opacity:1; }  24% { top:0px; opacity:1; }   36% { top:0px; opacity:1; z-index:0; }   40% { top:325px; opacity:0; z-index:0; }  41% { top:-325px; opacity:0; z-index:-1; }    100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclethree {  0%  { top:-325px; opacity:0; }  36% { top:-325px; opacity:0; }  40% { top:0px; opacity:1; }  44% { top:0px; opacity:1; }   56% { top:0px; opacity:1; z-index:0; }   60% { top:325px; opacity:0; z-index:0; }   61% { top:-325px; opacity:0; z-index:-1; }  100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefour {  0%  { top:-325px; opacity:0; }  56% { top:-325px; opacity:0; }  60% { top:0px; opacity:1; }  64% { top:0px; opacity:1; }  76% { top:0px; opacity:1; z-index:0; }  80% { top:325px; opacity:0; z-index:0; }  81% { top:-325px; opacity:0; z-index:-1; }  100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefive {  0%  { top:-325px; opacity:0; }  76% { top:-325px; opacity:0; }  80% { top:0px; opacity:1; }  84% { top:0px; opacity:1; }  96% { top:0px; opacity:1; z-index:0; }  100%{ top:325px; opacity:0; z-index:0; } }  /* ANIMATION BAR */ @-moz-keyframes fullexpand {     0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }     4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  } @-webkit-keyframes fullexpand {     0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }     4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  }

*************************
  က်န္ေသးတယ္ေနာ္
     ျပီးတာနဲ႕
►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

*************************

<span style="font-weight:bold;"><span style="font-weight:bold;"></span></span><div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="https://imageshack.com/i/idAPQuKgg" alt="Green"/>
</a>
<div class="tooltip">
<h1>Green</h1>
</div>
</li>

<li id="second" class="secondanimation">
<a href="#">
<img src="https://imageshack.com/i/idAPQuKgg"car"/>
</a>
<div class="tooltip">
<h1>Car</h1>
</div>
</li>

<li id="third" class="thirdanimation">
<a href="#">
<img src="https://imageshack.com/i/idAPQuKgg"/>
</a>
<div class="tooltip">
<h1>Nature</h1>
</div>
</li>

<li id="fourth" class="fourthanimation">
<a href="#">
<img src="https://imageshack.com/i/idAPQuKgg"nature"/>
</a>
<div class="tooltip">
<h1>Nsture</h1>
</div>
</li>

<li id="fifth" class="fifthanimation">
<a href="#">
<img src=" https://imageshack.com/i/idAPQuKgg" alt="Yellow"/>
</a>
<div class="tooltip">
<h1>Yellow</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>

*************************

     အားလုံးအဆင္ေျပႀကပါေ