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

Blog’uğumuzun CSS kodlarında yaptığımız ufak değişikliklerle  tasarımını kendimize özelleştirmekle devam ediyoruz.

 

      2010-09-01_102941

 

Sıradaki bölüm blog pager yani blog ziyaretçilerimizin yazılarımız arasında kolayca dolaşabilmeleri için önceki ve sonraki kayıtların bulunduğu bölüm ve şablonumuzun en alt kısmında yer alan bölüm footer bölümüyle şablonumuzun CSS kodları üzerinde yaptığımız değişikliklere sonlandıracağız.

 

Blog pager bölümünde bulunan  linklerin yerine ikon kullanma şansımız bulunsa da biz bu bölümü de yine CSS kullanarak şekillendireceğiz.

 

Bunu yapabilmek içinde aşağıda bulunan kodları blog’uğumun CSS kodlarına eklemem yeterli olacaktır.

 

#blog-pager {

background: url('file:///C:/Documents%20and%20Settings/Aceer/Desktop/Screenshot_2.png') no-repeat top left;

width:550px;

height:60px;

float:left;

word-wrap:break-word;

overflow:hidden;

padding: 10px 10px:

margin:0px 0 0 0px;

font-size:15px;

line-height:2.9em;

}

 

Yine aynı şekilde blog’uğumun Footer kısmını yani  genellikle  daha az öneme sahip olan blog hakkında bilgilerin yer aldığı şablonumun en alt bölümünü özelleştirmekle devam ediyorum. 

 
CSS Kodu

#footer-wrapper {

width:850px;

margin:0 auto 0;

padding:20px 0;

background: #68C4F4;

color: #fff;

text-decoration: none; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

border: 1px solid #5C2D58;

}

 

Footer bölümünü görünümünü blog'uğumun tasarımına uygun hale getirdikten sonra yine bu bölümün içerisinde yer alıcak ve blog ziyaretçilerimin sayfayı kolayca yukarı kaydırarak gitmelerini sağlamak için birde link eklemeyi düşünüyorum bunu yapabilmek içinde yine blog'uğumun CSS kodlarına ve footer bölümün HTML kodları içerisine bu bölümü ve linki oluşturmamı sağlayacak kodları ekliyorum.

 

CSS Kodu 

.footer-right{

font: bold normal 120% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif; width:140px; float:right; color:#f1f1f1; margin: -44px -1px 0px 0px; background: url(file:///C:/Documents%20and%20Settings/Aceer/Desktop/Test/footer-right-bg.png) no-repeat left top; padding:5px 0;

}

 

HTML Kodu

<div class=' footer-right '>

<A href='#'>Yukarı</A></DIV>

<a href="http://bloggermodifiye.blogspot.com/">Template Modifiye by Blogger Modifiye</a>
    </div>

 


Bu yazı ile ilgili konular                                                                           Şablon Tasarımı  ➜
Paylaş !

