Freedom Of Life

මම මෙ ගැජට් එක මගේ test බ්ලොග් එකකට දැම්ම .
මෙ ගැජට් එක වැඩකරනවාද නැද්ද කියලා සැකයක්  මතු වෙනවා නම් මුලින් Click  Demo ගිහින් මොහොතක් බලන් ඉන්න.

දැන් කැමති නම් Sliderගැජට් එක බ්ලොගයට දාගන්න මම පහත සදහන් කරන විදියට Slider ගැජට් එක එකතු කරගන්න.
මුලින්ම ඔයාලා ගෙ බ්ලොගයෙ Dashboard Click Design > Edit Html මතක ඇතුව Template  download කරගන්න දැන් Ctrl +F කි බොඩ් එකතුලින් යතුර  වරක් ඔබන්න දැන්  ඔබට පෙනෙනවා ඇතිfind box එකක් දැන් එ තුලට මම පහත දෙන කොර්ඩ් එක copy /paste  කරගෙන සොයාගන්න

 ]]></b:skin>  

දැන්

]]></b:skin> 

කොර්ඩ් එක සොයාගත්තා නම් .

ඉට ඉහලින් මෙන්න මේ කොර්ඩ් ටික copy / paste  කරගන්න.

/*Start Slider Css*/

/*

* jQuery Nivo Slider v2.6

* http://nivo.dev7studios.com

*

* Copyright 2011, Gilbert Pellegrom

* Free to use and abuse under the MIT license.

* http://www.opensource.org/licenses/mit-license.php

*

* March 2010

*/





/* The Nivo Slider styles */

#slider{

width:618px;

height:246px;

}

.nivoSlider {

position:relative;



}

.nivoSlider img {

position:absolute;

top:0px;

left:0px;

}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

border:0;

padding:0;

margin:0;

z-index:6;

display:none;

}

/* The slices and boxes in the Slider */

.nivo-slice {

display:block;

position:absolute;

z-index:5;

height:100%;

}

.nivo-box {

display:block;

position:absolute;

z-index:5;

}

/* Caption styles */

.nivo-caption {

position:absolute;

left:0px;

bottom:0px;

background:#000;

color:#fff;

opacity:0.8; /* Overridden by captionOpacity setting */

width:100%;

z-index:8;

}

.nivo-caption p {

padding:5px;

margin:0;

}

.nivo-caption a {

display:inline !important;

}

.nivo-html-caption {

display:none;

}

/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {

position:absolute;

top:45%;

z-index:9;

cursor:pointer;

}

.nivo-prevNav {

left:0px;

}

.nivo-nextNav {

right:0px;

}

/* Control nav styles (e.g. 1,2,3...) */

.nivo-controlNav a {

position:relative;

z-index:9;

cursor:pointer;

}

.nivo-controlNav a.active {

font-weight:bold;

}

/*

Skin Name: Pascal Theme

Skin URI: http://nivo.dev7studios.com

Skin Type: fixed

Description: A nice, light skin for the Nivo Slider.

Version: 1.0

Author: Gilbert Pellegrom & Pascal Gartner

Author URI: http://dev7studios.com

*/



.theme-pascal.slider-wrapper {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXLPGuxRGSb6bAdfK_EqhOYyRQ_N1txGIFRR2EavPL9UhuteKKtL2zP9j0KUzO0c6S1vP8SprqhTIZhZnvZiw2pKeGVvj74Y42deoP-bZpUCRZjXJqU2vALZzeI01m2Z5WKLjhfHBLnkEw/s1600/slider.png) no-repeat;

width:668px;

height:299px;

margin:0 auto;

padding-top:17px;

position:relative;

}



.theme-pascal .nivoSlider {

position:relative;

width:630px;

height:235px;

margin-left:19px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1T8eseFAc4fPTkQ4uvE1LJSdnSP8S9nGFHfn8Hsph49BZWJMU0ZXIoVrMqujs6EH7128VcepNA3ar7O51ju6a98KkJfplEYnMd70vtuCSEFhdXFZfCpeGrvJl9GK7Mqftux1-7CV47SJZ/s1600/loading.gif) no-repeat 50% 50%;

}

.theme-pascal .nivoSlider img {

position:absolute;

top:0px;

left:0px;

display:none;

width:630px; /* Make sure your images are the same size */

height:235px; /* Make sure your images are the same size */

}

.theme-pascal .nivoSlider a {

border:0;

display:block;

}



.theme-pascal .nivo-controlNav {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfGDzLWgkHdawlPm5vPx6fWf_LglTgs0ubqJQqrDqlXgpkYEIkCd57PwhCQbZMFLcBSvYu7oVguMdPsaN8vl2H9twK3a7vyB3XFg5HbcoS72hkkmKqLrYDVgBMJvVOdx7JQtUh4fY_0og3/s1600/controlnav.png) no-repeat;

width:251px;

height:40px;

position:absolute;

left:200px; /* Tweak this to center bullets */

bottom:-42px;

padding:8px 0 0 82px;

z-index:20;

}

.theme-pascal .nivo-controlNav a {

display:block;

width:22px;

height:22px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNeRi622ZmbWitXDkwLLGBgV11HWbn-5wicUMYo_68UQgnkTeRb4cGP5mgSdYQ4Ev2xniwbjvAQ0AoWmQ7Aa4BCQIfhb7KsI3Uf6MsKvhniHA_zz8WIbr3LVNpk5SUJUx7cFbOPmrrBpc/s1600/bullets.png) no-repeat;

text-indent:-9999px;

border:0;

margin-right:3px;

float:left;

}

.theme-pascal .nivo-controlNav a.active {

background-position:0 -22px;

}



.theme-pascal .nivo-directionNav a {

display:none;

}



.theme-pascal .nivo-caption {

bottom:40%;

left:auto;

right:0px;

width:auto;

max-width:630px;

overflow:hidden;

background:#fff;

text-shadow:none;

font-family: arial, serif;

color:#4c4b4b;

}

.theme-pascal .nivo-caption p {

padding:5px 15px;

color:#333;

font-weight:bold;

font-size:27px;

text-transform:uppercase;

}

.theme-pascal .nivo-caption a {

color:#333;

font-weight:bold;

font-size:27px;

text-transform:uppercase;

}



.theme-pascal .ribbon {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ID_J21yMkna9KnvlYZcfBS1qGKyPFPEF7HbiuksOI1trYxhLN6jVaA5dcFHD8XfEXeW1g6NiCz43i9RhilSXaMKk60L9eSgVFYrmnq5HpBCAShjntXbKBTWeJHgPHuJFNuVRuEhu-JRT/s1600/ribbon.png) no-repeat;

width:111px;

height:111px;

position:absolute;

top:-8px;

left:-8px;

z-index:300;

}

/*End Slider Css*/ 

දැන් නැවතත් find box එක තුල මෙන්න මෙ
 
 

 </head> 

                                                                   
කොර්ඩ් එක සොයාගන්න දැන් එ කොර්ඩ් එකට ඉහලින් මෙන්න මෙ කොර්ඩ් ටික copy /paste කරගන්න

 <!--Start Slider Scripts-->

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script 
src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js'
 type='text/javascript'/>

<script type='text/javascript'>

