Blogger blockquote |
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ı
<style>2. Alıntı (blockquote) tasarımı
.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>
<style>3. Alıntı (blockquote) tasarımı
.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>
<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.
.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>
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ıtlaSilRica 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.
SilHocam ellerinize sağlık güzel bir paylaşım olmuş iyi çalışmalar dilerim.
YanıtlaSilTeşekkür ederim güzel yorumunuz için.
Silmerhaba bu kodlar benim sitemde çalışmıyor. Her şeyi doğru yaptım kodları
YanıtlaSil"head" ın hemen üstüne yerleştirdim ama çalışmadı.
Merhabalar, kodlar çalışıyor. Uygulamak istediğiniz blogunuzun adresi nedir? Yardımcı olmaya çalışayım.
Sil