Web Dinamik: Blogger İpuçları

Blogger İpuçları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

13 Haziran 2016 Pazartesi

Blogger “All In One” SEO Paketi

Blog yazarlığına başlayan herkes bir süre sonra normal olarak kafayı ziyaretçi sayısını arttırmaya takıyor. Bunun için de Google aramalarında daha üst sıralarda çıkmanın yollarını araştırıyor. Sonuç olarak her blogger er ya da geç SEO ile tanışıyor.

Dünyanın en popüler ve ücretsiz içerik yönetim sistemi olan Blogger’da Wordpress veya diğer içerik yönetim sistemlerindeki otomatik SEO paketleri bulunmadığından Blogger kullanıcıları olarak bir bazı SEO düzenlemelerini kendimiz yapmalıyız. Blogger’da bunu yapmanın yolu ise meta tag eklemekten geçiyor.

Meta Tag Nedir? Ne İşe Yarar?

Meta tag, sayfanın kodlarına eklenen fakat ziyaretçiler tarafından görünmeyen, eklendiği sayfanın içeriğini tanımlayan metin parçalarıdır. Meta tagler arama motorlarının siteleri ziyaret eden örümcek dediğimiz botları tarafından algılanır ve arama motoruna o sayfanın ne ile ilgili olduğu hakkında bilgi verir.

Meta tagler sayfanın HTML kodları arasında <head> ve </head> kodları arasında yer alır. Blogger’da Şablon > HTML’yi Düzenle dediğinizde <meta content='…………..' name='…………'/> şeklinde gördüğünüz satırlar birer meta tagdir ve hepsinin anlamı vardır.

Blogger’a bu meta kodlarını doğru ve güncel bir şeklinde eklerseniz Blogger üzerinde yapılabilecek pek çok optimizasyon işlemini yapmış olursunuz. Bu yüzden bune All In One SEO paketi dedim.

Blogger All In One SEO Paketi

Aşağıda gördüğünüz meta tagleri şablonunuzun HTML kodlarında <head> satırının altına ekleyeceksiniz. Tabi ekleyeceğiniz meta tag daha önce eklenmişse silmeniz gerekmektedir.

<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='kelime1, kelime2, kelime3' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/+BloghocamBlogspot/posts' rel='publisher'/>
<link href='https://plus.google.com/+SerdarKara/about' rel='author'/>
<link href='https://plus.google.com/+SerdarKara' rel='me'/>
<meta content='xxxxxxxxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxx' name='alexaVerifyID'/>
<meta content='Istanbul, Turkey' name='geo.placename'/>
<meta content='Serdar Kara' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Turkey' name='geo.country'/>
<meta content='tr_TR' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta name="language" content="turkish"/>
<meta content='https://www.facebook.com/serdarkara.bh' property='article:author'/>
<meta content='https://www.facebook.com/bloghocam' property='article:publisher'/>
<meta content='@BlogHocam' name='twitter:site'/>
<meta content='@BlogHocam' name='twitter:creator'/>

Değiştirmeniz gereken yerleri mavi renkle gösterdim. Şu şekilde düzenlemeniz gerekiyor:

<meta content='kelime1, kelime2, kelime3' name='keywords'/> kelime1, kelime2, kelime3 yerine önemli anahtar kelimelerinizi yazın.
<link href='https://plus.google.com/+BloghocamBlogspot/posts' rel='publisher'/> buraya blogunuz için oluşturduğunuz Google+ sayfasının urlsini yazın. Eğer sayfa oluşturmadıysanız kişisel Google+ profilinizin urlsini yazabilirsiniz.
<link href='https://plus.google.com/+SerdarKara/about' rel='author'/>
<link href='https://plus.google.com/+SerdarKara' rel='me'/> buralara kişisel Google+ proflinizin urlsini yazın.
<meta content='xxxxxxxxxxxxxxx' name='google-site-verification'/> buraya Google Search Console kodunu yazın.
<meta content='xxxxxxxxxxxxxxx' name='msvalidate.01'/> buraya Bing Webmaster Tools kodunu yazın.
<meta content='xxxxxxxxxxxxxxx' name='alexaVerifyID'/> buraya Alexa kodunuzu yazın.
<meta content='Istanbul, Turkey' name='geo.placename'/> buraya bulunduğunuz şehri yazın.
<meta content='Serdar Kara' name='Author'/> buraya blog yazarının ismini yazın.
<meta content='https://www.facebook.com/serdarkara.bh' property='article:author'/> buraya kişisel Facebook profilinizin urlsini yazın
<meta content='https://www.facebook.com/bloghocam' property='article:publisher'/> buraya blogunuzun Facebook sayfasının kullanıcı adını yazın.
<meta content='@BlogHocam' name='twitter:site'/> buraya blogunuzun Twitter hesabının kullanıcı adını yazın.
<meta content='@BlogHocam' name='twitter:creator'/> buraya kişisel Twitter hesabınızın urlsini yazın. Tekbir Twitter hesabı kullanıyorsanız ikisine de aynı kullanıcı adını yazın.

