Blog'unuza Jquery slider(manşet) eklentisi ekleyin

Ardı ardına kayan resimler ve metinler eşliğinde oluşturacağınız jQuery slider (manşetler) blog ziyaretçilerinizin dikkatini çekmek için kullanabileceğiniz harika uygulamalardır. 2011-09-15_181001


Blog’uğunuzun ana sayfasına ekleyebileceğiniz bu uygulamalar sayesinde blog ziyaretçilerinizin belirli kategorilere veya yönlendirmek isteğiniz her hangi bir sayfanıza hızlı ulaşabilmelerini sağlayabilir, blog’ugunuza hareket katabilirsiniz.

Tanıtacağımız Jquery uygulamaları için basit bir blog hazırladık, bu sayede tanıttığımız bu uygulamaları canlı test etme fırsatı bulabilirsiniz.

 

Hazırlayacağımız slaytın  demosunu buradan ziyaret edebilir, aşağıdaki adımları takip ederek te kendi blog’uğunuza ekleyebilirsiniz.

 

Daha önce kendi blog’unuzda bu tarz bir uygulama kullanmadıysanız, kısaca bir açıklama yapmak istiyorum. Uygulamamız 3 farklı kod blogundan oluşuyor ve bunlardan ilki HTML kodları bu kodları ekledikten sonra bu kodları şekillendirecek olan CSS kodlarını ekliyoruz daha sonra uygulamamıza hareket katacak Javacrip kodlarını ekliyoruz.

 

Ve son olarak uygulamamıza kendi görsellerinizi,bağlantılarınızı nasıl ekleyebileceğiniz ve küçük  bazı özelleştirme işlemlerini nasıl yapabileceğinizi göreceğiz.

 

1. Adım HTML Kodlarını blog'unuza ekleyin

 

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle gidin.

 

Yapacağımız işlemlere başlamadan önce HTML’yi düzenle sayfasında  Tam şablon yükle yazan bağlantıyı kullanarak Blog şablonunuzu yedeklemenizde fayda var. Daha sonra yapacağınız her hangi bir hata sonrası şablonunuzu geri yükleyerek yapmış olduğunuz tüm değişiklikleri geri alabilirsiniz.

HTML’yi düzenle sayfasında klavyenizin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda    <b:section class='main'    ifadesini aratın.

 

<b:section class='main'  yazan ifadeyi bulduktan sonra aşağıda bulunan HTML kodlarını bu ifadenin hemen üzerine gelecek şekilde ekleyin.

 

HTML kodları

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='slider-wrapper theme-default'>

<div class='nivoSlider' id='slider'>

 

<a href='http://Resme-tıklanınca-gidecek-bağlantı'><img alt=''  src=' http://3.bp.blogspot.com/-t7_EPYBwIcc/TmfryubnoAI/AAAAAAAACCM/xKDWEG8Su0w/s000/2.jpg ' title=' Görsel için açıklama yazın yada silin '/></a>

 

<a href='http://Resme tıklanınca gidecek bağlantı'><img alt='' src='http://3.bp.blogspot.com/-t7_EPYBwIcc/TmfryubnoAI/AAAAAAAACCM/xKDWEG8Su0w/s000/2.jpg' title=''/></a>

 

<a href='http://Resme tıklanınca gidecek bağlantı'><img alt='' height='220' src='http://2.bp.blogspot.com/-pVdknzwiFsA/TmfrzUBAvAI/AAAAAAAACCU/jUDnjwGx4DM/s000/4.jpg' title='Görsel için açıklama yazın yada silin'/></a>

 

<a href='http://Resme tıklanınca gidecek bağlantı'><img alt='' src='http://2.bp.blogspot.com/-xkXLIuUUXkA/TmfrzLxP50I/AAAAAAAACCQ/ZxBLp_zTitE/s000/3.jpg' title=''/></a>

 

<a href='#'><img alt='' height='220' src='http://2.bp.blogspot.com/-BFsWCCln55A/Tm97FNFZstI/AAAAAAAAAEg/by96YtDYYs4/s1600/ferrari_fxx-03-1024.jpg' title='Görsel için açıklama yazın yada silin'/></a>

 

</div>

</div><div class='clear'/>

 

</b:if>

 

Böyle görünecek

nivo-htmtl_thumb[2]

Slayt hangi sayfalarda görünsün ?

Yazının başında dikkat ettiyseniz “Blog’unuzun ana sayfasına ekleyebileceğiniz” demiştim çünkü bu tarz slayt benzeri uygulamalar daha çok blog ana sayfaları için uygundur.

 

Bu yüzden biz ,Slaytın sadece ana sayfada görüntülenmesi için HTML kodlarını kırmızı ile renklendirdiğimiz özel kodlar içine aldık. Bu sayede slayt sadece blog’un ana sayfasın da görüntülenirken, yazı sayfaları ,sabit sayfalar gibi diğer sayfalarda görüntülenemeyecek.

Siz yine de slaytın diğer sayfalar da  görüntülenmesini isterseniz. HTML kodlarının başına ve en sonuna eklediğimiz kırmızı ile renklendirdiğimiz kodları silmeniz yeterli olacaktır.

 

HTML kodları üzerinde yapacağınız diğer bir değişiklikte kendi görsellerinizin linkini ve bu görsellere tıklanıldığı zaman açılacak bağlantıları düzenlemek.

 

Mavi ile renklendirdiğimiz bölümlere resimlere tıklanıldığı zaman gidecek olan bağlantıların linklerini yazın.

Yeşille renklendirdiğimiz bölümlere her hangi bir hosta(picasa,photobucet) yüklediğiniz görsellerin linkini yazmanız gerekiyor,burada dikkat etmeniz gereken diğer bir konuda görsellerin hepsinin aynı ebatlarda olması gerekiyor.

Sarı ile renklendirdiğimiz bölümeyse, görselleriniz slaytta kayarken üzerlerine gelecek  bir açıklama yazabilir veya silebilirsiniz.

 

 

2. Adım CSS Kodlarını Blog'unuza ekleyin

 

HTML kodlarını ekledikten sonra  ]]></b:skin> ifadesini bulup tam üstüne gelecek şekilde aşağıda bulunan CSS kodlarını ekleyin.

 

CSS kodları

.theme-default .nivoSlider { position:relative;background:#fff url(http://1.bp.blogspot.com/-XVok-BH7rdo/TmuFsbh20cI/AAAAAAAAAD4/INN70rfDWO4/s1600/loading.gif) no-repeat 50% 50%; margin:0 0 0px 0;border:1px solid #e8e8e8;}

.theme-default .nivoSlider img { position:absolute; top:0px; left:0px; display:none; }

.theme-default .nivoSlider a { border:0; display:block;}

.theme-default .nivo-controlNav { position:absolute; left:50%; bottom:0px; margin-left:-40px; /* Tweak this to center bullets */}

.theme-default .nivo-controlNav a { display:block; width:22px; height:22px; background: url(http://3.bp.blogspot.com/-MZUphaMXXuo/TmuGiWNb4PI/AAAAAAAAAEU/OJBnp0FJCDs/s1600/bullets.png) no-repeat; text-indent:-9999px; margin-right:3px; float:left;}

.theme-default .nivo-controlNav a.active { background-position:0 -22px; }

.theme-default .nivo-directionNav a { display:block; width:30px; height:30px; background:url(http://3.bp.blogspot.com/-0j1lV74PjqY/TmuGh8ZFgSI/AAAAAAAAAEQ/udYRKFdLRC8/s1600/arrows.png) no-repeat; text-indent:-9999px; border:0;}

.theme-default a.nivo-nextNav { background-position:-30px 0; right:15px;}

.theme-default a.nivo-prevNav { left:15px; } .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif;}

.theme-default .nivo-caption a { color:#fff;} .theme-default .nivo-caption a:hover {  color:#fff; }

.nivoSlider { position:relative;}

.nivoSlider img { position:absolute; top:0px; left:0px;} .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; }

.nivo-slice { display:block; position:absolute; z-index:5; height:100%;} .nivo-box { display:block; position:absolute; z-index:5;}

.nivo-caption { position:absolute; right:0px; bottom:120px; background:#222; font-size;20px; font-weight:bold; color:#fff; opacity:0.3; /* Overridden by captionOpacity setting */ width:200px; z-index:8; padding:4px 7px ; }

.nivo-caption p { padding:5px; margin:0;} .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none;}

.nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; background:#D60C62;} .nivo-prevNav { left:0px;}

.nivo-nextNav { right:0px;} .nivo-controlNav a { position:relative; z-index:9; cursor:pointer;}

.nivo-controlNav a.active { font-weight:bold;}

.theme-default #slider { background:#fff;  margin:6px 0 6px 0 ;  width:100%; /*Görsellerin bu boyutlarda olmasına dikkat edin*/  height:246px; }

.theme-pascal.slider-wrapper,.theme-orman.slider-wrapper {} /*====================*/ /*=== Other Styles ===*/ /*====================*/ .clear { clear:both;}

 

3. Adım Javascript kodlarını blog'unuza ekleyin

Son olarak  aşağıda bulunan Javascript kodlarını ]]></b:skin> ifadesinin hemen altına gelecek şekilde ekleyin.

 

Javscript kodları

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

 

<script src=' http://bloggermodifiyegadget.googlecode.com/files/jquery.nivo.slider.pack.js ' type='text/javascript'/>


<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider({
effect: &#39;random&#39;, // Specify sets like: &#39;fold,fade,sliceDown&#39;
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: &#39;.jpg&#39;, // Replace this with...
controlNavThumbsReplace: &#39;_thumb.jpg&#39;, // ...this in thumb Image src
keyboardNav: true, // Use left right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: &#39;Prev&#39;, // Prev directionNav text
nextText: &#39;Next&#39;, // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded

});
});
</script>

 

 

