Blogger için en kullanışlı sitemap eklentisi ~ Blog Düzenim

Blogger için en kullanışlı sitemap eklentisi
Toplam yazı sayısını gösteren, ayrıca post adı, tarihi ve etikete göre özel filtreleme işlemi yapabilen sade ve çok kullanışlı bir sitemap eklentisidir.

Değerli arkadaşım Ruhsuz atmaca bu sitemap eklentisi için daha önce istekte bulunmuştu. Ben de bu yüzden onu kıracak değilim. Kendi sayfamda kullanmış olduğum Blogger sitemap eklentisini kurmadan önce en altta demosuna da göz atabilirsiniz. Olur ki kafanıza yatmaz ya da beğenmezseniz diye söylüyorum.

Kurulum

Öncelikle blogger kumanda panelinizden Sayfalar / Yeni sayfa / Html bölümüne geliniz ve aşağıdaki kodları ekleyiniz. (Sayfa adınızı sitemap olarak yazmayı unutmayın)

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

Daha sonra sayfayı yayınlayın

Ardından, Blogger Şablon > HTML Düzenle > diyerekaşağıdaki kodları kopyalayıp</style> kodunun hemen üzerine ekleyin.

/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.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:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

Blogunuza uygun yazı tipi ya da renkleri belirlemek isterseniz kodlar içinde küçük değişiklikler yapabilirsiniz.

Kodlarınızı ekledikten sonra Temanızı kaydedin.

Ek bilgi:

Eğer çok fazla yazınız bulunuyorsa ve sayfanızın aşağı doğru uzamasını değil de belirli bir yükseklikte olmasını istiyorsanız yukarıda vermiş olduğumuz ilk kodu silerek yerine aşağıdaki kodları eklemeniz yeterli olacaktır :

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

İlk satırda bulunan max-height değerini değiştirerek uygun bir yükseklik verebilirsiniz.

Tavsiye:

Kodların kaynağı olan şu sayfadan, https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js kodların tamamını kopyalayarak bilgisayarınızda bir txt dosyasına kaydederek yedeğini almanızı öneririm. Dış kaynaklı bir bağlantı olduğu için silinmesi durumunda zor durumda kalmamak için yedeğini almakta fayda var.

Demo
click to view