Blog’unuza bir slayt ekleyin.

Blogger’ın varsayılan şablonu olan Minima’yı özelleştirirken başladığımız yazı serisinin ilk yazısında blog’uğumuzun CSS kodlarıyla oynayarak şablonumuzu özelleştireceğimizi ve sonradan ilave edeceğimiz kodlarla da daha işlevsel ve kullanışlı bir hale getireceğimizi belirtmiştik.

 

      slayt

 

Test blog’uğumuzu özelleştirirken yaptığımız işlemlerin daha kolay ve anlaşılır olabilmesi için gayet sade bir tasarım oluşturduk. Fakat blog’uğumuza ekleyeceğimiz javascrip kodlarıyla oluşturacağımız Slayt sayesinde blog’uğumuza biraz hareket katarak bu eksikliği de kapatmış olacağız.

 

Kullanacağımız slayt blog’uğumuza her yazı eklediğimiz de  resim ve linklerin kendiliğinden otomatik değişmesini sağlıyor, bu sayede bizi yazı yolladıktan sonra linkleri değiştirme zahmetinden de kurtarıyor.

 

Slaytı test blog’uğumuza eklerken yaptığımız işlemleri anlatmaya geçmeden önce görebilmeniz için önceden İnter aktif adlı bulog’umuza ekliyorum isterseniz ziyaret ederek nasıl çalıştığına göz atabilirsiniz.

 

Blog’uğu ziyaret edip eklediğimiz slaytı gördüyseniz şimdide test blog’uğumuza eklerken yaptığımız işlemlere  geçebiliriz.

 

     2010-06-30_013807

 

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyorum. burada klavyemin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan formda ]]></b:skin>  ifadesini aratıyorum.

 

]]></b:skin> ifadesini bulduktan sonra hemen üstüne gelecek şekilde aşağıdaki CSS kodlarını ekliyorum.

 

CSS Kodu

 

 

Css kodlarını ekledikten sonra yine bu sayfada <body> etiketini bulup, hemen üzerine gelecek şekilde aşağıda bulunan Javascript kodlarını ekliyorum.

 

Javascript Kodu

 

Bu sayfadaki işimizi bitirdikten sonra hemen sayfa öğeleri sayfasına geçerek burada bulunan gadget ekle bağlantısına tıklıyorum ve açılan pencerede HTML/javascrip ekle yazan bağlantıyı kullanarak açtırdığım yeni pencereye aşağıdaki XHTML kodlarını ekleyip kaydediyorum.

 

XHTML Kodu

 

Bu işlemlerin sonucunda bloguğunuza slayt’ımızı eklemiş oluyoruz fakat işimiz burada bitmiyor şimdi  slaytımız da gösterilecek yazıların besleme adresini değiştirmem gerekiyor Javascrip kodların içerisinde home_page = http://interaktifblog.blogspot.com/feeds/posts/default; yazan bağlantının yerine test blog’uğumun adresini yazdım siz bu slaytı kullanmak isterseniz test blog’uğumuzun adresi yerine kendi blog adresinizi yazmanız gerekiyor.

 

Artık blog’a yeni bir yazı yolladığımda salyta gösterilen yazılarda otomatik olarak değişecektir.

 

Kaydettikten sonra yapmanız gereken son işlemde  gadgetı kenar çubuğuna eklediğimiz için hemen yazılarımızın üstünde görünmesi için farenin imleciyle yakaladıktan sonra yazılarımın üzerine gelmesi için sürükleyip bırakmak.

 

Yaptığımız işlemleri görebilmek için de test blogu’ğumuzu ziyaret edebilirsiniz.

 

Blogger’da profesyonel adımlar

 

Blogger şablonunu özelleştirmek (Bölüm I )           Blogger şablonunu özelleştirmek (Bölüm II)

 

Blogger şablonunu özelleştirmek (Bölüm III )                Blogger şablonunu özelleştirmek (Bölüm IV)

 

Bloguğunuza menü ve arama kutusu ekleyin         Blog’unuza bir slayt  ekleyin

 

Blog’uğunuza bir iletişim kutusu ekleyin                Blog’uğunuz eklentilerle geliştirin

Paylaş !

