Blogger Widgetleri Ayrı Ayrı Düzenlemek

Blogger'da kullandığınız widgetlerin her birine ayrı ayrı özellikler verebilir, her birinin görünümünü ayrı ayrı düzenleyebilirsiniz. Örneğin bir “Label” widgeti farklı görünürken, linklerle ilgili bir widgetiniz ondan çok farklı görünecektir. Şimdi bu işlemleri yapmanız için size kodları verelim... Bunu nasıl yapacağız? Her Widget'in kendine özgü bir ID'si olduğu için bu kısımlarda yapacağımız küçük değişikliklerle Widgetlerimizin farklı görünmesini sağlayacağız.

Bu Screen Blogbulk'tan Alındı

Widget ID'lerinize ulaşmak için şu adımları izleyin;

1. Blogger yönetim panelinize giriş yapın
2. Blogunuzun yedeğini alın
3. Şablon sekmesine gidin
4. HTML düzenle butonuna tıklayın
5. Aşağıdaki kodları bulun.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Image1' locked='false' title='My Picture' type='Image'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

Bu kodlarda gördüğünüz gibi sizin şuan blogunuzda yayınlanmış olan bütün Widgetlergörülüyor. Ekstra bir widget koydup kaydettiğinizde bu listeye eklenecektir. Bu listede görüyorsunuz ki Label widgetinin ID'si “Label1” olarak düzenlenmiş. Başka bir tane daha eklerseniz onunda farklı bir ID'si olacak...

Widget görünümleri nasıl değişir?

Aşağıdaki kodları bulun;

]]></b:skin>
</head>

Bu kodlardan istediğiniz seçebilirsiniz. Üsttekini bulamazsanız alttakini kullanabilirsiniz. Bu kodların üstüne aşağıdaki kodları yapıştırın;

#Label1 {
background: #DFF7FF;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #45B7DF;
}
#Label1 h2 {
background: url(http://i40.tinypic.com/12644z4.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-bottom:2px solid #FFE25F;
}
#LinkList1 h2 {
background: url(http://i40.tinypic.com/wummhj.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;
}
#Image1 {
background:#FFDFFE;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #FFAFFD;
}
#Image1 h2 {
background: url(http://i44.tinypic.com/qywqog.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}
#Image1 img {
border-width:0px;
padding-left:25px;
}

Gerçekten uzun bir kod listesi oldu. Peki şimdi biraz açıklama yapalım. Bu listede genel olarak neleri değiştirebilirsiniz. Kodlarla ilgili basit açıklamalar yapalım;

Background: Bu kodun karşısındaki renk kodlarını değiştirmeniz durumunda renklerde değişiklik olur ve sizin istediğiniz rengi buraya girebilirsiniz. Zira blogunuzun genel renkleriyle bu kodları düzenleyebilirsiniz. Yine “background: url(http://i40.tinypic.com/12644z4.jpg)” şeklinde belirtilmiş kodlarıda düzenleyebilirsiniz. Kendinize ait bir resmi buraya koyabilir ve kodu daha da özelleştirebilirsiniz.

Border-bottom: Bu kodlar alt çizgiyi belirtir. Alt çizgiden ziyade alt kenarlıktır. Değiştirebilir veya kaldırabilirsiniz. Nokta, çizgi, tek çizgi şeklinde ayarlanabilir, rengi değiştirilebilir.

Color: Bu kod karşısındaki renk kodları değiştirilebilir. Blogunuza uygun şekilde kişiselleştirebilirsiniz.

Genel olarak değiştirebileceğiniz kısımlar bunlardır. Herhangi bir sıkıntı veya çözemediğiniz bir durum olduğunda bize ulaşın...

Bu yazı http://webmaster.10line.net adresinde yayınlandı.