Eklediğimiz Bu Meta Tagler Ne İşe Yarar?

Kodlarla haşır neşir olanlar bu meta taglerin çoğunun ne anlama geldiğini kolayca anlayacaktır ama ben yine de genel olarak bu ayarların blogunuza katkısından bahsedeyim.

Sayfa başlıkları optimize edilecektir. Arama sonuçlarında yazı başlığı blog başlığından önce görünecektir. Indexlemeler daha düzenli yapılacaktır. Mükerrer indexlemelerin önüne geçilecektir. Google, Bing ve Alexa verify kodları yer almaktadır. Facebook, Twitter ve Google+ paylaşımlarında alakasız başlık, açıklama ve görüntü düzelecektir.

19 Şubat 2016 Cuma

Alan Adını Blogger'a Yönlendirme

Bir önceki yazıda anlattığım domain yani alan adı satın alma konusundan sonra sıra satın aldığımız bu domaini blogumuza uygulamaya geldi. Bu yazıda anlattıklarım sayesinde alan adınızı Blogger’a yönlendirerek blogismi.blogspot.com şeklinde olan blogunuzu blogismi.com şeklinde kullanabileceksiniz.

Ben anlatımı daha önce belirttiğim gibi IHS sitesi üzerinden yapacağım ama diğer domain sitelerinde de benzer adımları uygulayarak alan adını bloggera yönlendirebilirsiniz.

Haydi başlayalım…

1.Adım: Domaini satın aldığımız firma olan IHS’nin kullanıcı girişi bölümünden e-destek paneline giriş yapıyoruz ve alan adlarım kısa yoluna tıklayarak satın aldığımız domainlerin olduğu sayfayı açıyoruz.

2.Adım: Bu sayfada satın aldığımız alan adlarının listesini görebiliriz. Blogumuzda hangi alan adını kullanacak isek onun yanındaki yönet butonuna tıklıyoruz.

3.Adım: Açılan sayfanın alt tarafındki yönetim işlemleri bölümünden pasif olduğu için renksiz gözüken DNS Zone servisi (kapalı) yazan yere tıklıyoruz.

4.Adım: Pasif olduğu için renksiz gözüken DNS ikonuna bir kez tıkladığımızda servis aktif olacak ve DNS ikonu renkli hale gelecektir.

5.Adım: Bu sayfada DNS kayıtları ekleyeceğiz. Kayıt tipi olarak CNAME seçtikten sonra altta açılacak olan domain adı bölümüne www yazıyoruz, CNAME bölümüne ise ghs.google.com yazıyoruz ve devam butonuna tıklıyoruz.

6. Adım: Aynı işlemi tekrarlayarak yeni bir CNAME kaydı daha ekleyeceğiz fakat bu kez domain adı bölümünü boş bırakıyoruz. CNAME bölümüne yine ghs.google.com yazarak devam butonuna tıklıyoruz.

7. Adım: Blogger kumanda panelimize giderek Ayarlar > Temel > Yayıcılık bölümündeki blog adresimizin altındaki “Blogunuz için üçüncü taraf bir URL ayarlayın” linkine tıklıyoruz.

8. Adım: Açılan kutuya kullanacağımız alan adımızı başında www olacak şekilde www.blogismi.com gibi yazıyoruz ve kaydet butonuna tıklıyoruz.

9. Adım: Kaydet butonuna bastıktan sonra “Bu alan adına ilişkin yetkinizi doğrulayamadık. Hata 12” şeklinde bir hata mesajı alacağız. Endişe edilecek bir şey yok çünkü her şey olması gerektiği gibi. Bu sayfayı kapatmayın çünkü aşağıda yazan kodları IHS paneline gireceğiz.

