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"><img alt="Tolga GönüL" height="70" src="https://lh5.googleusercontent.com/2wqdNEISBQHxkbKwz8F5SPV4FvHx2FQ4saa3slzOGbk=w123-h138-p-no" title="Tolgaca" width="70"> <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><!-- Tolgaca son --> <div class="my-social radius-bottom"><div class="socials tw-social radius"></div><a href="https://www.facebook.com/blog.sohbetche" target="_blank"><div class="socials fb-social radius"></div></a> <a href="http://www.sohbetcheblog.net/p/window.html" target="_blank"><div class="socials mail-social radius"></div></a> <a href="http://feeds.feedburner.com/SohbetcheBlog" target="_blank" rel="nofollow"><div class="socials rss-social radius"></div></a> </div><!-- my social --> <div class="temizle"></div></div><!-- sidebar icerik --> </div>
Blogger Sidebar'da yazar hakkında bilgi eklentisi
4/
5
Oleh
asdasd