<style>
#animationWrapper {
width:200px;
font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
background:#222;
padding:40px;
}
/* link which encapsulates SPANs */
#animationWrapper a {
font-weight: 800;
text-transform: uppercase;
font-size: 42px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
color: #E58;
text-decoration: none
}
/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
-ms-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
}
#animationWrapper span {
display: block;
color: #555;
text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}
/* special size for the first item */
#animationWrapper .span1 {
font-size: 56px;
line-height: 0.8em;
}
#animationWrapper a:hover {
color: #fff ;
top: -3px;
left: -3px;
}
/* all spans become white */
#animationWrapper a:hover span {
color:#fff;
}
/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}
#animationWrapper a:hover .span2 {
text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}
#animationWrapper a:hover .span3 {
text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}
#animationWrapper a:hover .span4 {
text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}
</style>
<center>
<div id="animationWrapper">
<a href="http://kp3family.blogspot.com">
<span class="span1">Sample</span>
<span class="span2">Example</span>
<span class="span3">Effects</span>
<span class="span4">Blogger</span>
</a>
</div>
</center>
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
color:#FFF;
}
.lof-slidecontent a.readmore{
color:#58B1EA;
font-size:95%;
}
.lof-slidecontent{
position:relative;
overflow:hidden;
border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:100000;
text-align:center;
background:#FFF
}
.lof-slidecontent .preload div{
height:100%;
width:100%;
background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
position:relative;
height:100%;
width:800px;
z-index:3px;
overflow:hidden;
}
/*******************************************************/
.lof-main-item-desc{
z-index:100px;
position:absolute;
bottom:50px;
left:0px;
width:350px;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);
height:100px;
/* filter:0.7(opacity:60) */
padding:10px;
}
.lof-main-item-desc p{
margin:0 8px;
padding:8px 0
}
.lof-main-item-desc h3{
padding:0;
margin:0
}
.lof-main-item-desc h2{
padding:0;
margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{
margin:0;
background:#C01F25;
font-size:75%;
padding:2px 3px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
text-transform:uppercase;
text-decoration:none
}
.lof-main-item-desc h3 a:hover{
text-decoration:underline;
}
.lof-main-item-desc h3 i {
font-size:70%;
}
/* main flash */
ul.lof-main-wapper{
/* margin-right:auto; */
overflow:hidden;
background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
margin:0 !important;
position:absolute;
overflow:hidden;
}
ul.lof-main-wapper li{
overflow:hidden;
padding:0px !important;
margin:0px;
float:left;
position:relative;
}
.lof-opacity li{
position:absolute;
top:0;
left:0;
float:inherit;
}
ul.lof-main-wapper li img{
padding:0px !important;
}
/* item navigator */
.lof-navigator-wapper {
position:absolute;
bottom:10px;
right:10px;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;
padding:5px 0px;
}
.lof-navigator-outer{
position:relative;
z-index:100;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
}
ul.lof-navigator{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
background:none !important;
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
ul.lof-navigator li{
cursor:hand !important;
cursor:pointer !important;
list-style:none !important;
padding:0 !important;
margin-left:0px !important;
overflow:hidden !important;
float:left !important;
display:block !important;
text-align:center !important;
}
ul.lof-navigator li img{
border:#666 solid 3px;
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next, .lof-navigator-wapper .lof-previous{
display:block;
width:22px;
height:30px;
color:#FFF;
cursor:pointer;
}
.lof-navigator-wapper .lof-next {
float:left;
text-indent:-999px;
margin-right:5px;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
float:left;
text-indent:-999px;
margin-left:5px;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:880px;height:340px;}
.lof-main-outer {width:880px; height:340px;}
.lof-main-wapper img {height:340px !important; width:880px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script>
<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
next:$('#lofslidecontent45 .lof-next') };
$obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
direction : 'opacitys',
easing : 'easeOutBounce',
duration : 1200,
auto : true,
maxItemDisplay : 10,
navPosition : 'horizontal', // horizontal
navigatorHeight : 32,
navigatorWidth : 80,
mainWidth:880,
buttons : buttons} );
});
</script>
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
<div id="MicrosoftTranslatorWidget" style="width: 200px; min-height: 83px; border-color: #3A5770; background-color: #78ADD0;"><noscript><a href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2fkp3family.blogspot.com%2f">Terjemahkan laman ini</a><br />Diberdayakan oleh <a href="http://www.microsofttranslator.com">Microsoft® Translator</a></noscript></div> <script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = ((location && location.href && location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" : "http://www.microsofttranslator.com" ) + "/ajax/v2/widget.aspx?mode=manual&from=id&layout=ts"; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script>
မွတ္ခ်က္။ ။kp3family.blogspot.comေနရာမွာမိမိဘေလာ့လင့္ခ္နဲ႕အစားထိုးေပးပါ။
]]></b:skin>၂။ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။
.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmqmEO7nttHVuu9xtVEecQm-AOvUV9T_P1lwva-oVo4DROBxzjz2gClb8cA5-e66uBF7lfsTaUHeglYhBEWzt0sIJv3Y2vYT8TsHa6yczbj5xyaBT3jiIFImVYLXgnVeTOZXr8zjOq79e/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmqmEO7nttHVuu9xtVEecQm-AOvUV9T_P1lwva-oVo4DROBxzjz2gClb8cA5-e66uBF7lfsTaUHeglYhBEWzt0sIJv3Y2vYT8TsHa6yczbj5xyaBT3jiIFImVYLXgnVeTOZXr8zjOq79e/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4sJfw4H61oM5dzqS22f7AjmzvMxncsU3h1mz2ZUO_-KwKQ9DpmhRC0bDuDUqd_fCA3EjuxO8DUU2YTyS0t-sBJx9Gv0lf98V0mkhbRxfBINs3AcJJ2g29ZtKEUZsDHyVICQDPNuMKVUU/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4sJfw4H61oM5dzqS22f7AjmzvMxncsU3h1mz2ZUO_-KwKQ9DpmhRC0bDuDUqd_fCA3EjuxO8DUU2YTyS0t-sBJx9Gv0lf98V0mkhbRxfBINs3AcJJ2g29ZtKEUZsDHyVICQDPNuMKVUU/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb2FCuj6DZrwmJl-2bi6OtJmG5nFn9c00bZHiAvprv6O54dzxZWjM7G7P9HHFSZW7jV9bnRmUk4qy_lVrx5UXcrzqL9ul_4OiX_twHa6z66RrbqlI-_QnlJhiD0WkAKJzn2fKq-uIc-7if/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
၃။ေအာက္ကကုဒ္ကိုျပထားတဲ့ပံုအတိုင္းထည့္ေပးလို္က္ပါ။
<div class="nav"> <div class="table"> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a></li></ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> </div> </div>က်ေနာ္အေပၚကကုဒ္မွာေရးထားသလိုလင့္ခ္ေတြကိုထည့္ျပီးရင္kp3နည္းပညာေနရာေတြမွာမိမိရဲ႕လင့္ခ္အမည္ကိုေရးေပးပါ။
#main-wrapper { float: left; width: 600px; margin: 0; padding: 0 0 20px; }
ေတြ႕ျပီဆိုရင္အေပၚကုဒ္က float: left;ကို float: right;အျဖစ္ေျပာင္းေပးလိုက္ပါ။#sidebar-wrapper { float: right; width: 320px; margin: 0; padding: 0 0 10px; display: inline; }
ေတြ႕ျပီဆိုရင္အေပၚကအတိုင္းfloat:right;ကိုfloat:left;ဆိုျပီးျပန္ေျပာင္းေပးလိုက္ပါ။အဆင္ေျပၾကပါေစလို႕ေျပာပါရေစ။
<span style="padding: 2px 5px; background-color: #DDD; float: center;"><a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">စလံုးအၾကီးေျပာင္းရန္</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">စလံုးအေသးေျပာင္းရန္</a></span>
<div id="wrap-content">မိမိၾကိဳက္တဲ့စာသားကိုဒီမွာေရးေပးလိုက္ပါ။</div>
<script type="text/javascript"> var c = document.getElementById("wrap-content"); function resizeText(multiplier) { if (c.style.fontSize == "") { c.style.fontSize = "1.0em"; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; } </script>
<script charset='utf-8' type='text/javascript'>
$("plustext").addEvent("click", function() {resizeText(1);});
$("minustext").addEvent("click", function() {resizeText(-1);});
</script>
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
]]></b:skin>ေတြ႕ျပီဆို၇င္အေပၚမွာေအာက္ကCodeကိုထည့္ေပးလိုက္ပါ။
.comment-form{
margin-right: auto;
margin-left: auto;
}
Save Tamplateကိုႏိုပ္လိုက္ပါ။မိမိ၇ဲ႕ကြန္မင့္Formေန၇ာကိုျပန္ၾကည့္လိုက္ပါ။
မိမိရဲ႕ဘေလာ့မွာထားမယ္ဆိုရင္ Code ကို ဒီမွာ သြားယူပါ။
