Draft Blogger kullanım alanını genişletmeye devam ediyor. Gelişmiş yayın düzenleyicisinden sonra şimdi de blogunuzun şablonu üzerinde değişiklik yapabilmenizi sağlayan "Şablon Tasarımcısı" özelliği bloggerların kullanımına sunulmuş. Şablon Tasarımcısı ile düzenlenebilir şablonlardan birini seçebilir, blogunuza arka plan resmi ve özel CSS stilleri ekleyebilir dahası yerleşim menüsü üzerinde istediğiniz gibi değişiklik yapabilirsiniz.

Şablon Tasarımcısına erişmek için Draft Blogger sitesi üzerinden blogunuza giriş yaptıktan sonra:

Kumanda Paneli-->Yerleşim-->Şablon Tasarımcısı

yolunu izleyebilir ve blogunuzu kişiselleştirebilirsiniz.

Benim de blogumda kullandığım ve js tabanlı dinamik bir eklenti olan "Son Yazılar" eklentisinin blogspot bloglarına kurulumundan bahsedeceğim.

Öncelikle:

Kumanda Paneli-->Yerleşim-->Gadget Ekle-->HTML/JavaScript

Yolunu takip ettikten sonra aşağıda vereceğim kodları blogunuzun istediğiniz bir bölümüne gadget olarak ekleyin:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "yorum var";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 1000;

home_page = "http://blogadı.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src="http://s2.sigmirror.com/files/59644_fpgxy/kayansonyazi.js" type="text/javascript"></script>
</div>

Daha sonra kırmızı ile renklendirdiğim bölgeye blog adınızı yazıp "Kaydet" tuşuna tıklayın. Son adımda temanızı kaydedip çıktığınızda "Kayan Son Yazılar" blogunuza eklenmiş olacaktır.

Favicon, sitenizin/blogunuzun tarayıcı adres çubuğundaki temsili logosudur. Blogger kullanıcıları için zaten var olan turuncu logoyu değiştirmek ve kendi favicon'unuzu yapmak istiyorsanız aşağıdaki yolu takip ediniz:

Öncelikle Photoshop kullanabiliyorsanız Png formatında 16x16 ebatlarında kendi faviconunuzu meydana getiriniz ve herhangi bir image hosting'e yükleyiniz.

Eğer Photoshop bilginiz yoksa veya kolay yoldan oluşturmak istiyorsanız http://www.favicon.cc/ adresinden kendi .ico uzantılı favicon dosyanızı meydana getiriniz ve bilgisayarınıza kaydediniz.

Elinizdeki .ico uzantılı dosyayı Windows Live-->SkyDrive-->Ortak Paylaşım Klasörü'ne yükleyiniz ve URL'yi alıp aşağıdaki yolu izleyiniz.

Daha kısa yoldan elinizdeki .ico uzantılı dosyayı http://www.imageboo.com/ ücretsiz hostuna yükleyebilir ve gereken URL'yi elde edebilirsiniz.

Yüklediğimiz favicon'un URL'sini elde ettikten sonra ikinci aşamaya geçebiliriz. Bu aşamada aşağıdaki kodlardan elinizdeki dosyanın türüne göre seçim yapmak durumundasınız.

Kumanda Paneli-->Yerleşim-->HTML'yi Düzenle-->Widget Şablonlarını Genişlet-->"Ctrl+F"


**.ico uzantılı favicon için <head> tagını aratıp buluyoruz ve bu tagın hemen altına:

<link href='ico uzantılı favicon URLsi' rel='shortcut icon'/> <link href='ico uzantılı favicon URLsi' rel='icon'/>

kodlarını ekleyip kırmızı alanlara URLmizi yapıştırıp şablonumuzu kaydediyoruz.


**Png uzantılı favicon için <head> tagını aratıp buluyoruz ve bu tagın hemen altına:

<link href='png uzantılı faviconURLsi' rel='shortcut icon' type='image/x-icon'/>

kodlarını ekleyip kırmızı alanlara URLmizi yapıştırıp şablonumuzu kaydediyoruz.

Bu işlemler sonucunda faviconunuz sitenize eklenmiş olacaktır. 

Blogger resimli son yazılar eklentisi kullanıcıların kodlarla uğraşmasına gerek kalmadan bloglarına kolayca ekleyebilecekleri bir uygulama.


Kurulum için öncelikle:

Kumanda Paneli-->Yerleşim-->Gadget Ekle-->Nitelikli-->Recent Posts  (14.Sırada Listelenen Uygulama)


