Image Slider එකක් ඔයාලගේ බ්ලොග් එකටත් දාගන්න

මම අද කියන්න යන්නේ ලස්සන image slider එකක් ඔයාලගේ බ්ලොග් එකටත් දාගන්නේ කොහොමද කියල..image sliders ඔයාල දැකල ඇති ගොඩක් අය..වෙබ් සයිට් එකකට ගිහාම ලස්සනට එක එක images පෙන්නනවා එකින් එක මාරු වේවි.එක ඇත්තටම ගොඩක් ලස්සනයි.
මේක කරන්න පුළුවන් ලේසියෙන්ම ..මම කලින් එක එක gadgets දන හැටි කියල දුන්නනේ.ඒවා කරන විදිහටම තමා මේකත් කරන්නේ.

හරි ඉස්සරලම ඔයාල ඔයාලගේ බ්ලොග් එකේ dashboard එකට ගිහින් layouts click කරලා add gadget කියන එක click කරන්න.
එතකොට පොඩි box එකක් open වෙයි.එකෙන් ඔයාල තෝරාගන්න HTML/Java Sript කියන එක ..
එතකොට තවත් box එකක් open වෙයි.අන්න ඒ box එකේ මම යටින් දීල තියන code එක copy කරගන ගිහින් paste කරන්න.
මම මේ code එකේ රතු පාටින් දීල තියෙන්නේ links වගයක්.ඔයාල ඔයාලගේ images තියන තැන ලින්ක් එක copy කරලා මම මේකේ දීල තියන ######### මාර්ක් ටික වෙනුවට ඔයාලගේ links ටික එතෙන්ට paste කරන්න ..
ඊට පස්සේ save කරන්න ..
දැන් ඔක්කොම හරි 

<style type="text/css"> /* http://dimpost.com */ #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;} #slider { width:700px;height:306px;/* Make it the same size as your images */ background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7RLMixwztSB6m4Sn_-qZZabQo0tFk1FL6vmRYc0Vuc0q9AnSfjvV0Qru2_5sfLzkluzAx86YSvRC3aR1Lzj-v8ByeSjH2lBG40DQknk-y9rTEFgi_N1qQvTAbq1YTlFA7h06wFdtbqXrS/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999; } #slider img { position:absolute; border:none; display:none; } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } /* Caption styles */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; bottom:15px; z-index:3; overflow:hidden; font-size: 0; } div.mc-caption-bg { background-color:black; } div.mc-caption { font: bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; } div.mc-caption a { color:#FB0; } div.mc-caption a:hover { color:#DA0; } /* ------ built-in navigation bullets wrapper ------*/ div.navBulletsWrapper { top:320px; left:280px; /* Its position is relative to the #slider */ width:150px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; } /* each bullet */ div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWq1NYOxdXza9IfafKKb64ju-KZj7fObTB6YWNnMjFyt5H9GxIdCpu7alfwnvRHyfRIn2nvDj55RwYhqCUGbpubn6oHvDj63Wbm22sK7Bht674g6MSphI0WOoF5XRjfbnPJek8Jtr51YN/s1600/bullet.png) no-repeat 0 0; float:left;overflow:hidden;vertical-align:middle;cursor:pointer; margin-right:11px;/* distance between each bullet*/ _position:relative;/*IE6 hack*/ } div.navBulletsWrapper div.active {background-position:0 -11px;} /* --------- Others ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } </style> <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="slider"> <a href="#"><img src="##############################" alt="#htmlcaption1" /></a> <a href="#"><img src="##############################" alt="Go UP!" /></a> <a href="#"><img src="#################################" alt="Pure Javascript. No jQuery. No flash." /></a> <a href="#"><img src="######################################" alt="#htmlcaption2" /></a> <a href="#"><img src="#################################" alt="Stay Connected"/></a> </div> <a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <div id="htmlcaption1" style="display: none;"> Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a> </div> <div id="htmlcaption2" style="display: none;"> <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks. </div> </div>

