Güzel ve kullanışlı “Blockquote” css kodları (Quote)

Blockquote nedir?; metnin bir bölümünün başka bir siteden veya kaynaktan alındığını daha belirgin bir şekilde göstermek için kullanılan html kodlarıdır. Genelde blockquote kodu birçok kişi tarafından soldan hafif giriltili şekilde gösterilir. Veya bir tırnak içerisine alınarak italik formda yazılır. Bu yazımızın sonunda css kodları ile daha çeşitli ve kendinize özgü blockquote hazırlayabileceksiniz.

Blockquote kodlamanın en popüler ve güzel yöntemi metini sol üst ve sağ alt kısmının tırnak ile işaretlenmesidir. Bunu CSS3 öncesinde klasik HTML yapısı ile yapmak pek kolay ve kullanışlı olmuyordu. Aslında yapılabiliyordu fakat direk < blockquote > kodu ile yapılamıyordu. Bunu < span > kodu ile birlikte kullandığınız zaman yapabiliyordunuz. Bu da ideal bir yöntem değildi fakat çalışıyordu. Bu vereceğimiz kodları oynayarak da kendinize özel css kodları ile blockquote alıntı metni kodlarını hazırlayabilmeniz mümkün. Bu iş için tabiki biraz kod bilgisi gerekiyor, fakat kodlara biraz baktığımızda biraz da ingilizceniz var ise deneme yanılma yöntemi ile bile epey farklı şey yapabilmeniz mümkün.

Kodlar hakkında sorunlarınızda özellikle dipnotları okunmanızı öneriyorum. RESİM DOSYALARI da dipnot 2 de verilmiştir.

Classy Quote stilindeki görünüm;
Classy Quote blockquote stili görünümü

blockquote.style1 {
  font: 14px/20px italic Times, serif;
  padding: 8px;
  background-color: #faebbc;
  border-top: 1px solid #e1cc89;
  border-bottom: 1px solid #e1cc89;
  margin: 5px;
  background-image: url(images/openquote1.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
  blockquote.style1 span {
     display: block;
     background-image: url(images/closequote1.gif);
     background-repeat: no-repeat;
     background-position: bottom right;
   }

Çalışmazsa blockquote.style1 { kodunu sadece blockquote { olarak değiştirin. O zaman çalışır.

Modern Quote stilindeki görünüm;
Modern Quote blockquote stili görünümü

blockquote.style2 {
  font: 14px/22px normal helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
} 

Çalışmazsa blockquote.style2 { kodunu sadece blockquote { olarak değiştirin.

Fun Quote stilindeki görünüm;
Fun Quote blockquote stili görünümü

blockquote.style3 {
  font: 18px/30px normal Tahoma, sans-serif;
  padding-top: 22px;
  margin: 5px;
  background-image: url(images/openquote3.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
  }
  blockquote.style3 span {
    display: block;
    background-image: url(images/closequote3.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
} 

Fancy Quote stilindeki görünüm;
Fancy Quote blockquote stili görünümü

blockquote.style4 {
  font: 14px/20px italic Times, serif;
  padding-left: 70px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 10px;
  background-color: #dadada;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  background-image: url(images/openquote4.gif);
  background-position: middle left;
  background-repeat: no-repeat;
  text-indent: 23px;
} 

Code Quote stilindeki görünüm;
Code Quote blockquote stili görünümü

blockquote.style5 {
  font: 12px/18px normal "Courier New", sans-serif;
  padding-left: 70px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #000;
  color: white;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  background-image: url(images/openquote5.gif);
  background-position: middle left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
  blockquote.style5 div {
    padding-right: 50px;
    display: block;
    background-image: url(images/closequote5.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
} 

BU DİPNOTLARI MUTLAKA OKUYUNUZ!
1. dipnot:(bu bizim dipnotumuz :) kod örneği değil) Yukarıdaki kodları temanızın style.css sayfalarına eklemeniz gerekiyor. Kodları direk eklediğinizde çalışmayabilir. Çünkü farklı stillerde tanımlanmış. Kodlar arasında bulunan;
blockquote.style1 {
blockquote.style2 {
blockquote.style3 {

vesaire gibi kodları direk olarak style vermeden sitenize alın. Yani;
blockquote {
blockquote {

şeklinde değiştirin. Bu sayede kodlar sorunsuz çalışacaktır.

2. dipnot: Kodlar arasında resim url leri bulunuyor. Bu resimleri buradan indirip hostunuza atınız. Ve kodlar arasındaki url kısmını da hostunuza attığınız yere göre düzenleyiniz. Bu resimler yerine kendi resimlerini de oluşturup atabilirsiniz. Bu şekilde bile farklı bir tasarıma imza atmış olabilirsiniz…

“Güzel ve kullanışlı “Blockquote” css kodları (Quote)” 1 yorum yapıldı.

  • ya ben tumblr profilimde beni takip edenleri göstermek istiyorum YARDIM!!!!!!E POSTAMA GÖNDERİRSENİZ SEVİNİRİM.

Yorum Yapın

İnsanların en hayırlısı, insanlara faydalı olandır. (H.Ş)