Yolunu izliyoruz. Daha sonra karşımıza çıkan gadget yapılandırma sayfasında işlemlerimizi yapıp "Kaydet" diyoruz ve gadget'imizi blogumuzun istediğimiz kısmına ekliyoruz.

*Karşımıza çıkan bu sayfada Birinci Satıra başlığımızı yazıyoruz.

*İkinci satırda gadget yüksekliğimizi ayarlıyoruz.

*Üçüncü satıra blog adresimizi (URL) yazıyoruz.

*Dördüncü satıra kaç adet son yazı görüntülenmesini istediğimizi yazıyoruz.

*Beşinci satırı yazılarımızın ilk satırının kısa bir bölümünün özet olarak yayınlanmasını istiyorsak işaretliyoruz.

*Altıncı satırı yazılarımıza eklediğimiz resimlerin küçük bir şekilde görüntülenmesini istiyorsak işaretliyoruz.

*Yedinci satır yazı önizlemelerimizin genişliğini ayarlamamamızı sağlıyor.

*Sekizinci satır gadget'e tarih ekleme olanağı sunuyor.

*Dokuzuncu satır yazıya yapılan yorum sayısının gösterilmesini sağlıyor.

*Onuncu satır "Read More"(Devamını Oku) bağlantısının görüntülenmesini sağlıyor.

*Onbirinci satır gönderileri birbirinden ayırmaya yarayan uzun çizgi ayıracını ekleyip-kaldırmaya yarıyor.


Seçimlerimizi tamamladıktan sonra kaydedip çıktığımızda işlemimiz tamamlanmış olacaktır.

Blogger eklentilerinizi veya resim/fotoğraflarınızı sağa, sola yaslamak veya ortalamak amacıyla aşağıdaki kırmızı renkli kodları kullanabilirsiniz:


Ortalamak için:
<center>
Eklenti veya Resim Kodu
</center> 


Sağa yaslamak için: 
<right> 
Eklenti veya Resim Kodu
</right> 


Sola yaslamak için:
<left> 
Eklenti veya Resim Kodu
</left> 
  

Blogunuza resimli/fotoğraflı menü yapmak veya PicasaWeb dışında kullandığınız bir hosttan blogunuza resim alabilmek için aşağıda vereceğim kodları:

Kumanda Paneli-->Yerleşim-->Gadget Ekle-->HTML/JavaScript

yolu ile blogunuza ekleyebilirsiniz:

<a href=" Resme tıklandığında gidilmesi istenen adres URL" target="_blank"><img src="Resmin URLsi" /></a>

Yukarıdaki kodu düzenleyip "Kaydet"meniz yeterlidir.

Blogunuzda bulunan tüm toplam yazı ve tüm toplam yorum sayısının istatistiğini blogunuzda yayınlamak için aşağıdaki yolu izlemelisiniz:


Kumanda Paneli-->Yerleşim-->Gadget Ekle-->HTML/JavaScript

    <script style="text/javascript">

    function numberOfPosts(json) {

    document.write('Toplam Yazılar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');

    }

    function numberOfComments(json) {

    document.write('Toplam Yorumlar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');

    }

    </script>

    <ul><li><script src="http://fermenteblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

    <li><script src="http://fermenteblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

Yukarıda kırmızı renkle belirttiğim kısma kendi blog adınızı yazınız.Temanızı kaydedip çıkış yaptığınızda işleminiz tamamlanacaktır.

Ziyaretçilerinizin sayfanın sonundan başına rahatça gidebilmesi için kullanışlı bir eklenti olan "Back to top" eklentisi sayfa uzunluğu fazla bloglarda gezinti kolaylığı sağlamaktadır.

Eklentiyi blogunuza kurmak için:

Kumanda Paneli-->Yerleşim-->Gadget Ekle-->HTML/JavaScript

yolunu izledikten sonra aşağıdaki kodları ekleyip kaydet butonuna tıklamalısınız:

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Yukarı"><img style="border:0;" src="http://i50.tinypic.com/29bhljk.gif"/></a></div>

Yukarıda kırmızı renkle renklendirdiğim kodu istediğiniz başka bir ikon URL'si ile değiştirebilir veya aşağıya eklediğim ikonların URL'lerinden beğendiğiniz bir tanesininki ile değiştirebilirsiniz.

Icon Setleri:

 "http://i49.tinypic.com/1seiw1.jpg"

"http://i49.tinypic.com/midxc1.jpg"

 "http://i45.tinypic.com/2la309u.jpg"

 "http://i46.tinypic.com/8vulwi.jpg"

