බ්ලොග් එකට image slide show එකක් add කරමුද

ඔන්න අද මම ඔයාලට කියලා දෙන්න හදන්නේ බ්ලොග් එකට image slide show එකක් add කරන විදිය. හරි එහෙනම් අපි වැඩේ පටන් ගමුකො ..

1.මුලින්ම ඔයාගේ බ්ලොග් එකේ

Layout වලට ගිහින් Add a Gadget කරන්න. එතනින් HTML/JavaScript එක ගන්න. ඒකට පහල තියන codes ටික copy කරගෙන HTML/JavaScript paste කරන්න

<style type="text/css"/>	/* dimpost.com - Basic Style */ body{ 	background: transparent; 	font:15px/2 'Adobe Caslon Pro', Georgia, Serif; 	margin:0; 	padding:0; } a{outline:0 none} #pagewrap{ 	margin:10px auto; 	padding:0; 	position:relative; 	height:400px; 	width: 640px; } #slidewrap{position:absolute;} #slider {     border-color: #c0c0c0;     border-radius: 5px 5px 5px 5px;     border-style: solid;     border-width: 10px 10px 30px;     box-shadow: 0 0 3px #2F2F2F;     height: 280px;     margin: 10px;     position: relative;     width: 600px; } #slider images{     position:absolute;     top:0px;     left:0px;     display:none; } /* The Nivo Slider styles */ .nivoSlider { 	position:relative; } .nivoSlider images { 	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; } .nivo-directionNav{display:none!important} .nivo-html-caption {     display:none; } .nivo-caption{ 	position:absolute; 	right:20px; 	text-align:center; 	top:130px; 	width:192px; 	z-index:60; } .nivo-caption p{margin:0} .nivo-caption .title{font-style:italic} .nivo-controlNav {     bottom: -23px;     display: block;     height: 15px;     left: 204px;     position: absolute;     text-align: center;     width: 192px;     z-index: 51; 	opacity: 0.6; } .nivo-controlNav a{ 	background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center; 	display:inline-block; 	height:14px; 	width:14px; 	text-indent:-9999px; 	cursor:pointer; } .nivo-controlNav .active{ 	background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png);	 } 	</style>	<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>	<script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>	<script type="text/javascript">	$(window).load(function() { 		$('#slider').nivoSlider(); 	}); 	</script>	<!--[if IE]>		<script src="modernizr-2.0.min.js"></script>	<![endif]--> 		  <div id="pagewrap"><div id="slidewrap">	<div id="slider">	<a href="http://dimpost.com/" target="_blank"><img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>	<a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>	<a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>	<a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>	<a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>	<a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>	</div></div></div>

මෙම Html එක ඇතුලේ තියනවා "#" මේ විදියේ ලකුණක්.# කියන තැනට ඔයාගේ image එකේ url එක දෙන්න. එවගේ ඒවා 6ක් විතර තියනවා ඔබට කැමති නම් වැඩි කර ගන්න පුළුවන්.තව මේවගේ url එක ඇති html එකේ 'http://project.dimpost.com/image-slider/images/sample1.jpg' එතනට දෙන්න ඔයාගේ image එක තියන page එකේ url .එතකොට ඒ image එකට click කල විට image එක ඇති page එකට යනු ඇත.

2.දැන් save කරන්න .

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

** මෙය නැරබු හා කියැවූ ඔබට තුති .. තවත් මෙවැනිම වැදගත් දෙයකින් හමුවීමට බලාපොරොත්තුවෙමි **

ඔබට ජය..!!

(මෙය පිලිබදව හෝ ඔබට කිවයුතු දෙයක් ඇත්නම් comment Box එකේ ස‍ටහන් කරන්න ඔබේ Comment එක මටශක්තියක් හා ඉතා වැදගත් වනු ඇත.}

ස්තුතියි..!!

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.