ඔයාලගෙ බ්ලොග් එකට Featured Posts ස්ලයිඩර් එකක්

කොහොමද යාලුවනේ ඉතින් ඔයාලට.ඔන්න මම අද බ්ලොග් වැඩ කෑලි ඉල්ලපු අයට අද පොඩි තෑග්ගක් ගෙනාවා..ඔයාලගෙ බ්ලොග් එකේ ලියපු පෝස්ට් සයිඩ් බාර් එකේ ලස්සනට Animate වෙන පට්ටම පෝස්ට් ස්ලයිඩර් එකක් එකක් තමයි අද ගෙනාවේ...

මෙන්න මුලින් Live Demo එක බලල ඉන්නකෝ....

ඔන්න ඕක තමයි ගැජට් එක..ඔන්න ඕක මම හදපු එකක් නම් නෙවෙයි..ඔය වගේ එකක් ඔයාලගෙ බ්ලොග් එකටත් දාල බ්ලොග් එක ලස්සන කරගන්න කැමතිද..එහෙනම් මෙන්න තියෙනවා කෝඩ් ටික...

<center>
<div id="headerbox">
Featured Posts</div>
<div id="featuredpostside">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://gadgematiclanka.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by Sumudu  with lot of 
Gadgematic Lanka
 please keep the comment intact
*/
ul.abt-sidebar-slider * {
-moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
ul.abt-sidebar-slider {
height: 500px;
width: 100%;
}
ul.abt-sidebar-slider li {
display: none;
float: left;
height: 24.5%;
overflow: hidden;
padding: 0;
position: absolute;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
left: 0;
top: 50%;
}
ul.abt-sidebar-slider img {
border: 0 none;
height: 100%;
width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
left: 0;
top: 75%;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
left: 0;
top: 25%;
}
ul.abt-sidebar-slider .overlayx {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
border: 4px solid #2E8DCE;
border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
color: white;
font-family: Oswald;
font-size: 25px;
font-weight: 100;
line-height: 1.5em;
margin: 0;
padding: 0 10px;
position: absolute;
top: 25px;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .label_text {
bottom: 10px;
color: white;
font-size: 90%;
left: 10px;
position: absolute;
z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
display: none;
}
.buttons {
margin: 5px 0 0;
}
.buttons a {
display: inline-block;
height: 25px;
position: relative;
text-indent: -9999px;
width: 15px;
}
.buttons a:before {
border-color: transparent #535353 transparent transparent;
border-style: solid;
border-width: 8px 7px;
content: "";
height: 0;
left: 50%;
margin-left: -10px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 0;
}
.buttons a.nextx:before {
border-color: transparent transparent transparent #535353;
margin-left: -3px;
}
.date {
background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
bottom: 93px;
padding: 8px;
position: relative;
right: 6px;
}
#headerbox {
background: #8FB93D;
font-family: Oswald;
padding: 4px;
}
</style>
</center>

මුලින්ම මේ තිබෙන පිලිවෙලට යන්න.

1. Login To Blogger Account.
2. Click Layout > Add A Gadget.
3. Select HTML / Javascript

ඊට පස්සෙ කොපි කරගත් code එක past කරන්න. ඊටපස්සෙ ඔය (http://webgadgematiclanka.blogspot.com/) කියල දාල තියන ලින්ක් එක වෙනුවට ඔයාගෙ බ්ලොග් එකේ URL ලින්ක් එක යොදා save කරන්න.

ඔන්න එහෙනම් මම ගියා. තවත් අලුත් ලිපියකින් ලගදි හමුවෙමු.... :)) :D

මේ ගැන ඔයාලගෙ අදහස් මොනවද?

සැලකිය යුතුයි !!

ඔයාලගෙ බ්ලොග් එකට Featured Posts ස්ලයිඩර් එකක්

මුලින්ම මේ තිබෙන පිලිවෙලට යන්න.

අපේ බ්ලොග් එකේ තියන ලිපි හොදයිනම් ඒවා කියවල බලල comment එකකුත් දාන්න.අපේ facebook page එකතත් like එකක් දාල යන්න.

0 comment:

Post a Comment

අපිටත් Like එකක් දාන්න

ලිපි වර්ග | Labels

අපේ ජනප්‍රිය ලිපි

බ්ලොග් දැන්වීම් | Blog Ads