Sevimli renklerle alıntı yazılar...

Merhaba!
Şimdi size sevimli renklerde 4 alıntı metni paylaşmayı anlatacağım... İstiyorsanız dörtten azını da kullanabilirsiniz tabii ki... Bu anlatımımı uyguladığınız da aşağıda ki alıntı ortaya çıkacak:

Haydi şimdi bunu yapmayı öğrenelim!
1. İlk önce ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıda ki kodu yapıştırıyoruz:

/***** Alıntılar *****/
quotes{
margin: 15px 0;}
.color1 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Sofadi One', cursive;
font-size: 12px;
color: #fff;
text-align: justify;
background: #D0014F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3mVLDuTSj0AuYW8nuY15arcLXA7IdNpS2BUVMS9dNXvEYagYkDBJ-rvgE9QzF1rApXMon-zxzwd4WWT0KMdKb0HVopM_2O_jzycteIOKLljZueivves4RAWDsFpiZ6zDkCavpeHmksw/s1600/244.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
}
.color2 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Londrina Shadow', cursive;
font-size: 12px;
color: #BCE3D0;
text-align: center;
background: #F0FAE0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0FAv-jvHbPhYWYRttMK21Of-cBzYFseqp1Fa8hKDEAtBvv8eHRL0sMyGbt2FEKfEvq3yjSfCQrPJGx0yACyvavDOMSnvOKbU79Z8idQss12pn6AArnirmC6vdrXWjgN_Y7G5L5HCNh8/s1600/237.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
}
.color3 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Sofadi One', cursive;
font-size: 12px;
color: #fff;
text-align: justify;
background: #EA8FB2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixh-jGIWorLedjTtfXIIuCFrpDOca3rHoy-GMWA1lOI_SB8ZMvBg1x3dxoQ0S8zLz9_Z2If4PWtPlB68VjqDqLHZCbfkW1EgwMZQJNvALwnKthyphenhyphen-JQC47UcLo6EqKMWpp9CFxb8xjrN2g/s1600/240.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
}
.color4 {
overflow: auto;
padding: 0.5em 1em 0.5em 3em;
font-family: 'Londrina Shadow', cursive;
font-size: 12px;
color: #a1a1a1;
text-align: center;
background: #FBEEA6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7KiGBak1gd1uHHB8nJ677Vz3v81ae7Yhc1m-uu9DiyMbLhLmB5vwUyYh8PsodTSDOKvMCiS4kVE2DdeDrtPQqNaWViM4KJAdNNxgd8esfMmWnm-xDeBDb_LPSXc_inDLW9vz2DcfJcGg/s1600/2821.gif) no-repeat scroll 10px center;
border: 1px dotted #fff;
box-shadow: 2px 2px 2px #a1a1a1;
}

 2. Alıntı arkaplanlarını koymak istediğimiz gönderinin HTML kısmını açıyoruz ve aşağıda ki kodları koyuyoruz:

<div class="quotes color1"> YAZI BURAYA </div>
<div class="quotes color2"> YAZI BURAYA </div>
<div class="quotes color3"> YAZI BURAYA </div>
<div class="quotes color4"> YAZI BURAYA </div>

Bu kodu koyduğunuz zaman tüm altıntı arkaplanları çıkacak. Ama eğer siz bir , iki veya üç tane çıkmasını istiyorsanız  <div class="quotes color1"> YAZI BURAYA </div> kodlarından istediğinizi silin.

Birde size bu alıntı için yazı stili önereceğim. Eğer benim öneri yazı stilimi kullanmak istiyorsanız </head> kodunu bulun ve öncesine aşağıda ki kodu yapıştırın:

<link href='http://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'/>

Bu alıntı arkaplanlarını istediğiniz gibi renklendirebilir, sınırlarını ve gölgelerini ayarlayabilir, görüntüleri değiştirebilir, efektler ekleyebilir yani kendinize göre istediğiniz gibi düzenleyebilirsiniz.

Umarım beğenmişsinizdir ve işinize yaramıştır... :)