Dilediğiniz Zaman Arayın Canlı SOHBET Edelim: 
(İlk 5 Dakika Bedava)

Cansu: 008818200818

Esra: 0034951250447

26 Temmuz 2011 Salı

Blog Yazılarınızda En Popüler Sosyal Paylaşım Butonlarını Gösterin

Blog yazılarınızı daha çok kişiye ulaştırmanın en iyi yolu sosyal medyadan yararlanmaktır.Bunun için blogunuza eklyeceğiniz paylaşım butonları ile ziyaretçilerin beğendikleri yazıları sosyal medyada kolayca paylaşmalarıı kolaylaştıracak butonlar eklemelisiniz.
popüler sosyal paylaşım butonları

Hangi Sosyal Medya Sitelerinin Butonlarını Kullanmalıyım?

Ülkemizde en çok kullanılan sosyal platformlar Facvebook ve Twitter olduğundan bu sitelerde paylaşımı kolaylaştıracak butonlar mutlaka blog yazılarınızda olmalıdır.
Üçüncü olarak eklenmesi gereken buton ise yeni bir buton olan Google +1 butonu.Henüz çok yeni olduğundan dolayı pek fazla bilginiz olmayabilir, bu yüzden Google +1 ile ilgili okumanızı tavsiye edeceğim bir kaç makaleyi paylaşayım:


Eklenecek Kodlar

İlk olarak Google +1 butonu için gerekli olan script kodunu eklemelisiniz.Bunun için şablonunuzdan </head> kodunu bulun ve bu kodun ve hemen üstüne şu kodu ekleyin.
<script src='https://apis.google.com/js/plusone.js' 

type='text/javascript'>

