01 Şubat 2010

Blogger yardım konularında en son 'CSS ile Blogger Başlık Düzenleme' konusu hakkında bir yazı yazmıştım. Bu yazıdan sonra sidebar başlık düzenleme hakkında da yazmak şart oldu. Birde sidebar başlık değişiklikleri hakkında yardım isteyen arkadaşlar olunca konuyu hemen ele almak istedim.

Blogger sidebar başlıkları blogu ilk oluşturduğunuzda çok sadedir. Görsel olarak yetersizdir. Ancak, birçok hazır temada farklı sidebar başlıkları kullanılır. Siz de benzer sidebar başlıkları nasıl düzenlenir merak ediyorsanız, yazının devamını okumanızı tavsiye ederim.

Hatırlatma; blog temanızın yedeğini almayı unutmayın.

Blogger-Sidebar-Başlık-Örnek-görüntüTemanızda alttaki kodu aratın. Eğer temazızda alltaki kod yok ise; temanızda ]]></b:skin> kodunu aratın ve hemen üstüne alttaki kodu yapıştırın. Not olarak şunu eklemek isterim; eğer hazır tema kullanıyorsanız, sidebar'ın css kodlarında nasıl tanımlandığını kontrol edin. Her hazır temada farklılık gösterebilir.
.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 1em;
line-height:2em;
}
Tüm sidebar düzenlemelerini üstteki kod üzerinde yapacağız.

Sidebar Başlık Düzenleme - Kenarlık Ekleme

Kenarlık eklemek için alttakine benzer CSS kodları kullanılabilir;
.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}

sidebar-solid-kenarlık
Yukarıdaki kodu kullanırsanız yandaki resimdeki gibi bir görüntü elde edersiniz;
Burada kenarlık çizgi kalınlığını (1px), rengini (#000000) ve kenarlık çizgi tipini (solid) değiştirmek mümkün. Kenarlık çizgi tipleri; none, dotted, dashed, solid, double, Groove, ridge, inset, outset şeklide sıralanabilir. W3Schools ile kenarlıkların kullanımı hakkında detaylı bilgi alabilirsiniz; CSS Border

Bir örnek daha verip kenarlıklar konusunu bitirelim,
.sidebar h2 {
border:3px double #000000;
margin:0;
padding:0 1em;
line-height:1.5em;
}

yukarıdaki kodda görebileceğiniz gibi çizgi kalınlığı arttırıldı ve double kenarlık çizgi tipi kullanıldı. Böylece, alttaki görüntü elde edildi;
sidebar-Double-kenarlık

Sidebar Başlık Düzenleme - Arka Plan Renk Ekleme

Sidebar başlıklarınızın arka plan renklerini değiştirmek isterseniz, alttaki kodu kullanabilirsiniz;

.sidebar h2 {
background:#00FF99;
margin:0;
padding:0 1em;
line-height:2em;
}

Kırmızı ile renklendirilmiş kısma istediğiniz renk kodunu yazarak farklı renkler kullabilirsiniz. Renk kodlarını öğrenmek ve farklı renkler tasarlamak ya da karıştırmak için sizlere Color Blender sitesini öneririm. Farklı renk kodlarını keşfetmek için; Keşif Aracı da kullanılabilir. Farklı önerileri olanlarda yorumlar kısmında belirtebilir.

Sidebar-arka-plan-renk

Blogger Sidebar Başlık Düzenleme - Başlıkların Arka Planına Resim Ekleme
arka-planına-resim-ekleme

Sidebar başlık alanına arka plan resmi eklenebilir. Bunun için öncelikle kendi tasarımınız olan bir resmi ya da başlık arka planı olarak kullanılabilecek bir resmi tinypic.com, photobucket.com gibi yükleyici sitelere yükleyin ve adresini kopyalayın. Ardından alttaki kodda URL-ADRESI kısmına kopyaladığınız resim linkini yapıştırın.
.sidebar h2 {
background:url(URL-ADRESI)no-repeat;
margin:0px;
padding:0px 20px 0px 30px;
line-height:60px;
}

Yukarıdaki koda resim linkinizi yapıştırdıktan sonra kodu temanıza ekleyin. Örnek olarak yüklediğim resim 220 genişlik ve 60 yüksekliğe sahip. Tasarlayacağınız resimlerde sizler de resim genişliğinizin temanızın sidebar genişliğinden büyük olmamasına dikkat edin. Tasarladığınız resmin yüksekliğinizi yukarıdaki kodda mavi ile renklendirilmiş kısma yerleştirmeyi unutmayın.

Temanızı görünütlediğinizde başlık yazıları istediğiniz yerde değilse padding değerleri ile başlıkların konumunu değiştirebilir, arka plan resminize uygun hale getirebilirsiniz. Sonuç olarak alttaki örnek resimdeki gibi sidebar başlık alanları oluşturabilirsiniz;

Başlıklara-Arka-Plan-Resim-Ekleme

Sidebar başlık düzenleme konusu hakkında sizlere kısa ipuçları vermeye çalıştım. Gerisi, sizlerin hayal gücünüz ile bilginizin birleşiminde saklı... Ancak yazıda anlaşılmayan kısımlar varsa ya da merak ettiğiniz ekstra konular varsa, yorumlara yazabilirsiniz.

Kolay gelsin...
Yorum
Vefasız Alem dedi ki...
Çok teşekkür ederim bu konudaki yardımlarınız için.Yazı gayet güzel ve akıcı olmuş.Dediklerinizi deneyeceğim.Bir kaç sorum olursa tekrar buradan iletirim.
Vefasız Alem dedi ki...
peki gadgetlar arasındaki boşluğu hangi kodla değiştirebilirm.Hem gadgetlarda hemde sayfadaki yazıların arasında büyük boşluk var.Sayfama bakabilirsiniz.
www.vefasizalem.org
Sade dedi ki...
Faydalı bir yazı oldusa ne mutlu... Gadgetler arası boşluk için

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:50px 0 1.5em;
}

