ලස්සන Image SlideShow ගැජට් එකක් බ්ලොගයට දා ගන්න 3

කොහොමද කට්ටියට :D මෙන්න මම ඔයාලට අද අරගෙන ආවේ පට්ට ගැජට් එකක්..මේ ගැජට් එකට ඔයලා ලියපු කැමතිම ලිපි එකතු කරන්න පුලුවන්..ඒ වගෙම මෙක බ්ලොගයට දා ගත්තම අමුතුම ගතියක් එයි..ඇත්තටම මේ ගැජට් එකනම් පට්ට.ඉතින් ඔයලා මේ ගැජට් එකට කැමති නම්..ඔයලට මෙක බ්ලොගයට දා ගන්න මම උදව් කරන්නම්..ඔයලා මම පහල කියල තියෙන විදියට වැඩ ටික කරන්න..

Demo එක මෙතින් බලා ගන්න

පලමුව ඔයාලා Layout >> Edit Html >> යන්න..මතක ඇතුව Expand Widget Templates තැනට හරිය දෙන්න..දැන් ඔයලා යතුරු පුවරුවේ Ctrl+F යතුරු එක වර ඔබන්න..දැන් ඔයාලට ලැබේයි සේර්ච් බාර් එකක්.

එතන </head> කියලා ටයිප් කරන්න..දැන් ඔයලාගේ HTML box එකේ මේ code එක Higlight වෙලා තියෙනවා පෙනෙයි..දැන් ඔයලා </head> කොඩ් එකට පහලින් මම පහල දිලා තියෙන කොඩ් එක Copy,past කරන්න..

<!--SLIDE-SHOW-STARTS--><br /> <!-- JavaScripts--><br /> <script type="text/javascript" src="http://sites.google.com/site/saamgeadaviya/www.saamgeadaviya.blogspot.com-jquery.js"></script><br /> <script type="text/javascript" src="http://sites.google.com/site/saamgeadaviya/www.saamgeadaviya.blogspot.com-s3Slider.js"></script><br /> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('#slider').s3Slider({<br /> timeOut: 3000<br /> });<br /> });<br /> </script><br /> <!-- CSS --><br /> <style type="text/css" media="screen"><br /> #slider {<br /> width: 410px; /* important to be same as image width */<br /> height: 300px; /* important to be same as image height */<br /> position: relative; /* important */<br /> overflow: hidden; /* important */<br /> }<br /> #sliderContent {<br /> width: 410px; /* important to be same as image width or wider */<br /> position: absolute;<br /> top: 0;<br /> margin-left: 0;<br /> }<br /> .sliderImage {<br /> float: left;<br /> position: relative;<br /> display: none;<br /> }<br /> .sliderImage span {<br /> position: absolute;<br /> font: 10px/15px Arial, Helvetica, sans-serif;<br /> padding: 10px 13px;<br /> width: 384px;<br /> background-color: #000;<br /> filter: alpha(opacity=70);<br /> -moz-opacity: 0.7;<br /> -khtml-opacity: 0.7;<br /> opacity: 0.7;<br /> color: #fff;<br /> display: none;<br /> }<br /> .clear {<br /> clear: both;<br /> }<br /> .sliderImage span strong {<br /> font-size: 14px;<br /> }<br /> .top {<br /> top: 0;<br /> left: 0;<br /> }<br /> .bottom {<br /> bottom: 0;<br /> left: 0;<br /> }<br /> ul { list-style-type: none;}<br /> </style><br /> <!--SLIDE-SHOW-STOPS-4-HELP-http://saamgeadaviya.blogspot.com-->

දැන් Template එක Save කරන්න.... Save Template

දැන් ඔයලා Layout >> Page Element >> Add a gadget >> "Html/java script" එකක් ගන්න..එකට මම පහල දිලා තියෙන කොඩ් එකක copy කරගෙන ඔයාලා "Html/java script" එකට past කරන්න.

<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href=""><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/3.jpg" alt="3" />
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/4.jpg" alt="4" />
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>

ඊට පස්සේ "Html/java script" එක Save කරන්න..
දැන් වැඩේ ගොඩ..

වැදගත්
ඉහත කොඩ් එකේ රතු පාටින් ඇති තැන් වලට ඔයලා දාන්න බලාපොරොත්තු වන රූපයේ ලින්ක් එක දෙන්න
ඉහත කොඩ් එකේ කොළ පාටින් ඇති තැන් වලට ඔයලා දාන්න බලාපොරොත්තු වන ලිපියේ නම දෙන්න
ඉහත කොඩ් එකේ නිල් පාටින් ඇති තැන් වලට ඔයලා දාන්න බලාපොරොත්තු වන විස්තර ටිකක් දෙන්න

කොහොමද වැඩේ...
මතක ඇතුව ඔයාලගේ ප්‍රතිචාරයක් මේ ලිපියට දෙන්න..
ඔබට ජය