{lang: &#39;tr&#39;}

</script>
İkinci olarak butonların gösterileceği kodları ekleyeceksiniz, ama nereye?Tercihinize göre yazı başlığının altıns ya da yazının sonuna ekleyebilirsiniz.Ben ikisini de anlatacağım kara sizin.
1. Yazı başlığının altına eklemekl için <div class='post-header'> kodunun altına
2. Yazının sonuna eklemek için <data:post.body/>  kodunun altına aşağıdaki kodları ekleyin.
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table border='0'>

<tr> <td> <a class='twitter-share-button'

data-count='horizontal' data-lang='en'

data-via='bloghocam' expr:data-text='data:post.title'

expr:data-url='data:post.url'

href='http://twitter.com/share' rel='nofollow'/>

<b:if cond='data:post.isFirstPost'>

<script src='http://platform.twitter.com/widgets.js'

type='text/javascript'>

</script> </b:if>

</td>

<td> <iframe allowTransparency='true'

expr:src
='&quot;http://www.facebook.com/plugins/like.php?href=&quot;

+ data:post.url +

&quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;

action=like&amp;font=arial&amp;colorscheme=light&quot;'


frameborder='0' scrolling='no' style='border:none;

overflow:hidden; margin-left:20px; width:100px; height:20px;'
/>

</td>

<td><div style='margin-right:5px;'>

<g:plusone expr:href='data:post.url' size='medium'/>

</div> </td>

</tr> </table>

</b:if><br/>

* data-via='bloghocam'  yerine kendi twitter kullanıcı adınızı yazın.
Bu butonlar benim için yeterli değil diyorsanız AddThis ve ShareThis gibi daha geniş kapsamlı paylaşım butonlarını deneyebilirsiniz.

21 Temmuz 2011 Perşembe

Blog Yazılarınıza İmza Ekleyin

Bazı bloglarda farketmişsinizdir, blogcular yazılarının sonunda değişik stillerde yazılmış isimlerinden oluşan bir imza gösteriyorlar.Bu yazımda blog yazılarının sonuna nasıl imza ekleyeceğinizi abnlatacağım.
İlk olarak bir imza oluşturmanız gerekiyor.Bunun için My Live Signature sitesini kullanacağız.Sitenin imza sihirbazını kullanarak imzanızı kolayca oluşturabilirsiniz.Örneğin ben 9 numaralı fontu, 6 numaralı boyutu, #F11212 renk kodunu, 5 numaralı eğimi kullanarak aşağpıdaki imzayı oluşturdum.
imza
İmzayı oluşturduktan sonra imzamın altındaki 3 adet linkten Want to use this signature linkine tıklıyorum.Açılan pencerede bana 2 adet seçenek sunuyor, Generate HTML code seçeneğini tıklıyorum.Son olarakta Generate a code for my handwritten signature seçeneğini seçiyorum ve oluşturulan kodu az sonra kullanmak üzere bir kenara not ediyorum
Şimdi oluşturduğum bu imzayı bloguma entegre edeceğim.Bunun için blogumun kumanda panelinden Tasarım > 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.
<div class='post-footer-line post-footer-line-1'>













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




<b:if cond='data:blog.pageType == &quot;item&quot;'>

Oluşturduğum imza kodu

</b:if>

Oluşturduğum imza kodu yerine az önce not ettiğim kodu yazıyorum.Ve işte sonuç…
















Arkadaşlar yorumlarda imzayı yazının hemen altında nasıl göstereceklerini sormuşlar.İşte cevap…


İmzayı hemen yazının altında göstermek için imza kodunu  <div class='post-footer'> kodundan önce ya da <data:post.body/> kodundan sonra ekleyin.


18 Temmuz 2011 Pazartesi

Blogunuza Twitter Takipçi Kutusu Ekleyin

Facebook’un resmi beğen kutusu eklentisi ile blogcular Facebook sayfalarını beğenenleri ve sayfalarıyla ilgili bazı bilgileri gösteren bir kutuyu bloglarına ekleyebiliyorlar.

Twitter resmi olarak bazı takip butonları çıkarmasına rağmen henüz bu tür bir takipçi kutusu çıkarmamıştı.Mark Carey  isimli bir arkadaşTwitter’dan önce kolları sıvamış ve Facebook beğen kutusuna benzer bir Twitter Takip Kutusu kodlamış.

Twitter Takip Kutusu

Bu Twitter Takip Kutusu’nun blogunuza eklemek için blogunuzun kumanda panelinden Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript yolunu takip edin ve açılan pencereye aşağıdaki kodları ekleyin.

<script type="text/javascript" 

src="http://s.moopz.com/fanbox_init.js"></script><div

id="twitterfanbox"></div><script

type="text/javascript">fanbox_init("bloghocam");</script>

* bloghocam yazan yere kendi Twitter ID’nizi yazmayı unutmayın.

15 Temmuz 2011 Cuma

Blogcu Bayanlar İçin Blogger Teması

Türkiye’de kadın blogcuların sayısı gün geçtikçe aartıyor.Bir kadın hoşuna giden bir başka kadının blogundan ilham alarak neden benim de bir blogum olmasın? diyerek kendine bir blog açıyor.

İzleyicilerime baktığıma benim blogumu takip eden kadın blogcu sayısında da bir artış olduğunu farkettim.Özellikle izleyicelirmden biri olan Asortik’in blogunda benim için yadığı BlogHocam Sağolsun yazısından 5izleyicimden 3’ü kadın olmaya başladı.

Sanırım kadınların benim blogumu okumalarında ki ana neden bloglarının görünümünü daha da güzelleştirmek.Madem bu kadar çok kadın okuyor bu blogu, bende onlarla bloglarında kullanmaları için kadın bloglarına çok uygun olduğunu düşündüğüm bir Blogger temasını paylaşmak istiyorum.

Tema’nın yaratıcısı olan Lauren Thompson temanın ismine Echo That Is Love demiş.Bu temanın yemek bloglarına, hobi bloglarına, moda blogarına ve kadınlara hitap eden bloglara çok uygun olduğunu düşünüyorum.

Kadınlar için blogger teması

DEMO  |  DOWNLOAD

Eğer blogunuzun temasını nasıl değiştireceğinizi bilmiyorsanız Blogger Şablon Yükleme başlıklı yazımda detaylı bir anlatım yapmıştım.

Tarih Ayarı

Echo Tarih Ayarı

Blog yazılarınızın tarih ayarının resimdeki gibi düzgün bir şekilde gösterilmesi için yapmanız gereken ayarlar:

1. Blog Kayıtları

.Blogunuzun kumanda panelinden Tasarım > Sayfa Öğeleri > Blog Kayıtları > Düzenle yolunu takip edin ve Kayıt Sayfası Seçenekleri tarih ayarını 12 Tem 2001 şeklinde ayarlayın.

2. Biçimlendirme Ayarı

Blogunuzun kumanda panelinden Ayarlar > Biçimlendirme yolunu takip edin ve Tarih Başlığı Biçimi ayarını 12 Tem 2011 olarak belirleyin.

Temayla ilgili aklınıza takılan herşeyi yorum bölümünden sorabilirsiniz.

13 Temmuz 2011 Çarşamba

Blogunuzun Mobil Versiyonunu Yapın

İnsanların blogunuzu mobi telefonları aracılığı ile okumalarını istiyorsanız, blogunuzu mobil telfonlarda gezmeye uygun olacak şekilde hızlı ve kolay yapmalısınız.

Blogger kumanda panelindeki bir ayarı aktifleştirerek blogunuzun şablonunu mobil telefonlara uygun hale getirebiliyorsunuz.Bu sayede insanlar blogunuzu mobil telefonları  ile ziyaret ettiğinde, görsel öğelerden arınmış, sade, basit ve hızlı bir blog ile karşılaşacaklar.

Blog Hocam Mobil Şablon

Örneğin Blog Hocam’ın mobil telefon ayarını aktifleştirdikten sonra mobil telefonlardaki görüntüsü resimde ki gibi oldu.

Şimdi Blogger için mobil şablon ayarını nasıl aktifleştireceğinize geçelim…

Blogger kumanda panelinize giriş yaptıktan sonra Ayarlar > E-posta ve Cep Telefonu yolunu takip edin ve Mobil şablonu göster ayarını Evet. Mobil cihazlarda mobil şablon göster olarak işaretledikten sonra ayarlarınızı kaydedin.

Blogger mobil şablon ayarı

Önizle butonuna basarak blogunuzun mobil telefonlarda nasıl görüneceğini kontrol edebilirsiniz.

Siz de mobil telefonunuzla surf yaparmısınız?

11 Temmuz 2011 Pazartesi

Blogger İçin Benzer Yazılar Eklentisi

Daha önce önemli bir SEO terimi olan Bounce Rate ile ilgili bir yazı yazmıştım.Son Google algoritması ile işlgili yazıları okuduğumuzda site içi linklerin ve bounce rate değerinin öneminin daha da arttığını rahatlıkla söyleyebiliriz.

Bounce rate değerini düşürmenin en önemli yollarında biri site içi linkleme.Bunun için blog yazılarınızın sonuna koyacağınız ve o yazıyla alakalı diğer yazılarınıza bağlantılar içeren bir benzer yazılar eklentisi koyabilirsiniz.Böylece hem bounce rate değeriniz düşecek, hem ziyaretçilerinizin blogunuzda geçireceği süre artacak, hem de eski yazılarınız okunacaktır.

Benzer yazılar ieklentisi için en pratik uygulama bu hizmeti ücretsiz olarak veren ve çoğu blogcu tarafından kullanılan LinkWithIn sitesidir.Ancak bu eklentiyi ekldiğinizde köşede çıkan LİnkWithIn yazısı sizide rahatsız ediyorsa şu alternatifi deneyebilirsiniz.

Benzer yazıar eklentisi

Blogunuzun kumanda panelinden Tasarım > HTML’yi Düzenle yolunu takip edin ve Widget Şablonlarını Genişlet kutucuğunu işaretleyerek Ctrl+F tuş kombinasyonu yardımıyla ]]></b:skin> kodunu bulun ve bu kodun üstüne aşağıdaki kodları ekleyin.

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts .widget{

padding-left:6px;

margin-bottom:10px;

}

#related-posts .widget h2, #related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:blue;

}

#related-posts a:hover{

color:blue;

}

#related-posts ul{

list-style-type:none;

margin:0 0 0px 0;

padding:0px;

text-decoration:bold;

font-size:15px;

text-color:#000000

}

#related-posts ul li{

background: url(http://i51.tinypic.com/fmns7t.jpg) no-repeat

scroll left center transparent;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;

}

İkinci olarak </head> kodunu bulun ve bu kodun hemen üstüne aşağıdaki kodları ekleyin.

<script type='text/javascript'>

var relatedpoststitle="İlgili Yazılar";

</script>

<script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js'

type='text/javascript'/>

Son olarak şu kodu bulun

<div class='post-footer-line post-footer-line-1'>


ve bnu kodun altına aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +

&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;

max-results=5&quot;'
type='text/javascript'/></b:if>

</b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

removeRelatedDuplicates(); printRelatedLabels();

</script>

</div>

</b:if>


Kaç adet benzer yazı listelemek istiyorsanız var maxresults=5; değerini ona göre değiştrin.

YBenzer yazı linklerinin renk, font gibi değişiklikleri ilk verdiğim CSS kodlarınadn yapılabilir.Bu konuda yardım isterseniz yorum bölümünden sorabilirsiniz.

7 Temmuz 2011 Perşembe

Blogger’a Alıntı Kutusu Ekleme

Blockquote kelimesini hiç duydunuz mu?Duymayanlar için hemen anlatayım; blogunuzda bir kişiden ve başka bir kaynaktan alıntı yaptığınız yazıyı yayınlarken kullandığınız koddur.

Eğer blogunuzda başka kaynaklardan çok sık alıntı yapıyorsanız bunları daha belirgin hale getirmek ve yazınıza şık bir görünüm kazandırmak için farklı bir alıntı kutusu kullanabilisiniz.

Blogger alıntı kutusu

Resimde gördüğünüz gibi alıntı yaptığınız yazının alıntı kutusunun içerisinde göstermek için blogunuzun kumanda panelinde Tasarım > HTML’yi Düzenle yolunu takiip edip Widget Şablonlarını Genişlet kutucuğuğunu işaretledikten sonra Ctrl+F tuş kombinasyonu yardımıyla şu kodu bulun.

]]></b:skin>

Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin.

blockquote { background:#c5c5c5 url(http://i51.tinypic.com/33v0njn.png)

no-repeat top left;

padding:10px 20px 10px 45px;

font-style:italic;

border:1px solid #000000;}


Şablonunuzu kaydettikten sonra blog yazınızı yazarken yazınızın alıntı yapacağınız yerinde HTML kodlarını açın ve şunu ekleyin.



<blockquote>

Alıntı yazı...

</blockquote>




Alıntı yazı.. yerine alıntı yaptığınız metni girin.Yani alıntı metninizi her zaman blockquote etiketlerşinin arasına yazın.


5 Temmuz 2011 Salı

Arama Sonuçlarında Yazı Başlıkları Blog İsminden Önce Gözüksün

Standart Blogger şablonlarında arama sonuççlarında blog ismi blog yazısının başlığından öçnce gözükür.Blogger için yapabileceğiniz arama motorları için optimizasyon işlemlerinin başında bunu tam tersine çevirmöek vardır.Yani arama sonuçlarında blog yazı başlığı blog isminden önce gözükmelidir.Bu ufak işlem arama sonuçlarındaki sıranızı ve yazınıza tıklanma sayısını olumlu etkileyecektir.Şimdi bu işlemi nasıl yapacağınıza geçelim…

Arama sonuçlarında yazı başlığı site isminden önce gözüksün

Blogunuzun kumanda panelinden Tasarım > HTML’yi Düzenle yolunu takip edin ve Widget Şablonlarını Genişlet kutucuğuğunu işaretledikten sonra Ctrl+F tuş kombinasyonu yardımıyla şu kodu bulun.

<title><data:blog.pageTitle/></title>

Bulduğunuz bu kodu silerek yerine aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/>-<data:blog.title/></title>
</b:if>

Dikkat ettiyseniz Blog Hocam’da da bu düzenlemeyi yaptım ve yazı başlıkları her zaman blog başlıklarından önce gözükür.