Blogger sidebar da yazar hakkında bilgi eklentisi

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üzenlersiniz 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

                	

Tolga GönüL

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 :)