Bu içerikte göreceğiniz site haritası, blogunuzda bulunan bütün içerikleri tek sayfada etiketlere göre kategorilere ayrılmış şekilde görmenizi sağlar (ben etiketleri sadece kategori için kullanıyorum). Buradan sonraki cümlelerimde tamamen kendi adıma konuşuyorum. Kullanıcı deneyimi açısından oldukça önemli bir yer teşkil eder. Mesela ben bir bloga/siteye girdiğim zaman özellikle film, dizi, oyun vs. içerikli blog/sitelerde site haritası sayfası bulunuyorsa içerikleri oradan kontrol ediyorum. Bu bana oldukça kolaylık sağlıyor. Lafı fazla uzatmadan nasıl yapıldığına bakalım.
1. Adım Oluşturmak
Blogger > Sayfalar yolunu izleyerek yeni bir sayfa oluşturalım. Sayfa oluştururken kalıcı bağlantı ayarlayamadığımız ve bağlantıları da daha sonradan değiştiremediğimiz için kullandığımız sayfa başlığında Türkçe karakter kullanmamaya özen gösterelim. Oluşturduğumuz sayfanın HTML kısmına aşağıdaki kodları ekleyelim.
[<div class="tabbed-toc" id="tabbed-toc">Düzenlemeye başlamadan önce üst taraftan önizlemeye bakmak isteyebilirsiniz.
</div>
<script>
var tabbedTOC={blogUrl:"//gereksizislerinadami.blogspot.com/",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!0,numChars:150,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:5,newText:' – <em style="color:red;">Yeni</em>'};
</script>
<script src="https://rawcdn.githack.com/Indzign/InSEO/master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#2d65a3,#ff3d00,#5190d5,#ff3d00);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:left}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#fff;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#ff3d00;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>]
2. Adım Düzenlemek
Sözlük: !0 = evet (olumlu) !1 = hayır (olumsuz)
Kodu ekledik ve site haritası sayfamız kullanılmaya hazır. Gelelim ilk cümlelerimde dediğim kullanım açısından daha kolay düzenlenebilir kısmına. Yukarıdaki kodlarda turuncu ile renklerdiğim kısımları görüyorsunuz.
blogUrl: Bu kısma kendi blog adresimizi yazıyoruz. Örneğin: //gereksizislerinadami.blogspot.com ya da https://gereksizislerinadami.blogspot.com
activeTab: Site haritası sayfası açıldığında kaçıncı sıradaki Etiket(Kategori)den başlayacağını belirliyoruz.
showDates: Tarih gösterilmesini istiyorsak !0, istemiyorsak !1 yazıyoruz.
showSummaries: İçerik başlığının altında özet gösterilmesini istiyorsak !0, istemiyorsak !1 yazıyoruz. Not: Bunu !1 olarak yaparsak site haritası sayfasında içerik resimleri (thumbnail) gösterilmez.
numChars: Özetin uzunluğunu belirliyoruz.
showThumbnails: İçeriklerin resimlerinin gösterilmesini istiyorsak !0, istemiyorsak !1 yazıyoruz.
thumbSize: İçerik resimlerinin boyutu. Tavsiye: 60'ta bırakalım.
newTabLink: İçeriklere tıkladığımızda yeni sekmede açılmasını istiyorsak !0, istemiyorsak !1 yazıyoruz.
sortAlphabetically: İçeriklerin alfabetik olarak sıralanmasını istiyorsak !0, içeriklerin tarihe göre sıralanmasını istiyorsak !1 yazıyoruz.
showNew: Buraya yazdığımız sayı (örneğin: 5) son eklediğiniz 5 içerikte yeni diye baloncuk çıkarmasını sağlar.
Animasyonu ve Rengini düzenlemek:
-45deg,#2d65a3,#ff3d00,#5190d5,#ff3d00, 15s
CSS kodlarının arasında yukarıdaki gibi kodlar göreceksiniz.
-45deg: Animasyonun uygulanış açısıdır. Değişiklik yapabilirsiniz. Örneğin: 20deg, 45deg vs.
#2d65a3,#ff3d00,#5190d5,#ff3d009: Bunlarda animasyonda kullandığımız renkler. Bunlarıda kendinize göre düzenleyebilirsiniz.
15s: Buradaki sayı değerini değiştirerek animasyon süresini düzenleyebilirsiniz. Örneğin: 10s, 20s, 25s vs.
Hiç yorum yok:
Yorum Gönder