"http://i49.tinypic.com/2qxydr8.jpg"

"http://i48.tinypic.com/op0fb9.jpg"

"http://i50.tinypic.com/2ps0t2p.jpg"

"http://i48.tinypic.com/212sfux.jpg"

Blogger'ın arama butonundan sonraki en son yeniliği blogunuza kolay yoldan yan menü veya üst menü sekmesi eklemenize olanak tanıyan "Sayfalar" gadget'i.

Kullanımı basit ve anlaşılır. Öncelikle birinci adımda menüyü oluşturmak için ihtiyaç duyacağımız sayfaları oluşturalım. Blogspot bunun için biz blogculara 10 adet sayfa oluşturabilme olanağı sunmuş.

Kumanda Paneli-->Kayıtları Düzenle-->Sayfaları Düzenle-->Yeni Sayfa










yolunu izleyerek oluşturmak istediğimiz sayfaları meydana getiriyoruz. İstediğimiz sayfaları yayınlayıp bir sonraki aşamaya geçiyoruz.

Kumanda Paneli-->Yerleşim-->Gadget Ekle-->Sayfalar

























yoluyla blogumuzda gözükmesini istediğimiz sayfaları seçip "Kaydet" butonuna tıklıyoruz. (Eğer 10 sayfa hakkınızdan az bir kısmı kullandıysanız ve yeni ekleyeceğiniz sayfaların blogunuzda anında yayınlanmasını istiyorsanız "Yayınlanan yeni sayfaları otomatik olarak ekle" sekmesini seçili tutmalısınız.)

Daha sonra üst sekme yapmak için kaydettiğimiz sayfalar gadgetini blog başlığının altına, yan menü yapmak içinse sağ sütuna sürükleyip bırakıyoruz. Blogumuzu kaydettiğimizde işlem tamamlanmış olacaktır.

Blogger'da Navbar blogunuzun üst kısmında bulunan ve profesyonel görünümü azaltan bir eklentidir. Bu kısmı blogunuzdan kaldırmak için basit bir işlem yeterlidir.

Bunun için:

Kumanda Paneli-->Yerleşim-->HTML'yi Düzenle-->Widget Şablonlarını Genişlet-->"Ctrl+F"

yolunu izledikten sonra aşağıdaki kırmızı renkli kodu temanızda aratınız:

<head>
<b:skin><![CDATA[

eğer blogunuzda bu kod bulunmuyorsa aşağıdaki kırmızı renkli kodu da aratmayı deneyebilirsiniz:

]]></b:skin

yukarıdaki kodlardan herhangi birisini bulduktan sonra bu kodlardan bulduğunuz kodun önüne aşağıdaki mavi renkli kodu ekleyiniz:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Daha sonra önizleme yapıp temanızda bir sorun olup olmadığına bakıp, sorun olmadığı takdirde temanızı kaydedip çıkış yapabilirsiniz. İşleminiz tamamlanmıştır.

Blogunuza eklediğiniz bilgilerin, videoların veya fotoğrafların facebook, friendfeed, twitter gibi sosyal ağ sitelerinde paylaşımının yapılabilmesi için blogunuza aşağıdaki kodları ekleyebilir, sitenize gelen trafik akışını bu yolla arttırabilirsiniz.

Öncelikle;


Kumanda Paneli-->Yerleşim-->HTML'yi Düzenle-->Widget Şablonlarını Genişlet-->"Ctrl+F"


yolu ile aşağıdaki kırmızı renkli kodu temamızda aratalım:


<div class='post-footer'>

veya bu kodun bulunmadığı bloglarda aşağıdaki kodu da aratabilirsiniz:

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

Yukarıdaki kırmızı kodlardan herhangi birini bulduktan sonra hemen altında aşağıdaki kodları yapıştırıyoruz:

    <div class='post-footer'>(Temamızda varolan kod)
    <div align='right'> 

    <!--SOSYAL-AG-TUSLARI-BASLA-->

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

    <!--Facebook-->

     <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title= &quot; + data:post.title' onmouseout='document.getElementById(&quot;socialtext&quot;).firstChild.data=&quot;paylaş&quot;;' onmouseover='document.getElementById(&quot;socialtext&quot;).firstChild.data=&quot;Facebooka ekle&quot;;' target='_blank' title='Facebook a ekle'><img alt='Facebook' border='0' src='http://i49.tinypic.com/2m7byaw.png'/></a>

    <!--Twitter-->

     <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter ile Paylaş' src='http://i50.tinypic.com/3088c4g.png'/></a>

    <!--Friendfeed-->

     <a expr:href='&quot;http://friendfeed.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onmouseout='document.getElementById(&quot;socialtext&quot;).firstChild.data=&quot;paylaş&quot;;' onmouseover='document.getElementById(&quot;socialtext&quot;).firstChild.data=&quot;Friendfeede ekle&quot;;' target='_blank' title='FriendFeed'><img alt='Friendfeed' border='0' src='http://i50.tinypic.com/2eppncy.png'/></a>

    <!--Digg-->

     <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg ile Paylaş' src='http://i50.tinypic.com/b84gom.png'/></a>

    <!--Stumble-->

     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble ile Paylaş' src='http://i46.tinypic.com/opcygk.png'/></a>

    <!--Delicious-->

     <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious ile Paylaş' src='http://i50.tinypic.com/o9ixwh.png'/></a>

    <!--Technorati-->

     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati ile Paylaş' src='http://i50.tinypic.com/j1573d.png'/></a>

    <!--Reddit-->

     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title= &quot; + data:post.title' onmouseout='document.getElementById(&quot;socialtext&quot;).firstChild.data=&quot;paylaş&quot;;' onmouseover='document.getElementById(&quot;socialtext&quot;).firstChild.data=&quot;Reddite ekle&quot;;' target='_blank' title='Reddit e ekle'><img alt='Reddit' border='0' src='http://i50.tinypic.com/2qxm0x2.png'/></a> </b:if>

    <!--SOSYAL-AG-TUSLARI-BITIR-->

    </div></div>(temamızda zaten var olan kod)

Temamızda varolan mavi renkli iki kodun arasına yukarıdaki siyah renkli kodları yapıştırıyoruz. Kırmızı ile ifade ettiğim kısımda ise kendi isteğiniz veya tema konseptiniz bakımından icon paketleri kullanarak imlerin görünümlerini değiştirebilirsiniz. Eğer görünümden memnunsanız kırmızı kodları da siyah kodlarla birlikte sitenize olduğu gibi kopyalayabilirsiniz.

Daha sonra temanızı kaydedip çıkış yaptığınızda işleminiz tamamlanmış olacaktır.

Blogger'da çoğu zaman kategori yapmak için kullandığımız, çoğu zaman da arama optimizasyonu amacıyla kullandığımız etiketler kategorizasyon sırasında "...Etiketine Sahip Kayıtlar Gösteriliyor. Tüm Kayıtları Göster." şeklinde blogumuzda yer alırlar. Blog görünümünü daha profesyonel hale getirmek isteyen kullanıcılar bu yazıdan kurtulmak amacıyla aşağıdaki yolu izleyebilirler:

Kumanda Paneli-->Yerleşim-->HTML'yi Düzenle-->Widget Şablonlarını Genişlet-->"Ctrl+F"

ile aşağıdaki ilk kırmızı kodu bulalım:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

daha sonra bu kırmızı kodların arasındaki kodları silelim ve yerine aşağıdaki mavi renkli kodları yapıştıralım:

<b:includable id='status-message'>
 <b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Şablonu kaydedip çıktığınızda işleminiz tamamlanmış olacaktır.

Blogger'da sayfanın sonunda yer alan "Kaydol: Kayıtlar (Atom)" bölümü blogunuzun ziyaretçilerinin sitenize beslemeler yoluyla abone olmasını sağlar. Ancak zamanla feedburner kullanan veya kendi özel RSS eklentisini oluşturan kullanıcılar için bu kısım gereksiz ve amatör bir bölge halini almaktadır.

Blogger eklentilerinizi sayfanızda konumlandırırken sağa ya da sola yaslamak istiyorsanız veya ortalamak amacındaysanız eklentinizin başlangıcına ve sonuna aşağıdaki kodlardan uygun olanını eklemelisiniz.


Eklentiyi ortalamak için:

<div align="center"> 
Eklenti kodları
</div>

Eklentiyi sağa yaslamak için:

<div align="right">
Eklenti kodları
 </div>

Eklentiyi sola yaslamak için:

<div align="left">
Eklenti kodları
</div>


Yukarıdaki kodları 
Kontrol Paneli-->Yerleşim-->HTML'yi Düzenle-->Widget Şablonlarını Genişlet-->"Ctrl+F"


yolunu izleyip eklentinizi kurduğunuz bölümü aratarak bulduktan sonra eklenti kodunuzun başına ve sonuna yukarıda belirtildiği şekliyle kırmızı kodları eklediğiniz takdirde eklentinizi blogunuzda istediğiniz gibi konumlandırmış olacaksınız.