10. Adım: Aynı 5. ve 6. adımda olduğu gibi tekrar bir DNS kaydı ekleyeceğiz. Kayıt tipi olarak CNAME seçtikten sonra altta açılacak olan domain adı bölümüne bir önceki adımda 1 olarak gösterdiğim www satırının altındaki kodu yazıyoruz. CNAME bölümüne ise 2 olarak gösterdiğim ghs.google.com satırının altında yer alan ve googlehosted.com ile biten kodu ekliyoruz. Ve devam butonuna tıklıyoruz.

11. Adım: Tekrar hata mesajının olduğu Blogger paneline dönerek bir kez daha kaydet butonuna tıklıyoruz. Bu kez hata vermeden kaydettiğini ve blogspot adresimizin yanında “yönlendiriyor” yazdığını göreceğiz.

12. Adım: Son olarak www.blogismi.com olan alan adımızın anındaki düzenle linkine tıklıyoruz ve alan adımızın yazdığı bölümün altındaki blogismi.com öğesini www.blogismi.com konumuna yönlendir kutucuğunu işaretleyip kaydediyoruz.

Son: Artık yeni alan adınızı kullanmanız için gereken tüm ayarlar yapılmıştır. Yönlendirme işlemi genellikle birkaç dakika içerisinde gerçekleşse de 24 saate kadar sürebileceğini hatırlatmak isterim. Eğer 24 saat geçmesine ve IHS panelindeki CNAME kayıtları aşağıdaki resimde gördüğünüz gibi olmasına rağmen yeni alan adınızla blogunuz hala açılmıyorsa tarayıcınızın çerezlerini temizlemeyin.

Alan adını Blogger’a yönlendirmeyi, DNS ve CNAME ayarlarını olabildiğince sade ve net bir şekilde anlatmaya çalıştım ama umarım başarabilmişimdir. Alan adını IHS dışında bir firmadan aldıysanız yine benzer şekilde DNS servisini aktifleştirecek ve resimdeki 3 adet CNAME kaydını ekleyeceksiniz.

10 Şubat 2016 Çarşamba

Blog Yazarının Yorumlarını Dikkat Çekici Hale Getirme

Bir süre önce revize ettiğim blog teması üzerinde ufak tefek rötuşlar yapmaya devam ediyorum. Bu süreçte merak edilen, dikkat çeken ve farklı olduğunu düşündüğüm işlemleri de buradan paylaşıyorum ve paylaşmaya devam edeceğim.

Son olarak bloga eklediğim “yorum bölümünde blog yazarının yanına rozet koyma” işlemini de faydalı gördüğüm için sizlerle de paylaşmak istedim.

Blog yorumlarında blog sahibinin yorumunun dikkat çekmesi gerektiğini düşünüyorum. Özellikle BH gibi öğretici içerikleri olan bloglarda yorum bölümü çok aktif kullanılıyor. Blog yazarına pek çok soru soruluyor ve soruyu soran dışında diğer okuyucular da yazarın cevaplarını merak edebiliyor. Çünkü bazen yazıda paylaşmayı unuttuğumuz veya gerek görmediğimiz detaylar yorum bölümünden sorulduğunda pek çok okuyucunun işine yarayabiliyor.

Bu nedenle Blog Hocam’da benim yaptığım yorumların dikkat çekmesi için ismimin yanına küçük bir ikon koymak istedim. Bunun için de bazı sosyal medya platformlarında “onaylı hesap” anlamına gelen küçük onay rozetini kullandım.

Bu ekran görüntüsünde ve blogdaki bana ait yorumlarda göreceğiniz bu uygulamayı blogunuza eklemek çok kolay. Yapmanız gereken şey Blogger kumanda panelinize giriş yapıp Şablon > HTML’yi Düzenle diyerek şablonun kodlarını açmak ve burada Ctrl + F tuş kombinasyonu ile açılacak arama kutusunun da yardımıyla aşağıdaki kodu bulmak:

.comments .comments-content .icon.blog-author

Bu kodun devamında parantez içinde yer alan kodları silin ve yerine aşağıdaki kodları ekleyin:

background: url("https://lh3.googleusercontent.com/-BDOIZXG3Qs8/VrsPcpryGEI/AAAAAAAAL0s/YIOqJcFCBfw/s18-Ic42/onay.png") no-repeat scroll 0 0 transparent;

