17 Mart 2010

Takip Listem, temanızda farklılığınızı ortaya koymanız için farklı yöntemlerle nasıl düzenleme yapabileceğinize dair birçok yazı içeriyor. Temel olarak verilen bilgileri, sizler kendinize özgü düzenleyebilir ve geliştirebilirsiniz. Yine bu amaç doğrultusunda, eklenti düzenleme konusunu ele alacağız. Eklenti düzenleme yazısı ile her eklentiyi ayrı ayrı kişileştirebilirsiniz. Yazı tipi, yazı boyutu, renk, arka plan renkleri, resimler, sınır çizgileri gibi aklınıza ne geliyorsa hepsini değiştirebilirsiniz.

Bu yazıyı okurken aklınıza Arka Plan Renk Değiştirme ve Simge Ekleme ve Sütun Başlık Düzenleme gibi yazılardan da yardım alındığını fark edebilirsiniz. Zaten bu konular birbirleri ile bağlantılıdır. Eğer kaçırdığınız bir yazı varsa bir göz atmanızı öneririm. Ve tabiki bir daha yazı kaçırtmamak içinde yazı altındaki bölümden yazıların RSS beslemesine abone olmanızı tavsiye ederim.

Hangi eklenti düzenlenmek isteniyorsa, o etiketin id yani eklentinin kod adını bulunmalı. Bu iki yöntemle mümkün; Birincisi, Sayfa Ögelerinde yer alan eklentinin düzenle kısmına tıklanır ve açılan pencerede web çubuğundaki adresin sonu kontrol edilir. Dikkat ederseniz adresin sonunda eşittir var ve eşittirden sonra eklentinin kod adı yer alıyor.



İkinci yöntem ise, yerleşim ► Html'yi düzenle yolu izlendiğinde temanızda alttakine benzer bir kod dizini bulabilirsiniz. Sütunlar için; sidebar-wrapper şeklinde aratmanız yeterli. Bu kodlar, sütunlarda yer alan tüm eklentilerin adını öğrenebileceğiniz kısımdır.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Etiketler' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Arşivi' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Hakkımda' type='Profile'/>
</b:section>
</div>

Yukarıdaki kodda; Etiket Eklenti ID ► Label1, Link Listesi Eklenti ID ► LinkList1, Arşiv Eklenti ID ► BlogArchive1 şeklindedir.

Her Eklentiyi Ayrı Ayrı Kişiselleştirme
Düzenlemek istenilen eklentilerin ID isimleri bulunduktan sonra Kişileştirme kısmına geçebiliriz. Bunun için temamıza bu eklentilere uygun CSS kodları yazmamız yeterli.

Etiket Eklentisi ile ilgili bir örnek ile konu daha iyi anlaşılacaktır;
#Label1 {
background: #DFF7FF;
padding-left:15px;
font:14px Arial;
border-left:2px solid #45B7DF;
}

#Label1 h2 {
background: url(http://i40.tinypic.com/t64jzd.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
margin-bottom:5px;
font-size:0px;
}

Yukarıdaki CSSCSS kodunda Label1 kısmı eklenti alanına dair düzenlemeleri içerir.
Label1 h2 kısmı ise o etiketin başlık düzenlemelerini yapabileceğiniz kısımdır.

Tabi Etiket Alanının arka plan rengi, yazı tipi ve boyutu, kenarlıklarını düzenleyebilirsiniz.

Aynı şekilde başlık içinde gerekli düzenlemeleri yapabilirsiniz. Detaylı başlık düzenleme için CSS ile Başlık Düzenleme yazısını okuyabilirsiniz.

Şimdi en yukarıda sütunlara eklenmiş eklentileri sıralamıştım. Her eklenti için ayrı ayrı düzenleme yapılabilir. Örnek;
#Label1 {
background: #DFF7FF;
padding-left:15px;
font:14px Arial;
border-left:2px solid #45B7DF;
}

#Label1 h2 {
background: url(http://i40.tinypic.com/t64jzd.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
margin-bottom:5px;
font-size:0px;
}

#LinkList1 {
background:#FFF4BF;
padding-left:15px;
font:14px Arial;
border-left:2px solid #FFE25F;
}

#LinkList1 h2 {
background: url(http://i41.tinypic.com/2cog745.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}

#LinkList1 a:link {
color:#5F5F5F;
text-decoration:none;
}
#LinkList1 a:visited {
color:#5F5F5F;
text-decoration:none;
}
#LinkList1 a:hover {
color:$titlecolor;
text-decoration:underline;
}

#BlogArchive1 {
background:#FFDFFE;
padding-left:15px;
font:14px Arial;
border-left:2px solid #FFAFFD;
}

#BlogArchive1 h2 {
background: url(http://i39.tinypic.com/20j0m4k.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}

#BlogArchive1 img {
border-width:0px;
padding-left:25px;
}

Bu yukarıdaki kodu, temanızda yer alan ]]></b:skin> kodunun hemen üstüne yerleştirebilirsiniz. Eklenti Düzenleme işlemi bitti. Her Eklentiyi Ayrı Ayrı Kişiselleştirme tamamen sizin hayal gücünüzle paralel sonuç verecek. Yukarıdaki kodu yerleştirdikten, sonra blogunuzdaki eklentilerin dönüşümünü görmeniz için alttaki resmi oluşturdum. 

eklenti-düzen

Diğer eklentileriniz içinde kendiniz değişiklikler yaparak deneme yapabilirsiniz. Umarım hoşunuza gider. Herhangi bir sorunla karşılaşır ya da konu hakkında farklı bir öneriniz varsa lütfen yorumlar kısmında paylaşın. Unutmayın, El Elden Üstündür.

Kolay Gelsin...
Yorum
Adsız dedi ki...
mrb Zeynel Bey,
Daha önce lightbox uygulamasını yakın zamanda yayınlayacagım demiştiniz ne durumda acaba ? bu arada daha önce teknomobi anlatmıştı ama uygulama hatası alıyorduk tam olarak entegre edilmiyordu ... kolay gelsin
Sade dedi ki...
tamam hatırlattığın iyi oldu yazayım lightbox hakkında birşeyler...
The-Ice dedi ki...
Hocam ben Tepkiler'İn id'sini bulamadım renkleri nasıl değiştirebilirim?
jlş dedi ki...
çö.lkl