Menu
 
» » » » » Slayt Manşet Eklentisi

A+ A-

Şuan kullandığım temanın eski halini hatırlarsanız yazıların hemen üstünde Jquery oluşturulmuş bir slayt manşet bölümü vardı ve ön plana çıkarmak istediğim yazıları bu  mamşete koyuyordum.Ancak sürekli güncellemek zor olduğundan ve içerdiği scriptler  nedeniyle blogumuu yavaşlattığını düşündüğümden o slayt manşeti kaldırmıştım.

 

Slayt Manşet Eklentisi

 

Kullandığım o slayt manşetin kaynak kodlarını Web Developer Plus isimli bir siteden almıştım ve benden isteyenlere kaynağın adresini veriyordum.Ancak gelen mesajlardan eklentiyi ekleme konusunda çoğu kişinin sorun yaşadığını gördüm ve blogunuza slayt manşet eklentisini nasıl ekleyeceğinizi detaylı bir şekilde anlatmaya karar verdim.

 

1.Adım: Şablonunuzdan </body> kodunu bulun ve hemen üstüne aşağıdaki script kodlarını ekleyin.

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>

 

2.Adım: Şablonunuzdan ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki stil kodlarını ekleyin.

 

#featured{
float:left;
width:900px;
height:300px;
padding:0;
margin-bottom:30px;
position:relative;
overflow:hidden;
border:3px solid #4494c5;
background:#000;
}

#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:610px;
list-style:none;
padding:0;
margin:0;
width:300px;
height:292px;
overflow:auto;
overflow-x:hidden;
z-index:100;


}

#featured ul.ui-tabs-nav li{
padding:0 0 0 15px;
}

#featured ul.ui-tabs-nav li img{
float:left;
margin:0 5px 0 0;
background:#fff;
padding:3px;
width:70px !important;
height: 57px !important;
}

#featured ul.ui-tabs-nav li span{
position:relative;
left:0;
top:13%;
line-height:1.3em;
}

#featured li.ui-tabs-nav-item a{
background:#000;
color:#fff;
display:block;
padding:5px;
height:63px;
text-decoration:none;
line-height:1.2em;
outline:none;
width: 300px;
font-family: verdana;

}

#featured li.ui-tabs-selected{
background:url(http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/resultset-previous-icon.png) center left no-repeat;
z-index:100;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#4494c5;
color:#FFF;
}

#featured .ui-tabs-panel{
width:630px;
height:292px;
position:relative;
padding:0;
margin:0;
z-index:50;
}

#featured .ui-tabs-panel img{
width:630px !important;
height:290px !important;
z-index:50;
}

#featured .ui-tabs-panel .info{
position:absolute;
padding:5px 20px 5px 20px;
bottom:0;
left:0;
overflow:hidden;
height:63px;
width:610px;
background:#111;
opacity:0.85;
filter:alpha(opacity=85);
.width: 100%; /* IE */
z-index:50;
}

#featured .info h3{
font-size:18px;
padding:0;
margin:0;
overflow:hidden;
font-family: Verdana;
font-style: bold;
}

#featured .info p{
margin:0;
padding: 5px 20px 5px 0px;
line-height:1.4em;
color:#fff;
}

#featured .info a, #featured .info a:visited{
text-decoration:none;
color:#56c0fd;
}

#featured .info a:hover{
text-decoration:underline;
}

#featured .ui-tabs-hide{
display:none
}

 

3.Adım: Blogger’ın kendi şablonlarından birini kullanıyorsanız  <div class='columns-inner'> kodunun altına, özel bir tema kullanıyorsanız <div id='content-wrapper'> kodunun altına aşağıdaki HTML kodlarını ekleyin.

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='featured'>
               <ul class='ui-tabs-nav'>

                   <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpvm_tF4quMb_qwKyhpZfivikW-hWPhePQDC1lWSucUGgPjKkZ4lVOGVBQ4YMQv9wdV5pR_11f5DC-qVdl80qi1sLkNwvSTaNKc1oXsKzWcMAzCmn74XwM7tp0fAYEoeMCO_4ARNan_4l/s1600/bloghocama-misafir-olmanin-faydalari.jpg' width='80'/><span>Blog Hocam&#39;a Misafir Olmanın Faydaları </span></a></li>

                   <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1zhR1ewpzBCR2dFvkn6fXydaD6ClcdRahdoJ6u6-w3GG_rfwIETso-xnUC4mNqY1pE1LwmB77xalKCOCgJ7vziOuh3oIXG0qOtr6AL7aLP8cBhy9W7TNPT1acgAuoYGaTjIGv5cg_IuYl/s576/misafir-blogculuk.png' width='80'/><span>Misafir Blogculuk E-Kitabı</span></a></li>

                   <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCYMKgsGXAfIEzjTUYfYco5YJ7lVIgYXOguKPnw_H7dosXJOIGDY77fKPA5NdmNE6F_BRtxCd6Se7WKpkB5a3We7dfkodZtXN0Xcbp3FrrYan2RHPyqhSN857mJ1zPKtb0SXdITH48SeY3/' width='80'/><span>Bir Blogcunun Sahip Olması Gereken 5 Temel Beceri</span></a></li>

                   <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSe_ySNF9wl6OZnuUrTOiKuTbBJfwv39zCjXODTIClwbXlGZ35X1Gc62ARo22k7TWbQx7Xc6j9rdsK7q_I9zrEQb4pTm6D4ihSBiJLoEKAA_-O-tB1vhgGJrqOE7g-v-n-TnD4LhABCbk/' width='80'/><span>Başarılı Blogcuların Özellikleri </span></a></li>
               </ul>

               <!-- First Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpvm_tF4quMb_qwKyhpZfivikW-hWPhePQDC1lWSucUGgPjKkZ4lVOGVBQ4YMQv9wdV5pR_11f5DC-qVdl80qi1sLkNwvSTaNKc1oXsKzWcMAzCmn74XwM7tp0fAYEoeMCO_4ARNan_4l/s1600/bloghocama-misafir-olmanin-faydalari.jpg' width='600'/>
                   <div class='info'>
                       <h3><a href='http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html'>Blog Hocam&#39;a Misafir Olmanın Faydaları</a></h3>
                           <p>Kendi blogum duruken, yazımı neden başka bir blogda yayınlayayım? ve Blog Hocam&#8217;a neden misafir olayım? diye soranlara cevaben bir örnek vermek istiyorum...<a href='http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html'>Devamını Oku</a></p>
                   </div>
                </div>

               <!-- Second Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
                    <img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1zhR1ewpzBCR2dFvkn6fXydaD6ClcdRahdoJ6u6-w3GG_rfwIETso-xnUC4mNqY1pE1LwmB77xalKCOCgJ7vziOuh3oIXG0qOtr6AL7aLP8cBhy9W7TNPT1acgAuoYGaTjIGv5cg_IuYl/s576/misafir-blogculuk.png' width='600'/>
                    <div class='info'>
                       <h3><a href='http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Misafir Blogculuk E-Kitabı</a></h3>
                           <p>Bu e-kitap sayesinde misafir blogculuk kavramının daha iyi anlaşılacağını ve daha çok kişi tarafından uygulanacağını umuyorum.Siz de bu kitabı okuyun ve kitabın linkini paylaşın...<a href='http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Devamını Okuyun</a></p>
                    </div>
                </div>

                <!-- Third Content -->
               <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
                   <img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCYMKgsGXAfIEzjTUYfYco5YJ7lVIgYXOguKPnw_H7dosXJOIGDY77fKPA5NdmNE6F_BRtxCd6Se7WKpkB5a3We7dfkodZtXN0Xcbp3FrrYan2RHPyqhSN857mJ1zPKtb0SXdITH48SeY3/' width='600'/>
                   <div class='info'>
                      <h3><a href='http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html'>Bir Blogcunun Sahip Olması Gereken 5 Temel Beceri</a></h3>
                          <p>Bu yazıda blogunuzun uzun ömürlü başarılı ve uzun ömürlü olması için blog oluşturduktan sonra başarıya ulasşmak için bilinmesi gereken bir konudan bahsedeceğim ....<a href='http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html'>Devamını Oku</a></p>
                   </div>
                </div>

                <!-- Fourth Content -->
               <div class='ui-tabs-panel' id='fragment-1' style=''>
                   <img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSe_ySNF9wl6OZnuUrTOiKuTbBJfwv39zCjXODTIClwbXlGZ35X1Gc62ARo22k7TWbQx7Xc6j9rdsK7q_I9zrEQb4pTm6D4ihSBiJLoEKAA_-O-tB1vhgGJrqOE7g-v-n-TnD4LhABCbk/' width='600'/>
                   <div class='info'>
                       <h3><a href='http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html'>Başarılı Blogcuların Ortak Özellikleri </a></h3>
                          <p>Dünyaca ünlü ve başarılı blogcuları başarıya götüren bazı alışkanlıkları ...<a href='http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html'>Devamını Oku</a></p>
                   </div>
               </div>
            </div>
</b:if>
</b:if>

 

Düzenlemeniz Gereken Yerler

 

Sadece 3.adımdaki HTML kodlarında değişiklik yapacaksınız.Örnek olarak manşette gösterilen ilk öğeyi nasıl değiştireceğinizi yazayım diğerlerini aynı şekilde düzenlersiniz.

 

Gönderen
Etiketler: , , ,

Share to:

zaman: 05:22

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)
 
Top