Pages

Home » Posts filed under Navigation
Showing posts with label Navigation. Show all posts
Showing posts with label Navigation. Show all posts

Cara Mudah Membuat Pagenumber Navigation

type='html'>
pagenumber navigation
image by bloggerwidgets.cz.cc


Sekarang ada Cara Mudah Membuat Page Number Navigation di Blogspot. Sebelum saya coba cara-cara lain yang menurut saya tidak sebanding dengan usahanya. He2. maksudnya mereka menawarkan cara yang ribet, tapi hasilnya kurang memuaskan. Belum lagi penggunaan javasript yang kurang halus. Loading juga tambah berat.

Dalam posting Cara Mudah Membuat Page Number Navigation ini akan saya jelaskan kelebihannya:

1. Penggunaan javasript yang halus
2. Page Number disertai border tiap numbernya.
3. Pemasangan Page Number Navigation tidak terlalu ribet.

Nah sekarang cara membuat page number navigationnya.
Sekarang cari kode yang sering banget sobat jumpai yaitu ]]>

Jika sudah, pastekan di atasnya kode berikut :

/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

Jika sudah, kamu cari kode yang letaknya di bawah sendiri kode berikut ini :




Jika sudah juga, pastekan di atasnya kode yang banyak ini :







Cara terakhir yang paling mudah membuat pagenumber navigation ini adalah menekan tombol save template.

Nah, gimana sobat? apakah kalian berhasil juga seperti punya saya ini? Saya sebetulnya masih merasa kurang dalam cara mudah membuat pagenumber navigation ini. Yaitu :

1. jika kita menekan tombol 2 dan seterusnya, akan menampilkan beberapa panjang deskripsi
2. Tidak menampilkan hanya judul posting saja. Padahal saya lebih suka menampilkan tiap page itu adalah judul postingnya saja.
3. Saya ingin menampilkan page number di atas posting dan di bawah posting seperti web luar negeri
4. kemampuan saya yang cetek. ha5x

Apakah sobat bisa membantu saya mengatasi masalah cara mudah membuat pagenumber navigation di atas? 

Labels: , , ,

Fancy Apple-Style Icon Slide Out Navigation

type='html'>
Fancy Apple-Style Icon Slide Out Navigation adalah suatu navigasi yang bergaya apple.. agak beda sih.. navigasi ini letaknya di atas bentuknya biasa sih tapi saat disentuh mouse baru kelihatan ajibnya navigasi ini..hehehe navigasi ini saya temukan sudah terdampar di suatu website, ya udah  saya pungut aja..oke langsung saja kita lihat demo dan cara pembuatannya




Langsung ke proses pembuatannya 

  • Loggin blogger.com >>Rancangan >> Edit Html
  •  
  • cari kode ]]> dan pastekan kode berikut diatasnya


.navigation{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menu{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menu li{
    float:left;
}
ul.menu li a{
    text-decoration:none;
    background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0rUBBSanjucrR15ypVH2_ZGuPNsn5i8Dw7VITCcP9at67yijc6U2JxqzSP1m6L0ei9HV7ExsMmp2BJ-BW3ycadIf7kYrHqI-8HWMIU6nTAXq-Rhkzj9JLkCzc_KLEEqxp9CvldZCW4WuO/s1600/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menu li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menu li span.ipod{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN8y_aoIxTFxiqSQzZ1__KTqUJ9K7IL0M2O_bgaw56s00sVwe6-VDbnkg_iuX-FO4XZk5LRb4Bx4fZpUjEZ-MKdB1jedBKIRHJxfh0IBo93lfVHmRFGyB-Lg_HKP-vp-AUungfYjGUffme/s1600/ipod.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzwibB1lLMoDKJhiyHulBAmv9MWBwTZ0HfrlIf1Zx8S7dF4y7H5pfS93UkxfZkvILwwqTa2wlk_1mnwkBtyowso8cONr0n9tGKIvjmiCxwTvCjUabiThkr06Y32ylX5PiPBqp6mNRx15jx/s1600/video_camera.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh676e0fCN84tS0mBhPq2ZAPVoTpb7XoVALkvdt6eY4bib59m9FYtGiYB4p_hjYNtYWZK8ngYGTSBuPR2YtAfMpxibXMdmWu3yBRnAixp-5K-USa2GPd4bXiSLgMN6Jgn9pN8dCpDzwL5V/s1600/television.png);
    left:293px;
}
ul.menu li span.monitor{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4jBi7KZX_vHu1uWzQe6YLzOGdtPIGM3Im2e2l9oJ1ww06BPWDJFHJurT5dlxID1bl3G39xbkTGO-bNl7ghcWos5mPwUADdCkeqjVPbTEBFuCeC3uSwpkSvMjS7Rw4B2v-APDbcZVr0Cx/s1600/monitor.png);
    left:423px;
}
ul.menu li span.toolbox{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaXmeLtWMj7GBAlROQiL9QQgAlZLM0lV3KzjNyAQrLamZHzZsgpe0DoA5fcONvDuhTU_RrOzRs354MiYP5hrKTFeZ34LL0vS_yytsbpEiBuUftpbWO2fNhzcNxKXUygGnR72in-GnWWIp/s1600/toolbox.png);
    left:553px;
}
ul.menu li span.telephone{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeptc-d80GbE6GWb7c5grOx-nRui6wlNOPw15zzExzfM7vMOLkH669bOxIZEID70PU8ckWyoAYeGcBnXaD0ZZvHLy6ISK82p_p_ZXQFNwbGKqlYUjFUJb_Tl6pZD5577dvmNYEWopsLv1S/s1600/telephone.png);
    left:683px;
}
ul.menu li span.print{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ggK0F5kih0clQECifece-19-ADLUCnjYLH_xCFemrTO5WiBnNMHNzZkwS-BGsvAH0hZWETY5guEaEwpxaQl3cU50-F75IQSteIxwDW1fXoEFXcx-Wvf-4TDn2xmXeTNU1jPOPb-8zqhS/s1600/print.png);
    left:813px;
}

  • oke lanjut cari kode dan pastekan kode berikut diatasnya 


 

warning: jika blog anda sudah memiliki kode berwarna merah, jangan anda tambahkan.. cukup satu

  • lanjut cari kode  
  • dan pastekan kode berikut di bawahnya


 


  • oke.. simpan.. semoga bermanfaat 
Labels: , , ,
Subscribe to: Posts (Atom)