padding değerini 50px yaparak deneyebilirsin.

Yazılar arası boşluk ise arada kullandığınız ayıractan dolayı biraz fazla.
Vefasız Alem dedi ki...
peki anlaadım ama benim tema da belirttiğiniz yer şöyle;
.sidebar .widget, .main .widget {
padding: 15px 10px 15px 20px;
}

Sizin verdiğinizi denediğimde en üstteki gadget biraz daha üste çıktı.
Sade dedi ki...
ilk değeri arttırabilirsin; 15i 20 30 diye arttırabilirsin; ilk gadgetda dahil tüm gadgetlar aşağı gidecek ve aralar açılacak.
Vefasız Alem dedi ki...
peki çok sağolun hallettim.Şu internet ortamında sizin gibi yardımcı olabilen çok az kişi var.Bende sizi takip ediyorum.tekrar teşekkürler.
Sade dedi ki...
elimden geleni yapıyorum sorununun hallolmasına sevindim. Kolay gelsin...
Gökhan dedi ki...
www.divxcini.net divx film izle, film indir
http://www.divxcini.net
gez-ye-ic dedi ki...
Çok güzel ve biz gibi yeni başlayanlar için çok faydalı çalışma. Teşekkürler Sade.
Burada yukarıdaki konu başlığına yorum yapabiliyoruz. Bir de yeni konu başlığı açıp genel forum yaratmak iyi olmaz mı acaba? Benimki sadece bir öneri. Mesela, blog daki kayıtlarımızın, yani tüm blogun yedeğini nasıl alabiliriz gibi.
Sade dedi ki...
Forumlar zaten hale hazırda internette var. Blogun ruhuna ters our diye düşünüyorum. Ancak yeni konu önerileriniz varsa; sağ üst kösede yer alan iletişim formu ile bana ulaştırabilirsiniz. yada sağ alt köşede var olan iletişim bilgilerimi kullanarak irtibata geçebilirsiniz, ya da hiç olmadı yazı sonlarındaki yorumlarda da bunu belirtebilirsiniz. Hiç sorun olmaz...
gez-ye-ic dedi ki...
Merhabalar,
Sidebar'daki etiketler için bir düşüncem var ama nasıl yapılabilir bilmiyorum.
Bildiğiniz gibi blog arşivinde bir ayı tıkladığınızda o aya ait kayıtların listesi aşağıya doğru açılıyor ve istediğinizi tıklayıp direkt o kayda gidebiliyorsunuz. Aynı mantığın, Etiketlere nasıl uygulanır onu merak ediyorum. Yani, bir etiketi tıklayınca, aşağıya doğru açılan bir şekilde o etikete ait kayıtlar açılsın ve ordan da direkt giriş yapılabilsin.
Şimdiden teşekkürler
Sade dedi ki...
Merhaba,

Alta açılır menü şeklinde değil de etikete tıklandığında yeni sayfada o etikete ait olan tüm yazılarınızın gösterilebilmesi mümkün. Bunu daha önce Blogger Yazılarınızı Sadece Başlıkları Görüntülenecek Şekilde Listelemek başlıklı yazıda açıklamay çalışmıştım. Sanırım işinize yarar.

