ads

1. Slayt: Oldukça sade bir manset alanı sitenize görsel anlamda iyi bir görünüm verecektir. Eklemesi gayet basit HTML JavaScript Gadget ekle bölümünden aşağıdaki kodu ekleyin..

</style>

<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><img alt="featured 1" src="http://1.bp.blogspot.com/-L6oFRxAjx4w/UaTsGvOIoLI/AAAAAAAAA7g/Xn1Ztn3NEP4/s1600/Change+Mouse+Cursor+Generator.png"/><span>TITLE 1</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img alt="featured 2" src="http://3.bp.blogspot.com/-HhFix8dwK6c/UaTsHHRJijI/AAAAAAAAA7w/XKC6LzXVsJU/s1600/Numbered+Page+Navigation.png"/><span>TITLE 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img alt="featured 3" src="http://2.bp.blogspot.com/-hAL3CbG_qeU/UaTsHXHNM4I/AAAAAAAAA70/5q-cuqeUlww/s1600/Snow+Cursor+Code+Generatort.png"/><span>TITLE 3</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img alt="featured 4" src="http://3.bp.blogspot.com/--vess4cuOAQ/UaTsGpHEUvI/AAAAAAAAA7k/scQVLvuorZc/s1600/Blogger+Falling+Object+Generator.gif"/><span>TITLE 4</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel" style="">
<img alt="" src="http://2.bp.blogspot.com/-K_2wwgsZkWw/Uhnj7LRRGGI/AAAAAAAABIM/c-I2AEoZZnk/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png"/> 
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>
<p>
TEXT-OF-THE-SLIDE 1</p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="http://2.bp.blogspot.com/-PlV205zDJXI/Uhnm1ZN1W2I/AAAAAAAABIg/nw5gu9LTvIA/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png"/>
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2>
<p>
TEXT-OF-THE-SLIDE 2</p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="http://1.bp.blogspot.com/-M0EQDInUmnA/UhnoxhiOzPI/AAAAAAAABIs/BP1BBPF9NdE/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png"/>
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2>
<p>
TEXT-OF-THE-SLIDE 3</p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="http://1.bp.blogspot.com/-RkVjrr2ep3Q/UhnqZIfLhII/AAAAAAAABI4/5dxe7L1Hgfw/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png"/>
<div class="info">
<h2>
<a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2>
<p>
TEXT-OF-THE-SLIDE 4</p>
</div>
</div>
</div>
<div style="clear:both;">
</div>
<br/>
<div>
</div>

2. Slayt: Harika bir yatay manset eklentisi blogger sitenizde rahatlıkla kullanabilirsiniz. Gene aynı şekilde aşağıdaki kodu ekleyebilirsiniz.

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</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">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

3. Slayt: Siyah arka plan yatay açıklamalı manşet alanı aynı şekilde gadget ekle kısmından aşağıdaki kodu ekleyiniz.

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(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
display:block;
}

</style>

});
</script>

<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="http://2.bp.blogspot.com/-K_2wwgsZkWw/Uhnj7LRRGGI/AAAAAAAABIM/c-I2AEoZZnk/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="http://2.bp.blogspot.com/-PlV205zDJXI/Uhnm1ZN1W2I/AAAAAAAABIg/nw5gu9LTvIA/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="http://1.bp.blogspot.com/-M0EQDInUmnA/UhnoxhiOzPI/AAAAAAAABIs/BP1BBPF9NdE/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="http://1.bp.blogspot.com/-RkVjrr2ep3Q/UhnqZIfLhII/AAAAAAAABI4/5dxe7L1Hgfw/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="http://4.bp.blogspot.com/-XMxYEw2NibM/UhozkOB-YXI/AAAAAAAABJI/N6uGRQTwrXQ/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>

ads

Hiç yorum yok:

Yorum Yazmak İçin Aşağıdaki Seçenekleri Kullanınız

Lütfen konuyla alakasız yorumlardan kaçının. Sadece link almak amaçlı ( spam ) yorumlar yazmayınız. ( anında silinir ). Argo, küfür, siyasi vb. içerik barındıran yorumlar yazmayınız.

Not: Yorum yapabilmek için (yorumlama biçiminden) Anonim ( isimsiz olarak ) veya Adı/URL'yi ( Adı ( gerekli ) / URL ( kısmını boş bırakınız ), fonksiyonlarından seçim yaparak yorumlarınızı yazabilirsiniz.

Ancak Google + profili ile yapılan yorumları onaylamıyorum bilginize. Yorum yaparken Adı/URL kısmından yaparsanız sadece isim yazmanız yeterli. Site adresi, URL eklerseniz yorumunuz onaylanmaz.

Sponsor Alanı

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

3 Adet Blogger Slider ( Slayt ) Kodları

By: İbrahim Fırat on Cuma, Kasım 29, 2013 / comment : 0

ibrahimfirat.net | KişiseL Görüş Evrensel Bilgi' Admin

Hiç yorum yok:

Yorum Yazmak İçin Aşağıdaki Seçenekleri Kullanınız

Popüler Yayınlar

Comments

Pages

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

3 Adet Blogger Slider ( Slayt ) Kodları

By: İbrahim Fırat on Cuma, Kasım 29, 2013 / comment : 0

Next

Sonraki Kayıt

Previous

Önceki Kayıt

ibrahimfirat.net | KişiseL Görüş Evrensel Bilgi' Admin

Hiç yorum yok:

Yorum Yazmak İçin Aşağıdaki Seçenekleri Kullanınız

Popüler Yayınlar

Comments

Labels

Pages