18 yorum:

  1. Merhabalar.
    Verdiğiniz bilgiler için .çok teşekkür ediyorum.
    Blog konusunda henüz çok yeniyim..

    Ben etiketlerin yanına resim eklemek yani resimli menü oluşturmak istiyorum nasıl yapabilirim yardım ederseniz çok sevinirim..

    KOLAY GELSİN

    YanıtlaSil
  2. etiketleri liste halinde gösteriyorsan yapman gereken şablonunun CSS kodlarına aşağıdaki kodları ilave etmek

    .list-label-widget-content li { color: #f3686d; background: url(http://www.sosyomat.com/images/theme/e.gif) no-repeat;
    padding:0px 0 0 50px;

    }

    nasıl göründüğüne de test blog'uğumuzu ziyaret ederek bakabilirsin.

    farklı bir görsel kullanmak içinde kod içerisindeki http://www.sosyomat.com/images/theme/e.gif şu linkin yerine kullanmak istediğin görsdelin linki yazmak yeterli olacaktır.

    YanıtlaSil
  3. Merhaba benim derdim şu: Tek kolonlu sidebarı ıkı kolonlu yapmak. Nasıl yapabilirim?

    www.arzucevikalp.net

    YanıtlaSil
  4. yapmak istediğin şeyin kodlarını buraya yazmamın imkanı yok fakat şöyle birşey yapabilirsin ... B Templates sitesinde iki kolonlu her hangi bir şablonu indirip şablonda bulunan sidebar-wrappera ait HTML Ve CSS kodlarla kendi şablonundaki kodları değiştirmen gerek ... ayrıca bu konuyla pek alakası yok ama boguğuna eklediğin java scriptlerden biriri de hatalı kaynak kodlarında HTML'yi düzenle sekmesinde klavyenin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formuna şunu //]]> yazıp arat 4 adet çıkacaktır bunlardan biri fazla yazılmış omu bulup silmen gerek.

    YanıtlaSil
  5. tekrar merhaba .
    bu b templates sitesini inceledim cok güzel sayfalar var ?
    fakat ingilizce sayfalar ve fazladan 1 tane menü bar var?
    bunu anlamadım blogerda bunu desteklemiyor sanırım açılır menülü
    menü bar anlatabilmişimdir sanırım.
    biraz degiştireyim dedim html sini ingilizce lerini cevirdim menü isimlerinin fakat bu acılır menülerdeki kategorilere blogumda sayfa bulamadım destekliyecek.
    bu btemplates hakkında biraz bilgi verirmisin kullanmamız dogrumudur bloger olarak.tesekkürler şimdiden.

    YanıtlaSil
  6. Admin açılır menüler javsciplerle oluşturulan uygulamalar bloggerda bunları kullanabilmen mümkün ... bu tarz uygulamaları kendi blog'uğunda kullanabilmen için html,css ve javscript hakkında biraz bilgi edinmen gerekir.

    bizde kendi blog'uğummuzda bu tarz uygulmaları tanıtmayı düşünüyoruz fakat bir süre sonra blogger tasarımı değişeceği için bizim anlatımlarımızda çöpe gidecek o yüzden kuymanda panelinin tasarımın bir an önce değişmesini bekliyoruz.

    YanıtlaSil
  7. çok saol üstad açıklama için.
    biran önce degiştirirler inşallah bu tarz şeleri .
    bıktık inan herseyi degiştirmeye calışmaktan
    html ve bu tarz bilgileri cok az sayıda insan biliyor
    herkez bişeyleri degiştirmenin peşinde bloger da tuaf bir durum bu
    bir seyi degiştirecez 20 gün ugrasıyoruz .
    bazı eksiklerimizi bilgimiz olmadıgı için dile bile getiremiyoruz.

    YanıtlaSil
  8. interaktifblog gibi yan taraftan nasıl iletişim koyuyoruz.İletişim yerine başka bir şey de koyabilkiyormusunuz açıklarsanız sevinirim

    YanıtlaSil
  9. testlogs daha önce bunu nasıl yapabileceğiniz hakkında ayrıntılı bir yazı yazmıştık.. http://www.bloggermodifiye.com/2010/06/blogugunuza-bir-iletisim-kutusu-ekleyin.html iletişim formunun yerine başka bir şey kullanmak istersen , "iletişim formunun kodu" yazan bölüme istediğin her şeyi ekleyebilirsiniz.

    YanıtlaSil
  10. Tayfun bey , standart blogger temalarında gadgetlerin sadece başlıklarının arka fonunu yada arka fon rengini nasıl değiştirebiliriz ,
    yardımlarınızdan dolayı teşekkür ederiz.

    YanıtlaSil
    Yanıtlar
    1. Gadget başlıkları CSS kodlarında h2 olarak adlandırılır şablonunuda şunu h2 { aratırsan bulduğun bu kodun kulaklı parentez içine alınmış kodları düzenleyebilirsin.. tabi bunun içinde biraz CSS bilgisine ihtiyacın olacaktır onun içinde buradaki makale yardımcı olacaktır.

      Sil
  11. HOCAM BLOGUMUN SOL TARAFINDA BOŞLUK VAR DOLAYISI İLE SAĞ TARAFA KAYMIŞ DURUMDA ,, BLOG GENİŞLİK AYARLARINDAN DÜZELTİLEMİYOR.. YARDIMCI OLURSANIZ SEVİNİRİM.

    YanıtlaSil
  12. selamlar TAYFUN hoca ben hazır bir html kodu girmek istiyorum blog ma fakat bir yerden indirdiğim hazır kodları nasıl yükleye bilirim ben bunu yükledim resim yükle den html olarak sayfa görüntülendi fakat eksik sayfa bilmem tam olarak ifade edebildimmi yukarıda slat geçen bir resim olması gerekiyor o yok mesela diğer dosyaları atmaya çalışıyorum olmuyor birde şu var hocam direk bunu html sayfasına atamıyoruzmu

    YanıtlaSil
  13. Merhaba
    Ben kullanmakta olduğum şema şablonunu özelleştirdim ancak kategorilerden girildiğinde yayınlar açılmıyor.
    Örn: http://www.bisikletimdeyemekkokusu.blogspot.com.tr/search/label/Zeytinya%C4%9Fl%C4%B1lar

    Sebebini bulamadım, sanırım yayınların tamamının html kodunu şablona ekleyemedim, acaba neden olabilir ve nasıl çözebilirim? Yardımcı olabilir misiniz?

    YanıtlaSil
  14. Merhabalar hocam.Web sitem www.sorgusayfasi.com . ben anasayfada 15 yayın gösterilmesini istiyorum.Fakat 15. yayını girdiğimde anasayfada 1 yayıın görünüyor, yeni yayınlar girdikçe anasayfadaki gösterilen yayın sayısı 5-6-9 vb oluyor.fakat 15 yayından sonra tekrar anasayfada 1 yayın gösteriyor.bunun sebebi nedir? bunu nasıl çözebilirim hocam. İlginiz için şimdiden çok teşekkür ederim.

    YanıtlaSil
  15. Merhaba,

    Sayfamdaki boşlukları almak istiyorum fakat sayfayı incele dediğimde aşağıdaki gibi değerler çıktığı için değiştirebiliyorum ama şablonu düzenle dediğimde en aşşağıdaki gibi değerler çıkmadığı için değiştiremiyorum yardımcı olabilir misin?

    Sayfayı incele dediğimde;
    .tabs-inner .widget ul {
    background: transparent none repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: 1px solid #dddddd;
    margin-top: 0;
    margin-left: -30px;
    margin-right: -30px;

    Şablonu Düzenle dediğimde;
    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);
    margin-top: $(tabs.margin.top);
    margin-left: -$(tabs.margin.side);
    margin-right: -$(tabs.margin.side);

    Boguma www.dugundjhizmetiorganizasyon.com yada http://dugundjhizmetiorganizasyon.blogspot.com 'dan bakabilirsiniz. Yardımlarınız için şimdiden teşekkür eder, saygılarımı sunarım.

    YanıtlaSil
  16. Merhabalar.Blogda yeniyim. Blogum'un isminin bulunduğu kısma bir simge eklemek istiyorum.Yani ''Doyumsuz Okur '' Doyumsuz ile okur arasına eklemek istediğim bir simge var nasıl yapacağım hakkında bilgi verir misiniz ? 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