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.
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.
Yorumlar
Yorum Gönder