Bir süredir eklenti düzenlemelerine ara vermiş idim ancak gerektiği için küçük bir eklenti hazırladım sizler için. Bu eklenti sayesinde, web sitenizin bilhassa sidebar kısmına "Biz Kimiz? veya Hakkımızda" benzeri bir kutucuk ekleyebilirsiniz. Elbette ilgili metinleri kendinize göre değiştirebilirsiniz. Ben size, kendi düzenlediğim şekilde paylaşıyor olacağım. Umarım faydalı olur. Blogger, WordPress v.b. dilediğiniz altyapı çerçevesinde kullanabilir, boyutlarını da değiştirebilirsiniz.

AYRICA: HTML ve CSS ile Dikey Menü Yapımı

Web Sitemiz için Hakkımızda Kutucuğu Yapalım

<style>
.cardbu {
border:1px solid #ddd;
max-width: 258px;
margin: 0;
font-family: arial;
}
.cardbu img{border-bottom:1px solid #ddd}
.metindebu{line-height:30px;padding:20px;font-size:17px;}
.baslikbu {
color: grey;
font-size: 20px;
}
.butondabu {
border: none;
outline: 0;
display: inline-block;
padding: 20px;
color: black;
background-color: #D9EDF7;
border-top:1px solid #ddd;
width:218px;
font-size: 15px;
}
.butondabu a{color:#444}
.butondabu a:hover{color:#222}
.benbu a {
text-decoration: none;
font-size: 22px;
color: black;
}
.bizkimiz{font-weight:normal;font-size:18px;padding:20px;border-bottom:1px solid #ddd;}
</style>
<div class="cardbu">
<img src="https://3.bp.blogspot.com/-mwfi3y2UfqY/W6vLH6eOh0I/AAAAAAAARqA/N3myjZrRXm0uhxmKGIIUYgaXmPqPcgBPQCK4BGAYYCw/s1600/biz-kimiz.png" style="width:100%" />
<div class="bizkimiz">Hikâyemiz</div>
<div class="metindebu">Biz senelerdir proje geliştiren ve bu projelere ev sahipliği yapan bir ekibiz. İnancımız, hedefimiz ve ana felsefemiz yararlı projeler yaratmak olup, bu hedefimizi gerçekleştirmek adına her zaman çalışıyor olacağız.</div>
<div class="butondabu"><a href="#">İletişime Geçmek İstiyorum</a></div>
</div>


Not: Kırmızı "#" bağlantı alanını kendinize göre değiştirmeyi unutmayınız.

Görünüm