Blogger Footer Alanına Sütun Ekleme

Blogger'ın kullanıclarına sunmuş olduğu hazır temaların bazılarında Alt Kısım (Footer) sadece tek sütundan oluşmaktadır. Bu sütunları isteğe bağlı olarak çoğalma imkanımız var.




Header, Main, Sidebar, Footer Nedir?
Bir blog sayfasını ana hatları ile belli başlı dört parçadan oluşur. Bu dört alan yukarıdaki resimde görülebileceği gibi; Header, Main, Sidebar, Footer şeklinde sıralanabilir.

Üst alan (Header) başlık alanı olarak kullanılır ve genelde blog hakkında bilgi içeriklidir. İçeriğin yayınlandığı alana yazı alanı (Main), genelde yazı alanının sağ ya da sol kısımda bazen ise her iki alanda yer alan sütunlara sidebar, ve alt kısma ise footer denir.

Blogunuza 3 sütunlu Footer Nasıl Eklenir?

Adım 1: Blogger'a kullanıcı adınız ve şifrenizle giriş yapın ve temanızın bir yedeğini alın.
Adım 2: Yerleşim > HTML'yi Düzenle'ye tıklayın. Ve "Ctrl+F" yardımı ile alttaki kodu aratın.

<b:section class='footer' id='footer'/>

Bulmuş olduğunuz bu kodun yerine alttaki kodu yapıştırın;

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

</div>

Yukarıdaki kodu ekledikten sonra sayfanızı şablonu görüntüleyerek sorun olup olmadığını kontrol edin. Eğer herhangi bir sorun yoksa sonraki adıma geçin.

Adım 3: Temanızda ]]></b:skin> kodunu bulun ve hemen üstüne alltaki kodu yapıştırın ve şablonunuzu kaydedin.

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Sayfa Ögelerinizi görüntüleyin alttaki resimdeki gibi şablonunuzun en altında Footer kısmını göreceksiniz. İstediğiniz eklentiyi ekleyebilirsiniz.



Kolay Gelsin.


http://takipteyiz.blogspot.com/2009/07/blogger-footer-alanna-sutun-ekleme.html

Yazı Alanının Arka Planını Farklı Renkler ile Renklendirme

Yazı alanının arka planını farklı renkler ile renklendirilebilir. Bunun için kullanılacak yöntemi bir nevi alıntı (blockquote) özelliğine benzetebiliriz. Görsel açıdan renkleri kullanmayı sevenler için alternatif bir seçenek olabilir. Görsel karnaval ya da Görsel Cümbüş...

Bu özellik için iki farklı yöntem kullanılabilir;
1. Yazı Alanınızın Arka Planını Farklı Renkler ile Renklendirme
2. Yazı Alanınızın Arka Planına Resim Ekleme

Yazı Alanının Arka Planı Nasıl Farklı Renkler ile Renklendirilebilir?

Bunun için kullanılması gereken kod oldukça basit, Yeni Kayıt oluşturmak istendiğinde HTML'yi Düzenlekısmında şu şekilde bir değişiklik yapmalısınız;

<div style="background:#Renk-Kodu;">
Yazı İçeriğinin yer alması gereken alan
</div>

Yukarıdaki kodda Renk Kodu yazan yere istediğiniz renk kodlarını yazabilirsiniz. Rnek Kodlarını bilmiyorum, bulmakta zorlanıyorum diyorsanız! Dert Etmeyin! Renk Kodlarını kolaylıkla bulmanızı sağlayacak bu program ile istediğiniz tüm renk kodlarına ulaşabilirsiniz. Kurulumu ve kullanımı çok kolay kesinlikle çok kullanışlı... Dilerseniz detaylı açıklma için: İsteyenler Renk Kodları - Bedava Renk Kodu Keşif Aracı

