Blogger Ve Wordpress Tema Arşivi

Blogger kullananlar için çok güzel bir eklenti. CSS kodları yardımıyla konu içerisinde yer alan resimlerinizi oval hale getirmek ister misiniz?

Bu şekilde blogunuzun tasarımı değişmiş ve güzel bir görüntü almış olacak. Ayrıca bazen resimlerin oval olacağı yerler de oluyor ve bunun içinde çeşitli programlar ile uğraşılıyor ve bir sürü zaman kaybı oluyor. İşte bunu önlemek için bu eklentiyi mutlaka kullanmanızı öneriyorum.

İlk olarak aşağıda kodumuzu buluyoruz. Arama işlemi için CTRL + F tuş kombinasyonunu kullabilirsiniz. ( Kumanda Paneli > Şablon > HTML'yi Düzenle > Widget Şablonlarını genişlet)

]]></b:skin>

Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.

 .circle {
  display: block;
  width: 150px;
  height: 150px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: 99em;
  border: 5px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);  
}

Bu işlemleri yaptıktan sonra şablonunuzu kaydedebilirsiniz. Tasarım bitti artık bunu konu içinde uygulamaya geldi. Bu kodu resimlerde aktif hale getirebilmeniz için her defasına aşağıdaki gibi kullanmanız gerekecek. Bunun için aşağıda yer alan kod blogunu kullanmanız gerekiyor.

<div class="circle" style="background-image: url('RESİM URL');"></div>

Aklınıza takılan sorular için yorum formunu kullabilirsiniz.

Bir çok blog sahibinin kullanmış olduğu güzel  bir eklenti olan olan css ile hazırlanan duyuru kutuları örneklerinden bir tane de ben vermek istedim.

Bu güzel eklenti sayesinde ziyaretçilere yapmak istediğiniz duyuruları rahatlıkla yapabilirsiniz. CSS konusunda yeni olduğum için bu kutuları yapmak benimm için çok önemliydi. Umarım kullanmak isteyen arkadaşların işine yarar.


İlk olarak Html'yi Düzenle yapıp Widget Şablonlarını genişlet dedikten sonra, CTRL + F yardımıyla aşağıda yer alan kodu buluyoruz.

]]></b:skin>

Daha sonra ise şu kodları hemen yukarında yer alan kodun hemen üstüne yapıştırıyoruz.

.duyuru{background: #f94646; border-color:#0945f0; border:1px solid #C1C1C1; text-align:center; margin:0 auto 10px; padding:5px 10px; -moz-box-shadow:inset 0 0 1px #fff; -webkit-box-shadow:inset 0 0 1px #fff; box-shadow:inset 0 0 1px #fff; text-shadow:0 -1px rgba(255,255,255,0.5); font-size:15px; } 

Yukarıda yer alan kodlar css kodları. Bu kodlar ile oynamalar yaparak duyuru kutusunu istediğiniz şekillendirebilirsiniz. Şimdi ise aşağıda yer alan duyuru kutusunun kodlarını ister HTML/Javascript kısmına isterseniz HTML kodları içerisinde istediğiniz bir yere yapıştırabilirsiniz.

<p class="duyuru"> <strong>Duyuru: </strong>Duyuru Yazınız Buraya Gelecek</p>

Eklenti ön izlemesi için TIKLAYINIZ!