Şablonu kaydettikten sonra yorumlarınızı kontrol ettiğinizde isminizin anında rozeti göreceksiniz.

*** Kırmızı renkle gösterdiğim link onay rozeti ikonunun linki. Eğer başka bir ikon gözükmesini isterseniz, o ikonun linkini bununla değiştirmeniz yeterli olacaktır.

19 Ocak 2016 Salı

Blogger Site Haritalarınızı Güncellediniz Mi?

Blogger site haritası oluşturmak ile ilgili yaklaşık 5 yıl önce yayınladığım yazı pek çok kişiye rehber oldu ve Blog Hocam'ın en çok okunan yazılarından biriydi.

Yakın zaman Google Web Yöneticisi Merkezi'ne girip site haritalarını inceleyenler bir aksilik ve gariplik olduğunu fark etmişlerdir. Şöyle ki; önceden Google tek bir site haritası ile 500 içerik indekslerken artık 150 içerik indeksliyor. Bu nedenle bizim eski site haritalarını silip yeni site haritaları eklememiz gerekiyor.

2016 Blogger İçin Site Haritası Oluşturma Ve Ekleme

Google Web Yöneticisi Merkezindeki site haritalarını güncelleme işlemini 3 adımda gerçekleştireceğiz.

1. Adım: Google Web Yöneticisi Merkezine giderek eski site haritalarını silelim. Bununn için Google Web Yöneticisi merkezine giriş yaparak blogumuzun ismine tıklıyoruz ve açılan sayfada sol taraftaki menüden Tarama > Site haritaları yolunu izliyoruz. Ardından önceden oluşturduğumuz site haritalarını seçerek siliyoruz.

2. Adım: Şimdi yeni site haritalarını oluşturalım. Bunun için eski yöntemi kullanacağız ama bir farkla. İndekslemeyi 500er 500er değil 150şer 150şer yapacağız. Ben ilk 1000 içerik gerekli olan site haritalarını aşağıda yazdım. Eğer 1000'den az içeriğiniz varsa oluşturduğum bu site haritalarının hepsini ekleyebilirsiniz.

atom.xml?redirect=false&start-index=1&max-results=150
atom.xml?redirect=false&start-index=151&max-results=150
atom.xml?redirect=false&start-index=301&max-results=150
atom.xml?redirect=false&start-index=451&max-results=150
atom.xml?redirect=false&start-index=601&max-results=150
atom.xml?redirect=false&start-index=751&max-results=150
atom.xml?redirect=false&start-index=901&max-results=150

3. Adım: Son olarak oluşturduğumuz bu site haritalarını Google Web Yöneticisi Merkezine göndereceğiz. Bunun için yine site haritaları sayfasına giderek yukarıda oluşturduğumuz site haritalarını teker teker ekliyoruz.

Sayfayı yenilediğimizde dizine gönderilen içeriklerin olması gereken sayıda olduğunu ve yanlarında beklemede yazdığını görüyoruz. Yaklaşık 24 saat sonra gönderilen bu içerikler dizine eklenecek ve bu yazı değişecektir.

Not: Yukarıda sadece ilk 1000 içerik için yeterli gelecek site haritalarını yazdım. Eğer 1000'den fazla içeriğiniz varsa ve hangi site haritalarını ekleyeceğinizi bilmiyorsanız lütfen yorum bölümünden sorun.

10 Kasım 2014 Pazartesi

Sayfanın En Üstüne Yatay Şerit Ekleme

Son zamanlarda blog tasarımlarında sıkça kullanılan bir özellik var. Sayfanın en üstünde yüksekliği düşük ama yatay olarak sayfanın bir ucundan diğer ucuna giden şeritler. Bu şeritlerde bazen grafik kullanılırken, bazen de basit bir renk bloğu kullanılıyor.

Bloguna küçük bir dokunuşla değişik bir görünüm kazandırmak isteyen bloggerlara iki yöntemin de nasıl yapıldığından ve blogda nasıl durduğundan bahsetmek istiyorum.

!!! Blogun en üstüne şeridimizi eklemeden önce yapmamız gereken bir ayar var. Blogger kumanda panelinimize girerek Yerleşim > Navbar > Düzenle > Kapalı yolunu izliyor ve sayfanın en üstündeki Bloger navbarı kaldırıyoruz.

