Blogger'da alıntı (blockquote) kısmını özelleştirme

Blogger'da alıntı (blockquote) kısmını özelleştirme
Blogger'da alıntı (blockquote) kısmını nasıl değiştirebiliriz? Blogger sayfalarımızda sık kullandığımız alıntı (blockquote) kısmının sitilini nasıl değiştirebiliriz? Örnek blogger alıntı (blockquote) sitil kodu...

Kendi blogumda kullandığım ve benim gibi alıntı (blockquote) kısmını kullanmayı seven blogger kullanıcılarının da hoşuna gideceğini düşündüğüm bu kodu, sizlerle paylaşmak istedim. Google'un ücretsiz sağladığı Blogger temalarında alıntı (blockquote) kısmı genelde sadedir ve arka planı yoktur. Halbuki benim gibi blog yazarları bu alıntı (blockquote) kısmının daha belirgin olmasını ister. Mesela ben alıntı (blockquote) kısmını daha belirgin yaptım ve mouse ile tek tıkla tüm alıntı (blockquote) içindeki kodların kolayca kopyalanmasını sağladım. Örnek olarak ta bu yazımdaki alıntı (blockquote) kısmını kontrol edebilirsiniz.

Peki alıntı (blockquote) kısmının, SEO için bir avantajı ya da dezavantajı var mıdır?

Bu konu ile ilgili bizzat şahit olduğum bir durum yok ama şu şekilde açıklayabilirim. Yayınladığımız yazıların içinde en çok kullanılan kelimeler ve görünümü özelleştirilen karakterler arama motorlarının dikkatini çeker. Örneğin bu paragrafın başına eklediğim "Peki alıntı (blockquote) kısmı ..." sorusunu kalın harflerle yazmamın sebebi arama motorlarının dikkatini çekmem istememdir. Alıntı (blockquote) kısmı da belirli kodlarla özelleştirildiği için arama motorları tarafından dikkat çekebilir. Yani yararı var, zararı yok.

Alıntı (blockquote) kısmını özelleştirme: Öncelikle alıntı (blockquote) kısmını özelleştirmek çok basit. Yapmanız gerekenler:

1. Blogger kullanıcı panelinize gidin
2. Sol tarafta yer alan "Şablon" bölümünü seçin ve açılan sayfada "HTML düzenle" ye tıklayın.
3. Ctrl F ile kodların arasından </head> kodunu bulun.
4. Aşağıda yer alan alıntı (blockquote) tasarımlarından beğendiğinizin kodunu, </head> kodunun hemen üstüne yapıştırın.
5. Şablonu kaydedin ve kod sayfasından ayrılmadan sayfanızı kontrol edin. Ardından istediğiniz alıntı (blockquote) görünümüne kavuşmuş olacaksınız.

Örnek alıntı (blockquote) stil kodları

1. Alıntı (blockquote) tasarımı
1. Alıntı (blockquote) tasarımı
<style>
.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote::after{
content: "";
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
.post blockquote em{
font-style: italic;
}
</style>
2. Alıntı (blockquote) tasarımı
2. Alıntı (blockquote) tasarımı
<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>
3. Alıntı (blockquote) tasarımı
3. Alıntı (blockquote) tasarımı
<style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://lh5.googleusercontent.com/-fTjvw5r8Sfg/VQfAuZQI96I/AAAAAAAABBU/uGNOHt8jNR8/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  
}
</style>
En son paylaştığım alıntı (blockquote) tasarımını bende kendi blogumda kullanıyorum. Tüm yapmanız gerekenler bunlardı. Umarım işinize yarar ve hoşunuza gider.

2 yorum:

  1. Bu güzel girişim için çok teşekkürler. Eminim çok faydası olacaktır bizlere. Ama galiba benim şu blog işini öğrenmem baya zaman alacak. Ben daha blockquote ne demek bilmiyorum:( Terimleri bilmediğim için anlayamıyor ve bloğumda hiç bir değişiklik yapamıyorum. Bir şey yaparsam her şeyi silerim diye korkuyorum. Bir de her kes bilgisayar üzerinden anlatıyor. Lütfen telefonla blog yazanlar için de bilgilerinizi paylaşın. Başarılar...

    YanıtlaSil
    Yanıtlar
    1. Rica ederim, başka bir blog açabilirsiniz. Açtığınız bu blogda deneme yanılma yoluyla bir çok şey öğrenebilirsiniz. Mobilde değişiklik yapmak oldukça zordur. Bir yazı yayınlamak bile oldukça zaman alıyor.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

 
Bumerang - Yazarkafe

Copyright © 2017 Kişisel Blog | Blog Tecrübem. Tüm hakları saklıdır.
I Blogger!