Hai para blogger kembali lagi nih dengan tulisan tulisan saya lagi, seperti biasa saya akan membagikan tutorial seputar blogger atau tips seputar blogger.
Kali ini saya akan membagikan tips tentang bagaimana cara memasang widget navigation halaman number di blogger
mari kita coba,
Sebelum praktek alangkah baiknya anda mem backup dulu template originalnya, supaya jika nanti terjadi error anda bisa langung menggembalikanya ke semula.
Ok..kita mulai dari sekarang
Navigation halaman salah satu yang sangat di butuhkan di blog apalagi yang blognya postingannya udah banyak, agar pembaca bisa lebih gampang lompat ke halaman satu dan ke halaman lainnya,
Bahkan bisa langsung ke halaman terbaru di posting atau ke halaman lama, Setelah saya muter-muter googling ahirnya saya menemukan navigation halaman number yang sangat baik sekali dan menurut saya sangat bagus, soalnya berjalan dengan baik di deskop maupun di smartphone.
Cara memasangnya itu gampang sekali Coba ikuti step demi step cara pemansangannya
Pertama login dulu ke blogger anda kemudian setelah login dan berada di dashboard
Lajut ke Tema > Edit HTML scroll ke baha dan cari tag penutup body seperti ini “</body>” Pastekan kode di bawah ini pas banget di atas tag penutup body
Contoh dengan gambar 1
<!-- next navigation nomber -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
/*----- setting navigation -----*/
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="/";
/*----- end setting navigation -----*/
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>
<!-- / end next navigation nummber -->
Lalu klik button Simpan Tema Dan coba lihat hasil dengan cara akses blog ada di browser kesayangan anda tentunya… Kalau berhasil maka akan tampil seperti ini.....tapi tanpa style css alias masih apa adanya
Contoh dengan gambar 2
Tahap pemasangan navigation sudah selesai.
Lanjut kebagian setyle CSS nya supaya terlihat bagus dan keren Sekarang temukan ]]></b:skin> dan copy pastekan kode css di bawah ini....Pas di atas nya
/*-- style navigation */
#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: 6px 15px;
margin-right:5px;
color: #3E5801;
border:1px solid #E2E2E2;
}
.displaypageNum a:hover,
.showpage a:hover,
.pagecurrent{
border:1px solid #E2E2E2;
background-color:#F0F0F0;
color:#333;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#F0F0F0;}
.showpageOf,.lastpage,.firstpage{display:none!important}
#blog-pager .pages{border:none;}
Lebih jelasnya Lihat gambar di bawah ini
Contoh dengan gambar 3
Kemudin klik lagi Simpan Tema Dan lihat lagi hasilnya .
Giliran ke pengaturannya
Pengaturan page navigation
Sebelum ke pengaturan navigasinya, sekarang kita tentukan dulu berapa postingan yang mau di tampilkan setiap laman/page…tentukan sekarang juga, 4 postingan 3 postingan atau 6 postingan??? Saya ambil contoh disini 3 postingan saja yg tampil tiap halaman/page
Maka kamu sekarang masuk ke Tata letak kemudian lihat pojok kanan bawah bagian Blog posts, kemudian klik Edit
Contoh dengan gambar 4
Dan muncul tab baru browser. Kemudian focus menuju ke tulisan Jumlah posting di halaman utama ganti jadi 3 Dan klik simpan pengaturan di pojok kiri bawah.
Contoh dengan gambar 5
Kenapa tadi saya suruh mengubah Jumlah posting di halaman utama??
Jawab : soalnya pengaturaan default navigation halaman perpage nya 3. Jadi saya samakan dengan jumplah posting di halaman utama, 3 posting per laman. Untuk lebih jelasnya tentang pengaturan dan kegunanan tiap variable . Bisa di lihat table di bawah ini. Sebelum ke table temukan dulu barisan kode seperti ini.
/*----- setting navigation -----*/
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="/";
/*----- end setting navigation -----*/
| Nama Variable | Default setting | Description |
|---|---|---|
| perPage | 3 | untuk menentukan postingan yang tampil perhalaman |
| numPages | 3 | untuk menentukan number navigasi yang di tampilkan perhalaman |
nah itu dedikit penjelasan tentang variable navigation nya..
Eh... ada masalah dengan navigasionnya kawan.….ternyata pas saya cek..meski navigationya bagus dan nyaris sempurna tetap ada masalah yang harus di hadapi…yaitu gak berjalan baik di laman label.
untungnya saya sudah menemukan solusinya dan lebih gampang menerapkanya
Solusi masalah navigation di halaman label
MASALAH# Mungkin karna ini gratisan tetap aja ada masalah dikit… Masalahnya navigation tidak berjalan baik di laman label. Dan solusinya inih Kopi pate kode ini agar navigation berjalan baik di laman label, Karna ini menggunakan jQuery maka harus menyematkan otak jquery nya dulu Kopy paste kode ini pas di atas tag penutup head “</head>”Script jquery 1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>Kemudian pastekan juga di bawahnya…. script jquery ini, dan harus di atas script navigation
script jquery 2
<script type='text/javascript'>
/*<![CDATA[*/
$(window).bind("load", function() {
$('.Label a').each(function() {
var labelPage = $(this).attr('href');
$(this).attr('href',labelPage + '?&max-results=3');
});
});
/*]]>*/
</script>
Setting untuk halaman label
Halaman perpage di navigation "var perPage = 3;" maka di label juga samakan yaitu 3 dengan cara “?&max-results= 3” mau diganti angka berapa juga gak masalah…terserah anda. Tapi lebih bagus sama
kenapa harus di samakan ?? kan biar seimbang biar lebih mantap, jadi halaman post sama halaman label, sama-sama menampilkan 3 postingan perhalaman..gitu maksudnya
setelah semua di setting sesuai yang di inginkan jangan lupa klik simpan tema dan lihat hasil dengan membuka blog anda di browser
Catatan: jika di blog kamu sudah tertauntan ke otak jquery, gak usah memasang nya lagi..cukup pastekan kode script jQuery 2 Saja. Harus di bawah otak jQuery dan harus di atas script conde navigation, Pokonya script ini harus berada di tengah-tengah antara otak jQuery dan script navigation
Dan pemasangan widget navigasion halaman nomber di blogger pun telah selesai Moga bermangfaat dan salam tulis menulis blog saja.
Happy bloging
No comments:
Post a Comment
Berkomentar sesui isi artikel yang di bahas