Navigasi halaman yaitu suatu daftar halaman pada blog dengan nomor - nomor halaman. Dengan memasang navigasi halaman tentunya akan memudahkan pengunjung dalam menjelajahi blog Anda.
Langkah Pertama
Simpan arahan CSS dibawah ini diatas arahan </head>..
Membuat Navigasi Halaman sudah Saya tulis pada artikel berjudul Memasang Navigasi Halaman Pada Blog, namun itu hanya navigasi biasa. Oleh alasannya ialah itu Saya akan menyebarkan navigasi halaman yang lebih keren dari sebelumnya yaitu Navigasi Halaman Ala Wordpress.
Tutorial ini Saya sanggup dari blog Vietnam pada artikelnya yang berjudul Page Navigation với phong cách WP-PageNavi, disini Saya kan terjemahkan ke dalam Bahasa Indonesia biar para blogger Indonesia lebih memahaminya.
Cara Memasang Navigasi Halaman Ala Wordpress Pada Blog
1. Silakan Anda simpan isyarat CSS ini diatas isyarat ]]></b:skin> atau </style>
Widget Recent Posts yaitu widget yang berisi artikel terbaru dari sebuah blog. Widget ini dapat Anda jadikan untuk memberitahukan kepada pengunjung artikel terbaru dari blog Anda. Widget ini lebih mudah alasannya hanya menampilkan judul artikel saja, jadi tidak memberatkan terhadap blog.
Cara Memasang Widget Recent Posts Pada Blog
Silakan salin dan simpan instruksi dibawah ini pada widget blog Anda, pada HTML/JavaScript
<ul id="recent-posts"></ul> <script> //<![CDATA[ var homePage = "http://lifeakandistar.blogspot.com/", numPosts = 5; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="Membuat Widget Recent Posts Untuk Blog" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]> </script>
Untuk mengatur jumlah artikel yang ingin ditampilkan silakan lihat keterangan diatas dan ganti instruksi yang Saya tandai ;) Sumber http://kang-mousir.blogspot.com
Widget Random Posts yakni widget memuat artikel secara acak. Widget ini dapat digunakan untuk blog biar pengunjung lebih gampang mencari artikel yang mungkin di inginkan. Pada widget ini hanya menampilkan judul artikel saja, sama ibarat Widget Recent Posts sebelumnya yang aku bagikan.
Cara Memasang Widget Random Posts Pada Blog
Silakan salin dan simpan aba-aba dibawah ini pada widget di blog Anda, gunakan HTML/JavaScript
<ul id="random-posts"></ul> <script> //<![CDATA[ var homePage = "http://lifeakandistar.blogspot.com/", numPosts = 5; function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="Membuat Widget Random Posts Untuk Blog" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post); //]]> </script>
Untuk mengatur jumlah artikel yang ingin ditampilkan silakan lihat keterangan diatas dan ganti aba-aba yang Saya tandai ;) Sumber http://kang-mousir.blogspot.com
Widget Most Commented ialah widget yang menampilkan daftar artikel yang paling banyak di komentari dari yang terbanyak sampai terkecil. Widget ini sama ibarat sebelumnya yaitu memanfaatkan JSON Blogger, widget yang pernah Saya bagikan antara lain Widget Recent Posts dan Widget Random Posts.
Sama ibarat sebelumnya yang ditampilkan pada widget ini hanya menampilkan judul dari artikel saja, tapi disertai dengan jumlah komentar pada artikel tersebut.
Cara Memasang Widget Most Commented Untuk Blogger
Silakan salin dan simpan isyarat dibawah ini pada widget di blog Anda, gunakan HTML/JavaScript
<style type="text/css" scoped> #most-commented ul,#most-commented li{margin:0;padding:0;list-style:none;color:black;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:bold;font-size:14px} #most-commented ul li{position:relative;overflow:hidden;background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #f5edf5 100%);border:1px solid #DFDFDF;margin:0 0 10px 0!important;padding:5px 5px 5px 45px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} #most-commented ul li a{color:#666;text-shadow:0px 1px 0px #fff;font-weight:bold;text-decoration:none;} #most-commented ul li:hover{background: #F9F9F9;} .bubble-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:5px 0;background-color:#333;color:#fff!important;text-align:center;} </style> <div id="most-commented"></div> <script type"text/javascript"> //<![CDATA[ // Most Commented Widget For Blogger by // http://gplus.to/mousir - http://lifeakandistar.blogspot.com var numPosts=10;//Jumlah artikel yang ingin ditampilkan var homePage="kang-mousir.blogspot.com";//URL blog var postTitlear=new Array(); var postUrlar=new Array(); var postCommentar=new Array(); var totalpost;document.write('<div id="most-commented"><ul>'); function mostComment(j){var a=j.feed.entry.length;totalpost=a; for(var f=0;f<a;f++){ var h=j.feed.entry[f]; var c=h.title.$t;var b; var g;if(f==j.feed.entry.length){break} for(var d=0;d<h.link.length;d++){ if(h.link[d].rel=="alternate"){g=h.link[d].href;break}} for(var d=0;d<h.link.length;d++){ if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}}; postTitlear.push(c); postUrlar.push(g); postCommentar.push(b)}sortPosts(); for(var f=0;f<numPosts;f++){var e='<li><span class="bubble-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="Membuat Widget Most Commented Untuk Blogger" target="_blank">'+postTitlear[f]+'</a>'; document.write(e)}} function sortPosts(){function c(d,f){var e=postTitlear[d]; postTitlear[d]=postTitlear[f]; postTitlear[f]=e; var e=postUrlar[d]; postUrlar[d]=postUrlar[f]; postUrlar[f]=e; var e=postCommentar[d]; postCommentar[d]=postCommentar[f]; postCommentar[f]=e} for(var b=0;b<postTitlear.length-1;b++){ for(var a=b+1;a<postTitlear.length;a++){ if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}} document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>'); document.write('</li>') document.write('</ul>') document.write('</div>'); //]]> </script>
Dengan adanya widget ini akan memberitahukan kepada pengunjung artikel mana yang paling banyak dibahas dan paling banyak dikomentari ;) Sumber http://kang-mousir.blogspot.com
Widget Recent Posts By Tag yaitu widget yang dipilih berdasarkan label tertentu pada blogger. Makara dengan adanya widget ini lebih memudahkan pengunjung dalam mencari artikel yang lebih spesifik. Silakan coba juga koleksi widget lainnya menyerupai Widget Recent Posts, Widget Random Posts dan Widget Most Commented.
Cara Memasang Widget Recent Posts By Tag Untuk Blogger
1. Pertama simpan dahulu CSS ini diatas arahan ]]></b:skin> atau </style>
/*Recent Post By tag*/ img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;} .recent-by-tag{width:100%;margin:0;padding:0} ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd} .recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden} .recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;} .recent-by-tag strong{padding-left:0} span.showdates{font-size:16px;margin:10px 0 0}
2. Silakan salin dan simpan arahan ini diatas arahan </head>
<script type='text/javascript'> var numposts = 5; var showpostthumbnails = true; var showpostdate = true;</script> <script type='text/javascript'> //<![CDATA[ // Recent Post By Tag // Recent Post By Tag For Blogger by // http://gplus.to/mousir - http://lifeakandistar.blogspot.com function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh639r_3WGKtO6biqEFpwk48r7ftj3Ift8IGEVuPA9A_Dvwgn1RMVqyus1Oyac9BC_DzGxl9phLyIBr8WEGO4R9MdplTKsomra7QH2yQpGkf_RkT1ZH-QQYrxZkHOUQGfPz23Tkk_YYP0kb/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" sasaran ="_blank" title="Membuat Widget Recent Posts By Tag Untuk Blogger"><img class="rct-thumb" alt=" Makara dengan adanya widget ini lebih memudahkan pengunjung dalam mencari artikel yang lebi Membuat Widget Recent Posts By Tag Untuk Blogger" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" sasaran ="_blank" title="Membuat Widget Recent Posts By Tag Untuk Blogger" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")} //]]> </script>
3. Kemudian simpan arahan ini pada widget blogger HTML/JavaScript.
Widget Recent Comments ialah widget yang menampilkan komentar terkahir yang masuk. Widget ini sangat bermanfaat bagi pengunjung untuk mengetahui komentar terakhir yang masuk. Ini juga dapat menjadi alternatif bagi Anda yang ingin cek komentar tanpa harus masuk ke akun blogger Anda. Anda juga dapat memakai koleksi widget lainnya Widget Recent Posts, Widget Random Posts, Widget Most Commented dan Widget Recent Posts By Tag.
Cara Memasang Widget Recent Comments Untuk Blogger
1. Silakan salin dan simpan arahan ini diatas arahan </head>