Blogger'da tüm yazılarınızı tarihe göre tek sayfada listelemek için arşiv sayfası oluşturabiliyoruz. Benim sitenin arşiv sayfası şöyle https://www.eroldizdar.com/p/arsiv.html
Sizde blogger tabanlı sitenizde aynı arşiv sayfasını oluşturmak için 2 kod vereceğim. İlk kod şuradaki gibi tüm yazıları tek bir sayfada göstermek için. İkinci kod ise aynı sayfanın her sayfada 150 başlığın yayınlandığı sayfalara bölünmüş hali.
İlk kod: Tüm yazıların tek sayfada yer aldığı arşiv sayfası
<script type="text/javascript">
function LoadTheArchive(TotalFeed)
{
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if("entry" in TotalFeed.feed)
{
var PostEntries=TotalFeed.feed.entry.length;
for(var PostNum=0; PostNum < PostEntries; PostNum++)
{
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0,4));
PostMonths.push(ThisPost.published.$t.substring(5,7));
PostDays.push(ThisPost.published.$t.substring(8,10));
var ThisPostURL;
for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
{
if(ThisPost.link[LinkNum].rel == "alternate")
{
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}
function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
var MonthNames=["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"];
var NumberOfEntries=PostTitles.length;
var currentMonth = "";
var currentYear = "";
for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
{
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
currentMonth = NameOfMonth;
currentYear = PostYears[EntryNum];
document.write("<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>");
}
var parsed_day = parseInt(PostDays[EntryNum],10) > 9 ? "" + parseInt(PostDays[EntryNum],10): "0" + parseInt(PostDays[EntryNum],10);
document.write("<div class='dayStyle'>" + parsed_day + ": </div><a href='" + PostURLs[EntryNum] + "'>" + PostTitles[EntryNum] + "</a><br>");
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=1&callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=151&callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=301&callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=451&callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=601&callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=851&callback=LoadTheArchive" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=1001&callback=LoadTheArchive" type="text/javascript">
</script>
<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
color:#000;
font-weight:bold;
font-size: 15px;
font-family: Arial, sans-serif;
margin: 0;
}
.dayStyle {
color:#000;
font-weight:bold;
font-family: Arial, sans-serif;
display: inline-block;
}
.post-header{display:none;}
</style>
<style type="text/css">
.dateStyle {
color: #000;
font-weight: bold;
font-size: 15px;
font-family: Arial, sans-serif;
margin: 0;
}
.dayStyle {
color: #000;
font-weight: bold;
font-family: Arial, sans-serif;
display: inline-block;
}
.post-header {
display: none;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination a {
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
margin: 0 4px;
}
.pagination a:hover {
background-color: #ddd;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
</style>
<div id="content"></div>
<div id="pagination"></div>
<script type="text/javascript">
var currentPage = 1;
var titlesPerPage = 250;
var allPostTitles = [];
var allPostURLs = [];
var allPostYears = [];
var allPostMonths = [];
var allPostDays = [];
var feedsLoaded = 0;
var totalFeeds = 7; // The total number of feed scripts
function LoadTheArchive(feed) {
if ("entry" in feed.feed) {
var PostEntries = feed.feed.entry.length;
for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
var ThisPost = feed.feed.entry[PostNum];
allPostTitles.push(ThisPost.title.$t);
allPostYears.push(ThisPost.published.$t.substring(0, 4));
allPostMonths.push(ThisPost.published.$t.substring(5, 7));
allPostDays.push(ThisPost.published.$t.substring(8, 10));
var ThisPostURL;
for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
if (ThisPost.link[LinkNum].rel == "alternate") {
ThisPostURL = ThisPost.link[LinkNum].href;
break;
}
}
allPostURLs.push(ThisPostURL);
}
}
feedsLoaded++;
if (feedsLoaded === totalFeeds) {
DisplaytheTOC();
}
}
function DisplaytheTOC() {
var MonthNames = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
var NumberOfEntries = allPostTitles.length;
var totalPages = Math.ceil(NumberOfEntries / titlesPerPage);
var start = (currentPage - 1) * titlesPerPage;
var end = start + titlesPerPage;
document.getElementById('content').innerHTML = ""; // Clear existing content
var currentMonth = "";
var currentYear = "";
for (var EntryNum = start; EntryNum < end && EntryNum < NumberOfEntries; EntryNum++) {
var NameOfMonth = MonthNames[parseInt(allPostMonths[EntryNum], 10) - 1];
if (currentMonth != NameOfMonth || currentYear != allPostYears[EntryNum]) {
currentMonth = NameOfMonth;
currentYear = allPostYears[EntryNum];
document.getElementById('content').innerHTML += "<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>";
}
var parsed_day = parseInt(allPostDays[EntryNum], 10) > 9 ? "" + parseInt(allPostDays[EntryNum], 10) : "0" + parseInt(allPostDays[EntryNum], 10);
document.getElementById('content').innerHTML += "<div class='dayStyle'>" + parsed_day + ": </div><a href='" + allPostURLs[EntryNum] + "'>" + allPostTitles[EntryNum] + "</a><br>";
}
// Update pagination controls
var paginationControls = "<div class='pagination'>";
if (currentPage > 1) {
paginationControls += "<a href='javascript:void(0)' onclick='changePage(" + (currentPage - 1) + ")'>« Previous</a>";
}
for (var i = 1; i <= totalPages; i++) {
paginationControls += "<a href='javascript:void(0)' onclick='changePage(" + i + ")' class='" + (i === currentPage ? "active" : "") + "'>" + i + "</a>";
}
if (currentPage < totalPages) {
paginationControls += "<a href='javascript:void(0)' onclick='changePage(" + (currentPage + 1) + ")'>Next »</a>";
}
paginationControls += "</div>";
document.getElementById('pagination').innerHTML = paginationControls;
}
function changePage(pageNumber) {
currentPage = pageNumber;
DisplaytheTOC();
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=1&callback=LoadTheArchive" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=151&callback=LoadTheArchive" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=301&callback=LoadTheArchive" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=451&callback=LoadTheArchive" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=601&callback=LoadTheArchive" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=851&callback=LoadTheArchive" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=1001&callback=LoadTheArchive" type="text/javascript"></script>
0 Yorumlar