01 Mart 2010

Tüm yazılarınızı, içerik sayfasında ya da arşiv sayfasında göstermek blogunuzu ziyaret eden kişilere kolay erişim imkanı sağlayacaktır. Dört farklı yöntem ile site haritanızı oluşturma imkanınız var. Bu yöntemleri tablo şeklinde, etiketlerine göre, özetleri ile, manuel olarak sıralayabiliriz. Bu dört farklı yöntem, sadece ziyaretçilerinize, site içinde bulunan yazılara kolay ve hızlı erişim sağlamak amaçı ile tasarlanmıştır. Detaylı şekilde anlatılan bu dört yöntemden size en uygun olan site haritası oluşturma yöntemini seçebilirsiniz.

Eğer, Google'da indekslenmek için site haritası oluşturmak istiyorsanız; Site haritası Oluşturma ve Web Yönetici Araçlarına Kayıt isimli yazıyı okuyabilirsiniz.

Yöntem 1 : Tablo Şeklinde Site Haritası Oluşturma

Alttaki örnek görüntüdeki, site haritası javascript ile çalışıyor ve yüklenmesi zaman alabilir. Yükleneme süresi yazı yoğunluğunuz ve blogunuzda kullandığınız ek dosyalar ile alakalı olarak değişiklik gösterebilir.

site-haritası-tablo

1.1. Öncelikle yeni bir yazı girişi yapın. Sadece başlık alanını doldurun yazı alanını boş bırakın. Başlığınızı 'Tüm Yazılarım', 'Arşiv',... gibi başlıklar verebilirsiniz. Yazıyı etiketleyebilirsiniz, ancak, yorumlara kapatmanızı öneririm.

1.2. Yazıyı yayınlamadan önce Kayıt Seçeneklerinden yazının geçmiş bir tarihte yayınlanması için tarihini değiştirin. Böylece yeni yazılarınızda, ana sayfanızda görüntülenmez. Yazıyı yayınlayın. Bu yazı sizin tüm yazılarınızın görüntüleneceği alan olacak. Yazının adresini kaydedin.

1.3. Yerleşim > HTML'yi Düzenle yolunu izleyin ve Temanızda </head> kodunu aratın ve alttaki kodu bir üst satırına yapıştırın.
<b:if cond='data:blog.url == &quot;http://monkeyworks-takipteyiz.blogspot.com/2010/02/tum-yazlar.html&quot;'>
<style>

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ddd;
color: #000000;
padding-left: 5px;
width:50%px;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:93%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:93%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:93%;
}
.post{display:none;}
.comments-block{display:none;}
.comment-form{display:none;}
.comment-footer{display:none;}
.blog-pager{display:none;}
.date-header{display:none;}
.feed-links{display:none;}
.comments{display:none;}
</style>
</b:if>

Kırmızı ile renklendirilmiş adresi 1.2. adımında oluşturduğunuz adres ile değiştirin.

1.4. Temanızda Widget Şablonlarını Genişlet'a tıklamadan alttaki kodu aratın;
<b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'/>
Bulacağınız kod yazı alanınızın kodudur. Bulamamanız imkansız. Bulduğunuz kodun hemen bir üst satırına alttaki kodu yapıştırın. Ve yine kırmızı ile renklendirilmiş olan web adresini 1.2. adımında oluşturduğunuz adres ile değiştirin.
<b:widget id='HTML258' locked='false' title='Tüm Yazılar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://monkeyworks-takipteyiz.blogspot.com/2010/02/tum-yazlar.html&quot;'>
<h2 class='title'>Tüm Yazılar</h2>
<div class='widget-content'>
<div id='toc'><img src='http://i38.tinypic.com/34ov7n4.gif'/>Tüm Yazılar Yükleniyor...</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

1.5. Şimdi temanızda </body> kodunu aratın ve bir üst satırına alttaki kodu yapıştırın. Kırmızı ile renklendirilmiş olan web adresini 1.2. adımında oluşturduğunuz yazının adresi ile değiştirin. Mavi ile renklendirilmiş olan adreslerin yerine de kendi blog adresinizi yazın.
<b:if cond='data:blog.url == "http://monkeyworks-takipteyiz.blogspot.com/2010/02/tum-yazlar.html"'>
<script style="text/javascript" src="http://www.weebly.com/uploads/2/2/1/0/2210502/blogtoc.js"></script>
<script src="http://monkeyworks-takipteyiz.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=500&callback=loadtoc"></script>
<script src="http://monkeyworks-takipteyiz.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=501&max-results=500&callback=loadtoc"></script>
<script src="http://monkeyworks-takipteyiz.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1001&max-results=500&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
</b:if>

