ලස්සන Slider එකක් බ්ලොග් එකට දාගනිමු..

මාස දෙකකට විතර පස්සෙ තමා පෝස්ට් එකක් ලියන්න. අද මම කියන්න යන්නෙ ලස්සන Slider එකක් ඔබගේ බ්ලොග් එකට Add කරගන්න විදිහයි.




මේ Slider එක මමත් මගේ මේ සයිට් එකේ Home Page එකට දාලා තියනවා. ඒක Home Page එකට ගිහින් ඔයාලට බලන්න පුථවන්.

මේ Slider එකේ තියන පහසුකම් 

1. 16 unique transition effects
2. Simple clean & valid markup
3. Loads of settings to tweak
4. Built in directional and control navigation
5. Packed version only weighs 12kb
6. Supports linking images
7. Keyboard Navigation
8. HTML Captions
9. 3 Slick Themes

බ්ලොග් එකට ඇතුල් කර ගැනීම

මුලින්ම Blogger වලට Log වෙලා HTML Editor එකට ගිහින් පහල තියන කෝඩ් එක  </head> කියන ටැග් එකට ඉදිරියෙන් paste කරලා save කරන්න.

<style type="text/css"> /* <![CDATA[ */ #w2bNivoSlider {position:relative;width:640px !important;min-height:225px !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuj2THILbpTY0skf9kLp7dG0DwsTL28FeegjpSgepa43hykUzQq-kdn_B4G1ewcPUPReLYT-yRf816Suwjsa9Z8Urjw3PGFcE_j2Ud_ca50FEbrPOpLLruqV5nReP4QwFlCczWSZ_DZGjz/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);} #w2bNivoSlider img {position:absolute;top:0;left:0;display:none} .nivoSlider {position:relative;width:100%;height:auto;overflow:hidden} .nivoSlider img {position:absolute;top:0;left:0} .nivo-main-image {display:block!important;position:relative!important;width:100%!important} .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none} .nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0} .nivo-box {display:block;position:absolute;z-index:5;overflow:hidden} .nivo-box img {display:block} .nivo-caption {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .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:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55gLkuf468HmYxzcvbVL7afJxe4LBjTlbG2RLS9_pOppn7YMRSTdUGfQMpgQi0cMJRLuM4Gp8XLRfLsHQEhZwsH3R2lE6jFe4Js-K5pL7PHORicSe0OnZE5ALXKfUKWC9df6QsR0Ankxp/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0} .nivo-prevNav {left:10px} .nivo-nextNav {background-position:-30px 0!important;right:10px} .nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center} .nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8Dd1tqnpEizDuG70H4OuPLgLfh5hvsFLJlrOOXcoz_yD_JztdBKig7LYtYbirv0OUhNTm-ogPDnh8xHV5EItp3JziJOOcBTTrlrSfO8NQYxibQabucnqm6Rs3LYNnZA0h35Olj2Hbl7c/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px} .nivo-controlNav a.active {font-weight:bold;background-position:0 -22px} /* ]]> */ </style> <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> /* <![CDATA[ */ jQuery(document).ready(function($) { $('#w2bNivoSlider').nivoSlider({ effect : 'random', slices : 15, boxCols : 8, boxRows : 4, animSpeed : 500, pauseTime : 3000, startSlide : 0, directionNav : true, directionNavHide : true, controlNav : true, keyboardNav : false, pauseOnHover : true, captionOpacity : 0.8 }); }); /* ]]> */ </script>


දැන් පහල බොත්තම ඔබන්න.

උඩ බොත්තම එබුවට පස්සෙ Add page Element කියන පේජ් එක එනවා එතන Edit Content කියන එක ඔබලා 2nd LINK HERE , 2nd IMAGE URL HERE , 2nd Slide Caption කියලා තියන තැන්වලට අදාල වෙනස් කිරීම් කරගන්න. මම උදාහරණයක් විදිහට 1st Slide එකට මගේ සයිට් එකේ දාලා තියන විදිහට IMAGE URL එකයි මගේ සයිට් එකේ URL එකයි දාල තියන්නෙ. මතක ඇතුව ඒවාත් වෙනස් කරගන්න.

Slider එකට දාන Image Size එක 640px x 300px විය යුතුයි.

මොකක් හරි අවුලක් තිබුණොත් අහන්න.