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

01 Aralık, 2016
Blogger blockquote
Blogger blockquote
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.

SEO çalışmaları için blockquote kısmının 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ı nasıl özelleştirilir?

  • Öncelikle alıntı (blockquote) kısmını özelleştirmek çok basit. Yapmanız gerekenler sırasıyla:
  • Blogger kullanıcı panelinize gidin
  • Sol tarafta yer alan "Tema" bölümünü seçin ve açılan sayfada "HTML düzenle" ye tıklayın.
  • Ctrl F ile kodların arasından
</head>
kodunu bulun.
  •  Aşağıda yer alan alıntı (blockquote) tasarımlarından beğendiğinizin kodu
</head>
kodunun hemen üstüne yapıştırın.
  • Temanızı kaydedin ve kod sayfasından ayrılmadan önce sayfanızı kontrol edin. Ardından istediğiniz alıntı (blockquote) görünümüne kavuşmuş olacaksınız.

Blogger 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuSFgJKBJQNb1V9MDUB58sQo860IiU_whJLQpg-Zu2Rqlr34YdbTXFP-NB3JOAXg5ACyn3o4botksuRjB7J0fOgjoOpH9MjASNbCYdxk8Swkwx13X3LDtnX7cxeHthbbhEwzH1GxFgsH2V/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.

6 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
  2. Hocam ellerinize sağlık güzel bir paylaşım olmuş iyi çalışmalar dilerim.

    YanıtlaSil
  3. merhaba bu kodlar benim sitemde çalışmıyor. Her şeyi doğru yaptım kodları
    "head" ın hemen üstüne yerleştirdim ama çalışmadı.

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, kodlar çalışıyor. Uygulamak istediğiniz blogunuzun adresi nedir? Yardımcı olmaya çalışayım.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.