Blogger Alıntı Kutusunu Özelleştirin

Blogger Alıntı Kutusunu Özelleştirin

Blogger yazarlarının Bloglarını kendilerine göre uyarlamaları ile farklı ve güzel bloglar ortaya çıkarma çabalarına girmeleri, değişiklik ile ilgili kodlara ihtiyaçlarını arttırmaktadır.

Blogger da alıntı yapılan içeriklerde blog okurlarının dikkatini çeker. Ayrıca diğer içeriklerden farklı bir renkte ve kutuda yer vermek görsel açıdan daha estetik gözükür.

Sizde bloggerda kullandığınız Alıntı kutusunu özelliştirmek istiyorsanız aşağıdaki talimatları uygulayın.

Öncelikle temanızın kodlarını Not defterine kopyalayıp, yapıştırın. Ters giden bir durum olursa eski kodlarınızı kullanacaksınız!

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.

Bu kodun hemen üstüne aşağıda beğendiğiniz 3 seçenekten birisinin kodlarını yapıştırın.

<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>

 <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>

 <style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsoyW6_n4AdEXAzopZwhHYwmOZRM1Qfvudb3fPs6U9OXINOzbFQV-xlU2umyUPBxdVSZbALbqhY3PE-W5ugwTp5bhSL1atTiDsIW8Yt9X7xM0W0bx5wFg-zV1njllfTASf0RPxAwH99dQ/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;
}
</style>

Sorularınızı yorum kısmından belirtebilirsiniz. Alıntı :blogtecrubem. com