Nivo slider’ın sundu bir çok özellik bulunuyor bunlardan ilki de görsellerin geçişlerinde kullanabileceğiniz 16 adet efekt ..slaytın javscript kodlarını ekledikten sonra slider random yani bu efektleri karışık olarak göstermeye başlayacaktır ama siz isterseniz bu efektleri deneyerek istediğiniz efektin adını  random yazan bölümün yerine yazarak kullanabilirsiniz.

 

Slaytın efektleri:

sliceDown

sliceDownLeft

sliceUp

sliceUpLeft

sliceUpDown

sliceUpDownLeft

fold

fade

random

slideInRight

slideInLeft

boxRandom

boxRain

boxRainReverse

boxRainGrow

boxRainGrowReverse

 

Görseller arasındaki geçişleri kontrol etmek içinde yine javascrip kodları içerisnde bulunan animSpeed: 500, // Slide transition speed slaytın sayfa geçişini(animasyon hızını) belirler, sayfa geçişlerini yavaşlatmak istiyorsanız, buradaki 500 değerini yükselmeniz gerekir , hızlandırmak içinde bu değeri azaltırsınız.

 

Videolu anlatım

 

Kaynak:Nivo slider

Paylaş !

90 yorum:

  1. teşekkürler, yalnız bişey sorucam, sayıların üzerine tıklanınca bir diğer sayfaya geçiliyor, yani resimler değişken değiil, tıklayınca bir diğer resime geçiyor, ypksa benmi eksik bişey yaptım?

    YanıtlaSil
  2. css kodunu ekleyince sorun yok ön izleme yapılabilinyor, ncak javascripti ekleyince, ön izleme yapmıyor, "düzgün bir şeklde oluşturulmamıştır diyor" dikkatmi çeken hem java hem css kodları "head" yazan yerin üstünde diyor, body yazan yerin altınada denedim ama olmadı kapatılıyor yazıyor. sorun ne olabilir acaba?

    YanıtlaSil
  3. hobibox Dem sayfsına gidince eklenti doğru çalışıyorsa eklediğin HTML kodlarında hata yapmışsındır demektir..

    Kodlar çalışan örneğiyle birebir. değiştirmen gereken linkler bizim bloguğun linkleri..

    en altta 1-2-3-4 yazan linkler aynı kalacak (# işaretli olanlar)

    2.sorunda

    şimdi tekrar yukarıda anlatıldığı şekilde CSS ve Javscipt kodlarını ekle çalışacaktır..

    normalinde CSS kodları CSS kodları içine eklenir ama bu yöntemde doğru bir sorun oluşturmayacaktır..

    yani headin üstüne ekle..

    YanıtlaSil
  4. Birde uyarıda bulunmak istiyorum bloguna ilk girildğinde pop up bir reklam penceresi açılıyor...

    Sende açılmıyordur çünkü cooce bırakıyor yani sayfaya ilk defa giriyorsan bir defa görünüyor ve bir daha görünmüyor..
    buraya bakabilirsin
    yinede bu tarz iframe çağıran eklentilere güven olmaz.

    dediğim pop up pencereyi görmek isitiyorsan tarayıcının ön belleği sil yani cokke ve çerezleri daha sonra kendi blog'uğuna gir..


    bu pencereyi açtıran da bloguğuna eklediğin live trafik feed veya Geo Canter bunlardan biri bu pencereyi açtırıyor o eklentileri kullanma bence..

    YanıtlaSil
  5. Ben bunu uyguladım ama yukarıdaki gibi değil.Şöyle yaptım;


    CSS kodunda background: url(paging_bg2.png) yazan yere pagin_bg2.png yerine http://4.bp.blogspot.com/-po7Ev7A70q8/TcPYta-5-8I/AAAAAAAAEUo/zX-re0eKX3o/s400/paging_bg2.png kodunu yapıştırdım.

    Javascript kodunu < / body> etiketinin üstüne yerleştirerek manşeti bloğuma koydum :)

    YanıtlaSil
  6. Size bahsettiğim konuyu anlatmışsınız teşekkürler bir şey daha soracağım video önüne reklam nasıl koyabilirim açıklarsanız sevinirim.

    YanıtlaSil
  7. gadgetı sürükle yazının üstüne bırak nasıl olacak anlamadım. ben bunu yapamıyorum. Yardımınız için teşekürler...

    YanıtlaSil
  8. Bizim tarihimiz

    HTML'yi düzenle sayfasında bu kodu main section' id='main'> bulduktan sonra HTML kodlarını hemen altına eklemeyi dene..

    Ertan Gogle adsense de böyle bir özellik var sanırım ama uygulamadığım için her hangi bir bilgim yok adsense yardıma bak..

    YanıtlaSil
  9. Birşeyler yaptım. Ama bu seferde sayfa tek tek atlamıyor. HTML kodlarını gadgetı ekledim. Her sayfa ve resim için kendi kodlarımıda yerleştirdim. Ama olmuyor bir türlü. Tayfun bey eğer mümkünse HTML kodlarının olduğu daha önceden yaptığınız gibi "safya linkini buraya kopyalayın" "resim linkini buraya kopyalayın" şeklinde bir düzenleme yaparsanız sevinirim. Yardımınız için teşekür ederim.

    YanıtlaSil
  10. Tayfun bey herşeyi yaptım. Hatta sizin linkleri bile değiştrimedim. Ama sayfalar arasında geçiş olmuyor bir türlü.

    YanıtlaSil
  11. Adsenseden aradım ama videolu reklam buldum videonun önüne nasıl koyacağımı bulamadım.Yinede teşekkür ederim.

    YanıtlaSil
  12. http://efitnesshealth.blogspot.com hocam burada rakamların yazdığı yer kayıyor :(

    YanıtlaSil
  13. evet Murat haklısın bende bir kaç deneme yaptım bazı bloglar da sorun çıkarıyor fakat sliderı herkesin kolayca ekleyebilmesi için HTML kodlarını gadget olarak ektletmek istedim yani işin kolayına kaçarak ben main-wrapperın altına ekliyorum sizde kendi şablonunuz da denk gelen yeri bulun ekleyin demek istemediğim içindi. gerçi farklı yüzlerce uygulama bulunuyor fakat diğer uygulamalarda özelleştirme işlemleri bunda olduğu kadar kolay değildi artık olardan birini tanıtırım ...

    YanıtlaSil
  14. Uygulamayı güncelledim ve tanıtacağım Jquery uygulamalarını tet edebilmeniz içinde bir blog oluşturdum slaytı tekerar bloguğunuz eklerseniz sanırım sorunsuz çalışacaktır.

    Bizim tarihimiz
    sürükle bırak için buraya bakabilirsin.
    http://www.bloggermodifiye.com/2010/01/bloggera-gadget-eklemek.html#Gadget-eklemek

    YanıtlaSil
  15. Şimdiki oldu teşekkür ederim demo görmek isteyen arkadaşlar bakabilir http://efitnesshealth.blogspot.com/

    YanıtlaSil
  16. Murat eklentiyi doğru bir şekilde eklemişsin ve çalışıyor yapman gereken tek şey bizim linkleri ve resimleri değiştirip kendi resimlerini eklemen, resimleri eklerken de şunu unutma diyelimki eklediğin ilk resim 500px genişliğinde 300px yüksekliğindeyse diğer resimlerin boyutlarıda bu şekilde olacak.

    YanıtlaSil
  17. eklentiyi kurdum. çalışıyor bir sorun yok. fakat ana sayfa haricinde eklenti çalışmıyor. yardımınız için teşekür ederim. bir blog sayfam hakkında eleştirinizi yazarsanız sevinirim.

    bizimtarihimiz.blogspot.com

    YanıtlaSil
  18. tayfun bey bir diğer sorun da resimlerin üzerine tıklayınca ilgili sayfayla bağlantı kurulmuyor.

    YanıtlaSil
  19. btemplates ten hariç hazır şablon nerde bulabilirim...

    YanıtlaSil
  20. ertan
    bunlar daha fazla şablon bulabileceğin blogger'ın önerdiği kaynaklar.
    Point of Focus
    BlogSkins.com
    Noipo.org
    Templates 4 Fre

    Kaynak:Blogger şablonları


    bizim tarihimiz

    son yaptığın yorumlar ve hatta bizim son yazımız blogger'ın yeni tasarıma geçişi sürecinde yaptığı düenlemeler yüzünden uçmuş fakat sorduğun sorular cevaplamak için eklentinin kodlarını düzenledim artık resimlere tıklanıldığı zaman bağlantılara gidecek ve istersen açıklamalara bir devamını oku şeklinde birde bağlantı ekleyebileceksin ayrıca sliderı 16 çeşit yani animasyonla yaynlama olanağıda varmış onuda yazıya ekledikten sonra yazıyı tekrar güncelliyeceğiz..

    YanıtlaSil
  21. Arkadaşlar sitem nasıl olmuş ama daha yapım aşamasında bir fikirlerinizi aliiim diye sordum http://sefinmutfagi.blogspot.com

    YanıtlaSil
  22. bizim önerilerimizi merak ediyorsanız buraya bakmanız yeterli ..kişisel fikrimi soruyorsanız benim beğenip beğenmemin hiç bir önemi yok bence, önemli olan sizin kendinizden birşeyler katarak bir şablon oluşturmanız ve zamanla geliştirmeniz ..

    zaten zamanla içinize sinecek bir şablonu oluşturup kullanmaya başlayabilirsiniz.

    YanıtlaSil
  23. Tayfun Bey işlemleri sırasıyla sizin tarif ettiğiniz şekilde yaptım ancak widgeti ekledikten sonra sitede aşırı derecede yavaşlama oldu. Ek olarak eklentide çalışmadı sadece boş bir alan göründü..

    YanıtlaSil
  24. isa jquerynin ana kodunu daha önce eklemişsin eklenti bu yüzden çalışmıyor olabilir ..eklediğin gadgettta şu resimdeki kodları kaldırarak dene ..
    http://2.bp.blogspot.com/-I4HkH37Dg3I/Tc7-072I7RI/AAAAAAAAEX4/LoemnCnjswE/s1600/Screenshot_1.png

    yavaşlatma konusuna bir şey diyemem sonuçta resim açıyor bu yüzden yavşalatabilir.

    YanıtlaSil
  25. Evet oldu ancak başka bir blogda denedim siteme slide pek yakışmadı :D
    Yinede çok teşejkür ederşm :)

    YanıtlaSil
  26. uygulamayı CSS kodarı üzerinde oynayarak özelleştirebilirsin fakat bunun için biraz css bilmen gerekir.

    YanıtlaSil
  27. Maalesef bende de çalışmıyor Tayfun. Gadgeti hiç bir değişiklik yapmadan otomatik yolluyorum siteye ama sadece boş bir kutucuk çıkıyor, içinde slayt resim falan yok. Sorun ne olabilir?

    YanıtlaSil
  28. Zafer eklediğin translate gadgetıda jqueryle çalışıyor ve java script kodları çakışıyor tekrarlana kodları silersen sorun çözülecektir..

    bu resimde ilk iki satırda işaretlediğim kodları sil sanırım çalışacaktır..

    YanıtlaSil
  29. Tekrarlanan kodlar hangisi Tayfuncum? bu resim derken?

    YanıtlaSil
  30. kendi istediğim resimi nasıl koyacağım bilgilendirirseniz sevinirim

    YanıtlaSil
  31. Merhaba Zafer ve Yılmaz yorum formuna kod girme imaknım olmadığığı için burada sorularınız için ayrıntılı bir açıklama hazırladım ...

    YanıtlaSil
  32. Teşekkürler (http://sefinmutfagi.blogspot.com) bu arada blogum için başka ne yapmalıyım...

    YanıtlaSil
  33. yılmaz başarılı bir blog için daha önce hazırladığımız yazılara bakarak kendin karar verebilirsin..


    başarılı bir blog için ipuçları

    YanıtlaSil
  34. çalışıyodu artık çalışmıyo nedeni nedir?

    YanıtlaSil
  35. uygulamanın kodlarını güncelledim ve google codeye yükledim ..

    Ayrıca uygulamayı gadget olarak değil yukarıdaki yönteme göre eklerseniz slaytı sadece ana sayfada gösterecek şekilde eklemiş olursunuz.

    YanıtlaSil
  36. Ben de farklı bir jQuery manşet uygulaması yapmayı denedim fakat ne yaptıysam sadece anasayfada gösteremedim. Hep konuların içerisinde de gözüküyor.

    YanıtlaSil
  37. kardeşim çok teşekkürler tam aradıgım şey.. helal olsun saa kralımm

    YanıtlaSil
  38. @htmlkod rica ederim işine yaramasına sevindim...

    YanıtlaSil
  39. Paylaştığım bu linkteki gibi bir sayfa yapmam mümkün müdür?

    http://static.livedemo00.template-help.com/wt_34185/#/


    Üzerine geldikçe renk değiştiren ya da tıklandığında hemen yanda/ altta vs sayfalar çıkması gerekmiyor.

    Sadece görüntüsü bu kadar sade olsun istiyorum. Linklere tıklayınca başka sayfalara yönlenmesinde bir sakınca yok. Olabildiğince sade ve kolay bir şey. Yardımlarınız için şimdiden teşekkür ederim.

    YanıtlaSil
  40. EE peki bu manşet teki sayfa geçişlerini nasıl yavaşlatabiliriz yardımcı olurmusun, biraz ugraştım ama yapamadım

    YanıtlaSil
  41. @Özgür ATAK ozguratak@gmail.com bu tarz yüzlerce uygulama var fakat bunları tek tek anlatmamın imkanı yok , üstelik senin istediğin şey komple bir sayfa bunu yapabilmen için HTML'e CSS'e ve Jquery hakim olman gerekir , benim anlatmamla olacak iş değil.

    YanıtlaSil
  42. @Full Antivirüs Programları daha önce 3. adımda javscrip kodları ile birlikte eklediğin bu kodları sil.

    <script type='text/javascript'>
    $(window).load(function() {
    $(&#39;#slider&#39;).nivoSlider();
    });
    </script>

    ve yerine aşağıdaki kodları ekle.

    <script type='text/javascript'>
    $(window).load(function() {
    $(&#39;#slider&#39;).nivoSlider({
    effect: &#39;random&#39;, // Specify sets like: &#39;fold,fade,sliceDown&#39;
    animSpeed: 500, // Slide transition speed
    pauseTime: 3000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true, // Next Prev navigation
    directionNavHide: true, // Only show on hover
    controlNav: true, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel: false, // Use image rel for thumbs
    controlNavThumbsSearch: &#39;.jpg&#39;, // Replace this with...
    controlNavThumbsReplace: &#39;_thumb.jpg&#39;, // ...this in thumb Image src
    keyboardNav: true, // Use left right arrows
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    captionOpacity: 0.8, // Universal caption opacity
    prevText: &#39;Prev&#39;, // Prev directionNav text
    nextText: &#39;Next&#39;, // Next directionNav text
    randomStart: false, // Start on a random slide
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
    });
    </script>


    yukarıda eklediğin kodlarda animSpeed: 500, // Slide transition speed bu kod slaytın sayfa geçişini(animasyon hızını) belirler, sayfa geçişlerini yavaşlatmak istersen buradaki 500 değerini yükseltirsin ,hızlandırmak istersen bu değeri azaltırsın.

    vakit bulursam yazıyı yeniden güncelleyip diğer verdiğim kodların işlevlerinide yazarım , ayrıca farklı animasyon geçişleri için diğer kodlarıda paylaşırım.

    YanıtlaSil
  43. saol ama olmuyor kardeş ya önizleme yaptım düzgün çalışmıyor dedi ne yapmam lazım

    YanıtlaSil
  44. Düzgün bir şekilde oluşturulmadığından şablonunuz çözümlenemedi. Lütfen tüm XML öğelerinin düzgün biçimde kapatıldığından emin olun.
    XML hata iletisi: Open quote is expected for attribute "{1}" associated with an element type "href".

    Error 500 böyle bir hata veriyor ne yapmam lazım

    YanıtlaSil
  45. @admin muhtemelen HTML kodlarını yanlış ekliyorsun ,CSS ve javascript kodlarını ekledikten sonra, HTML kodlarını linkleri değiştirmeden olduğu gibi ekle eğer slider çalışıyorsa demek ki linkleri değiştirken hata yapıyorsun.

    YanıtlaSil
  46. arkadaşlar yaptım sonunda saol tayfun yalnız bişey soracağım ben hızı ayarladımda bazı resimler geçerken tam geçemiyor ve yazılar gözükmüyor yardım edermisin ve teşekkürler.

    YanıtlaSil
  47. tayfun sence yapabilmişmiyim siteye bakıp görüşünü söylersen çok mutlu olurum http://sadecekampanya.blogspot.com/

    YanıtlaSil
  48. @admin evet olmuş fakat resimlerin boyutlarını değiştimen gerekiyor , resimlerin slaytın boyutlarından küçük olmasın tabi çok büyükte olmasın yoksa resimler geç açılacaktır.

    YanıtlaSil
  49. bunu nasıl ayarlayabilirim ayrıca teşekkürler.

    YanıtlaSil
  50. tayfun bu seferoldu valla yaptım saol paylaşım için

    YanıtlaSil
  51. YAPTIM FAKAT HİÇBİR ŞEKİLDE ÇALIŞMADI TAYFUN BEY.YARDIMCI OLURSANIZ SEVİNİRİM?

    YanıtlaSil
  52. @<a href="#c4538867663936999967">Tarım Günlüğü</a> blog'una eklediğin kodlardan kaynaklanıyor olabilir sliderı çalıştıracak ana kodu
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

    daha önce eklemişsin bunu sil ve bu kodun önceki sürümlerinide gereksiz yere eklemişsin onları da sil.


    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>


    slaytı eklesende eklemesende yukarıdaki 3 koduda sil bu kodların yerine aşağıdaki koddan bir tane olması yeterli.

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>


    diğer eklediğin tüm kodlar gereksiz.

    YanıtlaSil
  53. Dediğini yaptım tayfun fakat hala değişen bir sey yok :(

    YanıtlaSil
    Yanıtlar
    1. o kodları silmen senin yararına yani slayt çalışsada çalışmasada gereksiz kodlardı ve bence sen başka bir şablon seç veya demo bir blog oluştur slayt çalışcaktır , senin şablonunda çalışmamsına şaşmıyorum çünkü daha onlarca gereksiz kod var açılır menu için jquery kodları eklemişsin ama ortada açılır menu yok , jquery eklediğin halde ayırca motols javascript kütüphanesi eklemişsin ne işe yaradığı belli değil böyle daha bir sürü gereksiz kod var şablonunda bence sen btemplateseten sliderlı hazır bir şablon seç ve onu özelleştirmeye çalış işin daha kolay olur.

      Sil
  54. TAYFUN HOCAM BENDEDE DÜNYA KADAR SLİDERLİ ŞABLON VAR EGER ARKADAS BENLE İLETİŞİME GECER BEN VERİRİM ÜSTELİK şu adrestende indirebilir hepsini burayada ekledim (not:amacım reklam felan deildir yalnıs anlamayın) adres bu http://www.ceptim.net/Forum-web-tasarim-grafikerlik-programlama--312 blogger slider temaları

    YanıtlaSil
  55. http://besttheme.net/ şu adres bence en mükemmel temaların bulundugu adres

    YanıtlaSil
  56. blogda paylastıgım son 5 haber slider da otomatik gozukse daha sonra yenileri eklendiğinde eskileri aşşağıya kayıp yeni haber slider a otomatik şekilde gelmesi için yapabilceğimiz bir şey var mı? yoksa slider ı surekli manuel mi guncellememiz gerekiyor?

    YanıtlaSil
    Yanıtlar
    1. slaytı sürekli manuel olarak değiştirmene gerek yok .. tam olarak istediğin gibi yine jqueryle hazırlanmış bir slyat tanıtmıştık

      yapaman gereken HTML kodlarını eklerken hangi yazıların görünmesini istiyorsan onu seçmek , yani 1. yazı 5.yazı veya ilk 5 yazı tercih sana kalıyor sen yazı yolladıkça slayttaki yazılarda rss'den içerik çektiği için sürekli değişiyor bir nevi işi otomatiğe bağlıyorsun.

      tabi biz slaytın tasarımını hazırladığımız demo blog'umuza uyarlamıştık sanırım css ile tasarımı da özelleştirebilirsin.

      Sil
    2. teşekkür ederim ancak ordaki kodları ekledim beceremedim :) ben hep manuel olarak duzenlemek zorunda kalacam heralde :)

      http://innerfootballers.blogspot.com/ site bu bnde zaten slider vardı ancak otomatikleştirmek istiyordum beceremedim :)

      Sil
  57. bu slider ın boyutlarını nasıl ayarlayacağız.yaptım ama temadan az oldu genişliği.

    YanıtlaSil
    Yanıtlar
    1. slayt eklediğin görsellerle orantılı olarak büyüyor , resimlerin temanla aynı uzunluğa sahip olmalı. yüksekiliğide eklediğin css kodlarında bu kodu height:246px; bularak değiştirebilirsin.

      Sil
  58. bloggermodifiyejquery adresindeki bu örneğin altındaki manşetin nasıl yapıldığını anlatan konuyu bir türlü bulamadım yardımcı olursanız sevinirim..

    YanıtlaSil
    Yanıtlar
    1. o manşetin anlatımı yok ... bazı arkadaşların manşetin içeriğinin otomatik değişmesi için ne yapabiliriz veya resimlerin linkleri nasıl değişir gibi sorular üzerine yeni geliştirdiğimiz bir eklenti olacak..

      eklenti hazır olduğunda tercihlerinizi belirleyip(manşetin boyutları,çeşitli efektler, kaç adet yazı gösterilsin gibi tercihler) gadget olarak ekledikten sonra siz yeni bir yazı yayınladığınızda yeni yazınız manşete otomatik olarak eklenecek, hatta biraz daha geliştirip sadece sizin istediğiniz kategoriden içerik çekebilen farklı bir versiyonunuda hazırlayıp bir kaç tıkla blog'unuza ekleyebilleceğiniz gadget haline getirmeyi düşünüyoruz...

      tabiki bu sıraladıklarımı yapmak için çok fazla bilgi ve emek istiyor, belki inanmıyacaksınız ama bununla uğraşmak yerine, blog'uma yazı yazsaydım 10 adet post girerdim ..

      neyse hazır olduğunda sanırım sizinde beğeninizi kazanacaktır.

      Sil
  59. Cevabınız için teşekkürler gerçekten güzel bir eklenti oılacağa benziyor umarım emeklerinizin karşılığını alırsınız.. Peki o manşetin en azından kodunu alabilirmiyim üzerinde oynamaları kendim yapmayı denerim..

    YanıtlaSil
    Yanıtlar
    1. slyata içerik çekmek için json kullandığımız için kodlar anlatım olmadan karışık gelecektir, tabi bunun yanında JQUERY kodları da var, biraz sabredersen zaten eklentiyi eklerken kodların linklerini de eklemiş olacaksın.

      Sil
  60. Sevgili dostum yeni eklentini sabırsızlıkla bekliyoruz,ben blogumu haber sitesi olarak kullanmaya çalışacam ama news olan temaların çoğu paralı,acaba manşetli haber yayınlayacağım bloggerde en uygun tema hangisi?bu konu hakkında bilgi verirseniz sevinirim

    YanıtlaSil
    Yanıtlar
    1. habersitesi tarzında blog şablonu bulmak pek kolay değil en iyisi şablonu kendin tasarlaman bunun içinde bence btemplatesten bir şablon seçip işe başlayabilirsin.

      Sil
  61. merhaba Tayfun öncelikle çok teşekkürler,
    dediğini uyguladım ancak siteme bakarsan Slider başlığın altında ama ben en üstüne istiyorum. Yardımlarını bekliyorum şimdiden teşekkür ederim. http://pickuklar.blogspot.com/

    YanıtlaSil
  62. Merhaba 1. adımda eklediğin HTML kodlarını bu <header> kodun hemen üzerine gelecek şekilde eklersen tam istediğin gibi olacaktır.

    YanıtlaSil
  63. şöyle bir eklenti hazırladık isteyen arkadaşlar eklentiyi deneyebilirler.

    YanıtlaSil
  64. Ben daha önce birkaç manşet eklentisi denemiştim ama firefox da sapıtıyordu. Siz de crome, firefox ve i.e de test edin. Çok şekilsiz şeyler çıkabilir. Bunu da deneyeceğim yakında. Şimdi yönlendirme çubuğu olmayan fakat düzgün çalışan bir manşet eklentisi kullanıyorum. Burada http://www.techrehber.com/

    YanıtlaSil
  65. arkadaslar bu slayt programına kendı resımlerımızı nasıl koyacaz

    YanıtlaSil
    Yanıtlar
    1. 1. adımda nasıl yapılacağını anlattık zaten olmadı videoya bak..

      Sil
  66. ben farklı bir slider da sorunla karşılaştım yardımcı olursanız sevinirim. Sorunum şu; Blogumda Content Slider bulunmakta. Eklediğim bir kaç kod bunu bozmuş sorunu çözemiyorum. Sitemin linki http://denizinblogu.blogspot.com/
    bu da Slider ın olması gereken halini içeren sitenin linki:
    http://demo.mybloggerthemes.com/2011/12/freshlook.html yardımlarınız için şimdiden teşekkürler...

    YanıtlaSil
    Yanıtlar
    1. çok zekiyim hemen sorunu çözdüm. Teşekkürler, iyi çalışmalar...

      Sil
  67. usta selamlar, blogunuz çok yardımcı oldu siteme uygulamak istedim ama oradaki fotografları değiştirirken, sıkıntı yaşıyorum bunların boyutlarını ayarlamak için kolay yol varmı...

    Şimdi elimde 1600*1024 bir foto var, bunu küçülttüğüm zaman foto ya alttan kayboluyor, ya da en den küçük geliyor... Bununla ilgili bir düzetme varsa yardım ederseniz çok sevinirim....

    YanıtlaSil
    Yanıtlar
    1. resimleri yüklmeden öncee her hangi bir resim editörüyle düzenleyip yüklersen istediğin ebatlarda kullanbilirsin.

      Sil
    2. o olmuyor üstadım dediğim gibi elimdeki fotoyu o boyutlarda küçültemiyorum. 501*258 gibi bir oran gerekiyor onu da yapmıyor. 500 yaptığında diğeri 400 civarı oluyor, otekini 258 yaptığında ilki 300'lerde kalıyor :S Anlamadım bende...

      Sil
    3. resim düzenleme programında genişliği farklı yüksekliği farklı boyutlandırabilirsin....tabi resmin görüntü kalitesini bozacaktır ..resmi orantılı olarak kesmen gerekir veya başka görsel kullancaksın..

      Sil
  68. İyi günler uygulamayı ekledim fakat çalışmadı. Alan görünüyor fakat beyaz bir şekilde kalıyor. Değişme olmuyor. Yardımcı olursanız sevinirim.şimdiden teşkkürler.

    YanıtlaSil
    Yanıtlar
    1. blogunuzu inceledim fakat her hangi bir sorun göremedim ...

      şablonunuzu indiirip bu tayfun@bloggermodifiye.com e-posta adresinden bana yllarsanız boş bir vakit bulduğumda ekler test eder size yollarım..

      Sil
  69. tmm yolladım.yardımınız için teşkkür ederim.

    YanıtlaSil
  70. Tayfun kardeşim bunu gadget olarak eklemenin bi yolu yokmu?

    YanıtlaSil
  71. MErhaba,
    Calisiyor fakat resimleri goremiyorum.Tekrar deneyecegim.
    Tesekkurler.

    http://fashionandgourmet.blogspot.com/

    YanıtlaSil
  72. çok güzel bir uygulama tam aradığım gibi yalnız bunun genişlik ve boyunu nasıl ayarlarız birde bu konuda yardımcı olursanız çok memnun olurum... şimdiden teşekkür ederim..

    YanıtlaSil
    Yanıtlar
    1. Bunu eklediğin kodların içindeki CSS kodlarını düzenleyerek yapabilirsin, buradaki yazı da nasıl yapabileceğin hakkında yardımcı olacaktır.

      Sil
  73. <b:section class='main' KODUNU bulamıyorum... HTML içerisinde ctrl f ile yardımcı olursanız çok sevinirim.

    YanıtlaSil
  74. @Tayfun Bey yapıyorum fakat resimin uzunluğu yetmiyor slayt'ı tamamlamıyor nasıl halledeceğim?

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz