Kategori Menü Şeklinde Etiket Duyarlı Blogger Site Haritası

Kategori Menü Şeklinde Etiket Duyarlı Blogger Site Haritası - Sabit bir sayfada blog içeriklerinizi depolamanız için, etiket duyarlı çok fonksiyonlu site haritasını blogunuza nasıl uygulayacağınızı paylaşıyoruz. Blog sitenizde ziyaretçilerinizin site haritasına tıkladığında sadece site haritası menüsünden belirli sayfaları ve daha fazlasını bulmak için, ister son yayınlanan blog içeriklerini isterse arama yaparak doğrudan ulaşabilecekri bağlantıları sadece bir menüden kolayca blog içeriklerinize ulaşabilecekler.

Blog site haritası menüsü ile içerikleriniz en son yayınlanandan başlayarak sıralanmakta ve açılır menü özelliğine sahip blog site haritanız ile görsel olarak da ziyaretçierinize hizmet vermektedir.

Site haritasında bulunan;

• En son yayınlanan içerikler
• Son güncellenen yayınlar
• Kategori içerikleri
• Site haritası arama kutusu
• Toplam yayın sayısını gösteren sayaç
  

Özellikler ile ziyaretçileriniz blogunuzda aradıkları içeriklere çok daha kolay bir şekilde erişmelerini sağlamaktadır.

Kategori Menülü Blogger Site Haritası Nasıl Eklenir?

Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Sayfalar > Yeni sayfa sekmesine tıklayın. Açılan blog sayfasının HTML bölümüne aşağıda bulunan CSS, HTML ve javaScript kodlarını kopyalayın ve HTML sayfasına ekleyin.

<!---TeknooWin.blogspot.com---!>
<style type='text/css'>
.post-body img{background:none;}
#table-arslin{padding:6px 9px;margin:0 auto}
#table-arslin table{width:auto;margin:0 auto}
#table-arslin form{font:inherit}
#table-arslin label{color: #666;font-weight:600;display:block;text-align:center;margin:0 10px 0 0;padding:4px 0 0}
#table-arslin select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-arslin input,#table-arslin select{width:100%;border:1px solid #ddd;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:400!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-arslin select option{min-height:1.4em!important;}
#table-arslin input#feed-q{padding:5px 10px!important;}
#feed-vessel{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-vessel li{list-style:none;margin:0;padding:0;border-top:1px solid #ddd;color:#555;width:auto;float:left;display:inline}
#feed-vessel li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-vessel li a{text-decoration:none;color:#222;font-weight:600}
#feed-vessel li a:hover{text-decoration:none;color:rgb(219, 68, 55)}
#feed-vessel li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-vessel li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{background: #34495e;border:1px solid #ddd;border-radius:5px;padding:0;color:#ccc;text-decoration:none;display:block;line-height:30px}
#feed-nav a,#feed-nav span:hover{color:#ccc}
#feed-nav a:active,#feed-nav a:hover{color:#ddd}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-arslin table{margin:0 auto;width:100%}
#feed-vessel,#table-arslin{margin:0 auto}
#feed-vessel li .inner{margin:5px auto;height:auto}
#feedvessel li{float:none;display:block;width:auto;height:auto}
#feed-vessel li .news-text, #feedvessel:after,#feed-vessel li img{display:none!important}}
</style>
<div id="table-arslin">
<table><tbody>
<tr><td><label for="feed-order">Yayınları sıralayın:</label></td> <td><select id="feed-order"> <option selected="" value="published">En son yayınlananlar</option> <option value="updated">Son güncellenen yayınlar</option> </select></td></tr>
<tr><td><label for="label-sorter">Kategoriye göre sırala:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Yükleniyor...</option> </select></td></tr>
<tr>                 <td><label for="feed-q">Anahtar kelimelerde arayın:</label></td> <td><form id="post-searcher">
<input id="feed-q" type="text" placeholder="Arama yapın ..."/>
</form>
</td></tr>
</tbody></table>
</div>
<header id="result-desc"></header>
<ul id="feed-vessel"></ul>
<div id="feed-nav">
</div>
<script src='https://rawgit.com/jquerycods/jquery/master/sitemap.js'></script>
<!---TeknooWin.blogspot.com---!>

Demo/ÖNİZLEME

Kategori Site Haritası Açıklamaları

Blog sayfanıza eklemiş olduğunuz site haritası üzerinde hiç bir değişiklik yapmanıza gerek yoktur. Blog sayfanıza ekledikten sonra yayınlamaya başlayabilirsiniz. Blogunuzn tüm kategori içeriklerine duyarlı olması ve site haritasında bulunan kategori menüsü sayesinde içeriklere çok hız ve kolay bir şekilde erişim sağlamaktadır.

• Tüm yayınlarınızın blogunuzun sabit bir sayfasında depolanması blogunuzun işlevsellik kazanmasının yanında Google Adsense reklamlarınızın da içerikleriz ile daha uyumlu olmasını sağlamaktadır.
• Site haritasında bulunan arama kutusu sayesinde ziyaretçilerinizin daha eski içeriklerinize erişmesini de sağlamakta ve arama motorları tarafından bu yayınlarınızın ölü link olmasının da önüne geçmiş olacaksınız
• Diğer bir husus da özellikle daha önce yayınladığınız içeriklerin güncellenmesi ile menüze bulunan "Son Güncellenen Yayınlar" sayesinde yine blog ziyaretçilerinize güncellenen içeriklerinizin sıralanması ve haberdar olmalarını sağlamaktadır.
  

Kategori Menü Şeklinde Etiket Duyarlı Blogger Site Haritası hakkında daha fazla bilgi almak için,  yorum sistemimizi kullanarak bize ulaşabilirsiniz. Bizi takip ettiğiniz için teşekkürler.