Blogger'a Arşiv Tablosu Ekleme
Arşiv sayfaları ziyaretçilere tüm içeriğinizi tek bir yerden görme şansı verdiği için kullanıcı dostu ve oldukça faydalı sayfalardır. Bunun için ben de bir arşiv sayfası oluşturmuş ve bunu nasıl oluşturabileceğinizi paylaşmıştım.
Fakat benim paylaştığım arşiv sayfası tüm konu başlıklarını alt alta sıraladığı için yazı sayısı 1000’den fazla olan bloglarda kullanıcıların arşivi incelemesi biraz zor oluyordu. Bu yüzden Blogger’da tablo şeklinde bir arşiv sayfası oluşturulup oluşturulmayacağı ile ilgili bir araştırma yaptım ve Endonezya’lı bir arkadaşın aşağıda gördüğünüz projesine denk geldim.
Resimde de gördüğünüz gibi arşiv sayfasında blog yazılarınızda kullandığınız etiketler, sekme şeklinde tablonun sol tarafında alt alt sıralanıyor. Ve bu sekmelere tıkladığınızda o etikete ait yazılar listeleniyor. Böylece hem daha minimal hem de daha kullanıcı dostu arşiv sayfanız olacak.
Siz de Blogger blogunuzda böyle bir arşiv tablosu oluşturmak istiyorsanız Blogger kumanda paneline giriş yaptıktan sonra Sayfalar > Yeni Sayfa yolunu takip edin ve resimde gösterdiğim gibi aşağıdaki kodları sayfanın HTML bölümüne ekleyin.
Kodlarda kırmızı renkle gösterdiğim http://bloghocam.blogspot.com yerine kendi blog adresinizi yazmayı unutmayın!
Fakat benim paylaştığım arşiv sayfası tüm konu başlıklarını alt alta sıraladığı için yazı sayısı 1000’den fazla olan bloglarda kullanıcıların arşivi incelemesi biraz zor oluyordu. Bu yüzden Blogger’da tablo şeklinde bir arşiv sayfası oluşturulup oluşturulmayacağı ile ilgili bir araştırma yaptım ve Endonezya’lı bir arkadaşın aşağıda gördüğünüz projesine denk geldim.
Resimde de gördüğünüz gibi arşiv sayfasında blog yazılarınızda kullandığınız etiketler, sekme şeklinde tablonun sol tarafında alt alt sıralanıyor. Ve bu sekmelere tıkladığınızda o etikete ait yazılar listeleniyor. Böylece hem daha minimal hem de daha kullanıcı dostu arşiv sayfanız olacak.
Siz de Blogger blogunuzda böyle bir arşiv tablosu oluşturmak istiyorsanız Blogger kumanda paneline giriş yaptıktan sonra Sayfalar > Yeni Sayfa yolunu takip edin ve resimde gösterdiğim gibi aşağıdaki kodları sayfanın HTML bölümüne ekleyin.
<div id="tabbed-toc">
<span class="loading">Sayfa yükleniyor...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://bloghocam.blogspot.com",
containerId: "tabbed-toc",
activeTab: 1,
showDates: true,
showSummaries: true,
numChars: 200,
showThumbnails: true,
thumbSize: 40,
noThumb: "https://lh3.googleusercontent.com/-vuYNMl4ft0M/VZpjZGBIZFI/AAAAAAAALjk/vqRQH4M66Gk/s500/resimyok.gif",
monthNames: [
"Ocak",
"Şubat",
"Mart",
"Nisan",
"Mayıs",
"Haziran",
"Temmuz",
"Ağustos",
"Eylül",
"Ekim",
"Kasım",
"Aralık"
],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>Yeni!</em>"
};
</script>
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>
<style>
#tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !important;
position: relative;
color: #222;
border: 0;
border-top: 5px solid #FC0204;
background-color: #1D1D1D;
-webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px Arial,Sans-Serif;
color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #515050;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #FFFC03;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 75%;
float: right !important;
background-color: #F5F5F5;
border-left: 5px solid #FFFC03;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
}
#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 Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #DBDBDB;
font-size: 10px;
}
#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:#222;
color:#FFF;
outline:none;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#222;
color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
color:#000;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
Kodlarda kırmızı renkle gösterdiğim http://bloghocam.blogspot.com yerine kendi blog adresinizi yazmayı unutmayın!
Peki bir süre etiket kullanıyoruz hocam hangi etiketlerde ki yazıları gösterebileceğimizi seçebiliyor muyuz? Seçiyorsak nasıl yapıyoruz. Saygılar
YanıtlaSilHayır, tüm etiketler otomatik olarak listeleniyor. İstediğimizi gösterip göstermeme seçeneği yok malesef.
YanıtlaSilTeşekkürker :) Peki site hızında yavaşlama olur mu ?
YanıtlaSil@Trend Güzeli
YanıtlaSilAna sayfadan bağımsız ayrı bir sayfada olduğu için blogun açılış hızını etkilemez.
Haocam çok güzel ama bunu etiketlerden değilde aylara göre sıralanmışını nasıl yapabiliriz.
YanıtlaSil@Ruhsuz Atmaca
YanıtlaSilEmin değilim ama şunu false yapmayı deneyin.
sortAlphabetically: true,
Güzelmiş İnşallah çalışır uyguluyorum teşekkürler
YanıtlaSil@Adam Zeka
YanıtlaSilDeneyip çalıştığına emin olmadan hiçbir şey paylaşmıyorum zaten.
Saol güzel paylaşım
YanıtlaSilmerhaba blog hocam yazılArınızı kendi blogumda paylaşmak istiyorum kaynak belirtecegim izin verirseniz. vermesseniz paylaşmayacagım hırsızlık yapmak istemem saygılar.
YanıtlaSilGüzel bir eklenti, deneye değer :)
YanıtlaSil@kivanc
YanıtlaSilKaynak göstererek paylaşabilirsiniz.
@Ruhsuz Atmaca
YanıtlaSiltarihi göre sıralanabilen tablo şeklinde arşiv sayfası yapımını buradan bulabilirsin.
http://blogbakkali.blogspot.com.tr/2015/07/blogger-tablo-seklinde-arsiv-sayfasi-yapimi.html
Arşiv sayfaları gerçekten kullanıcı dostu. Aradığımız içeriğe kolayca ulaşabiliyoruz. Eklentiyi bloguma ekledim. Blog tanıtımı kategorileri kolayca bulunabiliyorum, fakat etiketler çok olduğu için biraz uzun oldu arşiv. Eklenti için teşekkür ederim Serdar Bey.
YanıtlaSilBaşarılı bir kod çalışması olmuş tebrik ederim Serdar Bey.
YanıtlaSilSaolun hocam işime yaradı.
YanıtlaSilTeşekkürler
YanıtlaSilDiğer arşiv sayfasını kullanıyordum. Ama hem çok uzun hem de etiketler arada pek görünmüyordu. Renk ve tasarım biraz basit görünsede oldukça kullanışlı.
Hocam merhaba iyi günler sizi uzun zamandır takip ediyorum. http://bilisimhoca.blogspot.com.tr/ Bu sitedeki menü açılan etiketler kısmını nasıl oluşturabilirim. Sitenin yazarına sordum ama cevap gelmedi. Lütfen bununla ilgili makale yazar mısınız.
YanıtlaSilGerçekten güzel bir yazı blogumu geliştirme aşamasındayım ve bu yayını başka bir yabancı blogda görmüştüm yapamamıştım inşallah sizin yazınız sayesinde yaparım saolun. Blogum : http://semihkececioglu.blogspot.com/
YanıtlaSilselam blog hocam bu site ve diger tum turk blogcuları inceledim blogger tasarım konularını blogger cidden cokmu geri hayalimdeki hic bir seyi yapamadım mesela ufacık bir yere kucuk bir slider eklicem onla butun gün ugrastım zaman kaybi 1 blogger le yaklasık olarak bir aydır icli dıslı ugrasıyorum gadget eklentiler dısında blogger tasarım ve duzenleme blog kayıtları görunusu hakkında en ufak bir bilgi bulamadım dış kaynakları cok arastırdım ordada tam ıstedıgım sekilde blog tasarlamak icin hic bir bilgi yok blogger cok gerilemis seo konusunda biraz ilerlemis mobil telefon yapılan bu sene bir kac tema dısında onlarda iyinin kötüsü iste yani demem oki blogger bırakın bence hic bir ilerlemesi yok harcadıgım zamana yazık cidden wordpress le ugrassaydım daha iyiydi bir ay wordpress kesin dönüs yapacam temalarına bakın duzenlmeneye bıle gerek yok blogger cidden zaman kaybı geriledikce gerilemis pişman oldum bide millet bildiklerini sır gibi saklamazmı komik cidden ne yse kolay gelsin
YanıtlaSilSerdar Bey, uzun süredir blogevimde sizin sayenizde cok güzel uygulamalar buluyor ve kullanıyorum. Hepsi cok basarılı.Minnettarım dogrusu...Özellikle arsiv tablosu mükemmel oldu. Ellerinize emeklerinize saglık. Tesekkürlerimle
YanıtlaSilişime yarayan paylaşım yine saolun hocam.
YanıtlaSilblogger'ıma yıldızlı oylama sitemi gibi bişey yapmak istiyorum sizin sitedeikine baktım hatta en az 40 50 site gezdim hiçbi rating vb sitesi olmuyor temada uyumsuzluk varmış diyorlar bunu nası düzeltebilirim
YanıtlaSilÇok güzel bir paylaşım olmuş. Sadee renk ayarlarında oynama yapılması gerekli. Zira Her sitenin renk uyumu farklı. Bu hususta yorumunuz varsa sevinirim.
YanıtlaSilhttp://www.gebelikhesaplama.co
çok iyi çok işime yaradı teşekürler...
YanıtlaSilArşiv sayesinde diğer postlarınıza internal link vermiş ve longtail trafiğinizi arttırmış oluyorsunuz.
YanıtlaSilTeşekkürler blog hocam.
blogunuzu lise yıllarımdan beri takip ediyorum şuan üniversite 3. sınıftayım ; pek çok blog açtım pek yayın yaptım ; sayenizde sitelerim kalitesini her geçen gün artırdım yeni hesabımla mesleğimle bağlantılı olacak şekilde 3 gün önce yeni bir site açtım ; siz blog yönetici ve tüm kullanıcılarınızı siteme davet etmekten onur duyarım :)
YanıtlaSilTekrardan emeğine sağlık üstad
www.hukukhocam.com beklerim :)
Dediklerinizi harfiyen yapıyorum fakat tıpkı diğer arşiv olmadığı gibi buda olmadı.Lütfen bakar mısınız ?
YanıtlaSilhttp://vucutdengesi.blogspot.com.tr/
Teşekkürler, ufak renk değişiklikleriyle blogumun temasına tam uydu.. Güzel ve yararlı..
YanıtlaSilhttp://cbulog.blogspot.com/p/arsiv.html
Hocam elinize sağlık, çok güzel bir paylaşım olmuş, renk ayarları da yapıla bilse çok güzel olacak... :)
YanıtlaSilBkz; http://harunistenci.blogspot.com/p/arsiv.html
Çok teşekkürler hocam.Arşiv eklentisi arıyordum bende artık bunu kullanıyorum..Gerçekten çok kaliteli içeriklere sahip bir blogun var bu yardımlarından ötürü sana ayrıca herkez adına teşekkür ederim
YanıtlaSilElinize sağlık..
YanıtlaSilhocam dediklerinizi uyguladım fakat sitemde arşiv kısmı çıkıyor neden böyle oluyor
YanıtlaSilMerhaba
YanıtlaSilBen dediğiniz gibi yapıştırdım olmadı.Yardımcı olurmusunuz?
Hocam 2 ya da 3 tane bloğu bir arşiv tablosuna entegre edebilirmiyim, yoksa sadece bir bloğumu kabul ediyor?
YanıtlaSilBende ekledim çok teşekkürler Serdar Bey...
YanıtlaSilAnlattığınız diğer arşivi oluşturmuş fakat bazı etiketler gözükmüyor diye bunu yüklemiştim. Bunda da gözükmüyor mesela Maldivler etiketi ile hiç yazı yok gözüküyor aslında 9 tane var, yada kitap etiketi 9 gözüküyor aslında 30 adet var gibi.
YanıtlaSilYardımcı olursanız çok sevinirim.
www.yollardahayatvar.com
sayfa yükleniyor diye kalıyor hocam
YanıtlaSilMerhaba
YanıtlaSilbu fonksiyonu www.nehissettinseo.com a uyguladım
deneme yanılma yöntemiyle kendi tarzıma göre epey bir değişiklik yaptım
ancak iki hususu değiştiremedim
-soldaki etiketler baştan sona örneğin: MÜREKKEP ACI gibi tamamen büyük harflerle çıkıyor ki bu tarz bir yazım şekli bloguma aykırı
-soldaki etiketlerde örneğin; MÜREKKEP ACISINDA HİSSEDİLENLER gibi orjinal etiket, ancak belli sayıdaki karakter kadar gösteriyor,
- küçük resimlerin yanındaki kısa metinleri arial / 10 fontuna dönüştüremedim
öncelikle bilgi için teşekkür ederim
bilgili ve ilgili tüm siz bloggerlardan yardımınızı rica ederim
teşekkür ederim
Etiketlerin tamamen büyük harfle çıkmasını engelemek için şu satırı silmeniz yeterli: text-transform:uppercase;
SilMerhaba Serdar Kara
Silcevabınız çok hızlı geldi, beklemiyordum açıkçası,
teşekkür ederim öncelikle :)
çözümünüzü uyguladım ve oldu http://www.nehissettinseo.com/p/tum-yazilar.html
aynı html içinde yer alan 2 çözüm ihtiyacım var
rica etsem buna da bilginizle cevap alabilir miyim?
-soldaki etiketlerde örneğin; MÜREKKEP ACISINDA HİSSEDİLENLER gibi uzun bir etiket, ancak MÜREKKEP ACISI olarak bir kısıtlı karakter gösteriyor,
- küçük resimlerin yanındaki kısa metinleri arial / 10 fontuna dönüştüremedim
teşekkür ederim
www.nehissettinseo.com
Yani ne diyeyim.ÇOK TEŞEKKÜRLER
YanıtlaSilçook teşekkürler, süper bir paylaşım...
YanıtlaSilBloggerda arşiv sayfaları açılmaz oldu, sizinkine tıkladım oda açılmıyor.
YanıtlaSilDaha önce tıkır tıkır çalışan kodlar artık çalışmıyor, denemediğim kod kalmadı ne yazık ki, acaba bloggerın https geçmesiyle ilgisi var mıdır?
Yada elimizdeki kodları yeniden çalışır hale getirmemizin bir yolu var mı?
https ye geçildiğin için çalışmıyor galiba.
YanıtlaSil