Merhabalar sevgili okurlar.
Bildiğiniz üzere bloğumun adresi, adı ve temasını değiştirdim. Üstelik bu değişikliği nerdeyse sıfır kod bilgisi ile yaptım.( bendekide hakikaten deli cesareti 😅)Değişiklik sonucu çok uğraştım. Bunula ilgili çok yazı okudum. Hatta video izledim...
Vee bloğumu çok şükür ki gönlüme göre bir tema hazırladım. ( Daha bazı eksiklikleri var)
Tabi temamı düzenlerken çok şey öğrendim. Hatta öğrenip, bloğuma uyguladığım değişiklikleri dilimin döndüğünce sizlerle paylaşmayı düşünüyorum.
Bazı bloglarda rastladığım alıntı kutusu çok hoşuma gidiyordu. Bence estetik açısından çok şık. Bende yeni temamda bu tarz şeyleri eklemek istedim. Ve araştırdım. Denedim. Hata yaptım. Pes etmedim. Tekrar araştırdım. Denedim. Belki yine yanıldım. Onlarca kez denemem sonucu nasıl yapıldığını buldum!
Evet evet buldum. Hatta bulmakla kalmayıp, bir kaç şeklini dahi buldum. :)
Sizlerde benim gibi alıntı kelimeleri tırnak içinde göstermek istiyorsanız. Yapmanız gerekenler:
Tema > Özelleştir dedikten sonra css ekle diyoruz ve aşağıdaki kodlardan birini ekliyoruz.
Alıntı cümleniz yukarıdaki fotoğrafta gözüktüğü gibi tırnak içinde yer almasını istiyorsanız alttaki kodu kopyalayıp, ekleyin...
blockquote {
margin: 1.5em 0 1.5em; padding: 0 1em 0 2.5em; position:relative;
}
blockquote:before {
color: #ccc; content: "\201C";
font-size: 5em;
position:absolute;
left:5px;
top: 0.3em;
line-height: 0.1em;
}
blockquote:after {
color: #ccc;
content: "\201D";
font-size: 5em;
position:absolute; right:3px;
bottom: 0em;
line-height: 0.1em;
}
Tırnak içinde aynı zamanda kenarında da bir çizgi olsun isterseniz de aşağıdaki kodları ekleyin...
Yukarıdaki gibi bir kare içine almak isterseniz de alttaki kodu kullanın...
Tamam kodları css ye ekledim. Peki şimdi bloğumda bu kodu nasıl kullanırım? Diye soracak olursanız da.
Her zamanki gibi yayın oluştur diye bir yayın oluşturun. Sonra o oluşturduğunuz yayında alıntı bir cümleyi yada vurgulayıp, göz önüne sürmek istediğiniz bir yada bir kaç paragrafı seçip. Yukarıdaki kalın tırnak işaretine tıklayın. Sonrada önizleme yapın. O seçtiğiniz paragraf eklediğiniz kodun şekli gibi çıkacaktır....
Umarım anlaşılır yazmışşımdır. Takıldığınız yada anlamadığınız yer olursa hiç çekinmeden sorabilirsiniz....
blockquote {
background: #f5f5f5;
font-size: 1em;
border-left: .7em solid #ccc;
margin: 1em .5em;
padding: .1em 1em;
line-height: 1.2em;
quotes: "\201C""\201D";
}
blockquote:before {
font: Georgia;
color: #808080;
content: open-quote;
font-size: 4em;
line-height: 0;
vertical-align: -.41em;
padding: 0 .1em 0 .1em;
}
blockquote:after {
font: Georgia;
color: #808080;
content: close-quote;
font-size: 4em;
line-height: 0.3em;
margin-right: 0.25em;
vertical-align: -0.57em;
padding: 0 0 0 .1em
}
blockquote:first-child {
display: absolute;
padding-top: 1.3em;
}
blockquote:last-child {
display: absolute;
}
Tırnak içinde kenarında çizgi var. Ama biraz renkte olsun derseniz ben morlu olanın kodunu buraya ekliyorum. Siz renklerin kodlarını değiştirerek istediğiniz renkte yapabilirsiniz...
blockquote {
background-color: #9786c6;
border-left: 1em solid #5236a0;
margin: 1.5em 0 1.5em;
padding: 1em 1.5em 0 2.5em;
position: relative;
}
blockquote:before {
color: #392570;
content: "\201C";
font-size: 5em;
position:absolute;
left:5px;
top: 0.6em;
line-height: 0.1em;
}
blockquote:after {
color: #392570;
content: "\201D";
font-size: 5em;
position:absolute;
right:3px;
bottom: 0em;
line-height: 0.1em;
}
Yukarıdaki gibi bir kare içine almak isterseniz de alttaki kodu kullanın...
blockquote {
background: #f5f5f5;
font-size: 1em;
border: 1px solid #000;
margin: 1em .5em;
padding: .1em 1em;
line-height: 1.2em;
quotes: "\201C""\201D";
}
blockquote:before {
font: Georgia;
color: #808080;
content: open-quote;
font-size: 4em;
line-height: 0;
vertical-align: -.41em;
padding: 0 .1em 0 .1em;
}
blockquote:after {
font: Georgia;
color: #808080;
content: close-quote;
font-size: 4em;
line-height: 0.3em;
margin-right: 0.25em;
vertical-align: -0.57em;
padding: 0 0 0 .1em
}
blockquote:first-child {
display: absolute;
padding-top: 1.3em;
}
blockquote:last-child {
display: absolute;
}
Tamam kodları css ye ekledim. Peki şimdi bloğumda bu kodu nasıl kullanırım? Diye soracak olursanız da.
Her zamanki gibi yayın oluştur diye bir yayın oluşturun. Sonra o oluşturduğunuz yayında alıntı bir cümleyi yada vurgulayıp, göz önüne sürmek istediğiniz bir yada bir kaç paragrafı seçip. Yukarıdaki kalın tırnak işaretine tıklayın. Sonrada önizleme yapın. O seçtiğiniz paragraf eklediğiniz kodun şekli gibi çıkacaktır....
Umarım anlaşılır yazmışşımdır. Takıldığınız yada anlamadığınız yer olursa hiç çekinmeden sorabilirsiniz....
Bana Ulaşabileceğiniz Diğer Sosyal Hesaplarım
0 comments: