Blogger Arşiv Sayfası / Site Haritası Widget Oluşturma

Blogger Arşiv Sayfası / Site Haritası Widget Oluşturma - Blogunuzun kullanışlı ve harika bir tasarıma sahip arşivi / site haritası olmasını istiyorsanız aşağıdaki kısa yolları takip edin;

Blogger site haritası yada arşiv sayfası widget'i nasıl oluşturulur? - Bu yazımızda sizlere yeni nesil blogger ipuçlarından site haritası / arşiv sayfası yapmanın kısa yollarını hakkında bilgiler veriyoruz.

Blogger site haritası yada arşiv sayfası widget'i nasıl çalışır? - Bu eklenti blogunuzda bulunan etiketleri takip ederek yani etiket bazlı çalışıyor. Sizin bir şey eklemenize gerek yok. Blogger site haritası yada arşiv sayfası widget'i ziyaretçileriniz için daha profesyonel görünmesi için tasarlanmıştır. Kullanımı da bir o kadar kolay ve mobil uyumludur.

Blogger Arşiv Sayfası / Site Haritası Widget'i Oluşturma

Blogger hesanınıza giriş yapın ve blogunuzu seçin. Blogunuzun arayüzünde bulunan Sayfalar > Yeni sayfa oluştura tıklayın. Açılan sayfada sol üst köşede bulunan Oluştur / HTML bütonlarından HTML'e tıklayın. HTML sayfada bulunan tüm karakterleri temizleyin. Aşağıdaki kodları kopyalayıp HTML sayfaya yapıştırın.

<!---TeknooWin.blogspot.com---!>
<div id="sm_ux" style="max-height: 1200px; overflow-x: auto; overflow: scroll;"></div>
<script src="https://rawgit.com/Bloggeritunes/JS/master/sitemaps.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 type="text/css">
#comments,#Label1,#FollowByEmail1{display:none}#HTML3{visibility:hidden}#sm_ux{background:#31a2db;color:#666;margin:0 auto;padding:4px}span.ux-note{padding:20px;margin:0 auto;display:block;text-align:center;color:rgba(255, 255, 255, .5);font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal}.ux-header-col1{padding:10px;background:#f4f4f4;width:250px}.ux-header-col2{padding:10px;background:#f4f4f4;width:75px}.ux-header-col3{padding:10px;background:#f4f4f4;width:125px}#sm_ux td.ux-header-col1,#sm_ux td.ux-header-col2,#sm_ux td.ux-header-col3{border:0;border-bottom:1px solid rgba(0, 0, 0, 0.1)}#sm_ux tr:nth-child(1) a{color:#666}#sm_ux td.ux-header-col1{background:#fff}#sm_ux td.ux-header-col2{background:#fff}#sm_ux td.ux-header-col3{background:#fff}#sm_ux td.ux-entry-col1,#sm_ux td.ux-entry-col2,#sm_ux td.ux-entry-col3{border:0}#sm_ux td.ux-entry-col1{background:#fff;font-weight:700}#sm_ux tr:nth-child(odd) td.ux-entry-col1{background:#f7f7f7}#sm_ux td.ux-entry-col2{background:#fff}#sm_ux tr:nth-child(odd) td.ux-entry-col2{background:#f7f7f7}#sm_ux td.ux-entry-col3{background:#fff}#sm_ux tr:nth-child(odd) td.ux-entry-col3{background:#f7f7f7}#sm_ux td a{color:#666}.ux-header-col1 a:link,.ux-header-col1 a:visited,.ux-header-col2 a:link,.ux-header-col2 a:visited,.ux-header-col3 a:link,.ux-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-family:'roboto' ; font-weight:700;letter-spacing:0.5px}.ux-header-col1 a:hover,.ux-header-col2 a:hover,.ux-header-col3 a:hover{text-decoration:none}.ux-entry-col1,.ux-entry-col2,.ux-entry-col3{background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}.ux-entry-col1 a,.ux-entry-col2 a,.ux-entry-col3 a{color:#666;font-size:13px}.ux-entry-col1 a:hover,.ux-entry-col2 a:hover,.ux-entry-col3 a:hover{color:#cdb280}#sm_ux table{width:100%;margin:0 auto;counter-reset:rowNumber}.ux-entry-col1{counter-increment:rowNumber}#sm_ux table tr td.ux-entry-col1:first-child::before{content:counter(rowNumber);min-width:1em;margin-right:0.5em}
</style>
<!---TeknooWin.blogspot.com---!>

Kod içerisinde bulunan renkli alanlardan ayarları değiştirerek blogunuz için daha uygun hale getirebilirsiniz. Tüm kontrolleri yaptıktan sonra sayfayı yayınlayın.

Demo/Önİzleme