3 Adımda Twitter’da Hedef Takipçi

Dünya’da şuan en aktif ve en popüler sosyal ağın Twittter olduğunu söylemek yanlış olmaz sanırım. Her yaştan, her sosyal statüden, her meslek grubundan kullanıcısı olan Twitter, blogularınızı ve blog yazılarınızı insanlara tanıtmak için eşsiz br mecra. Fakat bu iş göründüğü kadar kolay değil ne yazık ki.

 

Twitter’dan trafik yani hit kazanmak için öncelikle çok sayıda takipçiniz olması gerekir. Daha da önemlisi takipçilerinizin gerçekten blogunuzun konusuyla ilgili kişilerden oluşması gerekiyor. Takipçi satın alarak veya karşılık takipleşme etkinliklerine katılarak onbinlerce takipçi sayısına ulaşsanız bile tıklanma oranları çok düşük olacağı için size dönüşü olmayacaktır.

 

Uzun lafın kısası Twitter’da blogunuzun konusuyla ilglenen takipçi sayınız ne kadar çok olursa Twitter kaynaklı trafiğiniz de o kadar fazla olacaktır. Bunun için çeşitli yöntemler var elbette. Bu yazımda da Twitter’da nitelikli takipçi sayınızı arttırmanın denenmiş, onaylanmış yöntemlerinden birini anlatacağım.

 

1. Adım: Tespit

 

Öncelikle blogunuzun konusuyla ilgili top blogları tespit etmelisiniz. Zaten blog yazdığınız konu, ilgi duyduğunuz konu olduğu için o konudaki popüler ve top blogları muhtemelen biliyorsunuzdur. Esasında sadece blog olmak zorunda da değil. Blogunuzun konusuyla ilgili yazılmış ve Twitter’da çok sayıda paylaşılmış bir yazıyı da bulabilirsiniz.

 

2. adıma geçmeden neden bu popüler blogları ve yazıları tespit ettiğimizden kısaca bahsedeyim. Blogunuzun konusuyla ilgili popüler bloglardaki yazılar büyük ihtimalle onlarca hatta yüzlerce kez tweetlenmiştir. Yani bu yazıları tweetleyenler sizin hedef kitlenizdir. Bu popüler bloglar sayesinde Twitter’daki hedef kitlenize çok kolay bir şekilde ulaşabileceksiniz.

 

2. Adım: Erişim

 

Blogunuzun konusuyla ilgili popüler bir blogda, çok sayıda kişi tarafından tweetlenmiş bir yazı bulduktan sonra sıra o yazıyı tweetleyen kişilere ulaşmaya geldi. Bu kişiler sizin için çok önemlidir çünkü blogunuzun konusuyla ilgilidirler. Bundan sonraki amacınız o kişilern sizi takip etmesini sağlamak olacak ama önce bu kişileri nasıl görebileceğinizi göstermek istiyorum.

 

 

Örnekte gösterdiğim gibi Twitter’daki paylşım sayısını gösteren kutucuğa tıkladığınızda yazıyı Twitter’da paylaşanların listesi karşınıza çıkacaktır.

 

3. Adım: İletişim

 

Artık blogunuzun konusuyla ilgili Twitter kullanıcılarının listesi karşınızda. Tabi bu liste sadece 1 yazı için geçerli. Bu yöntemi yüzlerce yazı için uyguladığınızda liste epey kabarık olacaktır.

 

 

Artık hedefiniz bu kullanıcılarla iletişime geçmek ve sizi takip etmelerini sağlamak. Diğer bir deyişle dikkatlerini çekmek. Bunun da iki yolu var.

 

- Takip Etmek: Hedeflediğiniz bu kullanıcıları Twitter’da takip etmeye başladığınızda onnlara bir bildirim gidecek ve sizin takip etmeye başladığınız bildirilecektir. O kişi sizi merak edip profilinize baktığında ilgi duyduğu konuda tweetler attığınızı, linkler paylaştığınızı görecek ve büyük ihtimalle sizi takip etmeye başlayacaktır.

 

- Mention: Hedef kullanıcılarla iletişim kurmanın bir yolu da tweetlerinizde o kişiyi mentionlamak yani tweetinizin başına ya da sonuna @bloghocam şeklinde kullanıcı adını yazmaktır. Bu durumda da kendisine bir bildirim gidecek ve merak edip profilinize baktığında yine büyük ihtimalle sizi takip etmeye başlayacaktır.

 

Sonuç Ve Hatırlatmalar

 

