ඇනිමේෂන් ලිපි දැන් අපේ බ්ලොග් එකට. 14

ඔන්න කට්ටියටම තවට් අලුත් ගැජට් එකක් ගෙනවා ඔයලගේ බ්ලොග් එකට දාගන්න..ඔයලා මේකට කැමති වෙයි කියලා මම හිතනවා..මේ ගැජට් එකෙන් වෙන්නේ..අපේ අලුත් ලිපි ,පරණ ලිපි ඔන ලිපියක් මේකට දාන්න පුළුවන්..ඔයාලට මේක ඔයලාගේ බ්ලොග් එකට දාන්න ඔනේ නම් මම ඔයාලට එක කියලා දෙන්නම්..

පියවර 1. dashboard >> layout >>Edit HTML යන්න..මතක ඇතුව Expand Widget Templates තැනට හරියක් දෙන්න..

පියවර 2. ඔයලා යතුරු පුවරුවේ Crrl+F Key ඔබන්න..ලැබෙන Serch Bar එකට <b:skin> කොර්ඩ් එක Past කරන්න..එතකොට ඔයාලට නිකම්ම<b:skin> කොර්ඩ් එක ලගට යන්න පුළුවන්..

පියවර 3. දැන් පහල තියෙන කොර්ඩ් එක <b:skin> කොර්ඩ් එක ලගට Past කරන්න.

#slider {
background:url(http://i39.tinypic.com/a2bzhd.png);
height: 254px;
width: 983px;
overflow: hidden;
position: relative;
margin: 5px 0;
}


#mover {
width: auto;
position:absolute;
overflow:hidden;
}


.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}


.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
position: absolute;
top: 20px;
left: 1px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}


.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}


.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}




.slide p {
color: #999;
position: absolute;
top: 100px;
left: 1px;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}


.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}


#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 55px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

පියවර 4. දැන් ඔයාලා මම පහල දිලා තියෙන JS එක ]]></b:skin> කොර්ඩ් එක ලගට past කරන්න ඔනේ..මම කලින් ඔයලට කොර්ඩ් එක හොයගන්න කියලා දුන්න විදියට  ]]></b:skin> කොර්ඩ් එක හොයගෙන පහල තියෙන JS එක  ]]></b:skin>  පහලින් Past කරන්න..

<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-slider.js' type='text/javascript'></script>

පියවර 5. දැන් අපි හොයගන්න ඔනේ අපි <div id='header-wrapper'> කොර්ඩ් එක..එක මම කියලා දෙන්න ඔනේ නැනේ ඔයලා දැන් දන්නවානේ හොයගන්න විදිය..ඉට පස්සේ ඔයලා <div id='header-wrapper'> කොර්ඩ් එක හොයගෙන පහල දිලා තියෙන කොර්ඩ් එක  <div id='header-wrapper'> පහලින් past කරන්න...

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>

<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>

<p>Post Description</p>

<img alt='image name' src='Image URL'/>

</div>

<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>


<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>


<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>



</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

පියවර 6. දැන් අපි සියල්ල කරගෙන අවසානයි..අන්තිමට ඔයාලට කරන්න තියෙන්නේ ඔයාලගේ ලිපි එකතු කරන එක මේකට ..

<!-- Slider --> කොර්ඩ් එක හොයාගන්න..දැන් පහල දිලා කොර්ඩ් එකේ විදියට <!-- Slider -->  එකේ කොර්ඩ් තියෙනවාද බලන්න..

<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>

 ඔයාලට මේ හම්බුන කොර්ඩ් වලට ඔයාලගේ ලිපියේ Link Post URL එක..ලිපියේ නම Post Title..ලිපියේ පිංතුරේ Image URL එක..ලිපියේ විස්තර දෙන්න Post Description...ඉට පස්සේ template එක save කරන්න..

ඔයලට මේක හරියට දාගන්න බැරිනම් මට කියන්න මම ඔයලාට උදව් කරන්නම්...

ඒ වගේම ඔයාලගේ ප්‍රතිචාරයක් දිලා යන්න අමතක කරන්න එපා..මොනවා හරි කියලා ලියලා  යන්න...