Blogger Dosya Navigasyonu

Blogger Dosya Navigasyonu Oluşturma - Blogger blogspot sayfalarında gereklilik halini alan ve blog sayfalarının daha kullanışlı ve kolay ulaşılabilen içerik navigasyonlarının, özellikle bir birini takip eden makaleler ile oluşturulmuş blogspot sitelerinin en çok ihtiyaç duyduğu dosya navigasyonunu sizlerle bu yayınımızda paylaşıyoruz.

Blogger Dosya Navigasyonu Nedir?

Dosya Navigasyonu blogunuzda paylaşmış olduğunuz bir birini takip eden projelerinizin Klasör > Dosya > Alt Dosya veya Proje > Alt Proje gibi sınıflandırılarak ziyaretçilerinize daha iyi bir hizmet verebilirsiniz.

Blogger Dosya Navigasyonu Nasıl Oluşturulur?

1. Blogger hesabınıza giriş yapın ve ardından blogunuzun kumanda panelinden Şablon > HTML'i Düzenle sekmesine tıklayın.

2. Açılan sayfada CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

body {background: #79a0cb;font-family: arial;color: #fff;}
.post-body {background: #444;}
.dosmenu {width: 300px;border-radius: 5px;margin: auto;padding: 10px;background: #666;}
.dosmenu h2 {color:#f0c36d}
.dosmil {list-style: none;padding-left: 20px;position: relative;color: #fff;}
.dosmil:before {content: '';width: 1px;background: #fff;top: 0;bottom: 7px;left: 0;position: absolute;}
.dosmil li {position: relative;margin-top: 10px;}
.dosmil li:hover, .dosmil li:focus {color:#f0c36d;cursor: pointer;}
.dosmil li:before {content: '';width: 20px;height: 1px;background: #fff;top: 12px;left: -20px;position: absolute;}
.dosmil .dosmil {display: none;}

3. Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<script type='text/javascript'>
$('.doskol').click(function(){
     $(this).children().toggleClass('fa-folder-open-o');
  $(this).next().slideToggle();
    
 });
</script>

4. Aşağıdaki HTML kodları blogunuzun kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript içerisine ekleyin ve HTML/JavaScript'i kaydedin.

<div class="dosmenu">
<h2>Dosya Navigasyonu</h2>
<ul class="dosmil">
<li><span class="doskol"><i class="fa fa-folder-o"></i> Proje-1</span>
<ul class="dosmil">
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Alt Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Alt Proje2</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-2</span>
<ul class="dosmil">
<li><span class="doskol"><i class="fa fa-folder-o"></i> Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
</ul>
</li>
<li><span class="doskol"><i class="fa fa-folder-o"></i> Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
</ul>
</li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-3</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-4</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-5</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
</ul>
</li>
</ul>
</div>

Yukarıdaki HTML kod içerisinde bulunan href="#" içerisine bağlantılarınızı ekleyin.

ÖRNEK GÖRÜNÜM launch

Blogger Dosya Navigasyonu Sayfası Oluşturma

1. Blogunuzun kumanda panelinden Sayfalar > Yeni sayfa sekmesini tıklayın.

2. Açılan sayfanın HTML bölümüne aşağıdaki kodları kopyalayıp yapıştırın.

<style>
body {background: #79a0cb;font-family: arial;color: #fff;}
.post-body {background: #444;}
.dosmenu {width: 300px;border-radius: 5px;margin: auto;padding: 10px;background: #666;}
.dosmenu h2 {color:#f0c36d}
.dosmil {list-style: none;padding-left: 20px;position: relative;color: #fff;}
.dosmil:before {content: '';width: 1px;background: #fff;top: 0;bottom: 7px;left: 0;position: absolute;}
.dosmil li {position: relative;margin-top: 10px;}
.dosmil li:hover, .dosmil li:focus {color:#f0c36d;cursor: pointer;}
.dosmil li:before {content: '';width: 20px;height: 1px;background: #fff;top: 12px;left: -20px;position: absolute;}
.dosmil .dosmil {display: none;}
</style>
<div class="dosmenu">
<h2>Dosya Navigasyonu</h2>
<ul class="dosmil">
<li><span class="doskol"><i class="fa fa-folder-o"></i> Proje-1</span>
<ul class="dosmil">
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Alt Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Alt Proje2</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-2</span>
<ul class="dosmil">
<li><span class="doskol"><i class="fa fa-folder-o"></i> Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
</ul>
</li>
<li><span class="doskol"><i class="fa fa-folder-o"></i> Proje</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
</ul>
</li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-3</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-3</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-4</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-5</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-4</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-2</span></li>
</ul>
</li>
<li>
<span class="doskol"><i class="fa fa-folder-o"></i> Proje-5</span>
<ul class="dosmil">
<li><span href="#" class="dosyap"><i class="fa fa-file-o "></i> Dosya-1</span></li>
</ul>
</li>
</ul>
</div>
<script type='text/javascript'>
$('.doskol').click(function(){
     $(this).children().toggleClass('fa-folder-open-o');
  $(this).next().slideToggle();
    
 });
</script>

3. Oluşturmuş olduğunuz Dosya Navigasyonu Sayfasının adını yazın.

4. Dosya Navigasyonu Sayfanızın arama açıklamasını ekleyin.

5. En önemli husus ise sayfanızı tanımlayan uzun bir açıklamayı ve navigasyon hakkında gerekli bilgileri eklemiş olduğunuz kodların en altına ekleyin. Çünkü blogger üzerinde oluşturulmuş sayfaların açıklaması ve sayfa bilgilerini mutlaka ekleyin, bu size sayfanızla ilgili en iyi sonuçları verebilmesi ve arama motorlarının sayfanızı tanıması ve indekslemesi açısından son derece önemlidir.