Sosyal Medya Eklentili Yazar Hakkında Widget

Blogger Yazar Profili Eklentisi

Yine çok kaliteli bir eklenti ile karşınızdayım.Bu eklentimiz Yazar profili eklentisi olup üstelik sosyal medya hesaplarınızı da  hemen profilinizin altında sergilemenize olanak sunuyor.Yani hem sizin hakkınızda kısa açıklamanızı yazabilir hemde ziyaretçilerinize sosyal medya beğenileri yaptırabilirsiniz.Bence diğer yazar profili eklentilerinden çok kaliteli ve kullanışlı olan bu eklentinin hiç zaman kaybetmeden özizlemsini ve kodlarını sizinle paylaşmak istiyorum.

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/> <style> .wgauthr-widget { background:#fff; background-color:#fff; overflow:hidden; position:relative; margin-bottom:30px; padding:10px 26px; } .wg-crnrbckgr:before { content:""; position:absolute; top:0; right:0; z-index:40; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08); box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08); display:block; width:0; border-color:#fff #eee #fff #fff; border-style:solid; border-width:0 16px 16px 0; } .wg-crnrbckgr { position:relative; background-color:#47C2DC; height:90px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:cover!important; -moz-background-size:cover!important; -o-background-size:cover!important; background-size:cover!important; } .wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg img { height:80px; width:80px; } .wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo span { display:block; letter-spacing:1px; text-transform:uppercase; } .wg-avtlninfoaa { font-size:14px; line-height:21px serif,font-weight:normal,color:#666; padding:22px 25px 8px; } .dwnlin { margin-top:6px; text-align:center; border-top:2px solid #eee; padding:8px 25px; } .wgauthr-widget.wgathrlns { background:#fff; margin-bottom:30px; padding:0; } .wg-golblue { width:100%; height:50px; padding:0 0 0 30px; } .wg-goliconn { background:#47C2DC; width:44px; height:44px; border-radius:10000px; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; transition:all 1s ease-in-out; cursor:pointer; float:left; margin-right:5px; } .wg-goliconn:hover { background:#ddd; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .wg-goliconn img { padding-top:5px; padding-left:5px; } .wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg { position:absolute; bottom:-20px; left:30px; border-radius:50%; overflow:hidden; background-color:#fff; border:5px solid #fff; } .wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo { padding-left:130px; padding-top:46px; color:#fff; } .wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam { font-size:14px; line-height:16px; } .wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju { font-size:10px; } </style> <div class="wgauthr-widget wgathrlns"> <div class="wg-crnrbckgr" style="background-image: url(http://i.hizliresim.com/YjYmLk.jpg)"> <div class="wgavtrg"> <img alt="Birsorumolacak" src="http://i.hizliresim.com/89q8kn.jpg" /></div> <div class="wgavtinfo"> <span class="wgurnaam">Yazarın İsmi</span> <span class="wgurju">Kısa açıklama</span></div> </div> <div class="wg-avtlninfoaa"> Kendiniz hakkındaki bilgileri bu bölüme yazınız. </div> <div class="dwnlin"> </div> <div class='wg-golblue'> <div class='wg-goliconn'> <a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div> <div class='wg-goliconn'> <a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div> <div class='wg-goliconn'> <a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div> <div class='wg-goliconn'> <a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div> <div class='wg-goliconn'> <a href='http://feeds.feedburner.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div> </div> </div>

Kod içerisinde değistirilmesi gereken yerler:

Not:Aşağıdaki bölümleri kod içerisinde Ctrl+F yardımı ile bulup değiştirebilirsiniz.

1/ http://www.plus.google.com/#   ( # işareti yerine google + Id'niz)

2/ http://www.youtube.com/#         ( # işareti yerine youtube  Id'niz)

3/ http://feeds.feedburner.com/#      ( # işareti yerine Rss  Id'niz)

4/ http://www.twitter.com/#      ( # işareti yerine Twitter  Adresiniz)

5/ http://www.facebook.com/#       ( # işareti yerine Facebook  Id'niz)

6/ http://i.hizliresim.com/89q8kn.jpg   yerine kendi profil fotoğrafınız.

7/ Son olarak da benim bilgilerim yerine kendi bilgilerinizi girin ve keyfini çıkarın.

8/ Vermiş olduğum kodu Yerleşim Gadget ekle Html/Javascript bölümünden ekleyebilirsiniz.



Yapamadığınız bölümleri  butonunu kullanarak sorabilirsiniz.