blogger siteniz için yazar hakkında eklentisi sidebarda güzel bir görüntü veriyo bunu bi arkadaştan almıştım kullanmak istiyenler olur diye paylaşmaya karar verdim :) önce html genişletip css ekliyoruz düzenlemeniz gereken yerleri kendinize göre düzenleyebilirsiniz.
artık :)
.sidebarblok{border:1px solid #ebebeb; background-image:url(http://s22.postimg.org/ag2vxmfm5/seffaf.png); background-repeat:repeat; padding:5px; margin:0 0 15px 0; position:relative;}
.sidebaricerik{ background:#fff; border:1px solid #f0f0f0; padding:3px 7px; min-height:100px; }
.sidebaricerik-2{ padding:3px 7px 35px 7px !important; }
.sidebaricerik-3{padding:4px 0 4px 0;}
.sidebarbaslik{ font-size:14px; border-bottom:1px solid #ebebeb; padding:7px 0 9px 0px; }
.sidebarbaslik span{border-bottom:1px solid #177a8e; padding:0 0 9px 0;}
.social-box{ width:147px; height:55px; float:left; margin:4px 0; border-top:3px; border-top-style:solid;}
.fb-box{ border-top-color:#8098c2;}
.tw-box{ border-top-color:#26bdef; margin-left:8px;}
.rss-box{ border-top-color:#ffb54d; width:302px; height:55px;}
.social-box p{ color:#fff; font-size:13px;}
.twitterblok{ background:url(http://s24.postimg.org/wlqmbcabl/twitter.jpg) top center repeat-x #fff; font-size:11px !important;}
.facebookblok{ background:url(http://s7.postimg.org/uk0cefzev/facebook.jpg) top center repeat-x #fff; font-size:11px !important;}
.sontweet{ font-size:11px; line-height:19px; margin:10px 0 5px 0;}
.fb-facepile{ border:none !important; margin:10px 0 25px 0;}
.twitter-btn {
background: #09acec url(http://s10.postimg.org/6rqh2f7p1/noise.png) repeat;
background: -moz-linear-gradient(top, #09acec 0%, #07a2df 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09acec), to(#07a2df));
border:1px solid #0290c8;
color: #fff;
font-size:11px;
height:27px; line-height:27px;
text-align: center;
text-shadow: none !important;
width: 100px;
margin:-34px 0 0 190px;
-moz-box-shadow: inset 0 1px 0 0 #39c5fc;
-webkit-box-shadow: inset 0 1px 0 0 #39c5fc;
}
.twitter-btn:hover{ background:#069cd7; cursor:pointer;}
.fb-btn {
background: #6e86bd url(http://s10.postimg.org/6rqh2f7p1/noise.png) repeat;
background: -moz-linear-gradient(top, #6e86bd 0%, #6680b9 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6e86bd), to(#6680b9));
border:1px solid #3f5b98;
color: #fff;
font-size:11px;
height:27px; line-height:27px;
text-align: center;
text-shadow: none !important;
width: 100px;
margin:-34px 0 0 190px;
-moz-box-shadow: inset 0 1px 0 0 #abbbdf;
-webkit-box-shadow: inset 0 1px 0 0 #abbbdf;
}
.fb-btn:Hover{ background:#5871a7; cursor:pointer;}
.Tolgaca{ margin:5px 0 0 0;}
.Tolgaca img{ width:58px; height:105px; padding:1px; border:1px solid #ebebeb; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; float:left; margin:2px 10px 0 0; }
.Tolgaca p{font-size:15px; margin:0 0 5px 0;}
.Tolgaca span{ font-size:11px; color:#bebebe; line-height:19px;}
.my-social{ height:45px; line-height:45px; background:#f8f8f8; text-shadow:1px 1px 1px #fff; border-top:1px solid #f3f3f3; margin:10px 0 -2px -6px; width:314px;}
.socials{ width:26px; height:24px; background-repeat:no-repeat; background-position:0 -25px; float:left; margin:9px 0 0 6px; border:1px solid #ececec; -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.socials:hover{ background-position:0 0;}
.tw-social{ background-image:url(http://s24.postimg.org/wlqmbcabl/twitter.jpg);}
.fb-social{ background-image:url(http://s7.postimg.org/uk0cefzev/facebook.jpg);}
.mail-social{ background-image:url(http://s21.postimg.org/bklgn185v/email.jpg);}
.rss-social{ background-image:url(http://s10.postimg.org/nfv938d6d/rss.jpg);}
.my-social input[type=text] { outline: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border:1px solid #ececec; font-size:11px; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; transition: .3s ease-in-out; padding:5px 5px 5px 10px; font-size:11px; color:#999; width:140px; margin:9px 10px 5px 0px !important; float:right; }
daha sonra html/javascript olarak aşağıdaki kodu ekliyorz
<
div
class
=
"sidebarblok radius"
>
<
div
class
=
"sidebaricerik radius"
>
<
div
class
=
"Tolgaca"
>
<
cufontext
>Tolga </
cufontext
><
cufontext
>GönüL</
cufontext
>
Webmasterlığa Merak Sarmış Birisi..Kişisel Olarak Wordpress ve Bloggere yoğunlaşmış Kendi bilgilerim ve topladığım bilgileri paylaşmaktan zevk alan birisi olarak Sizlere Hizmet Vermekteyiz.. ve Bunun Yanında Fanatik Bir Beşiktaşlı olduğumu Belirtmek isterim :)
</
div
>
<
div
class
=
"my-social radius-bottom"
>
<
div
class
=
"socials tw-social radius"
>
</
div
>
</
div
>
</
a
>
</
div
>
</
a
>
</
div
>
</
a
>
</
div
>
<
div
class
=
"temizle"
>
</
div
>
</
div
>
</
div
>