* Wordpress Tutorials
* Dreamweaver Tutorials
* Hosting dan Domain
SEARCH BLOG
Tutorial Web | Tips & Trik Blog | Free Blogger Template
* Home
* Bandit Batak
* Ingin Dapat Uang Dari Internet Dengan Survey? Klik Disini Untuk Daftar
SUBSCRIBE TO RSS FEED
*
Tutorial Website
Loading...
*
Recent Comments
Loading...
*
Browse by Tags
o
Articles Blogger Template Blogspot Tutorials CSS Tutorials Dreamweaver Tutorials E-Book Hosting dan Domain HTML Tutorials JavaScript Tutorials Kolom Curhat Software Wordpress Tutorials
Cara Membuat Nomor Halaman Posting Pada Blogspot
Posted by HelNes on 4/03/2009
7 komentar
This item was filled under Blogspot Tutorials
Postingan membuat nomor halaman posting pada blogspot ini sama tidak ya seperti menomori dokumen di MS Word? Mari kita bahas. Setiap kali kita menulis posting baru pada blogspot, maka posting terbaru akan muncul di atas atau di depan posting yang lama secara otomatis (meskipun sebenarnya kita bisa mengganti urutan posting dengan cara mengganti waktu pembuatan dari posting tersebut.) Kita juga bisa mengatur jumlah postingan yang akan mucul per halaman pada blogspot. Cara mengatur jumlah posting per halaman pada blogspot pernah disinggung di panduan menggunakan blogspot yang bisa pembaca download dari blog ini. Untuk mengaturnya silahkan buka tab menu "Pengaturan" pada dasbor blogspot Anda, kemudian pilih sub tab menu "Format". Silahkan atur jumlah posting per halaman pada bagian "Tampilkan".
Nah, untuk melihat postingan yang lama, pada template blogspot sudah tersedia link dibagian bawah posting yang bertuliskan biasanya "Posting Lama" dan link "Posting Lebih Baru" jika ingin kembali pada halaman postingan yang lebih baru.
Yang membuat sedikit repot adalah ketika kita ingin membuka postingan yang jauh lebih lama. Dengan kondisi seperti itu, kita harus membuka satu persatu halaman-halaman postingan blogspot untuk sampai pada postingan lama yang ingin kita tuju. Namun, ada cara untuk mengatasinya, yaitu dengan membuat link tiap halaman postingan, sehingga kita bisa melompat ke halaman yang lebih lama atau lebih baru tanpa melewati halaman-halaman diantaranya. Kita akan membuat nomor halaman posting pada blogspot. Nomor-nomor tersebutlah sebagai link untuk menuju halaman yang dituju. Langkah-langkahnya adalah sebagai berikut:
1. Login terlebih dahulu pada akun blogspot Anda
2. Klik link menu Tata Letak, kemudian pilih sub tab menu Edit HTML
3. Backup terlebih dahulu template pembaca. Hal ini bertujuan agar pembaca bisa mengembalikan ke kondisi semula jika terjadi kesalahan pengeditan. Klik tulisan yang bertuliskan Download Template Lengkap
4. Jangan beri centang pada kotak kecil yang ada disamping tulisan Expand Template Widget
5. Cari kode ]]> pada template tersebut
6. Copy paste struktur CSS berikut tepat diatas kode ]]>
/* Page Navigation */
.blog-pager {text-align: center; margin-top: 10px; font-size: 0.75em; font-weight: bold;}
.showpageArea a {text-decoration:underline;padding: 2px 6px 2px 6px;color: #333;background: #fffff4;margin: 2px;}
.showpagePoint {padding: 2px 6px 2px 6px;color: #FFF;background: #a0c800;border: 1px solid #ccc;margin: 2px;} /*Current page*/
.showpageOf {padding: 2px 6px 2px 6px; color: #333;background: #fffff4;border: 1px solid #ccc;margin: 2px;} /* Page (1), Page(2) ... */
.showpageNum a {text-decoration:none;padding: 2px 6px 2px 6px;color: #0066cc;background: #fffff4;border: 1px solid #ccc;margin: 2px;}
.showpageNum a:hover {border: 1px solid #aaa;background-color:#ccc;color: #ff9600;}
.showpageNum a:link {text-decoration:none;color:#333;}
.showpage a {text-decoration:none;padding: 2px 6px 2px 6px;color: #0066cc;background: #FFF;border: 1px solid #ccc;margin: 2px;} /* Next, Prev...*/
.showpage a:hover {padding: 2px 6px 2px 6px;color: #ff9600;background-color:#ccc;border: 1px solid #aaa;margin: 2px;}
.showpage a:link {text-decoration:none;color:#333;}
7. Cari lagi struktur seperti berikut pada template pembaca
8. Kemudian copy paste struktur berikut tepat di bawah struktur yang Anda temukan pada langkah 7
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.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=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
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"><u>'+thisNum+'</u></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 = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
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>
9. Klik tombol menu SIMPAN TEMPLATE
10. Contoh pembuatan nomor halaman posting tersebut bisa pembaca lihat pada bagian bawah halaman blog saya ini.
Bookmark and Share
POSTINGAN LAIN YANG BERHUBUNGAN :
Blogspot Tutorials
* Cara Setting Free Domain pada Website (2) - untuk Blogspot
* Cara Memasukkan Flash ke dalam Blog
* Membuat Drop Down Menu Flash Menggunakan Flash Menu Factory
* Cara Membuat Menu Flash Menggunakan Dreamweaver (2) - untuk Blogspot
* Cara Membuat Menu Flash Menggunakan Dreamweaver (1)
* Membuat Menu Drop Down Dengan CSS Pada Blogspot
* Cara Membuat Menu Drop Down Dengan CSS
* Cara Membuat Album Foto Pada Blogspot Memakai Gadget
* Cara Membuat Menu Pada Blogspot
* Mengatasi Message BX- ERRORS Saat Menginstal Template Baru Blogger
* Membuat Ucapan Selamat Datang Memakai Nama Pengunjung
* Mengatasi "Invalid Widget ID" pada Blogger
* Membuat Slide Show Album Foto di Blog
* How To Show Comment Box Below Post for WP-Polaroid Blogger Template
* Membuat Kotak Komentar dibawah Posting
* Mengganti Template Blogspot
* Lebih Jauh Mengenal Layout Blogpot (2)
* Lebih Jauh Mengenal Layout Blogpot (1)
* Bahasa Pemrograman Blogspot
* Panduan Lengkap Menggunakan Blog di Blogspot
* Panduan Membuat Blog di Blogspot
Dapatkan Tutorial Website Via Email:
Setelah membaca artikel diatas, jangan lupa ngasi komentar ya...
7 komentar on "Cara Membuat Nomor Halaman Posting Pada Blogspot"
*
thegands said... 1
April 4, 2009 10:16 AM
coooll.... nice lae!!! koq gak ikutan migrasi ke bahasa inggris?
*
HelNes said... 2
April 4, 2009 10:50 AM
@lae manurung:
haduh...pgn sih lae ke bhs inggris, aplg waktu pertama aq buat pengunjung dari luar lumayan byk. tp pgnnya blog ini sasarannya org Indonesia..biar berbagi ilmunya ma org2 Indonesia aj dulu.
*
deniardian said... 3
April 4, 2009 3:24 PM
wah thank you lae....bisa di aplikasikan di blog ku lae...
kalo sempet mampir di blog ku lae....
salam kenal...be my friend forever..
www.deniardians.blogspot.com
*
HelNes said... 4
April 4, 2009 5:45 PM
@deniardian:
sama-sama lae...silahkan semoga bermanfaat ya...
btw..marga aha lae?
*
BambangOke said... 5
April 11, 2009 10:53 PM
Wah bisa di cobax nih mas..
bagus jd kayak WP
*
HelNes said... 6
April 12, 2009 1:17 PM
@BambangOke:
silahkan mas.supaya kecanggihan WP bisa juga dimiliki blogspot
*
Rudini Silaban said... 7
June 6, 2009 5:57 PM
thanks
Post a Comment
Newer Post
Older Post
Find Articles Here
Blog Subscription
Subscribe via RSS Feed gratis langganan Tutorial Website
feed InfoApa itu RSS FEED?
Dapatkan Tutorial Website Via Email:
Add to Google Reader or Homepage
*
*
*
*
Recommendated Links to Get Money From Internet
MoreNiche Text Link Ads
Blogger Explorer
o Cara Setting Free Domain pada Website (1) - untuk Wordpress CMS
o Mendapatkan Free Domain
o Cara Memasukkan Flash ke dalam Blog
o Membuat Drop Down Menu Flash Menggunakan Flash Menu Factory
o Cara Membuat Menu Flash Menggunakan Dreamweaver (2) - untuk Blogspot
o Cara Membuat Menu Flash Menggunakan Dreamweaver (1)
o Memindahkan Website dari Localhost ke Hosting Online
o Mendapatkan Free Hosting
o E-Book Panduan Menggunakan Wordpress CMS
o O, Huruf Penuh Keberuntungan
o Cara Instalasi Wordpress CMS pada Localhost
o Download E-Book Panduan Instalasi XAMPP Untuk Localhost
o Membuat Localhost Menggunakan XAMPP
o Apa Itu Localhost?
o Jasa Pembuatan Warnet
o Wordpress Sebagai CMS Dan Perbedaannya Dengan Blog Wordpress
o Cara Membuat Nomor Halaman Posting Pada Blogspot
o New Template of Alexa
o Membuat Menu Drop Down Dengan CSS Pada Blogspot
o Cara Membuat Menu Drop Down Dengan CSS
o Cara Membuat Album Foto Pada Blogspot Memakai Gadget
o Cara Membuat Menu Drop Down Horizontal Dengan JavaScript
o Cara Membuat Menu Horizontal Pada Blogspot
o Cara Membuat Menu Pada Blogspot
o Mengenal Dasar Pembuatan Halaman Website (2)
o Award Pertama Di Hari Pertama
o Membuat Web Menggunakan Macromedia Dreamweaver (4)
o Membuat Web Menggunakan Macromedia Dreamweaver (3)
o Halaman Yang Pertama Kali Dibuka?
o Membuat Web Menggunakan Macromedia Dreamweaver (2)
o Membuat Web Menggunakan Macromedia Dreamweaver (1)
o Mengatasi Message BX- ERRORS Saat Menginstal Template Baru Blogger
o Download Template Blogger WP Polaroid (Edited Version)
o Mengenal Dasar Pembuatan Halaman Website (1)
o Situs Yang Menyediakan Kode Warna CSS untuk Web
o Membuat Ucapan Selamat Datang Memakai Nama Pengunjung
o Invalid Widget ID pada Blogger
o Membuat Slide Album Foto di Blog
o Perbedaan Free Domain dengan Pay Domain
o How To Show Comment Box Below Post for WP-Polaroid
o Membuat Kotak Komentar dibawah Posting
o Perbedaan Free Hosting dengan Pay Hosting
o Mengganti Template Blogspot
o Lebih Jauh Mengenal Layout Blogpot (2)
o Lebih Jauh Mengenal Layout Blogpot (1)
o Cara Membuat Cascading Stylesheet (CSS)
o CSS At a Glance
o Bahasa Pemrograman Blogspot
o HTML At a Glance
o Panduan Lengkap Menggunakan Blog di Blogspot
o Panduan Membuat Blog di Blogspot
o Membuat Account Google
o Antara Website, Blog, dan CMS
o Hosting dan Domain
o Apa sih website itu?
o Selamat Datang
o Wikimapia, sebuah situs pengindraan jauh (indraja)
o HARI NATAL TELAH TIBA
o Hari Ibu hari ibuku dan ibumu
*
Blog Information
Site Meter
.jpg)
Tidak ada komentar:
Posting Komentar