2 Nisan 2014 Çarşamba

“Ne dediler?” Sayfamı Nasıl Oluşturdum?

13 yorum

Bildiğiniz gibi uzun süredir Blog Hocam’da “Ne dediler?” isimli bir sayfa var. Blog Hocam hakkında çeşitli bloglarda yazılan yazıları bir araya getirmek için oluşturmuştum bu sayfayı. Aslında pek çok sitede ve blogda benzer testimonials bölümleri mevcut. Ancak benim bu sayfada kullandığım tasarım ve kodlama beğenilmiş olacak ki nasıl yapıldığıyla ilgili mesajlar aldım. Mesaj gönderen kişilere tek tek anlatmak yerine blogda herkesle paylaşmak daha mantıklı olacak sanırım.

 

ne dediler sayfası

 

1. Adım: Stil kodları

 

İlk olarak stil kodlarını eklemenizi önereceğim. HTML kodlarını ekleyip önizleme yaparken ihtiyacınız olacak.

 

Bunun için Blogger kumanda panelinde Şablon > HTML’yi düzenle yolunu takip ettikten sonra Ctrl + F tuş kombinasyonunun yardmıyla ]]></b:skin> kodunu bulun. Bu kodun üzerinde bir yere aşağıdaki stil kodlarını ekleyin.

 

#testimonials{
    width: 500px;
    margin: 0 auto;}

#testimonials h2 {
    color:#F1921A;
    font:26px Georgia, serif;
    text-shadow:-1px -1px 0 rgba(255,255,255,0.25);}
#testimonials li {
    border-top:3px solid rgba(0,0,0,0.2);
    clear:both;
    padding:40px 0;
list-style: none;}
#testimonials li img {
    border:5px solid transparent;
    float:left;
    -moz-box-shadow:0 0 10px #333;
    -webkit-box-shadow:0 0 10px #333;
    box-shadow:0 0 10px #333;
    -moz-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
    margin:0 20px 0 0;}
#testimonials li:nth-child(2n) img {
    float:right;
    -moz-transform:rotate(5deg);
    -o-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg);
    margin:0 0 0 20px;}
#testimonials p {padding:0 0 20px;}
#testimonials li:first-child {border:none;}
#testimonials div {overflow:hidden;}

 

2. Adım: HTML kodları

 

Stil kodlarını ekleyip şablonu kaydettikten sonra sıra HTML kodlarına geldi. Bunun için Blogger kumanda panelinde Sayfalar > Yeni sayfa yolunu takip ettikten sonra sayfa başlığı olarak “Ne dediler, Referanslar, İnternettebiz” gibi başlıklardan birini yazdıktan sonra sayfanın HTML bölümüne aşağıdaki kodları ekleyebilirsiniz.

 

<ul id="testimonials">
<li>
  <img alt="" src=”http://avatar.png” />
  <h2>Blog Başlığı</h2>
<div>
…. İçerik …. 
<br /><br />
<div style="text-align: right;">
<a href=”http://yazı.html” rel="nofollow" target="_blank">Nerede dedi?</a></div>
</div>
</li>

<li>
<img alt="" src=”http://avatar.png” />
<h2>Blog Başlığı</h2>
<div>
…. İçerik ….

<br /><br />
<a href="http://yazı.html" rel="nofollow" target="_blank">Nerede dedi?</a></div>
</li>

</ul>

 

Sayfayı kaydetmeden önce önizleme yapıphata olup olmadığını konrtol edin. Eğer bir problem yoksa kaydedebilirsiniz.

 

Sayfaya yeni öğe eklemek

 

- <li> ile başlayıp </li> ile biten her bölüm yenibir öğeye ait kod parçasıdır. Burada dikkat etmeniz en önemli şey ekleyeceğiniz öğenin kodlarını </ul> satırının üstüne yapıştırılmasıdır.

 

- “Nerede dedi?” linkini sağa yaslamak için <div style="text-align: right;">  komutunu kullandığımı fark etmişsinizdir. Sola yaslamak için herhangi bir komut eklmenize gerek yok.

 

- http://avatar.png yazan yere ilgili blogun 90x90 boyutundaki avatar veya profil resminin urlsini yazmalısınız. Avatarı hızlıresim, picasa, dropbox, photobucket gibi servislere upload ettikten sonra urlsini alabilirsiniz.

 

- Blog Başlığı yazan yere ilgili blogun ismini yazacaksınız. Başlık renklerini BH’ye uygun olması için turuncu yapmıştım. Değiştirmek isterseniz color:#F1921A yerine istediğiniz renk kodunu yazabilirsiniz.

 

- İçerik yazan yere ilgili blogda hakkınızda neler yazıldığını ekleyeceksiniz.

 

- http://yazı.html yazan yere ilgili blogda sizden bahsedilen yazının urlsini yazacaksınız.

 

Kafanıza takılan bir yer olursa yorum bölümünden sorabilirsiniz. Ayrıca Blog Hocam’dan bahsettiğiniz bir yazınız varsa linkini 90x90 boyutlarında bir profil resmi veya avatarla bana gönderirseniz “Ne dediler?” sayfasına koymak isterim.

13 yorum:

  1. Verdiğiniz faydalı bilgilere kolayca ulaşmaya ve bloğunuzu takibe devam...bir faydalı yazı daha. Teşekkürler.

    YanıtlaSil
  2. Sizin kadar okuyucusunu düşünen bir blog görmedim serdar bey.

    YanıtlaSil
  3. selam en üst kısımda yazan blog hocam başlığını nasıl ayarlıyacağız yani boyunutun bende o kdar genişlikte bir logo eklemek istesem teşk

    YanıtlaSil
  4. Başarılı ve mantıklı tebrikler ; yeni konuları sabırla bekliyoruz ..

    YanıtlaSil
  5. Hep merak etmiştim bu sayfayı :)

    YanıtlaSil
  6. Ben de bu şekilde > http://www.candirgen.com/kim-ne-dedi/

    YanıtlaSil
  7. Serdar Hocam yine güzel bir makale ile bizlere ilham verdiniz. Teşekkürler

    YanıtlaSil
  8. hocam bu harika oldu. Teşekkürler. önerdiğim kitaplar sayfamı göz alıcı yaptı.

    YanıtlaSil
  9. Gerçekten de çok merak ettiğim bir eklentiydi, beni de kırmayıp açıkladığınız için ÇOK teşekkür ediyorum Serdar bey, hemen uygulayacağım :)

    YanıtlaSil
  10. Merhaba arkadaşlar background:#fff; buraya resimli arkaplan nasıl ekleriz

    #top {
    height: 150px;
    width: 1000px;
    margin: 0px auto;
    background:#fff;
    overflow:hidden;

    YanıtlaSil
  11. Arkadaşlar Sağ'daki Sidebarı (Kategorileri yada popüler yayınları vb.) nasıl çerçeve içine alabiliriz..

    YanıtlaSil
  12. Teşekkürler. Bende yakında sitem de böyle bir sayfa oluşturacağım.

    YanıtlaSil

Picardes

LİNKLER