මම මේ යට දීල තියෙන්නෙත් උද code එකමයි.එත් මේකේ අර ##### සලකුණු වෙනුවට images තියන ලින්ක් ටිකක් දලයි තියෙන්නේ.ඔයාලට ඕනෙනම් මේකත් try කරලා බලන්න.

<style type="text/css"> /* http://dimpost.com */ #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;} #slider { width:700px;height:306px;/* Make it the same size as your images */ background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7RLMixwztSB6m4Sn_-qZZabQo0tFk1FL6vmRYc0Vuc0q9AnSfjvV0Qru2_5sfLzkluzAx86YSvRC3aR1Lzj-v8ByeSjH2lBG40DQknk-y9rTEFgi_N1qQvTAbq1YTlFA7h06wFdtbqXrS/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999; } #slider img { position:absolute; border:none; display:none; } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } /* Caption styles */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; bottom:15px; z-index:3; overflow:hidden; font-size: 0; } div.mc-caption-bg { background-color:black; } div.mc-caption { font: bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; } div.mc-caption a { color:#FB0; } div.mc-caption a:hover { color:#DA0; } /* ------ built-in navigation bullets wrapper ------*/ div.navBulletsWrapper { top:320px; left:280px; /* Its position is relative to the #slider */ width:150px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; } /* each bullet */ div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWq1NYOxdXza9IfafKKb64ju-KZj7fObTB6YWNnMjFyt5H9GxIdCpu7alfwnvRHyfRIn2nvDj55RwYhqCUGbpubn6oHvDj63Wbm22sK7Bht674g6MSphI0WOoF5XRjfbnPJek8Jtr51YN/s1600/bullet.png) no-repeat 0 0; float:left;overflow:hidden;vertical-align:middle;cursor:pointer; margin-right:11px;/* distance between each bullet*/ _position:relative;/*IE6 hack*/ } div.navBulletsWrapper div.active {background-position:0 -11px;} /* --------- Others ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } </style> <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="slider"> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6PLIHXa7PcolEx-pt7ppDA0V1Qj-FKMs4d80mOtD5AcMJdq8fvG4KR_q0nMaqgyXEMwekCvXFgGOWja1FmnnPXzTmegCtHke7cN14AZzbiCG5u8hlaGzE86zNJ9zFcoZUIwILkA4eKEq/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxxAlur8iB1yJNeUYZAGbC96YWjt_8AWfCVCUXuqB2uhtXaNCvwDO6g0sFFvEHsdLRqJcsCL7Zq0Ms377dPyD8-N7MnPGOeFe25AiAcCD-qRkFQ_Dipy-diddM9aguPFyU6WK6OHA0TIim/h120/image-slider-2.jpg" alt="Go UP!" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizh6ZZcO6RXDN9AX4sH2IFXXCHFLyrPAT-lZIISRa2WIKEr8UQcAYWseio8R1YZlpwUgi7O4a5rLugbWoKlK1jTPUmKuM07CI47kM1yhPZcfWaldcKVKw7Neaxzv5nmknFTJW3-KatQ3FH/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj2QteFqiRBad8zzNY-UQ-gX4vfmeCnyhelAECIcQp-TGM1rqNb1B34HT6ep3SarsImtwsFWyViyDNYC6XlwJ3HVHEOKhaheayBplC3U_y8E4rYCnyOzpoaRcEmjEqtOthe3K9rnEsL_J-/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3ULUC8iYHjAaQeDj0Du2fsHqV0YPoqviiEyJHZHoj46AOJma5IfnPLUj_wXXAhnL1rciBhQ3g0-umi3PQfsKdDcNlKgEO_32RzjpQcTCXhRVnby1QAiWGoaYHekYDOK64cJYsSxyplF_/h120/image-slider-5.jpg" alt="Stay Connected"/></a> </div> <a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <div id="htmlcaption1" style="display: none;"> Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a> </div> <div id="htmlcaption2" style="display: none;"> <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks. </div> </div>