Jquery Featured Slider එකක් Blog එකට දාගමු..

දැන් මම ඔයාලට කියලා දෙන්නේ අපේ බ්ලොග් එකටත් Jquery Featured Slider එකක් ලේසියෙන්ම දාගන්න විදිහයි. Featured Slider එකක් කියන්නේ සරලව කිව්වොත් පිංතූර මාරැවෙන ඒ පිංතූර මත ක්ලික් කරපුහාම අපේ බ්ලොග් එකේ හෝ වෙන සයිට් එකක වෙබ් පිටුවක් ඕපන් වෙන්න හදල තියන ගැජට් එකකටයි.

මේක අපේ බ්ලොග් එකට දාගන්න හරිම ලේසියි. ඒ වගේම මේ වැඩෙන් බ්ලොග් එකට අමුතු ගතියකුත් එනවා. සමහර ටෙම්ප්ලේට් වල මේක තියනවා ඔයාල දැකල ඇති. දැන් ඔයාලටත් පුථවන් ඔයාගේ ටෙම්ප්ලේට් එකට මේක දාගන්න.. :)

  1. මුලින්ම බ්ලොගර් අකවුන්ට් එකට ලොග් වෙන්න.

  2. දැන් Design > Add gadget ගිහින් HTML/Java Script එකක් ගන්න.

  3. පස්සේ මම පහල දාල තියන code එක එතන paste  කරලා save කරන්න.

සැලකිය යුතුයි - පහත කෝඩ් එකේ URL-of-Post 1 යන තැන් වලට ඔබ ලින්ක් කරන පෝස්ට් එකේ හෝ

වෙබ් අඩවියේ URL එක ලබාදෙන්න.

Slide-X-Image-Address 1 යන තැන් වලට ඔබට අවශ පිංතූරයක URL එක ලබාදෙන්න. (මෙම පිංතූර width=300px හා height=618px විය යුතුය.)

                          Slide X Description [...] 1 යන තැන් වලට Description එකක් නැත්නම් ඔබ ලබාදුන් පෝස්ට් එකේ හෝ අඩවිය පිළිබද හැදින්වීමක් ලබාදෙන්න.

ඉහත ආකාරයට කෝඩ් එකේ ස්ථාන 5ටම විවිධ URL, Image URL, Description ලබාදෙන්න.

                                                 සුපුෂ්පිත සොෆ්ට් වෙත පැමිණියාට ස්තූතියි..!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script>
<style> 
#slider { 
    position:relative; 
} 
#slider img { 
        position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
#slider a { 
    border:0; 
    display:block; 
}
.nivo-controlNav { 
    position:absolute; 
    left:260px; 
    bottom:-42px; 
} 
.nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-tqMtj7qKOS2udB-aPME6yiBvtJqArFIcsCfLyufWN4sg4h1m0SiQrDYmeYrQoZ7HYktQtqKTHiGQistBdgawy8NYNwMwg7sHmFZxPCZzy1rwa2Qu-C9MSRr3brlk-y3PMMe8mRUMlvY/s400/bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:3px; 
    float:left; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
}
.nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5THEC4a63uJHMAmaPCOb2bnA2WaHlWnV92nkTSz0n1cZkMa2NyNtXxMhsD4PnICoAY0wTXOeavRH-GVfjmW0kyfe7_XWx-my1t8QI7jrCRyQJigyKuRWmE-4Md1FUMzDeCQBp2oqUJ0/s400/arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
}
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:16px; 
    padding: 10px 0px; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
}
.clear { 
    clear:both; 
}
.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 

.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    opacity:0.7; /* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 

.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
.nivo-controlNav a { 
    position:relative; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 
</style>
<div id="slider">

<a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a> 
 
<a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a>

<a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a>

<a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a>

<a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a>   


</div>


<br/> 
<br/>