Blogda Arşiv Sayfası Nasıl Oluşturulur?

24.8.17
Blogger'da Arşiv Sayfası Nasıl Oluşturulur

Blogger'da Arşiv Sayfası Nasıl Oluşturulur? - Arşiv sayfası, her blogda olması gereken sayfalardan biridir. Blog'da bulunan kategori ve yayınlara daha hızlı erişmek için, blog ziyaretçilerine yardımcı olur ve kullanıcı deneyimine artırır.

Arşiv sayfası, ziyaretçilerin ilgilendikleri yayınların farklı kategorilere de kolayca erişmesi sağlar. Böylece, blog sayfa görüntülemelerinde artış sağlar ve hemen çıkma oranını düşürerek SEO için önemli bir katkı sağlar.

Blog sayfaları arasında en çok ziyaret edilen sayfalardan biri olan arşiv sayfasıdır. Blogda sayfalar arasında gezinmeler sayfa görüntüleme sayısını artırdığı için, blog sitesinin arama motorlarında da ön sıralara tırmanmasını büyük etki yapar.

Blog Arşivi Nasıl Olmalı?


Blog sabit sayfalarında oluşturulan arşiv (site haritası), blog yayınlarınızı etikete göre depolamanızı sağlayan, fonksiyonel özellikler içeren ve en önemlisi ziyaretçiler için anlaşılır ve kolay olmalıdır. Bir de blog arşivi sayfasında arşivle ilgili olarak kısa bir açıklama yazısı eklemeniz sayfanız için faydalı olacaktır.

Bu özellikleri sağlayan blog arşivi eklentisi tasarımı da çok önemlidir. Daha önce buna benzer etiket duyarlı blog arşivi eklentisi paylaşmıştık.

Bknz: Kategori Menüde Etiket Duyarlı Blogger Site Haritası

Bu yazımızda da blog sabit sayfalar için, kategorilere ayrılmış etiket duyarlı Blogger arşiv eklentisini paylaşacağım.

Kategorilere ayrılmış etiket duyarlı blog arşivi eklentisi işlevsel özellikleri;

  • Son yayınlanan blog yayınları
  • Güncellenen blog yayınları
  • Blog kategorileri (etiketleri)
  • Arşiv eklentisi duyarlı arama kutusu
  • Blog arşivinde bulunan toplam yayın sayısı sayacı
  • Mobil ve SEO uyumlu

Blogda Arşiv (Site Haritası) Sayfası Oluşturma


Blogda HTML arşiv sayfası oluşturmak için, blogunuzun kumanda panelinde bulunan sayfalar sekmesine tıklayın. Sayfanın üst araç menüsünden Yeni sayfa sekmesine tıklayın. Açılan sayfanın sol üst köşesinde Oluştur-HTML sayfa butonlarını göreceksiniz. HTML sayfa butonuna tıklayın ve aşağıdaki kodları kopyalayarak HTML sayfasına ekleyin.

<style type='text/css' scoped="">
.post{margin:0}#comments{display:none}.toggle-comments{display:none!important}#table-outer{padding:7px 10px;margin:0 auto}#table-outer table{width:auto;margin:0 auto}#table-outer form{font:inherit}#table-outer label{margin:0 10px 0 0;padding:4px 0 0;display:block;text-align:right}#table-outer select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#table-outer input,#table-outer select{font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px}#table-outer select option{min-height:1.4em!important}#table-outer input#feed-q{padding:5px 10px!important}#feed-container{overflow:hidden;position:relative;border-top:none;display:block;clear:both;margin:0 -10px 0 0;padding:0;list-style:none}#feed-container li{list-style:none;margin:0 0 10px;padding:0 10px 0 0;color:#555;width:33.33333%;text-align:center;float:left;display:inline;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#feed-container li .inner{position:relative;overflow:hidden;word-wrap:break-word;border-radius:3px;background:#fff;color:#333;border:1px solid #dedede;margin:0;padding:30px;height:200px;line-height:1.2em}#feed-container li a{color:#333;font-weight:500}#feed-container li a.toc-read{text-decoration:none;color:#fff;margin-top:30px}#feed-container li .inner:hover a.toc-read{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}#feed-container li .news-text{font-size:14px;margin-top:10px}#feed-container li .news-text div{display:none!important}#feed-container li img{margin:0;padding:0;width:100%!important;height:100%!important;position:absolute;top:0;left:0}#feed-container li .inner:hover img{transition:all 1s ease-in-out;-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;left:-500px;animation-fill-mode:both}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}#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 span{cursor:wait}@media screen and (max-width:1024px){#main-wrapper{padding:0 30px!important}#feed-container{display:block;clear:both;margin:0 -30px 0 0}#feed-container li{list-style:none;margin:0 0 30px;padding:0 30px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:960px){#main-wrapper{padding:0 20px!important}#feed-container{display:block;clear:both;margin:0 -20px 0 0}#feed-container li{list-style:none;margin:0 0 20px;padding:0 20px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:800px){#feed-container li{width:50%}}@media screen and (max-width:640px){#feed-container li .inner{height:150px}}@media screen and (max-width:414px){#table-outer table,#feed-container li{width:100%}#table-outer table,#table-outer label{text-align:center}#table-outer table td{display:block;margin:0 auto 5px;clear:both;float:none}#table-outer label{margin:0}#table-outer{padding:0}}@media (max-width:414px){#table-outer table td{text-align:center;display:block}#table-outer label{text-align:center;display:block;margin:0;padding:4px 0 0}#table-outer input,#table-outer select{margin:0 0 10px}}a.btn-default{color:#333}#feed-nav a,a.btn-primary,a.btn-success,a.btn-info,a.btn-warning,a.btn-danger{color:#fff}#feed-nav a,#feed-nav a:active,.btn,.btn:active{background-image:none}#feed-nav a,.parser,.btn,.btn-link{font-weight:400}#feed-nav a,.comment_form>a,.comments .paging-control-container .paging-control,.parser,.btn{border:1px solid transparent;border-radius:4px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;cursor:pointer;user-select:none;display:inline-block;padding:6px 12px}#feed-nav a:active:focus,#feed-nav a:focus,.comment_form>a:active:focus,.comment_form>a:focus,.comments .paging-control-container .paging-control:active:focus,.comments .paging-control-container .paging-control:focus,.parser:active:focus,.parser:focus,.btn:active:focus,.btn:focus{outline:0}#feed-nav a:focus,#feed-nav a:hover,#feed-nav a:hover,.btn:focus,.btn:hover{text-decoration:none;color:#333;outline:0}#feed-nav a:active,.btn:active{outline:0;box-shadow:inset 0 3px 5px rgba(0,0,0,.125);-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-default{background:#fff;color:#333;border-color:#ccc}.btn-default:focus{background:#e6e6e6;color:#333;border-color:#8c8c8c}.btn-default:active,.btn-default:hover{background:#e6e6e6;color:#333;border-color:#adadad}#feed-nav a,.btn-primary,.comments .paging-control-container .paging-control,.parser{background:#337ab7;color:#fff;border-color:#2e6da4}#feed-nav a:focus,.comments .paging-control-container .paging-control:focus,.button-group button:disabled,.parser:focus,.btn-primary:focus{background:#286090;color:#fff;border-color:#122b40}#feed-nav a:active,#feed-nav a:hover,.comments .paging-control-container .paging-control:hover,.comments .paging-control-container .paging-control:active,.parser:active,.parser:hover,.btn-primary:active,.btn-primary:hover{background:#286090;color:#fff;border-color:#204d74}.btn-success{background:#5cb85c;color:#fff;border-color:#4cae4c}.btn-success:focus{background:#449d44;color:#fff;border-color:#255625}.btn-success:active,.btn-success:hover{background:#449d44;color:#fff;border-color:#398439}.btn-info{background:#5bc0de;color:#fff;border-color:#46b8da}.btn-info:focus{background:#31b0d5;color:#fff;border-color:#1b6d85}.btn-info:active,.btn-info:hover{background:#31b0d5;color:#fff;border-color:#269abc}.comment_form>a,.btn-warning{background:#f0ad4e;color:#fff;border-color:#eea236}.comment_form>a:focus,.btn-warning:focus{background:#ec971f;color:#fff;border-color:#985f0d}.comment_form>a:active,.comment_form>a:hover,.btn-warning:active,.btn-warning:hover{background:#ec971f;color:#fff;border-color:#d58512}.btn-danger{background:#d9534f;color:#fff;border-color:#d43f3a}.btn-danger:focus{color:#fff;border-color:#761c19;background:#c9302c}.btn-danger:active,.btn-danger:hover{color:#fff;border-color:#ac2925;background:#c9302c}.btn-link{border-radius:0;color:#337ab7}.btn-link,.btn-link:active{box-shadow:none;background:transparent;-webkit-box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{text-decoration:underline;color:#23527c;background:transparent}#feed-nav a,.comment_form>a,.btn-lg{font-size:18px;padding:10px 16px;border-radius:6px;line-height:1.3333333}.parser,.btn-sm,.btn-xs{border-radius:3px;font-size:12px;line-height:1.5}.btn-sm{padding:5px 10px}.comments .paging-control-container .paging-control,.parser,.btn-xs{padding:1px 5px}#feed-nav a,.comment_form>a,.btn-block{display:block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:100%;box-sizing:border-box}.btn-block+.btn-block{margin-top:5px}.comment_form>a+a{border-color:#fff;padding:0;margin-bottom:0;background:#fff}
</style>
<div id="table-outer">
<table>
<tbody>
<tr>
<td>
<label for="feed-order">Yayınları sıralayın:</label>
</td>
<td>
<select id="feed-order">
<option selected="" value="published">Son yayınlar</option>
<option value="updated">Son güncellenen yayınlar</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="label-sorter">Kategorileri sıralayın:</label>
</td>
<td>
<select disabled="" id="label-sorter">
<option selected="">Yükleniyor....</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="feed-q">Anahtar kelime ile arayın:</label>
</td>
<td>
<form id="post-searcher">
<input id="feed-q" placeholder="Arama yapın..." type="text" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src='https://rawgit.com/jquerycods/jquery/master/ux-sitemap.js'></script>

Blog arşiv eklentisini incelemek için, aşağıdaki ön izleme butonu tıklayın.


Bu yazımızda blogda arşiv sayfası oluşturma ile ilgili genel bir açıklama ve kategorilere ayrılmış etiket duyarlı blog arşiv eklentisi hakkında bilgiler paylaştık. Blogda arşiv sayfası oluşturma ile ilgili daha fazla bilgi almak için, yorum bırakabilirsiniz.

Yorum Gönder