23 Temmuz 2014 Çarşamba

Blogger Profil Eklentisini Özelleştirmek

Blogger'in her sitede otomatik oluşturulan Google+ profil sayfasını özelleştirmek, artık oldukca basit.
Google+ profil sayfanızı özelleştirmek için kullanacağımız sadece 1 adet css kod olacaktır.
Google+'nın sitenize bildiğiniz gibi çok büyük bir faydası bulunmaktadır.Örneğin ; Her ziyaretci okuduğu yazarın kim olduğunu bilmek ister tıpkı benim gibi .Tabi bunu öğrenirken sitenizdeki Google+ alanının kötü görünmesi sade ve basit görünmesi sitenizdeki ziyaretci sayısını düşürecektir.
Şuan sizlere paylaşacağım eklenti, kurulum bakımından oldukca basit ve bir o kadarda güzel bir eklentidir.Bu eklentiyi kurunca eski, sade eklentideki profil resminin (border) özelliği kalkmış yerine renkli ve hover özelliği gelmiştir,ayrıca resimde gördüğünüz gibi hakkımda yazısının üzerine mause ile geldikten sonra  efekti ortaya çıkıyor.Anlatıma birde dilerseniz önizleme sitesinden bakınız.
Sitenize bu kodu eklemek için öncelikle Şablon > Html'yi Düzenle kısmından ]]></b:skin> kodunu bulun ve hemen bir üst satırına aşağıdaki kodu ekleyin.


.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; }

0 yorum:

Yorum Gönder

Yorum yapmaktan çekinmeyin ! Görüş bildirin, sorular sorun...

 
Copyright © . Sinan İmam Vine - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger