14 WordPress Alıntı Stili Örneği

Alıntılar, genellikle blog yazılarınızın en çok hatırlanan bölümleridir. Aynı zamanda bir yazıdan en çok paylaşılan bölümlerinde “Alıntılar” olduğunu bilmekteyiz. Medya sitelerinin ve gazeleterin alıntılarını paylaştıkları bölümlere özel tasarımlar yapmasının sebebide budur.

Bu yazımda, WordPress yazılarındaki alıtıları nasıl düzenleyebileceğinizi 9 harika alıntı tasarımı örneğiyle göstereceğim.

WordPress yazılarımızda alıntı yapmak için araçlar bölümünü kullanıyoruz.

Bu b-quote butonu yazımıza bir html ekleyerek yazının olduğu bölümü alıntı haline getiriyor. Not: Yazı editörümüzde “Metin Modunu” kullanıyoruz. Aşağıda tasarımlarımızda kullanacağımız yazıyı ve örnek HTML kodunu görebilirsiniz.

<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius 
tabulae, quam Cleanthes sane commode verbis depingere solebat. 
Urgent tamen et nihil remittunt. An vero displicuit ea, 
quae tributa est animi virtutibus tanta praestantia? Sint ista 
Graecorum; Cur igitur, cum de re conveniat, non malumus usitate 
loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

Alıntılarımızı özelleştirebilmek için tealarınızın style.css dosyası üzerinde değişiklikler yapmanız gerekir. FTP, CPanel yardımıyla temanızın stil dosyalarına ulaşabilirsiniz. Yada yönetim panelinden Görünüm > Tema Düzenleyici yolunu izleyebilirsiniz.

Pek çok modern temada stil dosyalarınızı tema ayarları bölümünden düzenleyebiliyorsunuz.

Şimdi aşağıdaki kodlar yardımıyla blogumuzun alıntı kısımlarını düzenleyelim. Bu kodlarda istediğiniz gibi oynama yaparak kendinize özel tasarımlar çıkarabilirsiniz.

1. Klasik CSS Alıntısı

Genellikle insanlar CSS üzerinde bir background resmi belirleyerek alıntılarına stil katarlar. Bu örnekte de büyük bir alıntı işaretini koyarak CSS dosyasını düzenledik.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
background:#ececec;
}

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -10px;
top: -10px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

2. Resimle Alıntı Tasarımı

Bu örnekte alıntı işaretini background resmi olarak kullandık.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
    font: 16px italic Georgia, serif;
    width:450px;
    padding-left: 70px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 10px;
    background-color: #dadada;
    border-top: 1px solid #ccc;
    border-bottom: 3px solid #ccc;
    margin: 5px;
    background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
    background-position: middle left;
    background-repeat: no-repeat;
    text-indent: 23px;
} 
 
blockquote cite {
    color: #a1a1a1;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
  
blockquote cite:before {
    content: "\2014 \2009";
}

3. Basit Alıntı

Bu örnekte alıntımıza arkaplan rengi ekledik ve sol tarafı dashed yani kesikli çizgi ile tasarladık. Renklerle özgürce oynayabilirsiniz.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}
 
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
  
blockquote cite:before {
content: "\2014 \2009";
}

4. Beyaz, Mavi ve Turuncu Alıntı

Alıntıları istediğiniz gibi renklendirebileceğinize bir örnek vermek istedim.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}
 
blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
  
blockquote cite:before {
content: "\2014 \2009";
}

5. Alıntılarınızda CSS Sayesinde Google Fontlarınıda Kullanabiliyorsunuz

Bu alıntı örneğinde Google fontlarından Droid Serif’i kullandım.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
} 
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
  
blockquote cite:before {
content: "\2014 \2009";
}

6. Yuvarlak Çerçeveli Alıntı

Bu örnekte alıntı çerçevemizin kenarlarını biraz yuvarladık.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

7. Gradient Arkaplanlı Alıntı

Bu CSS örneğinde, CSS3 gradient özelliğini kullanarak alıntı çerçevemizde bir renk geçişi sağladık. CSS gradientleri çeşitli tarayıcılarda farklı görünebildiğinden dolayı, CSS gradient oluşturucu araçlarını kullanmanızı tavsiye ederim.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

8. Arkaplan Deseni İle Alıntı

Bu örnekte alıntı bölümümüzün arkaplanına bir desen ekledik. Bu deseni siz kendiniz belirleyebilirsiniz. Desenin URL’sini değiştirmeyi unutmayın.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
width: 450px;
background-image:url('http://siteadiniz.com/wp-content/themes/your-theme/images/defter-deseni.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

9. Alıntı Arka Planında Birden Fazla Resim Kullanmak

blockquote:before elementini kullanarak alıntılarınıza birden fazla arkaplan resmi koyabilirsiniz.

WordPress Alıntı Blockquote Nasıl Yapılır ?

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}

Umarım bu yazımı yararlı bulmuşsunuzdur. WordPress alıntı çerçevelerinizi, arkaplanlarını ve renkleri değiştirmek çok kolaydır. Sizde bu kodları kullanırken renkleri ve özellikleri değiştirerek, CSS kodlarının nasıl çalıştığını daha iyi anlayabilirsiniz. Takıldığınız bölümleri yorumlar kısmından bana sormayı unutmayın.

Eğer bu yazımı beğendiyseniz bizi Facebook ve Twitter sayfalarımızdan da takip etmeyi unutmayın.

0 0 vote
Article Rating
Yazar
Yasin Atagün
Takip Et
Bildir
guest
0 Yorum
Inline Feedbacks
Tüm Yorumları Göster
0
Yorumlarınız bizim için çok değerli!x
()
x