Skip to main content

Cara membuat navigasi dengan angka di homepage blog

Image
Cara membuat navigasi dengan angka di homepage blog

Navigasi halaman utama (homepage) adalah navigasi yang berbentuk link yang apabila di klik maka pengunjung akan dialihkan ke berbagai halaman postingan lama. Letaknya berada dibawah homepage, biasanya bernama link Newer Posts, Home dan Older Posts, jika anda menggunakan tema bawaan blogger versi terbaru untuk nama link nya adalah More Posts.

Anda dapat memodifikasi link tersebut dan merubahnya menjadi navigasi berbentuk angka, dimana setiap angka mewakili beberapa buah halaman yang dapat anda setting sendiri. Selain itu navigasi ini mempermudah pengunjung jika ingin mengetahui postingan paling lawas dengan cepat, hanya tinggal klik nomor yang paling belakang.

Membuat navigasi dengan angka

1. Login di blogger.
2. Klik Tema, Edit Tema.
3. Berikutnya anda letakkan kode berikut ini diatas kode ]]></b:skin>.
/* NEXT PAGE----------------------------------------------- */
#blog-pager {overflow: visible;font:normal normal 12px oswald, sans-serif;}
.showpageOf {display:none}
span.showpagePoint { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; margin: 0 .2em; border: 1px solid #555555; border-radius: 0.25em; background-color:#444444; border-color: #555555; color: #fff; pointer-events: none; }
span.showpageNum, span.showpage { margin: 0 .2em; }
.showpageNum a, .showpage a { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; border: 1px solid #cccccc; border-radius: 0.25em; color: #444444; text-decoration: none; }
.showpageNum a:hover,.showpage a:hover {background:#555555;color:#fff}

4. Berikutnya anda letakkan kode berikut ini diatas kode </body>.
<!-- NEXTPAGE -->   
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <script type='text/javascript'> /*<![CDATA[*/ var postperpage=5; var numshowpage=2; var upPageWord ='« Previous Page'; var downPageWord ='Next Page »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script> <script type='text/javascript'> /*<![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(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</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 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("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}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('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}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} /*]]>*/ </script>
</b:if>
      </b:if>

Note: Angka 5 teks berwarna merah adalah jumlah postingan per halaman, anda dapat merubahnya sesuai kebutuhan, misalnya anda ingin 10 postingan per halaman, maka rubah saja angka 5 menjadi 10.

5. Terakhir anda klik Simpan.

Agar lebih menarik, anda juga dapat mengubah warna dan style pada bagian CSS, untuk itu anda perlu mengetahui sedikit tentang kode CSS. Demikianlah cara membuat navigasi dengan angka pada bagian homepage blog, semoga bermanfaat.

by
Tags:

Comments

Post a Comment

Popular

Mendaftarkan blog di google search

by
Mendaftarkan blog di google search console merupakan sebuah cara yang digunakan sebagai salah satu upaya agar blog yang kita miliki dapat diindex oleh mesin pencarian google, dengan begitu blog kita akan muncul di hasil pencarian google. Apa itu google search console? Google Search Console adalah layanan gratis yang ditawarkan oleh Google untuk membantu Anda memantau, mempertahankan, dan memecahkan masalah terkait kehadiran situs web Anda di hasil pencarian Google.  Beberapa fitur utama dari Google Search Console Pemantauan Kinerja Anda dapat melihat seberapa baik situs Anda tampil di hasil pencarian, termasuk jumlah klik, tayangan, dan posisi rata-rata. Perbaikan Masalah Alat ini membantu Anda mengidentifikasi dan memperbaiki masalah yang mungkin mempengaruhi visibilitas situs Anda. Pengelolaan Indeks Anda dapat meminta Google untuk mengindeks halaman baru atau menghapus halaman yang tidak diinginkan dari hasil pencarian. Laporan Keamanan Google Search Console memberikan informasi...
Post a Comment
Read more

Mencadangkan tema blogger

by
Sebelum mengganti tema blogger , sebaiknya anda membuat cadangan tema yang sedang anda gunakan. Agar nantinya tema tersebut dapat anda gunakan kembali disuatu hari nanti atau untuk jaga-jaga saja saat anda menemukan kegagalan saat mengedit tema blogger, maka anda dapat menggunakan kembali tema yang anda cadangkan. Ada 2 pilihan cara membuat cadangan tema di blogger, yaitu: mendownload tema dalam bentuk .xml menggunakan aplikasi notepad catatan. Cara mencadangkan tema blogger A. Mendownload tema yang sedang digunakan Pilihan pertama yaitu membuat cadangan tema dengan cara mendownload tema yang sedang anda gunakan. 1. Login di blogger.com. 2. Klik Tema , Cadangkan . 3. Klik Download . 4. File hasil download harus berbentuk . xml . B. Menggunakan aplikasi notepad atau catatan Pilihan kedua yaitu dengan cara memanfaatkan aplikasi notepad atau aplikasi catatan. 1. Login di blogger.com. 2. Klik Tema , Edit HTML , lalu anda copy atau salin semua kode-kode pada editor HTML. 3. Buka notepad ata...
Post a Comment
Read more

Membuat halaman contact form di blogger

by
Tujuan pembuatan halaman contact form atau formulir kontak bertujuan untuk memudahkan pengunjung blog berkomunikasi secara pribadi ke admin blog. Pesan pada contact form yang terkirim akan diteruskan ke inbox gmail milik admin blog, dalam hal ini gmail yang digunakan adalah gmail yang digunakan untuk membuat blog. Sebenarnya blogger telah menyediakan gadget contact form yang di tempatkan pada bagian sidebar blog, namun kebanyakan pemilik blog memilih menyembunyikannya dan memilih untuk membuat halaman contact form sendiri dengan berbagai variasi di halaman statis. Cara membuat halaman contact form di blogger I. Menambahkan gadget contact form pada bagian sidebar Langkah pertama adalah menambahkan gadget contact form pada bagian sidebar atau anda juga dapat meletakkannya dibagian footer blog. 1. Pertama anda klik Tata Letak . 2. Berikutnya anda klik Tambahkan Gadget pada layout sidebar. 3. Berikutnya cari dan klik Contact form atau formulir kontak . 4. Simpan . II. Menyembunyikan gadg...
Post a Comment
Read more

Perbaikan thumbnail postingan blogger yang blur part 1

by
Gambar kecil atau thumbnail biasanya digunakan dibagian halaman utama blog apabila memakai readmore, popular posts, related posts, recent post. Blur pada thumbnail ini sering kali disebabkan karena sering mengganti tema, sering mengedit postingan yang nantinya blogger akan mereset pengaturan pada gambar postingan yang berakibat gambar thumbnail pecah atau blur. Blur pada thumbnail juga dapat disebabkan oleh pengguna yang merubah ukuran gambar didalam tema blog tanpa memperhatikan kualitas thumbnail yang akan muncul. Sebenarnya blur pada thumbnail ini dapat diatasi dengan cara merubah kode pada tema maupun merubah kode gambar pada postingan itu sendiri. Disini kita akan mencoba memperbaiki thumbnail yang blur dengan cara merubah kode gambar pada postingan, cara ini terbilang cukup ampuh namun memiliki beberapa kelemahan diantaranya: Setelah ganti tema maka thumbnail akan kembali blur, sehingga kita harus mengeditnya kembali satu-persatu. Setelah update pada gambar postingan maka gambar ...
Post a Comment
Read more

merubah teks link newer post

by
Link newer post terletak di bagian bawah postingan blog, fungsinya yaitu sebagai navigasi yang apabila diklik maka pengunjung akan diarahkan ke halaman postingan yang lebih baru. Untuk merubah teks link tersebut dengan nama yang anda inginkan, misalnya dengan kata previous , anda cukup merubah kode HTML yang berada didalam editor HTML tema. Berikut cara merubah teks link newer post 1. Login di blogger.com. 2. Berikutnya anda klik Tema , Edit HTML . 3. Berikutnya anda cari kode berikut ini <data:newerPageTitle/> 4. Berikutnya anda hapus kode tersebut, dan ganti dengan kata previous atau yang sesuai dengan apa yang anda inginkan. 5. Terakhir anda klik Simpan . Cara ini berlaku untuk tema bawaan blogger yang belum responsive semisal simple bold, awesome, travel dan lainnya. Untuk melihat tutorial mengenai cara merubah teks pada link Older Post, silahkan klik disini . Demikianlah cara merubah teks link newer post pada blogger.com, semoga bermanfaat.
Post a Comment
Read more