15 Haziran 2012 Cuma

Slayt Manşet Eklentisi

23 yorum

Ş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='http://lh3.ggpht.com/-YPJmPpZ96ww/T8YL135hG7I/AAAAAAAADGE/ggxFbMhZPKg/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://lh4.googleusercontent.com/-ls1UOTN4EUA/TueqzcdHexI/AAAAAAAABt0/31fNpWdT41M/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://lh5.googleusercontent.com/-HDEPfJhX8iE/TjfiWyEmDdI/AAAAAAAAA0E/TEc_YhNkMq8/bir-blogcunun-sahip-olmasi-gereken-5-beceri.jpg' 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://lh4.googleusercontent.com/-iFKdyxyIKs4/TgXFh7b3tDI/AAAAAAAAAt8/NEUf0jQEgJQ/basarili-blogcularin-aliskanliklari.jpg' 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='http://lh3.ggpht.com/-YPJmPpZ96ww/T8YL135hG7I/AAAAAAAADGE/ggxFbMhZPKg/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://lh4.googleusercontent.com/-ls1UOTN4EUA/TueqzcdHexI/AAAAAAAABt0/31fNpWdT41M/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://lh5.googleusercontent.com/-HDEPfJhX8iE/TjfiWyEmDdI/AAAAAAAAA0E/TEc_YhNkMq8/bir-blogcunun-sahip-olmasi-gereken-5-beceri.jpg' 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://lh4.googleusercontent.com/-iFKdyxyIKs4/TgXFh7b3tDI/AAAAAAAAAt8/NEUf0jQEgJQ/basarili-blogcularin-aliskanliklari.jpg' 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.

 

23 yorum:

  1. bu resimleri tek tek ekleme olayı sıkıntılı iş hocam etiket yazıp otamatik çekse daha güzel olur bence.

    YanıtlaSil
  2. bencede etıket olmalı ve gaggette degısıklık yapılabılmelı wıdgette zor bır ıs bu degısıklık yen ımanset eklemek sıkıntı olmamalı hala bır slayt bulamadım etıket olayı mantıklı eskı yayını sılersın etıketını yenısı cıkar mantıklı olur bu sablonlarda degısıklık yapmak zor gıbı

    YanıtlaSil
  3. forexman slayt bulamadıysan benim bloga bak istersen benim manşetin kodlarını verebilirim.

    YanıtlaSil
  4. yanlış anlaşılmasın benimki bloger eklentileri dağıtan bir site değil. sadece yardımcı olmak için hocam.

    YanıtlaSil
  5. Arkadaşlar buradan etiket ile otomatik manşet alanı eklentisine ulaşabilirsiniz.
    http://goo.gl/9lIw1
    (reklam olsun diye koymadım,yardımcı olalım yeter.)

    YanıtlaSil
  6. @parlak teneke gerçekten süper bir reklamcısın hem link kısaltıp para kazanıyosun hemde sitene hit çekiyosun Valla helal olsun ;) Yardımcı olman bahane (!)

    YanıtlaSil
  7. İletişime geçerek yardım istemiştim ama bir de yorum kutusundan deneyeyim olur da ulaşmadıysa hani sorum ve sorun şu arkadaşın şablonunda izleyiciler eklentisi hata veriyor şablonu değiştirdim durum yine aynı çakışan bir şeyler mi var?..
    Yardımcı olursanız sevinirim..

    YanıtlaSil
  8. @Mustafa Baysal ; konuyu baltalıyorsunuz.Ben konuyla alakalı bir bilgilendirme yaptım.
    Ayrıca goo.gl 'nin para verdiğini de ilk kez sizden duyuyorum :) Eyvallah.

    YanıtlaSil
  9. Aslında benim slayt memnunum. Ama şöyle sol tarafa belki ileride slayt koyabilirim.

    YanıtlaSil
  10. arkadaş bir de istediğim gibi slider bulamadı şu blogger arkadaşım bu tür slider kodları her sitede var bana film afişlerini yükleye bileceğim dikey sütunlusu lazım http://www.hemmenindir.org/ daki gibi ama yok bulamadım

    YanıtlaSil
  11. http://rasulungulu.blogspot.com/ güzel bir blog oldu

    YanıtlaSil
  12. Merhaba Serdar Bey,

    Benim sayfamda 3. maddede belirttiğiniz iki kod da çıkmıyor. Yardımcı olabilirseniz sevinirim. Paylaşım için teşekkürler.

    YanıtlaSil
  13. @burak özyürek
    Kodu aramadan önce widget şablonlarını genişlet kutucuğunu işaretlemeniz gerekir.

    YanıtlaSil
  14. Biliyorum Serdar Bey, ancak olmadı. Kullandığım şablon özel bir şablon bu arada. Blogger'e ait değil. Sanırım şablonda sorun var. En iyisi başka bir şablon kullanayıım. Yine de yardımcı olmaya çalıştığınız için teşekkür ederim.

    YanıtlaSil
  15. iletişimden mesaj atmıştım ama cevap alamadım.bu eklentiyi nasıl oranları bozulmadan büyütebilirim eklentideki width ve height ler hangi büyüklükleri temsil ediyor.yardımcı olursanız sevinirim.

    YanıtlaSil
  16. yardımcı olurmusunuz hocam gözünüzmü görmüyo bilginizmi yetmyo neden cevap yazmıyorsunuz

    YanıtlaSil
  17. Bu kodları ; div class='columns-inner' div id='content-wrapper' aratıyorum ama bulmuyor..
    En son bölümü fotoğraf koyarak gösterebilir misiniz şablonumda bulamadım çünkü

    YanıtlaSil
  18. Hocam o kadar kötü anlatmışsınız ki hiç bir şey yapamadım burda adreste 4 tane anlatmışsın şablonda bir link yeri var oda resim urlsi oda sağ pencerede çıkıyor büyük resim yine aynı.

    YanıtlaSil
  19. Önizleme eklermisin fotograftan başka.

    YanıtlaSil
  20. Eklentide sıkıntı yok ben uyguladım. http://bilgisayariz.blogspot.com

    YanıtlaSil
  21. Serdar Abi; bu kodu gadgeta nasıl entegre edebiliriz ?

    YanıtlaSil
  22. hocam benimsorunum slider eklemek değil kaldırmak nasıl kaldırabilirim acaba yararsız buluyorum ve kaldırmak istiyorum nasıl yapabilirim?

    YanıtlaSil
  23. @Mehmet Ali Yalçınkaya
    Eklediğiniz kodu silin.

    YanıtlaSil

Picardes

LİNKLER