Peki Yukarıda Anlatılana göre yazı alanı arka planı nasıl görüntülenecek?
Nasıl göründüğünü test etmek içim Oluştur Tuşuna basın ve yazınızı kontrol edin. Yazınızın arka planı Alltaki örneğe (Arka Plan renk kodu:#FF7700) benzer şekilde görüntülenecektir;

...Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan,...

Oluştura tıklayıp kontrol ettikten sonra eğer tekrar HTML'yi Düzenle kısmına tıklarsanız farklı web tarayıcılarda farklı kodlarla karşılaşabilirsiniz. Bunun için endişe etmeyin. Web tarayıcınız size kolaylık sağlamaya çalışıyor...

Yazı Alanınızın Arka Planına Nasıl Resim Eklenir?

Yazılara farklı bir hava vermek için kuallanılabilir diye düşünüyorum. Örnek görüntüde çok sevdiğim İstanbul Resimlerinden birini kullanacağım.

<div style="background:url(resim-adresi-url) no-repeat;">
Yazınızı yazabileceğiniz alan
</div>

Yukarıdaki kodda var olan resim-adresi-url kısmına yükleyici sitelerden resim için aldığınız (örnek:http://i620.photobucket.com/albums/tt289/bobokous/istanbul-bilinmiyor4.jpg) adresi yapıştırın ve yazınızı yazın alttaki gibi bir görüntüye sahip oalcaksınız.

...Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan, Yazı İçeriğinin yer alması gereken alan...

Kullanılabilir, güzel, şık ve farklılık sunan bir özellik diye düşünüyorum! Siz ne dersiniz? Eğer sizlerinde benzer fikirleri ya da kullandığınız farklı özellikler varsa yorumlar kısmında blogger kullanıcıları ile paylaşabilirsiniz...

Kolay gelsin...


http://takipteyiz.blogspot.com/2009/08/yaz-alannzn-arka-plann-farkl-renkler.html

Bloggerda Yazıların Altına İmzanızı Yerleştirin

Şimdi oluşturduğum bu imzayı bloguma entegre edeceğim.Bunun için blogumun kumanda panelinden Şablon > HTML’yi Düzenle yolunu takip ediyorum ve Widget Şablonlarını Genişlet kutusunu işaretledikten sonra Ctrl+ F tuş kombinasyonu yardımıyla aşağıdaki kodu buluyorum.

<data:post.body/>

Bu kodun hemen altına şu kodları ekliyorum.

<p><div align="left"><img src="yukarıki adımlarda oluşturduğunuz resmin link adresini yazın"/></div></p>

ve temanızı kaydedin...

Yukarıdaki kodda yer alan align =left ile imzanızın yazınızın solunda olmasını sağlar. Eğer sağ tarafta olmasını istiyorsanızı left yazan yere right yazmanız yeterli olacaktır.

Yazılarda nasıl göründüğünü görmek isterseniz; bu blogu ziyaret edin.

Eklediğim yer;

   <data:post.body/>

<p><div align="right"><img src="http://www.resimuploader.com/images/53850108536652502092.png"/></div></p>

        <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

    <b:else/>



Çoklu kullanıcı için;

2. <data:post.body/> kodunun altana;


<div align="right"><b:if cond='data:post.author == &quot;Pınar Şentürk&quot;'>
<img src='http://i.imgur.com/XUkJyZI.png' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Zeynep Şentürk&quot;'>
<img src='http://i.imgur.com/YA4Ggvt.png' style='border:0px;'/>

</b:if></div>

Kullanıcı adı, link, sağ ya da sol olacağı. Bu kadar.







http://www.bloglovin.com/frame?post=73425604&group=0&frame_type=b&blog=1489223&link=aHR0cDovL2ZlZWRwcm94eS5nb29nbGUuY29tL35yL3Rha2lwbGlzdGVtL34zL3lVN3EwREE4alY0L2Jsb2dnZXItaW16YS1la2xlbWUuaHRtbA&frame=1&click=0&user=0

Güzel ve kullanışlı “Blockquote” css kodları (Quote)

Blockquote nedir?; metnin bir bölümünün başka bir siteden veya kaynaktan alındığını daha belirgin bir şekilde göstermek için kullanılan html kodlarıdır. Genelde blockquote kodu birçok kişi tarafından soldan hafif giriltili şekilde gösterilir. Veya bir tırnak içerisine alınarak italik formda yazılır. Bu yazımızın sonunda css kodları ile daha çeşitli ve kendinize özgü blockquote hazırlayabileceksiniz.

Blockquote kodlamanın en popüler ve güzel yöntemi metini sol üst ve sağ alt kısmının tırnak ile işaretlenmesidir. Bunu CSS3 öncesinde klasik HTML yapısı ile yapmak pek kolay ve kullanışlı olmuyordu. Aslında yapılabiliyordu fakat direk < blockquote > kodu ile yapılamıyordu. Bunu < span > kodu ile birlikte kullandığınız zaman yapabiliyordunuz. Bu da ideal bir yöntem değildi fakat çalışıyordu. Bu vereceğimiz kodları oynayarak da kendinize özel css kodları ile blockquote alıntı metni kodlarını hazırlayabilmeniz mümkün. Bu iş için tabiki biraz kod bilgisi gerekiyor, fakat kodlara biraz baktığımızda biraz da ingilizceniz var ise deneme yanılma yöntemi ile bile epey farklı şey yapabilmeniz mümkün.

Kodlar hakkında sorunlarınızda özellikle dipnotları okunmanızı öneriyorum. RESİM DOSYALARI da dipnot 2 de verilmiştir.

-----ASIL BU-----

blockquote { 
background: #f0d5fa url(http://r1310.hizliresim.com/1g/9/tdulh.png) ; 
background-position: left; 
background-repeat:repeat-y; 
margin: 0 20px; 
padding: 20px 20px 20px 60px; 
color:#ffffff; 
font-size: 20px; 
text-align: center;
font: normal 1.1em Georgia; 
border-bottom-left-radius: 15px; 
border-bottom-right-radius: 15px; 
border-top-left-radius: 15px; 
border-top-right-radius: 15px; 
box-shadow: rgb(204, 204, 204) 0px 5px 15px; 
color: #40195e;
} 
.post blockquote p { 
margin: 0; 
padding-top: 10px; 
}

blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(http://t1310.hizliresim.com/1g/8/tdhp3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;

}

Classy Quote stilindeki görünüm;

01	blockquote.style1 {

02	font: 14px/20px italic Times, serif;

03	padding: 8px;

04	background-color: #faebbc;

05	border-top: 1px solid #e1cc89;

06	border-bottom: 1px solid #e1cc89;

07	margin: 5px;

08	background-image: url(images/openquote1.gif);

09	background-position: top left;

10	background-repeat: no-repeat;

11	text-indent: 23px;

12

}

13	blockquote.style1 span {

14	display: block;

15	background-image: url(images/closequote1.gif);

16	background-repeat: no-repeat;

17	background-position: bottom right;

18

}

Çalışmazsa blockquote.style1 { kodunu sadece blockquote { olarak değiştirin. O zaman çalışır.

Modern Quote stilindeki görünüm;

1	blockquote.style2 {

2	font: 14px/22px normal helvetica, sans-serif;

3	margin-top: 10px;

4	margin-bottom: 10px;

5	margin-left: 50px;

6	padding-left: 15px;

7	border-left: 3px solid #ccc;

8

}

Çalışmazsa blockquote.style2 { kodunu sadece blockquote { olarak değiştirin.

Fun Quote stilindeki görünüm;

01	blockquote.style3 {

02	font: 18px/30px normal Tahoma, sans-serif;

03	padding-top: 22px;

04	margin: 5px;

05	background-image: url(images/openquote3.gif);

06	background-position: top left;

07	background-repeat: no-repeat;

08	text-indent: 65px;

09

}

10	blockquote.style3 span {

11	display: block;

12	background-image: url(images/closequote3.gif);

13	background-repeat: no-repeat;

14	background-position: bottom right;

15

}

Fancy Quote stilindeki görünüm;

01	blockquote.style4 {

02	font: 14px/20px italic Times, serif;

03	padding-left: 70px;

04	padding-top: 18px;

05	padding-bottom: 18px;

06	padding-right: 10px;

07	background-color: #dadada;

08	border-top: 1px solid #ccc;

09	border-bottom: 1px solid #ccc;

10	margin: 5px;

11	background-image: url(images/openquote4.gif);

12	background-position: middle left;

13	background-repeat: no-repeat;

14	text-indent: 23px;

15

}

Code Quote stilindeki görünüm;

01	blockquote.style5 {

02	font: 12px/18px normal "Courier New", sans-serif;

03	padding-left: 70px;

04	padding-top: 2px;

05	padding-bottom: 2px;

06	background-color: #000;

07	color: white;

08	border-top: 1px solid #ccc;

09	border-bottom: 1px solid #ccc;

10	margin: 5px;

11	background-image: url(images/openquote5.gif);

12	background-position: middle left;

13	background-repeat: no-repeat;

14	text-indent: 23px;

15

}

16	blockquote.style5 div {

17	padding-right: 50px;

18	display: block;

19	background-image: url(images/closequote5.gif);

20	background-repeat: no-repeat;

21	background-position: bottom right;

22

}

BU DİPNOTLARI MUTLAKA OKUYUNUZ!
1. dipnot:(bu bizim dipnotumuz  kod örneği değil) Yukarıdaki kodları temanızın style.css sayfalarına eklemeniz gerekiyor. Kodları direk eklediğinizde çalışmayabilir. Çünkü farklı stillerde tanımlanmış. Kodlar arasında bulunan;
blockquote.style1 {
blockquote.style2 {
blockquote.style3 {
vesaire gibi kodları direk olarak style vermeden sitenize alın. Yani;
blockquote {
blockquote {
şeklinde değiştirin. Bu sayede kodlar sorunsuz çalışacaktır.

2. dipnot: Kodlar arasında resim url leri bulunuyor. Bu resimleri buradan indirip hostunuza atınız. Ve kodlar arasındaki url kısmını da hostunuza attığınız yere göre düzenleyiniz. Bu resimler yerine kendi resimlerini de oluşturup atabilirsiniz. Bu şekilde bile farklı bir tasarıma imza atmış olabilirsiniz…

http://www.blogasistan.com/guzel-ve-kullanisli-blockquote-css-kodlari-quote.html