7 Tane Kaliteli Blockquote (Alıntı Kutusu) CSS Tasarımı

WordPress en çok kullanılan içerik yönetim sistemi, hiç şüphesiz! Ülkemizde de son derece popüler olan bu sistem, oldukça kişiselleştirilebilir bir yapıya sahip. Bunlardan birisi de, yazılarımızda yer verdiğimiz blockquote (alıntı) kutuları.

Bahsettiğim alıntı kutuları, CSS kullanılarak çok farklı şekillerde kişiselleştirilebilirler. Mesela CandanBlog’da alıntı kutularının ve içeriklerinin tasarımı şöyle:

Bu bir alıntı metnidir!

WordPress’in varsayılan özelliklerinden biri olan alıntı kutuları, eğer siz de bir WordPress kullanıcısıysanız, sizin blog sitenizde de mevcutlar. Aşağıda, alıntı kutuları için birkaç örnek CSS tasarım kodu paylaşacağım. cPanel’e giriş yapıp Dosya Yöneticisi‘ni açın, tema klasörünüzün içerisinde bulunan style.css dosyasını kod editörüyle açın ve beğendiğiniz tasarımın CSS kodunu style.css içine yapıştırın. Aynı işi FTP programınızı (varsa) kullanarak da yapabilirsiniz. WordPress’in alıntı kutuları için CSS’de varsayılan olarak blockquote etiketini kullanıyor olması işimizi kolaylaştıracak. Üstte tasarım görseli, altta CSS kodu (bazı tasarımlarda tema klasörünüze yüklemeniz gereken görseller de var, onları da sunucunuza yükleyip CSS kodu içerisindeki background img URL’sini görselin URL’sine göre düzenlemelisiniz):

blockquote CSS tasarımları

blockquote {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}

 


blockquote CSS tasarım örnekleri

blockquote {
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
}
blockquote:first-letter {
float: left;
margin: -9px 6px 0 0;
font-size: 35px;
}

 


blockquote css tasarım örnekleri

blockquote {
border-left: 4px solid #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px 0 30px 15px;
padding-left: 15px;
}

 


blockquote css tasarım örnekleri

blockquote {
background: #fcfcfc;
border-left: 1px dashed #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
}

 


blockquote css tasarım örnekleri

bg-quote3a.png (Sağ tık, Hedefi Farklı Kaydet)

bg-quote3b.png (Sağ tık, Hedefi Farklı Kaydet)

blockquote {
background:
url(images/bg-quote3a.png) top center no-repeat,
url(images/bg-quote3b.png) bottom center no-repeat;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}

 


blockquote css tasarım örnekleri

bg-quote1.png (Sağ tık, Hedefi Farklı Kaydet)

blockquote {
background: url(images/bg-quote1.png) no-repeat;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px 30px 30px 50px;
}

 


blockquote css tasarım örnekleri

bg-quote2.png (Sağ tık, Hedefi Farklı Kaydet)

blockquote {
background: url(images/bg-quote2.png) no-repeat;
border-left: 1px dashed #ccc;
color: #a5a4a4;
font-style:italic;
margin: 30px;
padding: 30px 30px 30px 50px;
}

 

Beğendiyseniz yazıyı paylaşabilirsiniz, ya da sorularınız varsa aşağıdaki yorum bölümünden iletebilirsiniz!

3 thoughts on “7 Tane Kaliteli Blockquote (Alıntı Kutusu) CSS Tasarımı

  • 13 Eylül 2013 at 14:23
    Permalink

    Hocam çok güzel anlatmışsınız. Sık kullanılanlara aldım geniş bir zamanda uygulayacağım.

    Reply
  • 25 Ağustos 2013 at 23:21
    Permalink

    WordPress de güzel şeyler yapılıyor görsellik açısından. Alıntı kutuları da güzel olmuş. PAylaşım için sağola Can :)

    Reply

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Eksik sayıyı RAKAMLA yazın: