Kemampuan untuk 'nomor pd halaman buku' Blogger blog telah menjadi fitur lama yang diminta.
Pagination memungkinkan kita untuk halaman blog jumlah seperti yang
buku, menawarkan pembaca kemampuan untuk menavigasi lebih dalam arsip
dengan mudah bila dibandingkan dengan 'baru' dan 'tua' posting link.
Setelah banyak usaha yang gagal, saya hampir siap untuk mengakui
kekalahan dengan fungsi ini sampai saya menemukan script ini sangat baik
oleh Mohamed Blogger Accessories.
Script ini menggantikan pager blog default (link ke yang lebih baru,
lebih tua dan halaman rumah) dengan bernomor navigasi halaman.
Selanjutnya, ia menawarkan kemampuan untuk menyesuaikan jumlah link
halaman dan jumlah posting yang ditampilkan di setiap halaman.
Blogger pagination naskah Mohamed dapat diinstal dengan menggunakan dua metode yang berbeda:
Kedua metode instalasi ini akan mencapai efek yang sama.
Saya pribadi menemukan menambahkan kode secara langsung ke template
membuatnya lebih mudah untuk menyesuaikan gaya link pagination, tetapi
jika Anda merasa tidak nyaman mengedit template Anda, instalasi widget
mungkin lebih mudah bagi Anda.
Berikut adalah cara instalasi selesai akan muncul di blog Anda:
Setelah diinstal, ini "nomor halaman" akan muncul di rumah Anda, arsip
dan label halaman, yang memungkinkan pembaca untuk dengan mudah
mengakses halaman dalam arsip Anda. Namun, nomor halaman tidak akan muncul di halaman posting individu.
Saya telah melihat banyak blog yang menggunakan pagination seperti ini,
dan di antara mereka tidak ditampilkan link ini halaman bawah setiap
posting.
Untuk mempelajari lebih lanjut tentang menggunakan script pagination
nomor untuk Blogger, mampir ke Blogger Aksesoris untuk membaca tutorial
yang berguna Mohamed telah diposting.
Versi saya Sedikit Modifikasi
Seperti Anda mungkin telah menyadari, saya menggunakan versi modifikasi dari script ini di sini di Blogger Buster.
Ketika menyesuaikan gaya versi asli Mohamed, saya melihat beberapa
elemen yang saya suka untuk mengubah preferensi saya sendiri, dan juga
memodifikasi CSS untuk bagaimana link nomor ditampilkan.
Jika Anda lebih memilih untuk menggunakan versi yang sedikit berbeda ini bukan, di sini adalah apa yang harus Anda lakukan.
Tambahkan kode CSS untuk bagian gaya Anda
Pertama, salin semua kode di bawah ini dan paste tepat sebelum menutup </b:skin> tag pada template Anda:
.showpageArea a {
text-decoration: underline;
}
.showpageNum a {
text-decoration: none;
border: 1px # ccc padat;
margin: 0 3px;
padding: 3px;
}
.showpageNum a: hover {
border: 1px # ccc padat;
background-color: # ccc;
}
.showpagePoint {
color: # 333;
text-decoration: none;
border: 1px # ccc padat;
background: # ccc;
margin: 0 3px;
padding: 3px;
}
.showpageOf {
text-decoration: none;
padding: 3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration: none;
border: 1px # ccc padat;
padding: 3px;
}
.showpage a: hover {
text-decoration: none;
}
.showpageNum a: link, .showpage a: link {
text-decoration: none;
color: # 333;
}
Ini harus mengubah warna teks dan link di pagination untuk mencocokkan gaya yang sudah ada dalam template blog Anda. Jadi jika teks default adalah putih dengan latar belakang gelap, "Pages (#)" dari script akan muncul dengan cara yang sama.
Warna untuk latar belakang dan melayang-layang efek dari nomor dapat
diubah sesuai dengan preferensi Anda dengan mengedit nilai hex untuk
mencocokkan gaya template Anda sendiri.
Tambahkan kode JavaScript di bawah posting Anda
Bagian kedua dari instalasi adalah dengan menambahkan kode JavaScript
di bawah posting Anda yang akan mencari dan mengganti "Lebih Baru
Posting Lama /" link yang ada.
Untuk menambahkan script ini, pergi ke Layout> Edit HTML di
dashboard Blogger Anda, dan jangan centang kotak "expand widget
template" (itu jauh lebih mudah untuk menambahkan kode sementara widget
dikontrak). Kemudian menemukan bagian kode (atau serupa) dalam template Anda:
<b:section
class='main' id='main' showaddelement='yes'> <b:widget id='Blog1'
locked='false' title='Blog Posts' type='Blog'/> </b:section>
Segera setelah penutupan </b:section> tag, tambahkan bagian kode berikut:
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==". com/ ";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ?
thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length)
: "";
thisLable =
thisLable.indexOf("?")!=-1 ?
thisLable.substr(0,thisLable.indexOf("?")) :
thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 5 ;
var displayPageNum = 5 ;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span
class="showpageNum"><a
href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] =
'/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] =
'/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span
class="showpage"><a
href="/">'+ upPageWord
+'</a></span>';
}
}else{
upPageHtml = '<span
class="showpage"><a
href="'+htmlMap[p]+'">'+
upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span
class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span
class="showpageNum"><a
href="/">1</a></span>';
}
}else{
html += '<span
class="showpageNum"><a
href="'+htmlMap[p]+'">'+
(p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span
class="showpage"> <a
href="'+htmlMap[p]+'">'+
downPageWord
+'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div
class="showpageArea"><span
style="COLOR: #000;"
class="showpageOf"> Pages
('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script
src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999";
type="text/javascript"></script>
Setelah Anda telah menambahkan kode ini, mencoba untuk melihat template Anda untuk memastikan tidak ada kesalahan kode.
Anda tidak akan dapat melihat script beraksi pada preview, tapi langkah
ini memastikan tidak ada efek samping untuk tata letak Anda.
Dalam kode di atas, Anda akan melihat bahwa saya telah menyoroti tiga bagian kode merah tebal. Anda mungkin perlu untuk menyesuaikan bagian ini agar lebih sesuai dengan preferensi Anda:
Pada baris 5, Anda mungkin perlu mengubah ".com" untuk mencerminkan
perpanjangan domain Anda jika Anda menggunakan domain kustom.
var isFirstPage = thisUrl.substring (thisUrl.length-5, thisUrl.length) == & quot ;. com / & quot ;;
Instalasi default ini harus bekerja dengan baik bagi siapa saja host di
Blog * Spot atau domain dot.com, tetapi Anda akan perlu untuk mengubah
bagian ini jika domain kustom Anda berakhir di .co.uk atau .info
misalnya.
Dalam garis 19 dan 20, Anda dapat mengubah nilai-nilai ini untuk
mengubah berapa banyak posting yang ditampilkan pada setiap halaman, dan
berapa banyak link akan terlihat pada waktu yang sama.
The var pageCount = 5; bagian defiines jumlah posting yang ditampilkan pada setiap halaman, sementara var displayPageNum = 5; mendefinisikan jumlah link yang ditampilkan (misalnya: 1 - 2 - 3 - 4 - 5) di bawah bagian posting.
Setelah Anda telah menambahkan kode JavaScript ini dan membuat
perubahan nescessary untuk kebutuhan Anda, simpan template Anda dan
membuka blog Anda di browser Anda. Sekarang Anda akan melihat link pagination muncul di bawah bagian tulisan utama Anda, dan juga pada Label dan Arsip halaman. Source:
bloggerbuster.com