3 adımı başarıyla tamamladıktan sonra yapmanız gereken şeyt bekleyip Twitter’daki takipçi sayınızın artışını beklemek olacak. Üstelik hepsi gerçek, ilgili ve bilinçli kullanıcı.

 

3 adımdan oluşan bu takipçi arttırma stratejisini uygulayacaklara başarı yüzdesini arttıracak bazı önemli hatırlatmalar yapmak istiyorum.

 

- Günlük limitlere dikkat edin! Aynı gün içerisinde çok sayıda kişiyi takip etmek Twitter hesabınızın askıya alınmasına yol açabilir.

 

- Aynı kullanıcıyı arka arkaya mentionlamayın. Bu durum bazen insanların sinirlerini bozabilir.

 

- Hedef kullanıcıları belirlerken tweet akışına mutlaka göz atın. En son tweeti ne zaman gönderdiğine bakın. Aktif kullanıcı değilse uğraşamaya değmez.

Push Butonlu Sosyal Medya ve E-posta abonelik eklentisi

Bugün sizler için hazırladığım blogger için çok şık bir E-Posta Abonelik Eklentisini anlatacam. Düğme butonlu, üzerine gelindiğinde aç-kapa basma efekti veren, 4 sosyal medya, 1 RSS butonuyla güzel bir eklenti. Bu E-posta abonelik eklentisiyle blogunuzun okuyucularınızı güncel tutabilirsiniz. Aslında blogger'in kendi gadgetleri arasında E-posta abonelik eklentisi bulunsada pek göze hitap etmediği için çoğu blog sahibi kullanmıyor. Bu yüzden aynı amaçla oluşturduğum ama göze biraz daha hitap eden bu E-posta abonelik eklentisiyle çok daha fazla kullanıcıya hitap edebileceksiniz. Yazdığınız yazılar E-mail yoluyla takipçilerinize ulaşacak ve takipçileriniz çok daha fazla sitenize girerek yeni konularınızı okuyabilecek ve yorum yapabilecekler.

Push Butonlu Sosyal Medya ve E-posta abonelik eklentisi Önizleme:

Yayınlanacak Yeni Yazılar E-mail Adresinize Gelsin…

Push Butonlu Sosyal Medya ve E-posta abonelik eklentisini Ekleme :

• Blogger panelinize giriş yapın Yerleşim → Gadget Ekle → HTML/JavaScript yolunu takip edin.
• Ve aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın.
• Kaydet diyip çıkın.

