Blogger'da Alıntı Kodlarını Düzenlemek

Bu yazımızda Blogger bloglarda “Quotes” denilen alıntı görünümünü değiştireceğiz. Bildiğiniz gibi blogunuzda alıntı yapmak için bir kısım var. Bu kısımda yazılar diğer yazılara oranla iç kısımda görünür. Bu şekilde onun alıntı olduğu anlaşılır ya da sizin oraya dikkat çekmek istediğiniz görülür. Şimdi bu kodların görünümünü daha kaliteli hale getirmek için birkaç yol göstereceğiz.

Alıntı kısmını görsellerde görüyorsunuz, Peki bu kısmı neden kullanırız?

• Birinden alıntı yapmak için,
• Atlanmaması gereken bir ayrıntıyı yazarken,
• Belki bir kod paylaşırken,
• Yazıyı renklentirmek için...

Çeşitli sebeplerle Altını özelliği işinize yarayacak. Şimdi kodlar kısmına geçelim;

1. Blogger yönetim panelinize girin, blogunuzun yedeğini alın,
2. Şablon sekmesine ve ordan da HTML düzenle kısmına geçin,
3. Aşağıdaki kodu ya da benzer kodu bulun...

.post blockquote {margin:1em 20px;}.post blockquote p {margin:.75em 0;}

Bu kodu aşağıdaki kodlardan biriyle değiştirebilirsiniz. Örnek resimlerde göründüğü gibidir. Bunlar sadece metinle kullanılan alıntı kodlarıdır.

Kod 1

.post blockquote {
border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB;
border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
background: #ffffff;
margin: 6px 20px 6px 20px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}

Kod 2

.post blockquote {
border:1px dashed #DC143C;
background: #EEE0E5;
margin: 6px 10px 6px 10px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}

Kod 3

.post blockquote {
color:#EE9A00;
border:5px dotted #000000;
background: #ffffff;
margin: 6px 6px 6px 6px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}

Kod 4

.post blockquote {
color:#00CED1;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff;
margin: 6px 0px 6px 0px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}

Sadece metin olarak yapılan değişikliklerin yanında Alıntı yani Quotes kodlarına görseller ve ikonlarda ekleyebiliyoruz. Arka plan değişikliği de yapabiliyoruz. Şimdi örnekleriyle birlikte o kodları verelim...

İkonlu alıntı kodu 1

.post blockquote {
color:#666666;
background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);
background-position:top left;
background-repeat:no-repeat;
margin: 6px 6px 6px 6px;
padding: 8px 0px 8px 74px;
font-size: 14px;
font-style:italic;
line-height:1.4em;
}

İkonlu alıntı kodu 2

.post blockquote {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
font-size: 0.9em;
}

İkonlu alıntı kodu 3

.post blockquote {
background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
background-repeat:no-repeat;
background-position:top center;
margin: 6px 6px 6px 6px;
padding: 8px 36px 8px 40px;
font-size: 14px;
line-height:1.4em;
}

İkonlu alıntı kodu 4

.post blockquote {
color:#000000;
background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);
margin: 6px 6px 6px 6px;
padding: 8px 6px 8px 6px;
font-size: 14px;
line-height:1.4em;
}

İlk başta verdiğimiz Orijinal alıntı kodunu bu verdiğimi kodlarla değiştirirseniz, alıntılarınız örnek resimlerde verdiğimiz gibi olacaktır. Kodları değiştirmekte veya herhangi bir aşamada problem yaşarsanız, bize yorumla bildirmeniz yeterli olacaktır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.