San Htaik Htar: LofsiderNews – Slider for Popular Post Blogger

Friday, May 23, 2014

LofsiderNews – Slider for Popular Post Blogger

ဒီတစ္ခါ က်ြန္ေတာ္မိမိ ဘေလာ့ရဲ႕ Menu မွာ Lofsider ဒီဇိုင္းေလးထားခ်င္သူမ်ားအတြက္အလြယ္ကူဆံုး
နည္းေလးကိုတင္ေပးလိုက္ပါတယ္။ မိမိဘေလာ့ရဲ႕ Popular Posts ေတြကို အေပၚမွာ Slider သြားေနတာပါ။ ေအာက္မွာ Demo နဲ႔နမူနာသြားၾကည့္လိုက္ပါ။ သူငယ္ခ်င္းတို႔ၾကိဳက္တယ္ဆိုရင္
ေအာက္မွာ အဆင့္ဆင့္ထည့္ပံုထည့္နည္းကိုေျပာျပထားပါတယ္။

အေပၚမွ်ားျပထားတဲ့ေနရာမွာ Popular Posts Gadget ေလးကိုယူလိုက္ပါ။ ျပီးရင္ မိမိထားခ်င္သေလာက္
ပိုစ့္အေရအတြက္ သက္မွတ္လိုက္ပါ။ ျပီးရင္ေနာက္ထပ္ ေအာက္ကမွ်ားေနရာမွာ Add Gadget ကေန
HTML/Javascript ကိုဆိုတာယူလိုက္ပါ ျပီးရင္ေအာက္ကေပးထားတဲ့ ကုဒ္ေလးကိုကူးျပီး
ထည့္ေပးလိုက္ပါ။ မိမိမွာအရင္ရွိေနတဲ့ Popular Posts ဆိုတာကိုအရင္ဖ်တ္ဖို႔မေမ့ပါနဲ႔။ ဒါဆိုရင္
မိမိဘေလာ့ရဲ႕ အေပၚဆံုး menu မွာအေပၚမွာ Popular Posts ေတြက Slide အျဖစ္နဲ႔သြားေနတာေတြ႔
ရမွာပါ။ ေအာက္မွာနမူနာၾကည့္ပါ။

http://yangontharmovieonline.blogspot.com/

Login to Blogger Dashboard and navigate to Design – Page Elements
Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
Put all script bellow to the “Content” of HTML/Javascript Gadget
If you have already jQuery in your Template please delete from my script
Done- your popular post now with animation

/*******************************************************/
.lof-main-item-desc{
 z-index:100px;
 position:absolute;
 top:150px;
 left:50px;
 width:400px;
 
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
 color:#FFF;
 margin:0 8px;
 padding:8px 0
}
.lof-main-item-desc h3 a{
 color:#FFF  !important; 
 margin:0 !important;
 font-size:140% !important;
 padding:20px 8px 2px !important;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif 
!important;
}
.lof-main-item-desc h3 a:hover{
 color:#FF6;
 text-decoration:underline;
}

/* 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;
 height:300px;
 width:600px;
 position:absolute;
 overflow:hidden;
}

ul.lof-main-wapper li{
 overflow:hidden;
 padding:0px  !important;
 margin:0px;
 height:100%;
 width:600px;
 float:left;
}
.lof-opacity  li{
 position:absolute;
 top:0;
 left:0;
 float:inherit;
}
ul.lof-main-wapper li img{
 padding:0px !important; 
 width:600px  !important;
 height:300px  !important;
}

.lof-main-wapper{
  margin-left:auto;
  margin-right:inherit;
  clear:both;
  height:300px;
 }

li-desc{
 z-index:100px;
 position:absolute;
 top:150px;
 left:50px;
 width:400px;
 
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

/* filter:0.7(opacity:60) */
}
li-desc p{
 color:#FFF;
 margin:0 8px;
 padding:8px 0
}
li-desc h3 a{
 color:#FFF; 
 margin:0;
 font-size:140%;
 padding:20px 8px 2px;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
 color:#FF6;
 text-decoration:underline;
}

/* item navigator */
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 ; 
 cursor:pointer ;
 list-style:none ;
 width:100%  !important;
 padding:0  !important;
 margin:0 !important;
 overflow:hidden !important;
}
.lof-navigator-outer{
 position:absolute !important;
 z-index:100 !important;
 height:300px !important;
 width:310px  !important;
 overflow:hidden  !important;
 color:#FFF !important;
 left:0 !important
 top:0 !important;
 right:inherit !important;
}
.lof-navigator li.active{
 
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg2.gif)
 center right no-repeat; 
 color:#FFF
}
.lof-navigator li:hover{
 
}

.lof-navigator li h3{
 color:#FFF;
 font-size:120%;
 padding:15px 0 0 !important;
 margin:0;

}
.lof-navigator li div{
 
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

color:#FFF;
 height:100%;
 position:relative;

padding-left:15px;
 border-top:1px solid #E1E1E1;
 margin-left:inherit;
 margin-right:18px;
}

.lof-navigator li.active div{
 
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg2.gif);

color:#FFF;

margin-left:inherit;
 margin-right:18px;

}
.lof-navigator li img{
 height:60px;
 width:60px;
 margin:15px 15px 10px 0px;
 float:left;
 padding:3px;
 border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
 border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
 color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

ul.lof-main-wapper li {
  position:relative; 
 }

</style>

</script>

သူငယ္ခ်င္းတို႔ေရ... ေၾကာ္ျငာေလးတစ္ခ်က္ေလာက္ကလစ္ျခင္းျဖင့္အားေပးသြားၾကပါေနာ္.....

Friday, May 23, 2014

LofsiderNews – Slider for Popular Post Blogger

No comments:

Post a Comment

Asia Business Gate Way, MOD

Download Softwares

Buy & Sell Sites

Sport အားကစား ဆိုဒ္မ်ား

ရန္ကုန္ၿမိဳ ့ေတာ္ လမ္းညႊန္