<style type='text/css'>
#mefabone-widget{width:300px;background:#ddd;max-height:400px;border:4px ridge green;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;margin:0;padding:0;}
#abone{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjky0StknisL01rO8s3Kx0ok-BdF24Ow5uDBSmRQnaj7nyBWZjLGAFsLxQruKVJYlYrb3KutIJm6vASaW4bFPoG6cSMzVajCTcNWdJKKNKA74RQNYH4UxdSo5L3gt37sEGsUUNlm3-qx0/s1600/blogger-e-posta-abonelik-eklentisi.png) no-repeat scroll 100% 100% transparent;width:266px;height:124px;margin:5px 15px -100px;padding:0;}
#mede{width:300px;margin:0;text-align:center;}
#mede img{width:80px;height:80px;border-style:none;}
.ara{margin:auto 2px;}
.bulten{height:55px;text-align:center;margin:0 0 5px;}
.mefbutton{background-color:#82d4fe;font-size:12px;font-family:helvetica,georgia,oswald;font-weight:700;text-decoration:none;transition:all .2s ease 0;cursor:pointer;color:#333;border:1px solid #ddd;margin:5px;padding:4px 20px;}
.mefbutton:hover{background-color:#3d694e;text-align:center;box-shadow:0 0 8px 0 #FFF;-webkit-box-shadow:0 0 5px 0 #FFF;-moz-box-shadow:0 0 5px 0 #FFF;border:1px solid #fff;color:#fff;}
.email{background:none repeat scroll 0 0 #fff!important;float:left;width:250px;height:25px;border:1px solid #ddd;font-size:11px;font-family:helvetica,georgia,arial,oswald;margin:0 25px;padding:2px 3px;}
</style>
<div id="mefabone-widget">
<div id="abone"></div>
<p style="color:#3A3A3A;text-align:center;text-shadow:0 1px 0 #FFF;font-size:12px;font-weight:700;font-family:Tahoma,helvetica,arial,oswald;">Yayınlanacak Yeni Yazılar E-mail Adresinize Gelsin…</p>
<div class="bulten">
<form action="http://feedburner.google.com/fb/a/mailverify" class="bulten" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MeftunMede', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" name="email" onblur="if (this.value == '') {this.value = 'Buraya E-postanızı girin...';}" onfocus="if (this.value == 'Buraya E-postanızı girin...') {this.value = '';}" type="text" value="Buraya E-postanızı girin..."/>
<input name="uri" type="hidden" value="MeftunMede"/>
<input name="title" type="hidden" value="MeftunMede"/>
<input name="loc" type="hidden" value="tr_TR" />
<input class="mefbutton" name="submit" type="submit" value="Gönder"/>
</form>
</div>
<div id="mede">
<a href="https://www.facebook.com/meftunmede.blogger" rel="nofollow" class="ara" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_VnbwwWBbe4VFnysTWv5lkduxRsxXwZRSRLe9kwceUHQSq504vnmWRdTvcX_Q5KPv6C0rLn_DUlNVuaBGXUtow1PE4vZtUSF8LhcUfROms4IWYHuM9-25FegRcrVM2WnOIukaRaJDpiQ/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8j6SpzyKn3i6CCui5VDqxQnZGnNvTNhTZ1rizzH4dY3r1mwwnqhYwfpReGzdxORfm_yz1O45dD2-MZVE_QF2HWU0BOylfc0BnGuXytv4Bf_SR12KGLPQCXG95iVC_4kKltn91QKB1EOKh/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_VnbwwWBbe4VFnysTWv5lkduxRsxXwZRSRLe9kwceUHQSq504vnmWRdTvcX_Q5KPv6C0rLn_DUlNVuaBGXUtow1PE4vZtUSF8LhcUfROms4IWYHuM9-25FegRcrVM2WnOIukaRaJDpiQ/s1600/Facebook.png" title="Facebook'ta Beğenin" alt="Facebook" height="80" width="80"/></a>
<a href="https://twitter.com/MeftunMEDE" rel="nofollow" class="ara" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLfN7htI1xkjWdvyiHDfFFIOvs4xe5P9lFhOulKmOYiqIefA1bs5uBtF3wAFrZmCIRRevVipyRno2gMewhyphenhyphenXW8ivmFJi5qZ07zG1uhDQDreeHeVw9ZeRVuEwUbZ-wjZlw3ue3aO2pk-fHt/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJlD6nrHUUqXWIndDKJxYiouHsV-CKhqZiEBO-auTtutO4eTTPQhaD3kL_l0C5Jq_-3IdkAhGPan9yQL98WPQl72oVqWWZGxS2s4BNRO7nepAzr2qZO0TLN9GN18S55FaaYdtAL_7A23K/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLfN7htI1xkjWdvyiHDfFFIOvs4xe5P9lFhOulKmOYiqIefA1bs5uBtF3wAFrZmCIRRevVipyRno2gMewhyphenhyphenXW8ivmFJi5qZ07zG1uhDQDreeHeVw9ZeRVuEwUbZ-wjZlw3ue3aO2pk-fHt/s1600/Twitter.png" title="Twitter'da Bizi Takip Edin" alt="Twitter" height="80" width="80"/></a>
<a href="https://plus.google.com/111555326072108216342" rel="nofollow" class="ara" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXZyFrX_T_sY6SnsOV9jiE_c8UPvN2PdQ-u0BjiJv-5YvhPNVr7uQnmN82Kx4rOLprRqgnCcuHo4YMYdsJh4CTS0_znQur_-rNehwvu6qEKnpaz-Vf8M9Tcc92XpGaV6gB3b67BQ4A2H5/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ejIUQYAgnAHsn4KplgCsGnErXNXOq6-tWbzh_3L1405Zba8EpqQCW8SOhkvDFbNNTjdNA5RVgUPEv5Fk46HHX4LgtnxCo1QP1HbgR23ko-RzuVnWdKrWuDOU_4WW2dvCpBjlVyHBhZZi/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXZyFrX_T_sY6SnsOV9jiE_c8UPvN2PdQ-u0BjiJv-5YvhPNVr7uQnmN82Kx4rOLprRqgnCcuHo4YMYdsJh4CTS0_znQur_-rNehwvu6qEKnpaz-Vf8M9Tcc92XpGaV6gB3b67BQ4A2H5/s1600/Google.png" title="Google plus'da Bizi Takip Edin" alt="Google" height="80" width="80"/></a>
<a href="http://pinterest.com/meftunmede" rel="nofollow" class="ara" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIEiev5YclqRWJlWFyR9Jb7K6C9FmFfFtkU_Hc0rJ27YAxl5lxLpVX8-a7IenA6l9dVBPt8iVzEkMJCJRG6Xo7GEJHyu9Asv2kajlJGUnFpEE2-NaqUwWMkGotgjBo2uakJOXiS1Ro0ZBb/s1600/pinterst.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4-hKuYGg6nSViOVb6pxhNWn3r5t8cnwbcSLLNpq2w-_AU8Ausn_5gK19cz8wKSilFLYVktkZy7zecGGcCHfeoDJd7Q7POhTiwZLuFYt4uMSgPFc_w0CixHpo2J60Jtf_LmYYkqW8t7yq/s1600/pintrest_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIEiev5YclqRWJlWFyR9Jb7K6C9FmFfFtkU_Hc0rJ27YAxl5lxLpVX8-a7IenA6l9dVBPt8iVzEkMJCJRG6Xo7GEJHyu9Asv2kajlJGUnFpEE2-NaqUwWMkGotgjBo2uakJOXiS1Ro0ZBb/s1600/pinterst.png" title="Pinterest'de Takip Edin" alt="pinterest" height="80" width="80"/></a>
<a href="http://feeds.feedburner.com/MeftunMede" rel="nofollow" class="ara" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7a2BZe4-_XvLnDY8iLEW0VgzvDOnPPTP9FcLV35taPYl4HO2Jex3yVUOxWcjpQbaTx32Fo0TYFy5mpXaisq64_7-ROpeqzLbfnq7lORATk4ECV9pIXFKukIaH1KXgPB3-2BLdJvPFqaQ/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnVfL6YiTQuE5n2JDXtOWviUgPuTCCEW7l7T4tMSdYi_vIq6dyXhInMTPSRx6oFZxaIkN5_qb4jqJLKkDSJT2dEVamK3IfBWjDb9PXJqA5rjGfp10zKbQC2KbB-wFjmSurZ2PRNTlOQKy/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7a2BZe4-_XvLnDY8iLEW0VgzvDOnPPTP9FcLV35taPYl4HO2Jex3yVUOxWcjpQbaTx32Fo0TYFy5mpXaisq64_7-ROpeqzLbfnq7lORATk4ECV9pIXFKukIaH1KXgPB3-2BLdJvPFqaQ/s1600/Rss.png" title="RSS Özet akışlarına Abone olun" alt="RSS" height="80" width="80"/></a>
</div>
</div>

Özelleştirme:

Yukarıda kırmızıyla işaretledigim bölümlere Facebook, Twitter, Google+, Pinterest, RSS ve Feedburner adreslerinizi yazmayı unutmayın. ilk önce Online HTML Editör ile oluşturdugunuz kodu deneyin. Rengini, fontları, kendi isteginize göre ayarlayıp, ondan sonra blogunuza ekleyin.
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

Başarılı Bir Dekorasyon Blogu: Yapı Dekoratif

Google+ veya e-mail üzerinden sohbet ettiğim arkadaşlar bilirler bir süredir restoran projesinde çalıştığımı bilirler. Son zamanlarda mevcut işimin dışında restoranın dekorasyon, peyzaj ve tadilat işleriyle uğraştığımdan dolayı Blog Hocam’a pek vakit ayıramadığımı fark etmişsinizdir. Üzgünüm ama büyük ihtimalle restorandaki düzeni kurana kadar bu yoğunluğum devam edecek. Dolayısıyla eskisi kadar aktif bir Blog Hocam göremeyebilirsiniz. Bu konuyla ilgili detaylı bir bilgilendirme yazısı ilerleyen günlerde yayınlayacağım için esas konumuza dönmek istiyorum.

 

Restoranın dekorasyon işleri için iç mimar arkadaşlarımdan yardım alsam da her şeyi onların eline vermek pek doğru gelmedi bana. Bu yüzden hem iç, hem de bahçe dekorasyonu için sürekli araştırmalar yaptım, makaleler okudum, ve tabi ki bloglar takip ettim. Bu yazıda da Türkçe yazılmış en iyi dekorasyon bloglarından biri olan Yapı Dekoratif isimli siteden bahsedeceğim.

 

 

Yapı Dekoratif: Başarılı Bir Dekorasyon Blogu

 

Haziran 2012’de yayın hayatına başlayan Yapı Dekoratif, dekorasyon ve yapı sektöründeki faydalı bilgileri bizlerle paylaşan güncel ve oldukça aktif bir blog. Ev, ofis ve bahçe dekorasyonlarıyla ilgilenen blogger arkadaşlar, Yapı Dekoratif’i takip ederek alacakları hizmetin kalitesini arttıracakları gibi teknik konularda bilgi sahibi de olabilirler.

 

Dekorasyon ve yapı sektörü günümüzde çok önemli bir hale geldi. Evlenirken ev kurmak, iş hayatına girip ofis kurmak, belki küçük, bahçeli bir müstakil evde emekliliğini geçirmek… Bunlar çoğumuzun başından geçen ya da geçebilecek şeyler. Ben henüz emeklilik aşamasına gelmedim ama ilk iki evreyi tamamladım. Bu süreçte evinizi veya ofisinizi dekor ederken sizi en çok zorlayan şeylerden biri rekabetten doğan hizmet ve ürün çeşitliliği. Bu kadar çeşitlilik arasında hem zevke uygun, hem de kaliteli olan ürün veya hizmetin seçilmesi önem teşkil ediyor. İşte bu yüzden yapı & dekorasyon bloglarını takip etmek önemli. Türikiye’de ki en başarılı ve güncel yapı & dekorasyon bloglarından biri Yapı Dekoratif olduğu için, takibe buradan başlayabilirsiniz :)

Blogger Başlık Etiketleri

Heading yani başlık etiketleri blog içeriğinizin hangi konuda olduğunu arama motorlarına belirten temel HTML etiketleridir. Toplam 6 adet başlık etiketi vardır ve önem derecesine göre H1’den H6’ya kadar gider.

 

Blogger’da ise önem sırasına göre başlık etiketlerini şu şekilde kullanmanızı öneririm:

 

<h1> Blog Başlığı </h1>

 

Bunun için ekstra bir ayar veya kodlama yapmanıza gerek yok. Blogger kumanda panelinde Ayarlar > Temel > Başlık bölümne yazdığınız blog başlığı h1 olacak şekilde kodlanmıştır.

 

<h2> Yazı Başlığı </h2>

 

Blogger’ın standart şablonlarında yazı başlıkları h3 olacak şekilde kodlanmıştır fakat blog başlığından sonra en önemli öğe yazı başlığı olduğu için bunun h2 etiketiyle belirtilmesi daha doğru olacaktır.

 

Blogger kumanda panelinde Şablon > HTML’yi düzenle dedikten sonra Ctrl + F tuş kombinasyonunu kullanarak arama kutusunu açın ve buraya h3 yazın. Bulduğunuz tüm <h3> ve </h3> etiketlerini <h2> ve </h2> etketleriyle değiştirin.

 

<h3> Ara Başlıklar </h3>

 

Uzun bir yazınız olduğunu ve bu yazıın bazı bölümlerini ara başlıklar kullanarak belirttiğinizi düşnelim. İşte bu ara başlıkları h3 etiketiyle göstermek uyun olacaktır. Bunun için Blogger’da yayın oluştururken kullandığınız yazı editöründeki birinci Alt başlığı seçmeniz yetrlidir. Alt başlığı seçtikten sonra yazınızın HTML bölümünden h3 etiketinin eklendiğini görebilirsiniz.

 

 

<h4> Alt Başlıklar </h4>

 

Ara Başlıkları da kendi aralarında alt başlıklara ayırdığınızı düşünelim. Bu durumda alt başlıklarda h4 etiketi kullanmak uygundur. Bunun için Blogger’da yayın oluştururken kullandığınız yazı editöründeki ikinci Alt başlığı seçmeniz yetrlidir. Alt başlığı seçtikten sonra yazınızın HTML bölümünden h3 etiketinin eklendiğini görebilirsiniz.

 

 

Bunlar dışında h5 ve h6 etiketini kullanmanıza gerek yok.

 

H Etiketlerini Düzenleme

 

Yazılarnızda H etiketlerini kullanmak, arama motoru optimizasyonunun olmazsa olmazlarındandır. Adeta arram motorlarına yazının konusunu ve özetini bildirir. Ancak bu başlık etiketlerini kullandığnızda, başlıklarınızın  renk ve boyutu değiştiğinden görsellik açısından sıkıntı olabilir. Ancak bunu düzeltmenin de bir yolu var elbette.

 

Blogger kumanda panelinde Şablon > HTML’yi düzenle dedikten sonra ]]></b:skin> kodnu bulun ve üzerinde bir yere aşağıdaki kodları ekleyin.

 

.post h3{
color:#000;
font-size: 12px;
}

 

.post h4{
color:#000;
font-size: 10px;
}

 

Ben sadece renk ve boyut kadlarnı yazdım ama parantez içine istediğiniz CSS özelliklerini ekleyebilirsiniz.

 

Kafanıza takılan bir yer veya konuyla ilgili bir sorunuz varsa yorum bölümünden sorabilirsiniz. Eğer bu yazıyı faydalı bulduysanız ütfen aşağıdaki paylaşım butonlarını kullanarak paylaşın.

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

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.