Menambahkan Widget Navigasi Nomor Halaman di Blogger

Cara Menambahkan Widget Navigasi Nomor Halaman untuk Blogger

Di Blogger, kita mempunyai pilihan untuk mengatur jumlah posting yang ingin kita tampilkan per halaman dengan masuk ke Settings menu >> Posts and comments >> Show at most?posts. Setelah jumlah total posting di blog kita melebihi jumlah ini, kita akan melihat tautan navigasi "Postingan Lama" dan "Postingan Baru" di halaman beranda dan footer halaman arsip karena Blogger tidak memiliki fungsi bawaan pada penomoran halaman. Tetapi nomor halaman alih-alih tautan posting yang lebih lama dan yang lebih baru dapat membantu pengunjung blog kita bernavigasi lebih cepat (melompat dari satu halaman ke halaman lain atau mengklik halaman tertentu) dan mengetahui jumlah total posting yang diterbitkan.

 

Jadi, tutorial ini akan menunjukkan cara menambahkan navigasi nomor halaman menggunakan CSS dan Javascript ke blog Blogger/Blogspot. Kalian dapat memilih salah satu dari 7 gaya yang tersedia di bawah ini.

Menambahkan Navigasi Nomor Halaman

Kalian bisa menambahkan widget ini dalam 2 langkah.

1. Menambahkan CSS.
2. Menambahkan Script.

Sekarang mari kita lihat bagaimana cara menambahkan CSS Style untuk navigasi nomor halaman.

 

1. Menambahkan CSS

Langkah 1. Masuk ke Blogger Dashboard > Tema > Klik Tombol Ikon Tanda Panah > Klik Edit HTML:

 

 

 

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger. 

 

 

... ketik atau tempelkan tag berikut di dalam kotak pencarian dan tekan Enter untuk menemukannya:

]]></b:skin>

Langkah 3. Sekarang pilih salah satu style navigasi nomor halaman berikut dan salin kodenya. Tempelkan Tepat di atas kode: ]]></b:skin>

Navigasi Nomor Halaman Abu-Abu

#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;}

Navigasi Nomor Halaman Orange dan Hitam

#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);}

Navigasi Nomor Halaman Biru dan Hitam

#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;}

Navigasi Nomor Halaman Biru dan Abu-Abu

#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;}

Navigasi Nomor Halaman Merah dan Silver

#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;}

Catatan: Jika kalian ingin menyembunyikan tombol "First" dan "Last" tambahkan baris ini di bawah kode CSS:

.firstpage, .lastpage {display: none;}

2. Menambahkan Script

Langkah 4. Tekan tombol CTRL + F dan temukan Tag berikut ini:

</body>

Langkah 5. Tempelkan Script berikut ini tepat diatas kode </body>:

<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 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>

Cara Mengonfigurasi Navigasi Nomor Halaman

Setelah langkah diatas selesai, Anda mungkin ingin mengubah pengaturan default ini:

perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}

1. perPage: berapa banyak posting yang akan ditampilkan di setiap halaman (i.e. 7). Nilai ini harus sama dengan jumlah posting di halaman utama. Jika tidak, tambahkan nomor yang sama dengan membuka "Pengaturan" > "Format" dan ketik di kolom "Tampilkan paling banyak", lalu klik tombol "Simpan Pengaturan"
2. numPages: berapa banyak halaman yang akan ditampilkan di navigasi halaman (6).
3. Untuk mengganti teks 'First', 'Last', "« Previous" and "Next »" , ketikkan sendiri sesuai keinginan kalian di dalam tanda kutip.

Perbaikan Label

Secara default, Blogger akan menampilkan 20 posting pada halaman label. Untuk membuat widget ini muncul di halaman label, kita harus menguranginya menjadi nilai yang kita berikan untuk variabel per halaman.

Temukan cuplikan kode berikut:

expr:href='data:label.url'

Ganti dengan kode dibawah ini :

expr:href='data:label.url + "?&amp;max-results=7"'

Langkah 8. Klik tombol "Simpan Template" dan kita selesai menambahkan widget navigasi nomor halaman untuk Blogger.

Jika kalian menemukan kesulitan dan kendala, silakan hubungi saya. Semoga artikel kali ini bermanfaat untuk sahabat Blogger semuanya.

Read More

Button Generator

Hai, Blogger Mania. Masih pada topik mempercantik, memperkeren serta membuat Blog agar terlihat lebih menarik. Irsa Artikel akan membagikan salah satu tool untuk membuat Button dengan mudah tanpa perlu pemahaman tentang Kode HTML dan Javascript. Kalian hanya perlu meluangkan waktu beberapa menit untuk melakukannya. Kalian bisa memilih Button yang sudah tersedia, atau Kalian ingin mengkostum button sesuai dengan yang kalian inginkan. Dengan bantuan tool berikut ini, kalian hanya perlu mengatur warna, padding, dan text sesuai keinginan. Setelah selesai memilih dan atau mengkostum button yang ingin kalian gunakan, selanjutnya kalian klik Get Code.

