Blogger Sayfa Numaralandırma Eklentisi

Yeni blog oluştururken, baş ağrısı blogcuları blog için doğru temayı seçtiğini söylüyor. Doğru tema, birkaç önemli özellik içeren şeydir. Kolay kullanıcı arayüzü, her blogcunun bloglarında istediği en önemli özelliklerden biridir. Aslında kullanıcıların kolayca blogda gezinmek için yardımcı olur. Kolay kullanıcı arayüzü tema yapısında, açılır ve alt öğeler içeren uygun menü, etiket bağlantıları, özel içeriğe işaret eden bazı gereçler ve bir önceki sayfalama düğmeleri gibi birçok şey geliyor. Blog temanız en kötü sayfalama düğmelerini içeriyorsa veya bu yazıdakilerden bazı yeni düğmeler uygulamak istiyorsanız, blogcu için bir sonraki ve önceki numaralı sayfalama düğmelerini paylaşacağız.

Blogger İçin Sonraki ve Önceki Numaralandırma

Yani, bu sayfalandırma ile ilgileniyorsunuz ve size bu sayfalandırma hakkında size daha fazla bilgi vereyim. Tasarımı Flat UI gibi görünüyor; Bu en güzel kullanıcı arayüzü ve aynı zamanda bugünlerde trend. Tamamen JavaScript ve CSS ile yapılmıştır. JavaScript, işlevlerin çalışmasını sağlarken, CSS yalnızca tasarımı için kullanılır. Ayrıca numaralandırma sistemine sahiptir ve bunun dışında iki sonraki ve önceki düğmelere sahiptir. 4 düz rengini hazırladık ve temanıza en uygun ve en uygun rengi seçmelisiniz. Bu sayfalama düğmeleri, tüm ana sayfaların altında yalnızca ana sayfada görünür. Konumlarını otomatik olarak alırlar, Aslında varsayılan sonraki ve önceki düğmelerle değiştirilirler. 

Bir Sonraki ve Bir Önceki Sayfa Ekleme Düğmeleri Blogu Eklemek İçin Öğretici

Öğreticiyi iki bölüme ayırıyoruz, böylece öğreticiyi anlamanız ve ilerlemeniz kolaylaşacaktır. Birincisi, sayfalamanın işlevlerini kurmak, ikincisi ona bakmak veya tasarım yapmaktır. Haydi şimdi yapalım.

Şimdi gelelim kodları şablonumuza eklemeye ;

Öncelikle Html şablon editörümüzü açıyoruz ve Ctrl+F yardımı ile birlikte kodunu aratıp bulduğunuz kodun üzerine gelecek  şekilde aşağıda ki Html kodlarını ekliyoruz.

HTML 


  /*<![CDATA[*/
    var postperpage=5;
    var numshowpage=2;
    var upPageWord ='« Previous Page';
    var downPageWord ='Next Page »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/


  /*<![CDATA[*/
    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulaimaksimal)akhir=maksimal;html+="Page "+nomerhal+' of '+maksimal+"";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+=''+upPageWord+''}else{html+=''+upPageWord+''}}else{if(jenis=="page"){html+=''+upPageWord+''}else{html+=''+upPageWord+''}}}if(mulai>1){if(jenis=="page"){html+='1'}else{html+='1'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+=''+jj+''}else if(jj==1){if(jenis=="page"){html+='1'}else{html+='1'}}else{if(jenis=="page"){html+=''+jj+''}else{html+=''+jj+''}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+=''+maksimal+''}else{html+=''+maksimal+''}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+=''+downPageWord+''}else{html+=''+downPageWord+''}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
  /*]]>*/




Şimdi gelelim CSS kodlarına aşağıda temamıza uygun renklerden hangisi kullanmak istiyorsak onu seçerek Html şablon editörümüzde ]]> kodunu bularak üstüne gelecek şekilde ekliyoruz.

CSS //* Red Style ---------------------------------------- *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

//* Blue Style --------------------------------------------------- *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

// * Green Style ------------------------------------------ *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

//* Dark Style ----------------------------------------------- *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid #202D3A;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2c3e50;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

 

Bütün işlemler bu kadar herkese kolay gelsin.

Ziyaretiniz için teşekkürler…Yorumlarınızı bekliyoruz…

Yorum bırakın