İlk paylaşacağım yöntem sayfanın en üstüne yatay bir şerit eklemek. Bunun için Şablon > HTML’yi Düzenle yolunu izleyin ve Ctrl+F tuş kombinasyonun yardımıyla arama kutusunu açıp ]]></b:skin> satırın bulun. Bu satırın üzerinde bir yere aşağıdaki kodları ekleyin.

body .navbar {
height: 20px; /* Yükseklik */
padding: 0;
margin: 0;
border-top: 10px solid #c00000; /* Renk*/
}

Şeridin yüksekliğini ve rengini değiştirebileceğiniz yerleri ilgli kodların yanına not yazarak gösterdim.

İkinci olarak sayfanın en üstünde yatay bir grafik halinde şerit oluşturmayı anlatmak istiyorum. Bunun için öncelikle bir grafiğe ihtiyacınız var. Görmüş olduğunuz örnekte ben ters üçgen grafiği kullandım.

Bu yöntemde de Şablon > HTML’yi Düzenle yolunu izleyin ve Ctrl+F tuş kombinasyonun yardımıyla arama kutusunu açıp ]]></b:skin> satırın bulun. Bu satırın üzerinde bir yere aşağıdaki kodları ekleyin.

body .navbar {
height: 30px; /* Yükseklik */
padding: 0;
margin: 0;
background: url('https://lh6.googleusercontent.com/-b640Cjw7I3A/VFs9e1kHxHI/AAAAAAAALL8/1zWVRwmXoso/s22/b.png') repeat-x; /* Grafik*/
}

Bu yöntemde de yükseklği ve grafiği değiştirebilirsiniz. Grafiği Picasaweb, Dropbox, Flickr gibi bir grafik barındırma servisine yükledikten sonra linkini alıp bordo renkle gösterdiğim linkle değiştirmeniz yeterli.

Konuyla ilgili sorularınızı yorum bölümünden sorabilirsiniz.

2 Eylül 2014 Salı

Blogger’da Sabit Bir Ana Sayfa Yapma

Blog dediğimiz şey yayınların en yeniden en eskiye doğru sıralandığı, her sayfada belli sayıda yayının gözüktüğü ve sayfalar arasında geçiş yapılara eski yayınlara ulaşıldığı dinamik bir web sitesi türüdür.

Eskiden statik web sitesi oluşturmamızı sağlayan Geocities, Tripod gibi servislerin yerini günümüzde Blogger, Tumblr ve Wordpress gibi sistemler aldı. Bu ücretsiz servisler sayesinde herkesin blog oluşturması oldukça kolay ama statik bir web sitesi oluşturmak isteyenler için artık eskisi gibi ücretsiz ve kaliteli servisler yok.

Dünyanın en popüler blog oluşturma esrvisi olan Blogger’da klasik bir blogun yanı sıra açılış sayfası olan, statik bir web sitesi oluşturabileceğinizi biliyormuydunuz?

Aşağıda göstereceğim yönntemleri ve bazı temel HTML kodlarını kullanarak Blogger’ı tek bir sayfadan oluşan siteye dönüştürmeniz mümkün.

1. Boş Bir Sayfa Oluşturalım

Blogger’da boş bir sayfa oluşturmak istediğimizde en az bir adet gadget eklemek gerektiğini belirten bir uyarı gelir. Aşağıdaki kodları incelediğinizde navbar gadgetını eklediğimizi fakat CSS kodlarıyla bu gadgetı sakladığımızı görebilrsiniz.

İlk örneğimizde boş bir sayfa oluşturulam ve yavaş yavaş bunu dolduralım. Boş ve sabit bir sayfa oluşturmak için Blogger kumanda panelinize girdikten sonra Şablon > HTML’yi Düzenle yolunu takip edin ve buradaki tüm kodları silerek yerine aşağıdaki kodları ekleyin.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
   <b:skin><![CDATA[
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
    padding: 0;
}

]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

</body>
</html>

2. Boş Sayfaya Bir Şeyler Yazalım

Sayfaya bir şeyler yazmak için klasik HTML kodlarını kullanacağız. Eğer HTML bilginiz yoksa şuradaki gibi online HTML editörlerinden birini kullanarak sayfanızı oluşturun ve HTML kodlarını alın.

