Bloggeriniza Jquery Ile Slider Manseti Ekleyin


Featured Content Slider for Blogger Using jQuery

Blogger sadece başlangıç webmasterları için bir platform değildir. Blogger’da profesyoneller için bir kullanım merkezi olabilir. Bir blogunuz var ve sizde bir manşet eklentisi istiyorsunuz. O zaman yapmanız gereken bu yazıyı sonuna kadar okumak ve gerekli kodları, gerekli yerlere yerleştirmek. Neyse fazla uzatmadan yazımıza geçebiliriz.

Adım 1: <head> bu kodu bulun. Bu kodu bulduktan sonra aşağıdaki kodu hemen <head> kodunun altına yapışıtırın.

<link href='http://sites.google.com/site/bloggermintcom/style1.css' rel='stylesheet' type='text/css'/>
Adım 2:   Yandaki kodu bulunuz :     ]></b:skin> 

Aşağıdaki kodu ]></b:skin>  bu koddan önce yapıştırınız.
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('http://2.bp.blogspot.com/_ubwIhqPcR6M/TNv3EFphS6I/AAAAAAAABHE/iZ0jSrh-E_c/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
3.adım: Yandaki kodu bulunuz : <div id=’content-wrapper’> Bu kodu bulduktan sonra hemen aşağıdaki kodu bu koddan önce yapıştırın
<div id='featured'>
     <ul class='ui-tabs-nav'>
         <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Yazınızın Başlığı</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>Yazınızın Başlığı</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>Yazınızın Başlığı</span></a></li>
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Yazınızın Başlığı</span></a></li>
     </ul>
     <!-- First Content -->
     <div class='ui-tabs-panel' id='fragment-1' style=''>
        <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
         <h3><a href='#'Yazınızın Başlığı</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek..<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
         </div>
     </div>
     <!-- Second Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
         <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
         <div class='info'>
         <h3><a href='#'>Yazınız ile ilgili tanım buraya gelecek.</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek....<a href='#'>Devamını oku</a></p>
        </div>
    </div>
     <!-- Third Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
         <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek....<a href='#'>devamı</a></p>
         </div>
     </div>
     <!-- Fourth Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
         <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
         <div class='info'>
         <h3><a href='#'>Yazınızın Başlığı</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek....<a href='#'>devamı</a></p>
         </div>
     </div>  </div>

Resim Url’sini kendi Url’niz işe düzenleyin. En büyük resim boyutu : 400 * 250 En küçük resim boyutu : 80 * 50. Resimlerinizi belirli düzeylere göre ayarlamalısınız ki yukarıdaki ölçülere göre resimleriniz bozulmasın.
Adım 4: Şimdi slayt şovu başlatmak için yandaki kodun hemen altına aşağıdaki kodları yapıştırıyoruz.   <head>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
$(&quot;#featured&quot;).hover(
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,0,true);
},
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,5000,true);
}
);
});
</script>
Adım 5:Eğer blogunuza daha önceden  jQuery and jQuery UI kodları eklediyseniz bu kısmı atlayayabilirsiniz. Eğer daha önceden bu kodları eklemediyseniz. Yani jQuery’den bahsediyorum.  Bu koddan hemen sonra  aşağıdaki kodları ekleyiniz. <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
Sizde bu kodların demosunu izlemek istiyorsanız buyrun Demo

Tepkiniz nedir?

Çok Eğlendim Çok Eğlendim
0
Çok Eğlendim
Deneme Deneme
0
Deneme
Beğendim Beğendim
0
Beğendim
Yarıldım Yarıldım
0
Yarıldım
Sinirlendim Sinirlendim
0
Sinirlendim
hate hate
0
hate
Kafam Karıştı Kafam Karıştı
0
Kafam Karıştı
Fail Fail
0
Fail
Çalışkan Çalışkan
0
Çalışkan
Lol Lol
0
Lol
Aşık oldum Aşık oldum
0
Aşık oldum
Aman Tanrım Aman Tanrım
0
Aman Tanrım
Korktum Korktum
0
Korktum
Rahatladım Rahatladım
0
Rahatladım
OHA OHA
0
OHA
sosyofikir
Mimarlık Fakültesi sonsınıf öğrencisi, mimar adayı. :) 2010'dan beri sosyofikir.com blogumla yayın yapıyorum. Sosyal, müzik, felsefe, psikoloji, güncel, yaşam ve daha bir çok konuyla yakından ilgileniyorum. Siz değerli okurlarıma elimden geldiğince güzel içerikler sunmaya çalışıyorum. Hatamız olursa affola :)

0 Comments

Bu yazılarımızda ilginizi çekebilir..

More From: Blogger

DON'T MISS

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Önemsiz Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Hikaye/Olay
Gömülü ve Görsellerle Biçimlendirilmiş Metin
Liste
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Açık Liste
Submit your own item and vote up for the best submission
Oylanabilir Liste
Upvote or downvote to decide the best list item
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud or Mixcloud Embeds
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı