Değerli Blog Geliştiricim takipçileri bu yazımda sizlere daha önce paylaştığım Blogger Site Haritası Oluşturma Eklentisinin 2. Versiyonunu paylaşacağım. Önceki yazımızda Sitemap (Site Haritası) Nedir? Ne İşe Yarar? konu başlıklarını da konu içerisinde paylaşmıştım. Bu yazımızda o konulara hiç girmeden direk yeni versiyon Sitemap (Site Haritası) nasıl eklenir sabit sayfaya eklenir onu göstereceğim.
Blogger Sabit Sayfa Nasıl Oluşturulur?
Bloggerda sabit sayfa oluşturmak için öncelikle Blogger'a giriş yapın. İşlem yapmak istediğiniz Blog Sayfanızı seçin ve ardından Klasik Bloggerda Sayfalar > Yeni Sayfa adımını, Yeni Bloggerda ise Sayfalar > adımını takip ederek yeni bir sayfa oluşturun. Oluşturduğunuz sayfaya bir sayfa başlığı adı verin.
NOT: Vermiş olduğunuz sayfa başlığı adında Türkçe karakterler kullanmamaya ve sayfa adının uzun olmamasına özen gösterin. Örneğin; "site-haritasi"gibi.
NOT: Vermiş olduğunuz sayfa başlığı adında Türkçe karakterler kullanmamaya ve sayfa adının uzun olmamasına özen gösterin. Örneğin; "site-haritasi"gibi.
Türkçe Karakter Kullanırsam Ne Olur?
Örneğin; "Açılıp Kapanan Sosyal Paylaşım Butonları Eklentisi" adında bir sayfa oluşturduğunuzda Türkçe karakter kullanırsanız sayfa linkinizde eksik karakterler olacaktır.
Aşağıdaki Örneği inceleyebilirsiniz.
https://bloggelistiricim.com/acilip-kapanan-sosyal-paylasim-butonlari-eklentisi.html
https://bloggelistiricim.com/aclp-kapanan-sosyal-paylasm-butonlar-eklents.html
Blogger Sabit Sayfaya Site Haritası Nasıl Eklenir?
Sayfa adını belirledikten sonra sayfanın Kod Editör kısmına geçmek için Klasik Bloggerda sol üst kısımda yer alan butonuna, Yeni Bloggerda sağ üst kısımda yer alan butonuna basın ve aşağıdaki HTML, CSS ve JavaScript Kodunu sayfanın içerisine alt alta gelecek biçimde ekleyin.
HTML Kodu
<div id="head-tab">
Site Haritası</div>
<div id="tabbed-toc">
</div>HTML Kodunu ekledikten sonra bir satır alta inerek aşağıdaki CSS Kodunu ekleyin.
CSS Kodu
<style scoped="" type="text/css">
#head-tab {
background: #51a8e9;
padding: 15px 20px;
margin: 0;
color: #fff;
font-size: 16px;
text-align: center;
font-weight: 700;
letter-spacing: .5px;
}
#tabbed-toc {
margin: 0 auto;
background-color: #222;
overflow: hidden;
position: relative;
color: #fff;
border-left: 5px solid #51a8e9
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin: 0;
padding: 0;
list-style: none
}
#tabbed-toc .toc-tabs {
width: 30%;
float: left;
background: #eeeeee;
}
#tabbed-toc .toc-tabs li a {
display: block;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
color: #444;
text-decoration: none;
padding: 8px 12px;
cursor: pointer
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #333;
color: #fff
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #333;
color: #fff;
position: relative;
z-index: 5;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 70%;
float: right;
background-color: #fafafa;
border: 1px solid #fafafa
}
#tabbed-toc .divider-layer {
float: none;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0
}
#tabbed-toc .panel {
position: relative;
z-index: 5;
font: normal normal 10px/normal Helmet, Freesans, Sans-Serif
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 14px;
color: #7f8c8d;
line-height: 20px;
height: 30px;
padding: 6px 12px;
text-decoration: none;
outline: 0;
overflow: hidden
}
#tabbed-toc .panel li time {
display: block;
font-style: italic;
font-weight: normal;
font-size: 10px;
color: #666;
float: right
}
#tabbed-toc .panel li .summary {
display: block;
padding: 10px 12px 10px;
font-style: italic;
border-bottom: 1px solid #2c3e50;
overflow: hidden
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #fafafa
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color: #fafafa;
color: #e06666;
outline: 0
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color: #36424a
}
.post ol li:before {
display: none
}
@media(max-width:700px) {
#tabbed-toc {
border: 1px solid #ccc
}
#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,
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #777
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #51a8e9;
color: #fafafa
}
#tabbed-toc .toc-content {
border: 0
}
#tabbed-toc .panel li a {
font-size: 12px;
line-height: 20px;
height: 20px;
padding: 0 12px
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display: none
}
}
</style>Son olarak yine bir satır alta inerek aşağıdaki JavaScript Kodunu ekleyin
JavaScript Kodu
<script>
var tabbedTOC = {
blogUrl: "https://bloggelistiricim.blogspot.com/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "Yeni!" mark in most recent posts, or define how many recent posts are to be marked
newText: " <em style='color:#F2784B;'>Yeni</em>" // HTML for the "Yeni!" text
};
</script>
<script async="async" src="https://cdn.rawgit.com/Indzign/theme/master/daftar-isi-indzign.js"></script>NOT : Yukarıdaki kod içerisinde bulunan "https://bloggeliştiricim.blogspot.com/" alanına kendi blog sayfanızın linkini eklemelisiniz.
Blogger Site Haritası Oluşturma Eklentisi 2. Versiyon ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.