Selamat mencoba, dan salam sukses selalu buat kalian semuanya. Original Tool by: ButtonX.

Read More

HTML Color Code Generator

Hai, Blogger Mania. Bagaimana kabar kalian semuanya?... Masih sehat dan selalu semangat kannn... Pengen Blog kalian tampil cantik, keren dan menarik?... Masih seputar HTML Generator, kali ini Irsa Artikel akan membagikan salah satu tool buat kalian yang nggak pengen ribet belajar tentang pemahaman Kode HTML dan Javascript. Kalian hanya perlu meluangkan waktu beberapa detik untuk melakukannya.
Dengan bantuan tool HTML Code Generator berikut ini, kalian hanya perlu memilih warna yang kalian inginkan, dan secara otomatis, kode html nya akan muncul. Copy dan Paste kode tersebut untuk merubah tampilan warna pada Blog kalian.

Geser scroll kebawah jika kalian ingin melihat beberapa pilihan warna. Selamat mencoba, dan salam sukses buat kalian semuanya.
Original Tool by:HTML Color Codes.

Read More

CSS Accordion Slider

Hai, Blogger Mania. Bagaimana kabar kalian semuanya?... Semoga senantiasa sehat dan selalu semangat. Berbicara tentang blog dan web, siapa sih yan nggak pengen Blog nya tampil cantik, keren dan menarik?... Tentunya banyak Blogger yang menginginkannya. Nahhh, dikesempatan kali ini, Irsa Artikel akan membagikan salah satu tool untuk mempercantik blog dan post kalian dengan mudah tanpa perlu pemahaman tentang Kode HTML dan Javascript. Kalian hanya perlu meluangkan waktu beberapa menit untuk melakukannya. Dengan bantuan tool CSS Accordion Slider berikut ini, kalian hanya perlu mengatur Accordion Slidernya sesuai keinginan.

Selamat mencoba, dan salam sukses buat kalian semuanya. Original Tool by: CSS Accordion Slider.

Read More

Mastering Kode HTML

Website Design

Dalam dunia website design, banyak hal yang perlu kita pelajari agar dapat menerapkannya jika kita adalah salah seorang yang gemar belajar secara otodidak. Dari sekian banyak hal atau ilmu tersebut, salah satunya yaitu tentang Kode HTML.

Bicara tentang kode HTML, disini akan saya bagikan untuk Anda salah satu ebook yang membahas tentang HTML yakni Mastering Kode HTML. Dibawah ini saya sajikan untuk Anda daftar isi tentang ebooknya sebagai preview.

DAFTAR ISI

Kata Pengantar
Daftar Isi
Pendahuluan
Bab 1 – Mengenal HTML Lebih Jauh
   Pengertian HTML
   Menggunakan Tag pada HTML
   Daftar Tag pada HTML 
Bab 2 – Menggunakan Atribut dari Tag 7
   Contoh-contoh penggunaan tag dan atributnya
      Tag <p></p >
      Tag <font></font>
      Tag <table></table>
      Tag <form></form>
      Tag <select></select> dan <option>
      Tag <a></a>
      Tag <body></body>
      Tag <img>
      Tag <ul></ul>,<ol></ol>, dan <li></li>
   Atribut Universal  
Bab 3 – Membuat Website Pribadi (Personal HomePage)  
Bab 4 – Meng-Upload File ke Server
   Pengertian Upload
   Menyewa Web Hosting
   Langkah-langkah Mengupload  
Bab 5 – Cascading Style Sheet (CSS)
   Pengertian CSS
   Mengaplikasikan CSS  
Bab 6 – Mendesain Website Komersil
   Tampilan Website
   Kesesuaian Isi Website dengan Tampilan
   Kemudahan Navigasi
   Manfaat yang Diperoleh  
Bab 7 – Javascript
   Pengertian Javascript
   Aplikasi Javascript
   Input Box
   Pop-up Window
   Dilarang Klik Kanan
   Menampilkan Hari dan Tanggal
Penutup

************

Dari preview daftar isi yang saya uraikan diatas, saya rasa ebook ini patut untuk Anda baca sebagai referensi. Mulai pengenalan, penggunaan atribut, pembuatan website, upload file, CSS, mendesain Website Komersil dan javascript. Jika Anda berkenan untuk membacanya atau berkeinginan mengunduhnya, berikut ini link ebook Mastering Kode HTML.

Baca & Unduh Ebook

Demikian infomasi yang dapat saya sampaikan pada kesempatan kali ini. Saya berharap, apa yang saya sampaikan bisa membawa manfaat. Sekian dan terimakasih sudah berkunjung di Irsa Artikel Blog.

Read More