1.6. Temanızı kaydedin. 1.2. adımında oluşturduğunuz yazıyı görüntüleyin. Tüm yazılarınız örnek resimdekine benzer şekilde görüntülenecektir. Herhangi bir sorunla karşılaşanlar, yorum kısmında belirtebilirler.

demo

Yöntem 2 : Etiketlerine Göre Site Haritası Oluşturma
Site Haritası oluşturmak için kullanabileceğiniz belkide en kolay yöntem Abu Farhan tarafından oluşturulan site haritasıdır.
site-haritası-2

Yeni bir yazı oluşturun ve taslağınız HTML'yi düzenle şeklindeyken alttaki kodu yapıştırın ve yayınlayın. Nasıl göründüğünü merak edenler arşiv yazısını ziyaret edebilirler.
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.takipteyiz.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Yukarıdaki kodda takipteyiz yerine kendi blog adresinizi yazmayı unutmayın.

demo

Yöntem 3: Özetleri ile Site Haritası Oluşturma

Site haritası oluşturma yazıların özetlerini göstermek mümkün. Bu sitede anlatılan site haritası oluşturma yöntemini kullanarak blogdaki tüm yazıları alt alta sıralayacağız.

site-haritasi

3.1. Öncelikle Blogger oturumunuzu açın ve ilgili blogunuzun Ayarlar > site içerik takibi yolunu izleyin ve 'Blog İçerik Takiplerine İzin Ver' seçeneğini Kısa olarak işaretleyin. Böylelikle kullanacağınız eklentide yazılarınızdan kısa özetleri eklentinin üst kısmında görüntüleyebileceksiniz.

3.2. Google AJAX Feed API adresini ziyaret edin. 'Sözleşmeyi okudum, kabul ettim' (I have read and agree with the terms and conditions) kutucuğunu işaretleyin ve blog adresinizi yazarak 'Generate API KEY' tuşuna basın. Açılan sayfada 'Your key is' bölümünü hemen altındaki satırda yer alan kodu kaydedin.

3.3. Yerleşim kısmında gadget ekle ile HTML/JavaScript Ekleyin. Açılan sayfaya alttaki kodu yapıştırın. Kaydetmeden önce bazı değişiklikler yapılacak unutmayın. Yapılması gereken düzenlemeleri şu şekilde sıralayabiliriz;

* 3.2. de kaydettiğiniz API KEY'i alttaki kodda yeşil ile renklendirilmiş kısma yapıştırın.
* Kırmızı ile renklendirilmiş olan blogadiniyaz kısmına blog adresinizi yazın.
* BLOG ADI kısmına blog adınızı yazın.
* Opsiyonal olarak yükleniyor ve Tüm Yazılar kısımlarını değiştirebilirsiniz.
<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Yükleniyor...</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=<<API KEY YAZ>>"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://simblogg.googlepages.com/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'TÜM YAZILAR',
url: 'http://blogadiniyaz.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
var options = {
stacked : true,
horizontal : false,
title : "BLOG_ADI."
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
Kendi Bloguna Ekle <a href="http://takipteyiz.blogspot.com">Takip Listem</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Değişiklikleri yaptıktan sonra Gadgeti kaydedin. Gadgeti sürükleyerek Başlık (Header) veya blogger menü kullanıyorsanız onun altına konumlandırın. Eğer Gadget'i Başlık altına sürükleyemiyorsanız, temanızda ufak bir değişiklik yapmalısınız. Temanızda
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
kodunu bulun ve maxwidget='1' kısmını maxwidget="2" ile değiştirin.

3.4. Bu adımda Blogger Forum Ekleme yazısında yaptığımız gibi; Site haritası Eklentisini, blogun statik sayfalarında görüntüleyebiliriz. Zira ekleyeceğimiz kod Gadget Ekleme ile yapılıyor. Eklenen gadgetin her sayfada görüntülenmesi istenen bir durum değildir. Bu izleyeceğiniz adımlarla oluşturulacak site haritası daha kullanışlı olacak ve göze hitap edecek.

Öncelikle yeni bir statik sayfa oluşturun. Statik sayfa oluşturmak için statik sayfa oluşturma yazısından faydalanabilirsiniz. Yorumlara kapatmanızı öneririm. İçeriğini boş bırakın ve yayınlayın. Oluşturduğunuz yazının adresini kaydedin. Örnek;
http://blogadiniyaz.blogspot.com/p/takiplistem-forum.html

3.5. Eklentiyi Statik sayfada görüntülemek için Yerleşim > HTML'yi düzenle yolunu takip edin. Widget genişlet Kutucuğuna tıklayın. Eklediğiniz< eklentiyi bulun ve altta örnek olarak verilen koddaki kırmızı kısımları temanıza yerleştirin. Kırmızı haricindeki kodlar örnektir.
<b:widget id='HTML3' locked='false' title='Eklentinize verdiğiniz isim' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "STATIK-SAYFA-URL"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Yukarıdaki kodda STATIK-SAYFA-URL yazan kısma 3.4. adımında oluşturduğunuz statik adresinizi yazın ve temanızı kaydedin.

İsteyenler bu yöntemi sidebar içinde uygulayabilirler böylelikle sidebar sütun kısmı statik sayfanızda görüntülenmez.

demo

Yöntem 4: Manuel Site Haritası Oluşturma

Kendi site haritanızı kendiniz oluşturun. Fikri güzel ve düzenle olarak güncellendiğinde faydalı olabilecek bir özellik. Daha önce yazılarımı alfabetik olarak sıralamıştım. Tek tek elle yazdım hepsini. İsteyenler Alfabetik olarak Tüm Yazılarım isimli yazımı kontrol edebilirler. Ama benim gibi güncellemekten bir süre sonra sıkılırsanız pek bir manası kalmıyor. Neredeyse bir senedir güncellememişim yazılarımı.

Site Haritası Oluşturma hakkında sizlerle 4 Farklı Yöntem paylaştım. Umarım yöntemleri yeterince anlaşılır şekilde anlatabilmişimdir. Eğer aklınıza takıalan kısımlar olursa, lütfen yorumlar kısmına yazın.

Kolay Gelsin...
Yorum
tyler78 dedi ki...
Teşekkürler. Ben de kendi sitemde kullandığım kısa yöntemi yazayım ek bilgi olarak. Yeni konu açıp aşağıdaki linkteki kodu girin. Koddaki "blogcuk78.blogspot.com" yerine kendi adresinizi girin.

http://tinypaste.com/451bb
Sade dedi ki...
Teşekkürler, tyler78. Farhan'ın ilk yöntemi değil mi bu?
.:gelincik:. dedi ki...
Merhaba, her gün yeni yenilik yeni bir eklentiyle karşılaşıyorum, insan hangi birini uygulayacağını şaşırıyor.

Aradaığım ve istediğim en damardan eklenti işte bu...

Yalnız yine sorum olucak;

1-hem etiket hem arşivi listelemek mümkünmü?
2-bahsettiğiniz etiket listelemede ki;

konuyu eklerken, oluşturdan sonra html düzenle kısmına geçip verdiğiniz kodu yerleştiricez, onun tam yeri önemlimi, başa yada sona gibi, ayrıca, bundan sonraki paylaşımlar içinmi geçerli olucak bu, yani her konu içinmi bunu yapıcaz, eğer öyleyse daha öncekileri, girip aynısını yapmakmı gerekiyor.

Hem yenilikten faydalanıp hem kulp bulmak buna derler galiba:)

Teşekkürler herşey için.
cosar dedi ki...
Sn.Sade bir sorum olacak. Blogda konu başlıkları şeklinde bir uygulama olduğunda bütün konu başlıklarını göremiyorum. önceki sayfa tıklayıp eski kayıtları görüyorum. neden aşağı doğru tüm kayıtları vermiyor olabilir? mesela sağlık diye etikete ait konu sayısı 30 olsun. sağlığa başlığına tıklayınca o 30 konunun 8-10 tanesi çıkıyor,geri kalanları önceki sayfa yapıp görmek gerekiyor. sanki bütün kayıtlar 8-10 taneden ibaret hissi veriyor gibi. ikinci bir sorum da bilginiz varsa cevaplarsanız memnun olurum;konunun altında yer alan daha yeni kayıtlar-ana sayfa-önceki kayıtlar ifadelerini birbirine daha yakın tutma durumu olabilir mi? biri başta biri ortada biri sonda çok geniş duruyor.sanki bunlar biraz daha birbirine yakın olmalı.
Sade dedi ki...
@gelincik: Bu eklentiyi özellikle ısrarlarından dolayı yazdım zaten :))

Öncelikle bu yöntem tüm yazılarınızı bir yazı altında görüntülemenizi sağlayacak. GEçmiş ve gelecek yazıalrınız. Zaten DEMO blogu ziyaret ederseniz, yeni yazıların yanında NEW olduğunu ve devamlı güncellendiğini görebilirsiniz.

2. Yöntemde; Gönderme > yeni kayıt > HTML'yi düzenle yolunu izlemek yeterli. İsterseniz yazıda yazabilirsiniz. Örneğin; tüm yazılarımı altta görebilirsiniz gibi...

