26 Şubat 2010

Blogger-profil-düzenlemeBlogger'ın standart olarak kullanıcılarına sunmuş olduğu profili, CSS kodları ile kişiselleştirmek mümkün. Standart değil, özgün profiller için geliyor bu yazı...

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ış.

DEMO
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...
Yorum
Sade dedi ki...
Daha büyük resim yüklemek isterseniz;
.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.
Sade dedi ki...
Büyütülmüş profil resmi ile ilgili bi örnek görmek isterseniz bu adresi ziyaret edebilirsiniz.
Nur dedi ki...
Çık olmuyor, tamda o kodun hemen üstüne yazdıklarınızı aynen copyledim yapıştırdım cık olmadı
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.
Sade dedi ki...
Merhaba, --></style> kodunun üstüne yapıştırabilirsiniz. Sizin şalon versiyonu farklı...
Sade dedi ki...
şalon değil şablon :)
Nur dedi ki...
Merhaba,
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..