Resimde gördüğünüz gibi örnek bir sayfa oluşturdum ve bunun HTML kodlarını alarak Blogger kumanda panelinde Şablon > HTML’yi Düzenle bölümünde </body> kodunun üzerine ekledim. Burası çok önemli! Ekleyeceğiniz HTML kodları her zaman </body> kodunun üzerinde yer almalı.

Şablonu önizleme yaptığımızda online HTML editöründe oluşturduğumuz sayfasın aynısını görebiliriz.

Dikkat Edilecek Hususlar

- Blogger’da tüm HTML kodlarını ve HTML sayfalarını kullanmak ne yazık ki mümkün değildir. Bu yüzden bazı kodlarda uyarı mesajı ile karşılaşabilirsiniz. Bu hata mesajlarını Google’da arayarak çözüm bulabilirsiniz. Veya bu yazının altına yorum bırakırsanız ben yardımcı olmaya çalışırım.

- Hazır HTML şablnlarındaki css dosyalarının içindeki kodları Blogger’a eklemek isterseniz ]]></b:skin> kounun üzreine eklemelisiniz.

- Javascript veya benzeri bir harici dosya çağırmak için kullanılan kodları ise </head> kodunun üzerine eklemelisiniz.

Bu yazıyı konuyla ilgili çok mesaj geldiği için hazırladım. Umarım anlatabilmişimdir ve faydalı olabilmişimdir.

7 Nisan 2014 Pazartesi

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.

2 Nisan 2014 Çarşamba

“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.

12 Mart 2014 Çarşamba

SPAM Yorumlardan Kurtulmak İçin 2 Teknik

Blogların en keyifli ve faydalı yerlerinden biri yorum bölümleri. Blogların yorum bölümleri genelikle iyi niyetli, fayda sağlamayı, iletişim kurmayı veya yazı hakkında düşünceleri belirtmek amamçlı kullanılsa da, SEO yapmak isteyen kişilerin sadece backlink kazanmak için bıraktıkları anchor text üzerinden link içeren yorumlara da rastlıyoruz ne yazık ki. Özellikle de Blog Hocam gibi yorum moderasyonu olmayan, yani yorumların otomatik olarak onaylandığı bir blogunuz varsa, SPAM yorumlarla başınız bir hayli dertte olabilir.

Blogger tabanlı bloglar için SPAM yorumlara çözüm olabilecek 2 teknik paylaşmak istiyorum. Bu teknikler bir yorumun spam olup olmadığını anlamıyor ama yorum bölümündeki tüm linklere müdahele ediyor. Yani anchor text üzerinden link verilerek yapılan yorumlardaki linkleri kaldırıyor. Böylece spammerler emeline ulaşamıyor ve blogunuzu yorum listelerinden çıkarıyorlar. (Umarım…)

Teknikleri blogunuza nasıl uygulayacağınızı ve ne işe yardıklarını örneklerle açıklayayım.

Bir spammerın blogunuza “SPAM sitemize gitmek için buraya tıklayın” şeklinde bir yorum bıaktığını düşünelim. Burada spammer “buraya” kelimesi üzerinden kendi sitesine link vermiş. Amacımız ise uygulayacağımız tekniklerle spammerın linkini iptal etmek.

1. Teknik: Kelime Kalsın Ama Tıklanabilir Olmasın

Bu teknikle yorumdaki “buraya” kelimesine dokunmayacağız fakat buraya kelimesinin tıklanabilirliğini ortadan kaldıracağız. Yani yorum, linksiz bir yorum olacak.

Bu tekniği blogunuza uygulamak için Blogger kumanda panelinde Şablon > HTML’yi Düzenle yolunu takip edin ve </body> kodunun üzerine şu kodları ekleyin:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

2. Teknik: Link Ve Kelime Tamamen Kalksın

Bu teknikte ise link ve linkin bağlı olduğu kelimeyi yorumdan tamamen kaldırıyoruz. Yani spam yorum örneğindeki “buraya” kelimesi hiç gözükmeyecek.

Bu tekniği blogunuza uygulamak istiyorsanız yine Şablon > HTML’yi Düzenle yolunu takip edin ve ]]></b:skin> kodunun üzerine aşağıdaki kodları ekleyin:

.comment-content a {
display: none;
}

Not: Bu kodları blogunuza uyguladığınız eski ve yeni tüm yorumları etkileyeceğini hatırlatmak isterim. Tabi bu durumda siz de artık yorum bölümünde link pylaşamayacaksınız.

Herkese bol yorumlu bloglar dilerim :)