r00t »» , »» Memasang Menu Navigasi Halaman di blog

Memasang Menu Navigasi Halaman di blog

by LOLids artich | | , | 4 komentar »


Menu navigasi halaman adalah fitur blog pengganti untuk tulisan "posting lama" dan "posting baru".
dan sudah pernah di ujicoba di blog Lolids ini . Kadang membuat Page Navigation melalui EDIT HTML cukup rumit dan kalo salah juga ada resikonya yang akan memporak - porandakan HTML blog kita, kali ini ada tips menarik membuat page navigation tanpa meng-Edit HTML blog kita. Jika teman2 tertarik dan ingin mengganti bentuk posting lama dan posting baru yang ada di blog anda dengan model menu navigasi [page navigation], silahkan ikuti langkah - langkahnya dibawah ini ya, seperti biasa :
1.Klik "Rancangan => "Edit HTML"
2."Centang Expand Template Widget"
3.Cari kode di bawah ini


]]></b:skin>

4.Copy kode di bawah ini dan paste di atas kode no 3 : ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
.comment-body-author {
background:#99FF00;
border:1px dotted #FF6600;
margin:0;
padding:0 0 0 20px;
}

5.Langkah selanjutnya, cari kode di bawah ini :

</body>

6.Copy kode di bawah ini TEPAT di atas kode no 5 : </body>

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://lol1ds.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

7."Simpan Template"

1. Klik "Tata Letak" => "Edit Laman"
2. Klik "Tambah Gadget => "HTML/Javascript"
3. Copy kode di bawah ini dan paste di "Tambah Gadget => "HTML/Javascript" tadi :



<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>

<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=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
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 += '&nbsp;<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"></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
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>




4. "Simpan Template"

Keterangan :

* Silahkan Sobat pilih salah satu cara di atas.

* var pageCount=5 : menunjukkan jumlah posting yang akan tampil pada satu halaman. Jadi silahkan sesuaikan dengan setting posting blog Sobat.


semoga bermanfaat .


####
tag : menu tab halaman, navigasi halaman, menu navigasi halaman, tab navigasi, tab halaman, membuat tab navigasi halaman blogger.





Article information: Description: Memasang Menu Navigasi Halaman di blog Rating: 4.5 - Reviewer: LOLids artich - ItemReviewed: Memasang Menu Navigasi Halaman di blog


Related Tips, Tricks and Tutorials :



4 komentar Post :
Memasang Menu Navigasi Halaman di blog


NOTE:
Follow me ON Facebook , Twitter or

Blog ini adalah Blog DoFollow dengan PageRank Free PageRank Checker, sobat akan mendapatkan Backlink untuk BLOG anda dengan berkomentar di Blog ini. Jangan ada komentar Spam, Please!!.

"Jika Menemukan LINK yg Tidak bisa di akses pada BLOG ini!, silahkan beritahu kepada kami melalui Komentar, Form, etc . sesegera mungkin kami akan memperbaikinya. Terimakasih"




  1. Thiya Renjana ►► [ reply ] [ Jump to TOP ] ► Sun Nov 08, 10:55:00 am 2009  

    gak muncul... apanya yg salah ya??? mohon bantuan

  2. LOL1ds ►► [ reply ] [ Jump to TOP ] ► Thu Feb 24, 12:03:00 pm 2011  

    @Thiya Renjana - coba diulangi lagi, mungkin ada code yang salah penempatannya. semoga berhasil.

  3. Anonymous ►► [ reply ] [ Jump to TOP ] ► Thu Jan 05, 05:29:00 pm 2012  

    I wonder how and where do you catch your ideas. They are so innovative and wonderful! kamagra oral jelly

  4. LOL1ds ►► [ reply ] [ Jump to TOP ] ► Thu Jan 05, 10:26:00 pm 2012  

    @Anonymous ► thx'z 4 comments.

Post a Comment

Next Prev Home