$(window).load(function() {

$(&#39;#slider&#39;).nivoSlider();

});

</script>

<!--End Slider Scripts info @ http://www.google.com-->

දැන් template save කරගන්න ඉට පස්සේ Design >>> Add Gadget යන්න දැන් HTML/JavaScript box එකක් ගන්න දැන් එම HTML/JavaScript box තුල මෙන්න මේ කොර්ඩ් ටිකcopy/ paste කරගන්න

<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://mageblogz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRasAIdpm8qUO_KwoOoZNft-3Lofvs5jGbafsCimtdWBmiP-E7Cw_jWako5vG-H5lRHUBq1sjwwnY_x8LgsD4pqOoDk9-YitWJHXm-2QXGEOySyLDVbiO2Lcv-w9q10kM0IgzrJZJBrKnV/s1600/nemo.jpg" alt="" /></a>
<a href="http://mageblogz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9XBBpzrACl2YhCZWat-CigQg0noN17C0gPfX6t5srXx5atMsf0RCKL1YOqc7MVShi0XvJHvtYYOBNFe4wUHG0nXudHmKqaHr_NV3dr8ub1gSEXrIykxCzfXZQPNMT9sDG3eptrCkbd-8/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>

<a href="http://mageblogz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1C7E0l_d_PcnPNn0kCmCKN-3KBeuFUMBy19jbGYquG986pFAJLMjAA9XLe86SqLhYKBkPacdEM9JhrH1VL-xxqpFHGnsskCgO-9Hyl6tU_H-dRNXe9kUuGaoaB7Rf3773cGGTphODlqzH/s1600/up.jpg" alt="" /></a>

<a href="http://mageblogz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf22FkLN5mgQJZUJbSCZZt7u16nZES64t28TlM2zE0COYbV-9IzK_LfSxu1yMDzGFHqF-wZOIlwHsN__gYeCyN3Rs4s-HiylBza1KagaiPU-iXUNGky2Cv02g4ySLTYWsxH6KeOwmw9uCi/s1600/walle.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This is an example of a caption.
</div>

</div>

 Save දැන් නම් ඉතින් හරි ඔයාලගේ බ්ලොගය තුල ලස්සන Slider ගැජට් එකක් ඇති .. දැන් ඔයාලාට එක තුලට ලස්සන පොස්ට් ටිකක් එකතු කරගන්න තමයි තියෙන්නේ එක නම් දන්නවාත් ඇති .

ඔයාලාට මතකයි නේ මුලින් HTML/JavaScript box අරගෙන අපි කොර්ඩ් වගයක් දාලා save කරා.
දැන් කරන්න තියෙන්නේ Design >>- ඔයාලා මම ඉහත කිව්ව cords ටික දාලා save කරන ලද HTML/JavaScript box එක open කරගෙන  මම පහත දෙන කොර්ඩ් සොයාගෙන එවා වෙනස් කරලා ඔයාලාගේ බ්ලොග් පොස්ට් url දෙන්න තමයි තියෙන්න-

" http://mageblogz.blogspot.com   "තියෙන
එක මකලා එතනට ඔයාලාගේ පොස්ට් එකේ url එක දෙන්න
"This is an example of a caption" එක මකලා ඔයාලාට කැමති විස්ථරයක් දාන්න
            &
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRasAIdpm8qUO_KwoOoZNft-3Lofvs5jGbafsCimtdWBmiP-E7Cw_jWako5vG-H5lRHUBq1sjwwnY_x8LgsD4pqOoDk9-YitWJHXm-2QXGEOySyLDVbiO2Lcv-w9q10kM0IgzrJZJBrKnV/s1600/nemo.jpg
 1 ඔයාලාගේ බ්ලොග්  1 පොස්ට් image url එක දෙන්න ඉහත කොර්ඩ් එක මකලා

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1C7E0l_d_PcnPNn0kCmCKN-3KBeuFUMBy19jbGYquG986pFAJLMjAA9XLe86SqLhYKBkPacdEM9JhrH1VL-xxqpFHGnsskCgO-9Hyl6tU_H-dRNXe9kUuGaoaB7Rf3773cGGTphODlqzH/s1600/up.jpg
 

 2 ඔයාලාගේ බ්ලොග් 2පොස්ට් image url එක දෙන්න ඉහත කොර්ඩ් එක මකලා

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf22FkLN5mgQJZUJbSCZZt7u16nZES64t28TlM2zE0COYbV-9IzK_LfSxu1yMDzGFHqF-wZOIlwHsN__gYeCyN3Rs4s-HiylBza1KagaiPU-iXUNGky2Cv02g4ySLTYWsxH6KeOwmw9uCi/s1600/walle.jpg
 
3ඔයාලාගේ බ්ලොග් 3පොස්ට් image url එක දෙන්න ඉහත කොර්ඩ් එක මකලා

 දැන් save කරගන්න  ..  මම ඔයාලාගේ ඉල්ලන කැමති මගේ අඩවියේ Followers වලට සෙට් වෙන්න කියලා . බොහොම ස්තුතියි..