33 yorum:

  1. Merhaba, veridğiniz komutları sitede uyguladım ancak, turkuaz renk olan tema dışında birşey çıkmadı. resim optimizasyonu otomatik olarak değişecek dimişsiniz. ancak hiç bir resim ve yazı çıkmadı. yardımcı olurmusunuz.

    uygulama yaptığım demo blogum;
    http://goladami.blogspot.com/

    uygulamayı yapacağım blogum;
    http://cidago.blogspot.com/

    YanıtlaSil
  2. ayrıca arka plan renigni nasıl değiştirebilir.z bloguma uygun olan renk seçimini nasıl yapacağız?

    YanıtlaSil
  3. @Cidago ikinci adımda yapılması gerekn iki işlem bulunuyordu bu tek seferd halletmk için farklı bir yöntm kullanmıştım sanırım anlaşılmadı neyse ... yukarıdaki işlemleri tekrarlarsan sanırım olacaktır ...
    arka plan rnginide ilk eklediğin CSS kodlarından değiştireceksin seri halde yazdığımız bu yazılarda bu konudada bir yazı bulunuyor. http://bloggermodifiye.blogspot.com/2010/05/blogger-sablonunu-ozellestirmek-bolum_14.html

    yazılar seri halde olduğu için diğer yazıları atladığınızda sonraki konularıda anlamakta zorluk çekbilirsiniz.

    Ayrıca buradan birde uyarıda bulunayım son klediğim yazıları düzenleme fırsatı bulamadığım ve blogger'ın tasarımını değişmesi ve youtube yasağı nedeniyle engellene picasa yüzünden blog'uğumdaki yazıların çoğunu değiştirmeyi düşünüyorum onları tamamladığımda css hakkında daha ayrıntılı bir yazı yazmayı da düşünüyorum ..

    YanıtlaSil
  4. merhaba, evet dediğiniz gibi baştan yaptım bu kez oldu ancak , bloguma ait yazılar çıkarken, resimler çıkmıyor. farklı resimler çıkıyor. birde arka plan rengini değiştirmeye çalıştım ancak bir kısmı değişebildi.
    emekleriniz için tekrar teşekkürler.

    besleme adresim: http://feeds.feedburner.com/cidago
    (bu besleme adresimdede yazılar var ancak resimler yok sanırım bundan kaynaklanıyor. )

    uyguluma demo blogum;
    http://cidademo.blogspot.com/

    YanıtlaSil
  5. @Cidago eklediğin iki XHTML kodunda şu etiketi bulup borderColor = "#68C4F4"; istediğin rengin kodlarını yaz yani bu şekilde olsun borderColor = "#99CC66"; arka plan rengini böyle halledebilirsin, resimlerin etiketindeki linki silmeyi den yeni yazı yolladığında sanırım o yazıya ait resim çıkacaktır

    YanıtlaSil
  6. teşekkürler...renk işi tamam ancak resim işi olmadı. rss de mi bir sorun var acaba?

    YanıtlaSil
  7. Tayfun kardeşim birde bu widgeti yani slayt haber geçişisini sadece anasayfada görmek için ne yapmam gerekiyor. davuterslan.blogspot.com adresindeki talimatları uyguladım olmadı . ya bir yerde hata yapıyorum yada html kodlarında birşey var.

    YanıtlaSil
  8. @Cidago HTML kodlarını buraya girmediğim için yardımcı olamıyorum fakat daha sonra bir yazıyla anlatabilirim.

    YanıtlaSil
  9. Merhaba Tayfun, 2 sorum olacak.

    1- Neden sadece 2 kayıt gösteriyor? bunu çoğaltmanın yolu var mı?

    2- Bu haber slaytına beslemeler dışında kendimiz yazı ve resim ekleyebilir miyiz? duyuru panosu gibi mesela?

    Sevgiler..

    YanıtlaSil
  10. sadece Java scriptleri kopyalayıp yapıştırısan çoğaltmış olursun .. fakat yinede yazıalrın sıralamsını değiştirmen gerek onun kodlarını buraya giremiyorum fakat daha sonra 4 yazı gösterecek şekilde kodları düzenleyebilirim.. tabi biraz saberetmen gerek.

    YanıtlaSil
  11. 2. Soruna cevapsa uygulamada dedğin şekilde kendinde link ekliyebilirsin fakat o zahmete değmez. ama o tarz silderlar arıyorsan...http://btemplates.com/blogger-templates/magazine/ burada buluna şablonlarda o tarz sliderlar bulunuyor onların kodlarını inceliyerek kendi bloguğuna ekleyebbilirsin.

    YanıtlaSil
  12. Öncelikle Teşekkür ederim, ama bir sorum olacak bu slaytta gösterilecek blogların rastgele olmasını istiyorum, nasıl yapabilirim?

    YanıtlaSil
  13. meraba
    slaytın arka plan rengini bir türlü değiştiremedim. ne yapmam gerekiyor ayrıca slaytta sadece benim sectiğim yazılar yaınlansın istiyorum böyle bir özellik varmı?
    teşekkürler

    YanıtlaSil
  14. Önçelikli teşekkürler yapım için benim sorunum 2 den fazla kayıt güstermiyor olmaası bunu çoğaltmaamız mümkün mü bu konuda yardımçı olabilirmisiniz..

    YanıtlaSil
  15. body etiketini arattığımda çıkmıyorrr :(( yardım edin...

    YanıtlaSil
  16. whispers

    kayıtları ikiden fazla gösterme imkanını bulunuyor fakat bunu buradan anlatamamızın imkanı bulunmuyor..

    bunun için için ayrıntılı bir anlatım gerekli..

    konuşan blog
    <body diye aratmayı dene..

    YanıtlaSil
  17. ya süpersiniz, çok ama çok sağ olun! Fakat slaytta iki tane yazım gösteriliyor. Bunun sayısını nasıl arttırabilirim??

    not: body etiketini > işaretiyle kapatırsam bir sorun olur mu?

    YanıtlaSil
  18. konuşan blog
    Çok fazla istek ve soru geldiği için slaytın kayıtlarını nasıl ikiden fazla gösterebileceğiniz ve arka planı,boyutlarının nasıl değiştirilebileceği gibi görsel ayrlarını değiştirebileceğiniz ayrıntılı bir yazı hazırlayabiliriz ama biraz beklemeniz gerekecek tabi..

    diğer soruna gelecek olursan body etiketini değiştirme çünkü ...
    body class='loading'> diye farklı class atanmış dediğin değişikliği yaprsan şablonun çalışmaz.

    YanıtlaSil
  19. Hm peki teşekkürler tekrardan. Ayrıntılı yazınızı hevesle bekliyorum :)

    YanıtlaSil
  20. Ya hani bunun dersini verecektinizzzz???? Kaç gün oldu :'((((

    YanıtlaSil
  21. konuşan blog buradaki notlara baka bilirsin ilerleyen günlerde daha fazla ayrıntı ve görsel ayarla için CSS kodlarını nasıl değiştirebileceğiniz gibi tüm sorularınıza cevap olabilecek yeni notlarda yayınlayabiliriz.

    YanıtlaSil
  22. Javascrip kodların içerisinde home_page = http://interaktifblog.blogspot.com/feeds/posts/default; yazan bağlantının yerine test blog’uğumun adresini yazdım siz bu slaytı kullanmak isterseniz test blog’uğumuzun adresi yerine kendi blog adresinizi yazmanız gerekiyor. ben bu bağlantıyı bulamadım.. yardımcı olurmrusunuz...

    YanıtlaSil
    Yanıtlar
    1. en son eklediğin kodların içerisinde, yani sayfa öğeleri bölümüne gidip kodları eklediğin gadgetın sağ alt köşesinde buluna düzenleye tıkla açılan pencerede , kodlar içerisinde bulabilirsin.

      Sil
  23. neyse hallettim... yinede çok sağol...

    YanıtlaSil
    Yanıtlar
    1. biraz beklersen bu slaytın farklı bir versiynunu hazırlıyorum.

      hazırladığım yeni slayta kodlarla uğraşmadan kolayca gadget olarak ekleyebileceksin.

      Sil
  24. tayfun bey mrb. herşeyi yaptım fakat slayt sadece sayfa açıldığında görünüyo sayfa açıldıkdan hemen sonra kayboluyo. Yardımcı olursanız sevinirim.

    YanıtlaSil
    Yanıtlar
    1. eklediğin farklı uygulamaların kodları buna sebep olabiliyor, üstelik o slaytın tasarımının senin şablonuna uyacağını zannetmiyorum ve üzerinde değişiklikler yapabilmek için CSS bilgin olması gerekir bence eklediğin tüm kodları kaldır ve burada bulunan 1 2 manşet uygulmalarını dene.

      Sil
  25. hocam bunu yükledim fakak bir kac sorunla karsılastım.hocam bunun en ve boy ayarlarını nereden değistirebiliriz. birde yazıların sag kısmı gözükmüyor. slayt muhtesem tam aradıgım bir sey tşk ederim birde hocam renk ayarını nasıl yaparım bu konular hakkında yardımcı olursanız sevinrim.. androidmodels.blogspot.com buradan slayta bakarsanız sevinirim nasıl oldunu belki anlatamamısımdır. kolay qelsin..

    YanıtlaSil
  26. bunu yaptım fakat yeni konularım otomatik olarak geçmiyor :S

    YanıtlaSil
  27. Bu yorum yazar tarafından silindi.

    YanıtlaSil
    Yanıtlar
    1. blogun açılmadığı için göremiyorum ama uygulamalr için genllikle birer demo sayfası hazırladığımız için yazılara eklediğimiz kodlarda bu demo blogundakilerle bire bir oluyor o yüzden uygulama demo blogunda çalışıyorsa kodlarda her hangi bir hata yok demektir, dha sonra bloguna eklediğin farklı bir uygulama bulunuyorsa bu eklentinin çalışmasını engelleyebilir.

      Sil
  28. merhaba ben bloguma uyguladım çok güzel oldu teşekkürler. emeğinize sağlık.
    bir şey sorcaktım bu kodların içine önceki - sonraki gönderi düğmesi nasıl ekleyebilirim.
    slayt halinde geçerken geri dönmek istenildiğinde mümkün olmuyor da. googledan birkaç kod buldum ekledim ama çalıştıramadım.
    Yardımlarınız için şimdiden teşekkürler.

    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