@cosar: daha önce bu konu hakkında bir yazı yazmıştım; "Etiketler Sayfasındaki Yazı Sayısını Düzenleme"
Hemen altta yer lan iste içi arama ile ilgili yazıya ulaşabilirsin;)


Diğer sorunuza gelince; yeni kayıtlar-ana sayfa-önceki kayıtlar için gerekli olan CSS kodlarındaki ;
padding-left:100px;
padding-right:100px;
gibi değerleri değiştirebilirsiniz. Böylece aralarındaki mesafe azalır ya da artar.
.:gelincik:. dedi ki...
Açıklamalarınız ve cevaplarınız için teşekkürler, Sitem le ilgili düzenlemeler bitince, gerekli olan işlevsel eklentileri uygulamaya çalışacağım. Eksiklerimiz oldukça sizi sık sık ziyaret edicez demektir. Israrlı talebim üzerine :) paylaştığınız bu yazı için çok teşekkürler.
Sade dedi ki...
Bu tarz ısrarlar sayesinde, blogum daha geniş kitlelere ulaşacak içeriğe sahip oluyor. Çok teşekkür ederim. Umarım ziyaretleriniz daim olur ;)
tyler78 dedi ki...
Farhan'ınkine bayağı benziyor(muş), evet. Ben de şimdi sen söyleyince gördüm. Başka bir siteden aldığım için bakmamıştım. Ama Farhan'ınki daha güzel görünüyor. Deneyeceğim bir ara.
Tekrar teşekkürler anlatım için. Aslında 1.yöntem en güzeli de uğraşamayacağım tekrar kodlarla. :)
Sade dedi ki...
İlk o tarz bir site haritası oluşturmuştu. Sonra biraz daha geliştirdi. Kolayınıza giden en güzelidir, hepsinin görevi yaklaşık eşit :)
SirEvo dedi ki...
Yöntem 2 : Etiketlerine Göre Site Haritası Oluşturma

Bunu kullandım. Çok da güzel oldu vallaha. Sağ panelin en üstlerinde "Tüm Yazılarım" diye ekledim hemen.

Peki şöyle bir şey istesem?
A'dan Z'ye veya tarih sırasına göre tüm yazıları tek bir mesajda toplayamaz mıyım? :))
Sade dedi ki...
Kullanmana sevindim SirEvo. Tarih sırasına göre kullanabileceğimiz bir kod var benim arşivdeki gibi oradan bak istersen beğenirsen kodları yazarım.
SirEvo dedi ki...
Beğendim. =))
SirEvo dedi ki...
Beğendim. =))
Sade dedi ki...
Mail adresine gönderdim. Güle güle kullan ;)
SirEvo dedi ki...
Aldım, tamamdır. :)
gez-ye-ic dedi ki...
Merhaba Sade,
Çok güzel şeyler yazmışınızdır gene. Ben etiketlere göre olanı uyguladım, test bloguma, çok güzel. Fakat, her etiket ve onun altında kayıtların hepsi görününce çok uzayıp gidiyor. Benim daha evvel başka bir yorumunuzda yazdığım gibi, normalde sadece etiketleri gösterebilmek ve etiketi tıklayınca o etiketin yazısının açılması çok şık olacak. Bu dediğime de bayağı yaklaşmışsınız gibi :) Bir gün o da olur diye bekliyorum. İyi çalışmalar
Sade dedi ki...
Merhaba, anlattığınıza benzer bir eklenti yapılabilir belki ama sanırım çok uzun bir koddan oluşabilir. Baklaım benzer birşey bulursam sizinle paylaşırım. Size 4. Yöntemi kullanarak kendiniz yazı bir site haritası oluşturmanızı ve açılır kapanır yazı özelliği ile sıralamanızı öneririm. Açılır kapanır yerlere etiketleri yazarsınız. İçine de elle o etikete ait yazıları yazarsınız. Biraz uzun ve meşakatli bir iş ama güzel olabilir ;)
gez-ye-ic dedi ki...
Merhaba,
Etiketlere göre 2. yöntemi kullanmak istiyorum. Burada, sadece etiketleri göstermek, yazıların ise tıklayınca açılmasını sağlayabilir miyiz acaba? Eğer bu mümkün olmazsa, sadece etiketleri listeleyebilir miyiz?
Desteğiniz için teşekkürler

www.gez-ye-ic.blogspot.com
Blogger dedi ki...
emeğine sağlık
efekentli dedi ki...
SİZ HARİKASINIZ.TEBRİKLER
Yükleniyor...