Kolay gelsin...
gez-ye-ic dedi ki...
Merhaba, Teşekkürler Sade. Verdiğiniz linkdeki çalışmayı denedim, kayıt alanına yeni pencere açarak yapıyor. Ama maalesef amacıma uygun gelmedi. Aşağıya açılabilir olsaydı çok hoş olacaktı. Tarih bazındaki Arşiv'den benzeterek keşke yapılabilseydi. Tekrar teşekkürler.
Sade dedi ki...
Merhaba, Blogger'dan istekler bitmez... Dinlerler mi bilinmez...
Selahattin Tosuner dedi ki...
Merhaba Sade,
Aklıma bir konu daha geldi, bilmiyorum ilgilenen olur mu?
Profilimdeki resim yerine, picasaweb den birkaç resim içeren slideshow eklemek daha ilginç olmaz mı? Blog da farklılık isteyenler için diye düşündüm. Ben koda girip picasaweb den aldığım embed kodu gömmek istedim ama olmadı. İmkanı varmıdır acaba?
Sade dedi ki...
Merhaba Selahattin Bey, güzel fikirler bunlar. Paylaştığınız için çok teşekkürler... Yorumlar kısmı için şöyle bir konu anlatmıştım ama orada da tek resim eklenebiliyor.

Sidebar'da profil görüntülenirken dediğinize benzer bir olayıda şöyle yapabiliriz; Arşiv, Yazı, Anasayfa da görüntülenmek üzere 3 farklı profil oluşturulur, sadece resimleri farklı olur. Böylece slideshow gibi olmasada 3 farklı resim kullanabiliriz. Aklıma gelen çözüm böyle... Umarım işinize yarar.
gez-ye-ic dedi ki...
Merhabalar,
Bunun için bir çözüm ürettim. Yaptıklarımı açıklayayım.
1. Kod'a girip "Hakkımda" yazan sidebar başlığını kaldırdım.
2. hakkımda gadget'inden de resmi kaldırdım.
3.Gadget ekleye girdim, slideshow ekledim.
4.Tek sorunum var, o da slideshow'un genişliğini ayarlayamadım. Problemi anlatabilmek için, bunu uyguladığım deneme sitem http://gezensello.blogspot.com a bakmanızı rica ediyor. Slideshow u genişletmek için hangi kodu eklemem lazım, yardımcı olabilseniz, çözümü tam ortaya koymuş olacağız. Şimdiden teşekkürler
Sade dedi ki...
Çok güzek bir yöntem. Teşekkürler...
Kullandığınız slideshow kod halinde mi yoksa sadece adres mi?
gez-ye-ic dedi ki...
Kod olarak bunlar giriyor. Buraya kodu yazdırmadı sayfanız, size email ile göndereceğim.
bu kodun içine width:'160' gibi birşey eklemek istedim, ama beceremedim. Style ın içine sokmak istedim ama onu da başaramadım. w3schools dan CSS öğrenmeye çalışıyorum ama henüz bunu başarma noktasına gelemedim. Şimididen teşekkürler
gez-ye-ic dedi ki...
Teşekkürler Sade,
Slideshow un genişliğini kontrol edememe probleminin kullandığım şablodan kaynaklandığını tespit ettim. Başka şablonda problem çıkarmıyor. Benim kullandığım şablonda problem çıkarmasını da, picasaweb e koyduğum fotoğrafların boyutunu küçülterek yani- 180x133 yaparak çözdüm. Şu anda çalışıyor. İlgilenenler http://gez-ye-ic.blogspot.com dan görebilirler. Sonuç olarak, gadget ekle 'den giderek eklenen slideshow güzel çalışıyor. Slide'lar sınırsız dönüyor ve hızını yavaş,orta, hızlı şeklinde ayarlayabiliyorsunuz. Blogda "profil" alanında foto koymak yerine slideshow koymanın nasıl yapılabileceğini yukarıda vermiş olduk.
Sade dedi ki...
Size gönderdiğim koddamı çalışmadı temanızda? Denediniz mi?

