Blogger Profil düzenleme, sadece CSS kodları ile yapılabilir. Herhangi bir ek dosya eklemenize gerek yoktur. Profil resminin etrafına kenarlık, profil bilgilerinin içine resim eklenebilir. Örnek olması için, yandaki resimdeki gibi görüntülenecek profil düzenledim. Fare ile üzerine gelindiğinde hover efektleri ile profil resmi etrafındaki sınır (border) değişecek. Profil açıklamasının üstüne gelince sağ alt köşede ufak bir resim görüntülenecek. Dahası sizin hayal gücünüze kalmış.
Temanızda ]]></b:skin> kodunu bulun ve üst satırına alttaki kodu yapıştırın. Önizleme yaptığınızda profilinizdeki düzenlemeleri göreceksiniz. Örnek olarak test blogunun sağ sütununda düzenlenen profili görüntüleyebilirsiniz.
.profile-img {
height: 30px;
width: 30px;
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border:3px solid #3B5998;
}
.profile-img:hover {
border:3px dotted #3B5998;
}
.profile-data {
margin:0 10px 20px 10px;
padding:3px;
font: bold 10pt "ms sans serif", verdana,Arial;
color:#3B5998;
line-height: 1.6em;
text-align:left;
text-transform:lowercase;
}
.profile-data:hover {
color:#3B3A3B;
}
.profile-datablock {
margin:0.5em 0 .5em;
}
.profile-datablock:hover {
background: transparent url(http://i46.tinypic.com/11me0jd.jpg) no-repeat bottom right ;
}
.profile-textblock {
color:#333;
margin: 0.5em 0;
line-height: 1.6em;
padding:5px 0 5px 0;
border-top:2px solid #3B5998;
border-bottom:2px solid #3B5998;
}
Yukarıdaki kodda sınır (border) renklerini, resim boyutunu, arkaplan rengini, profil yazısının altında yer alan kısımdaki küçük resmi vb. değişiktirmek mümkün.
Kolay gelsin...
.profile-img boyutlarını büyüterbilirsiniz. Bunu yapınca yazı alanının alta kaydırılması gerekiyor bunun için .profile-data kısmındaki padding değerini değiştirebilirsiniz. Örnek;
.profile-img {
height: 90px;
width: 90px;
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border:3px solid #3B5998;
}
.profile-img:hover {
border:3px dotted #3B5998;
}
.profile-data {
margin:0 10px 20px 10px;
padding: 40px;
font: bold 10pt "ms sans serif", verdana,Arial;
color:#3B5998;
line-height: 1.6em;
text-align:left;
text-transform:lowercase;
}
kodun gersi aynı kalır. Merak edenler için örnek olsun diye yazıyorum. Umarım faydası olur.
Birde crtl-f ile kelimeyi bulamadım şablonu genişlettim yine olmuyor, kendi çabamla buldum footer'ın hemen altındaydı yanlız ben daha evvel adres çubuğuna icon eklemek istiyordum o sıra o kısma bişeyler eklemişim olmamıştı oda öyle kalmıştı sonra düzenlemeyede çekindim
Neyse ben biraz daha bakayım bilgiler için teşekkür ederim.
ilginize çok teşekkür ederim cevabınızı ogün hemen denedim ama maalesef şablonumda "style" kodunu bir türlü bulamadım ctrl-f ile de aramama rağmen yok.
Ama sorun değil bu şekilde de kullanabilirim teşekkür ederim.
Birde adres çubuğuna icon yerleştirmeyi siz anlatsanız çok sevinirim birçok kez denedim ama yapamadım...
Herşey için tekrar teşekkür ederim takibinizdeyim..
Yorum Uyarıları:
1- Yazıyı, Delicious, Stumble, FriendFeed, Facebook vb. paylaş tuşları ile arkadaşlarınızla paylaşın.2- Teşekkür etmekten ya da soru sormaktan çekinmeyin.
3- Sorularınız cevapsız kalmayacaktır. Sayfa adresini unutmayın, yeter.
4- Cevap yazma süresi değişiklik gösterebilir.
5- Yorumunuz, yorum kurallarına uygunsa yorum denetiminden sonra yayınlanacaktır.