3. Slayt: Siyah arka plan yatay açıklamalı manşet alanı aynı şekilde gadget ekle kısmından aşağıdaki kodu ekleyiniz.
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"/></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });
});
//]]>
</script>
<script src="http://dl.dropboxusercontent.com/s/hzvrb89dqcv4tnd/n17-content-slider-08.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/is3b1bz385zi88h/n17-content-slider-09.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/ac9jbr5hwssjnqh/n17-content-slider-010.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}
.mygallery{
overflow: hidden;
position:relative;
}
.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}
.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}
.mytext ul li{
height:200px;
}
.mytext a:link, .mytext a:visited {
color:#fff;
}
.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}
.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}
.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;
}
.prev{
float:left;
width:24px;
height:24px;
z-index:200;
margin-left:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqUAVMc6V1JqyeXtxdAL48FUXowOKS-ozkvBa72i2FOdpPq__JDwLAZlxFna6CvlrUgxtvW4YcZlALeWan5LQfemImcJsvdKfX8Zs85NhEnkYVNJUzxUMJNs3F3x8dEhlIQDXTA0HzSLo/);
}
.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4Of6Kw23yY92gIAioQQk_mU7nJtL_Sm-449seiIgq6Hwre1A7oGgS_F-Q1x-vVnkkR7Tsb06SCZIB7vJkJgKgyX7CdzLwZiYyt6y3RcsOlGQuLMU3DCpqqVlbu1_R9Y5MNy2Yn4APw4D/);
display:block;
}
</style>
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 1,
easing: "backout",
speed: 1000
});
});
</script>
<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">
<ul>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-1</a></h2>
<p>
Slide 1 Description [...]</p>
<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhssNde9C1KJw4N93MtFJI3pj_pOFrlABgRNWnNjPu-8qE92oZ_XCJA9NI3Zx7-QUL_qgskojG6QQRI9bPh2IHMWafag4QiXhTQrFlFnm2Lmq0nYovGwDxDrHMrRL6_pjf6_OtSnT0kp9HC/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-2</a></h2>
<p>
Slide 2 Description [...]</p>
<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7qQG6C31Z1ScdUFZE2v9BSWiTX_iwcoNoUnqYtODZ5aDcgvQuBlG7Au5h-gm9Jc2vMY6Sx7B_g2-sfxunv-bsgl91ZU0UnaxsfM4_rfZNnK45bIiHTUtsEnkbzliED2DQtFFgFbry1iF/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-3</a></h2>
<p>
Slide 3 Description [...]</p>
<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ-VWTaeVisXovi9z-rm_LX4y0Luhujytdvij1t_zi8LNTNDjdxsRqRgoAvO8dfM97Qqr_zVnenAvFNToSmuQ5znLJvm__mHFPbf3EhD3m7jrgYmwaKa0ZnitENIkhyphenhyphenQEb95XY6TsptzBw/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-4</a></h2>
<p>
Slide 4 Description [...]</p>
<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcCcsG2mat6SFSZZJ6ILFguW2G4fvlZMQsPXmWAm8YeoEORk7heK1sphYIk19GNMcsWDIm9ZGbvdrLamTg5_LLd4Rl1zpO-ZlDnUw7b7N8A4gpKpauh9J0ATgUqqPrBRM_l6F2BsNZwKV/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="170"/>
</div>
</li>
<li>
<div class="mytext">
<h2>
<a href="#" target="_blank">Title-of-Post-5</a></h2>
<p>
Slide 5 Description [...]</p>
<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAuA0tCwd-vrGurhf6K_eMQB1TkeplPllLrIfU28BB9EdoxK-vJg5Ye3ZjB-ZMCWSBEsqemkkCI18MEs9ds6GBlWm6pLCCDm1h9IoMZdVUrqxCCS5I7bP5mJzWOiThZ6fZz0hL_E2Eu6cj/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="170"/>
</div>
</li>
</ul>
<div class="clear">
</div>
</div>
</div>
<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>
