Pada Blogspot Kita dapat mengatur berapa jumlah postingan yang akan ditampilkan pada halaman utama atau main page.
Jika jumlah postingan sudah melebihi maka pada bagian bawah akan muncul halaman navigasi, yaitu post lebih lama (older post) dan post lebih baru (newer post). Sehingga untuk berpidah dari halaman ke halaman lainnya akan sedikit mengalami kesulitan.
Karena Hal tersebut disini saya akan memperlihatkan cara untuk menambahkan atau mengganti dengan Halaman Navigasi Bernomor ( Numbered Page Navigation ) untuk memudahkan pengunjung untuk berpindah dari halaman ke halaman lain, juga untuk mempercantik tampilan halaman. Ada 7 model yang saya sediakan kalian bisa pilih sesuai selera masing masing, jika kalian mengerti mengenai pemrograman web kalian bisa custom sendiri tampilannya.
Menambahkan Navigasi Halaman Bernomor :
- Menambahkan CSS ( Untuk Tampilannya )
- Menambahkan Script ( Untuk Fungsi Navigasinya )
- Setting / Konfigurasi Fungsi Navigasi
1. Menambahkan CSS ( Untuk Tampilannya )
a.
Masuk ke Dashboard ==> Template ==> Edit HTML
b.
Cari dan temukan tag kode seperti dibawah.
]]></b:skin>
Untuk lebih mudahnya gunakan fungsi pencarian dengan menekan CTRL + F
c.
Setelah ketemu tempel kode CSS dari salah satu dari 7 model yang ada di bawah, pilih sesuai selera masing - masing.
Tempel tepat diatas tag " ]]></b:skin> ".
Numbered Page Navigation on GRAY
#blog-pager{clear:both;margin:30px auto;text-align:center; padding:
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px
7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid
#E9E9E9;}
.displaypageNum a:hover,.showpage
a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color:
#000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color:
#888;}
#blog-pager .pages{border:none;}
Numbered Page Navigation Black with Orange Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding:
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px
10px;margin-right:5px; color: #F4F4F4;
background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50,
50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50,
0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color:
#000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px
rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50,
0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
Numbered Page Navigation Dark with Blue Current Page
#blog-pager{clear:both;margin:30px auto; padding: 7px;
text-align:center;font-size: 11px;background-image:
-webkit-gradient(linear,left bottom,left top,color-stop(0,
#000000),color-stop(1, #292929));background-image:
-o-linear-gradient(top, #000000 0%, #292929 100%);background-image:
-moz-linear-gradient(top, #000000 0%, #292929 100%);background-image:
-webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image:
-ms-linear-gradient(top, #000000 0%, #292929 100%);background-image:
linear-gradient(to top, #000000 0%, #292929 100%); padding:
6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:
3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px
10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image:
-webkit-gradient(linear,left bottom,left top,color-stop(0,
#59A2CF),color-stop(1, #D9EAFF));background-image:
-o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
-moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
-webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
-ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration:
none;color: #000;-webkit-border-radius: 3px;-moz-border-radius:
3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link,
.blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color:
#fff;}
#blog-pager .pages{border:none;background: none;}
Numbered Page Navigation Gray with Blue Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding:
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px
12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color:
#fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Numbered Page Navigation Green with Orange and Pink on hover
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;
}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px
12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color:
#D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Numbered Page Navigation Orange with Red Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;
}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px
12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color:
#fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Numbered Page Navigation Gray wit Red Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Note : Jika ingin menghilangkan tombol "first" dan "last" tambahkan baris kode berikut dibawah kode CSS.
.firstpage, .lastpage {display: none;}
2. Menambahkan Script ( Untuk Fungsi Navigasinya )
a.
Cari dan temukan ( CTRL + F ) tag kode berikut :
</body>
b.
Tambahkan Script Kode Berikut tepat diatas Kode Tadi :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=3;
var numPages=3;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=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){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=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");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.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(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}
/*]]>*/
</script>
</b:if>
</b:if>
Sampai Proses ini halaman navigasi bernomor sudah bisa digunakan, jika menginginkan konfigurasi lain dari defaultnya silahkan lihat bagaimana cara mengkonfigurasi seperti langkah selanjutnya.
3. Setting / Konfigurasi Fungsi Navigasi
perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
- perPage : Berapa banyak postingan yang akan di tampilkan di setiap halaman ( contoh 7 ). Jumlah ini harus sama dengan jumlah postingan yang ditampilkan dihalaman utama.
- numPage : Berapa banyak halaman yang akan ditampilkan di navigasi ( contoh 6 ).
- Untuk mengganti kata "First", "Last", "« Previous", "Next »" pada naviasi bar cukup ketik kata yang diinginkan didalam kutip.
Label Fix
Secara default blogspot akan menampilkan 20 post pada halaman label, sehingga kita perlu mengubah default tersebut sesuai yang kita inginkan ( disesuaikan dengan perPage: 7). Sehingga jika widget label diklik jumlah post yang akan ditampilkan tidak 20 lagi (contoh 7 postingan).
Cari setiap potongan tag kode berikut :
expr:href='data:label.url'
Ganti dengan tag kode berikut :
expr:href='data:label.url + "?&max-results=7"'
Langkah terakhir adalah Klik tombol Save Template untu menyimpan settingan.
Jangan lupa sebelum mengedit Template sebaiknya backup dulu untuk menghindari hal-hal yang tidak diinginkan.
sumber : helplogger.blogspot.com
Gambar Setelah dibalik
![Pada jaman dahulu ketika Saya masih baru memulai Bloging, Pernah suatu saat ingin menampilkan kode HTML atau semacamnya, Seperti biasa tulis title kemudian isi postingan pada mode Compose isi artikel, sesuaikan Bold italic underline dan lain sebagainya. Setelah yakin apa yang sudah Saya tulis, kemudian sebelum di Publish Saya pratinjau (preview) dan WAW alangkah kagetnya Saya melihat pratinjau itu karena kode HTML yang ingin Saya tampilkan hilang dari artikel entah kemana, Saya masuk lagi ke mode Compose cek Kode HTML nya masih ada dan jelas terlihat, coba di preview lagi, tapi tetep tidak muncul, ada apakah gerangan kenapa kode HTML yang Saya tulis tidak muncul di postingan, padahal Saya sudah pernah melihat Bloger lain yang menggunakan blogspot bisa menampilkan kode HTML. Setelah saya googling akhirnya ketemu juga, kenapa script kode HTML yang saya tulis tidak bisa tampil di postingan. Yaitu dikarenakan Script tersebut dianggap bagian dari kode Halaman itu sendiri, sehingga supaya bisa tampil kode Script HTML tersebut perlu di encode dan nanti ketika sudah di Publish otomatis Web akan men decode lagi script HTML tadi. Yups itu adalah pengalaman indah pada waktu itu, dan jika ada yang belum tahu juga berikut cara untuk menampilkan kode / Script HTML pada postingan di Blogspot, ini juga berlaku di tempat lain. Siapkan alat dan bahan Tentu saja Kode / Script HTML yang akan di tampilkan. Encode Untuk encode bisa menggunkan aplikasi offline dan juga bisa lewat web, banyak penyedia jasa encode dan decode secara online / melalui web. Disini saya coba jelaskan yang secara online, web nya bisa kalian gooling dengan kata sandi Free HTML Encoder silakan pilih salah satu sesuai selera. Misal saya pakai dari Code Beatify. Copy Paste Setelah masuk tinggal di kopi paste saja kodenya pada tempat yang telah disediakan. Hasil sehingga hasilnya seperti ini <!--HTML--> <div id="syntax"></div> <!--Javascript--> <script type='text/javascript'></script> <!--CSS--> .post-body img { box-shadow: 0 0 10px #EEE; height: auto; Color:#0080ff; Font:12px bold italic; border-top:1px solid #333; border-bottom:1px solid #666; } OK mudah bukan, selamat mencoba,., Akan tetapi tulisan masih biasa saja dan masih menyatu dengan tulisan artikel. Tambahan Jika Anda ingin menambahkan variasi tampilan, anda bisa membuat dan atau mengedit suatu class, sehingga nantinya tinggal dipanggil saja. Pada umumnya template blogspot memiliki suatu class untuk menampilkan script HTML supaya terlihat mencolok dan berbeda dengan tulisan artikel. Karena ini akan mengedit template jangan lupa untuk backup terlebih dahulu untuk mengantisipasi hal2 yang tidak diinginkan. Masuk ke Template ==> Edit HTML Cari dan temukan kode ini : ]]></b:skin> Setelah ketemu letakkan kode berikut di atas tag kode tadi : code { display: block; background: transparent; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-dgazCXRtYTF-uqQRwo6mJiFzEzBnMQDRfGwpIMtC0qDRUjAMjMzx9PdZUabmSy5L3a3P6Z9FH7vYuuTIyV20Y3tDdhy9elYMrzMu56tPOcDuU_ZKdADNUkr6e7_Gg0yczMZmQ6Tuz71/s320/codebg.gif); color: #335; border: 1px solid #E8E8D5; padding: 5px 10px; overflow: auto; margin: 1em 0; font-size: 0.9em; line-height: 1.5em; untuk memastikan tidak ada duplikasi class letakkan kursor pada bagian paling atas dan search / cari (CTRL + F) kata code, apakah ada script yang mirip seperti itu, jika sudah ada berarti anda tidak perlu menambahkan lagi script kode diatas, Anda hanya perlu menyesuaikan saja misal mengganti Jenis Font, warna, atau background atau jika anda takut masih tetap duplikasi anda bisa memberi nama class sendiri sesuai selera sehingga tidak mungkin duplikasi misal diganti dengan nama code123, atau code321. Setelah itu Save Template. Cara penggunaannya sama dengan cara diatas tadi hanya perlu sedikit penambahan / pemanggilan class code sedangkan untuk pre digunakan supaya script tetap tertata rapi, jika script yang kita tulis terlalu panjang. perhatikan baris berwarna merah. <pre><code> <!--HTML--> <div id="syntax"></div> <!--Javascript--> <script type='text/javascript'></script> <!--CSS--> .post-body img { box-shadow: 0 0 10px #EEE; height: auto; Color:#0080ff; Font:12px bold italic; border-top:1px solid #333; border-bottom:1px solid #666; } </code></pre>](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzXfHJ8J-VsxbBtwJqfyAdv7usTcHI0UxgL2ZahT0mKDmPpmqu907UmPUx7cIjXmapeVwS4IlVqYTS0YeezIfu3-munVEbvTPztNgGWgQJiVIdHGaogo_GjnUH-s6dJgj6MIOiTpnDtc/s1600/Free+HTML+encoder.png "Blogspot View Code HTML / Menampilkan Kode HTML pada postingan di Blogspot")
Posts