Alternatif bir yöntem bulmuşsunuz :D sayenizde profil yerine slideshow yapmak isteyen olursa sanırım bu bilgilerden yararlanabilir.
Selahattin Tosuner dedi ki...
size mail ile cevap vermiştim, maalesef olmadı, genişliği ayarlamadı.
Şimdi de 960px li 2 kolonlu şablonumu 960px li 3 kolonluya çevirmeye çalışıyorum.
Diğer taraftan, 960px lı, 1080px e çevirmek nasıl yapılır acaba?
Sade dedi ki...
resim boyutlarınızın yeterli olması şazım öncelikle, dahası size gönderdiğim kodlar ile bu yapılıyor ama siz nasıl yapamadınız nasıl bir sorunla karşılaştınız anlamadım.
cosar dedi ki...
güzel ve anlaşılır bilgiler için teşekkür ederim. siteniz de güzel olmuş tebrik ederim.
Ben şunu sormak istiyorum. mesela blogumuzun yan tarafında bahsettiğiniz başlıklar var. hakkımda, blog arşivi vs gibi... bunlardan arşivin içindekileri nasıl yukarıda örneğini verdiğimiz şekle sokabiliriz. biraz daha açayım; yan tarafta "sitemden ana başlıklar" diye bir başlık açtınız.onun altına sinema,spor,mizah vs etiketler sıraladınız.

SİTEDEN ANA BAŞLIKLAR
sinema
tiyatro
spor
mizah
.
.
.

bunları nasıl süslü renkli başlıklar yapabiliriz,öyle bir yöntem var mı?
Sade dedi ki...
@Teşekkürle cosar. Temayı beğenmene de çok sevindim.

Başlık altındaki bölümleri renklendirmek için özellikle etiketler için kültür mantarı blogunda bir eklenti vardı. Adresi şöyle; Colored Label Cloud for blogger

Hakkımda kısmı için önerim, javascript gadget eklemek ve içine kodlar eşliğinde hakkımda yazısı yazmak olur. Böylece hem renkli hem farklı resimli bir hakkımda alanı oluşturulabilir. Benim blogun sol altında benzer bir kısım var. Ama arşiv için böyle bir şeyi hiç düşünmemiştim aklımda olsun eğer bir öneri aklıma gelirse seni haberda ederim.

Umarım işine yarar.
Adsız dedi ki...
slm mail attım ama görmediniz heralde ilk defa çok begendigim bi blogger teması buldum ama firefox ve explorer de sorun veriyo tema sidebar gadgetler falan yazıların altında çıkıyor n'olur bi el atın şuna
demo
http://btemplates.com/2009/11/23/dark-orange/demo/
Sade dedi ki...
herikisi ile de kontrol ettim herhangi bir sorun görünmüyor.
Adsız dedi ki...
gerçekten mi ben evden + internet cafeden baktım gadgetler sayfa altında görünüyoru ki halende öyle görünüyor bende chrome la iyi ama firefox ve ie ile eskisisi gibi ben bu işten bişey anlamadım
Sade dedi ki...
Elin teması için yanlış bilgi verecek değilim ki :)) Gerçekten sorunsuz çalışıyor.
Adsız dedi ki...
tamam saolun rahatsız ettim özür dilerim
Sade dedi ki...
Ne rahatszılığı. Esas sen Kusura bakma, tema düzgün çalışıyor yardım edebileceğim bir konu göremiyorum.
Adsız dedi ki...
yok est. galiba sorun bende ya da internete baglanddıgım pc lerde virüs falan var ...
film izle dedi ki...
Çok kullanışlı bir paylaşım olmuş teşekkürler.
hazar dedi ki...
Faydalı bir konu, bloglar sizin gibi düşünenler sayesinde gelişiyor güzelleşiyorlar. Başarılar
elif dedi ki...
ayrıntılı anlatım için teşekkürler.
ben minima şablonunu kullanıyorum ve sidebardaki başlıklar yerine resim eklemek istiyorum. bu yazınızdaki gibi yapmaya çalıştım ama bende bahsettiğiniz kodlar yok.
ne yaabilirim?
Serhat dedi ki...
gerçekten çok sade ve güzel anlatılmış teşekkürler.

kendi blogumda da kullandım
http://toy-yazi.blogspot.com/
zeynep güler dedi ki...
bloguma yeni bir sidebar oluşturmak istiyorum.yardımcı olabilecek var mı? herogrencix@gmail.com e-mail adresim
can dedi ki...
çalışmalariniz gerçekten çok başarılı teşekkür ederiz
Adsız dedi ki...
http://bugunkihaber.blogspot.com/
Aysun say dedi ki...
sayende çok güzel oldu blogum
yüreğine sağlık...
basitkolayyemekler teşekkürler
raşit ergün dedi ki...
başarılarınızın devamı dılerım ama ben yapamadım bunu nıe se artıkın http://seslizonguldak.blogspot.com/