NEWS
Loading...
  • Posted by : Johanes Djogan 25 Jan 2012

    Trik membuat page navigasi melayang


    Sekedar mau berbagi trik lagi,kali ini saya mau sharing cara membuat pagenavigasi seperti di blog saya.trik ini memungkinkan menu "posting lama,posting baru" melayang dan berada dibawah,yang bisa dibilang mirip taskbar.
    Oia,sabelumnya mau saya ingatkan,trik ini tidak semua template bisa,karena bisa saja css'a berbeda".tapi rata" saya pikir sama saja kq.dan sebelum menggunakan trik ini juga,saya sarankan pula untuk membackup dahulu template kamu/simpan /download dahulu template kamu.

    Disini yang sobat perlu lakukan buka blogger => rancangan =>edit Html,lalu copy css dibawah ini(pilih salah satu style) ke atas kode </b;skin> .

    Note:Sobat cari dahulu css #blog-pager,#blog-pager-older-link,#blog-pager-newer-link pada template sobat,bila ada hapus dahulu agar css'a tidak bentrok.


    Style 1



    .home-link {
    background: white;
    padding: 10px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    text-align: center;
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    }


    #blog-pager-newer-link {
    float: right;
    padding: 5px;
    }
    #blog-pager-older-link {
    float:left;
    padding: 5px;
    }
    #blog-pager {
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
    position: fixed;
    font-size:15px;
    bottom: 0;
    width: 100%;
    color:#000000;
    left: 0;
    margin:0px;
    background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }

    #blog-pager a {color:#58A;}
    Style 2


    .home-link {
    background: white;
    padding: 10px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    text-align: center;
    position: absolute;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    }


    #blog-pager-newer-link {
    float: right;
    padding: 5px;
    }
    #blog-pager-older-link {
    float:left;
    padding: 5px;
    }
    #blog-pager {
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
    position: fixed;
    font-size:15px;
    bottom: 0;
    width: 100%;
    color:#000000;
    left: 0;
    margin:0px;
    background: rgba(0, 0, 0, 0.8 );
    border-top: 1px dotted #26B7EB;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }

    #blog-pager a {color:#58A;}

    Style 3


    .home-link {
    background: white;
    padding: 10px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    text-align: center;
    position: absolute;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    }


    #blog-pager-newer-link {
    float: right;
    padding: 5px;
    }
    #blog-pager-older-link {
    float:left;
    padding: 5px;
    }
    #blog-pager {
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
    position: fixed;
    font-size:15px;
    bottom: 0;
    width: 100%;
    color:#000000;
    left: 0;
    margin:0px;
    background: rgba(0, 0, 0, 0.8 );
    border-top: 1px dotted #26B7EB;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }

    #blog-pager a {color:#58A;}


    Untuk style lainya,kamu bisa menggunakan css3 gradient generator
    http://www.colorzilla.com/gradient-editor/
    sobat pilih salah satu style 'a,lalu copy paste css yang seperti diatas,jangan semua'a,karena menurut saya yang penting hanya css untuk google chrome dan mozilla firefox.
    setelah itu letakan css yg tadi kamu copy ke dalam css #blog-pager
    Contoh:
    #blog-pager {
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
    position: fixed;
    font-size:15px;
    bottom: 0;
    width: 100%;
    color:#000000;
    left: 0;
    margin:0px;
    background: rgba(0, 0, 0, 0.8 );
    border-top: 1px dotted #26B7EB;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }

    jadi seperti

    #blog-pager {
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
    position: fixed;
    font-size:15px;
    bottom: 0;
    width: 100%;
    color:#000000;
    left: 0;
    margin:0px;
    background: -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70));
    background: -webkit-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);
    border-top: 1px dotted #26B7EB;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);


    Hapus background: rgba(0, 0, 0, 0.8 ); agar css backgroundya tidak bentrok.

    Untuk yang lain" seperti mengganti jenis font,warna dan sebagainya,saya tidak jelaskan secara rinci.tapi kalau ada masalah,tanyakan saja .thx

    { 14 comments... read them below or Comment }

    1. Ka mending kasi tau caranya bikin navigasi yg diatas itu ka yg ada home follow guestbook sama back to top haha *Ini juga Keren ka teruslah berkarya hahaa

      BalasHapus
    2. kayaknya menarik mas
      tapi masalahnya template blog saya kayaknya g support.... T_T

      BalasHapus
    3. yakin ga bisa? saya cek template kamu,seharus'a sih bisa.

      BalasHapus
    4. Mau tanya. Diantara Tulisan postingan lama dan lebih baru itu. Jika dimasukkan tulisan apa bisa?

      Maksudnya mau kumasukkan random post text berjalan. :)

      BalasHapus
    5. bisa,tapi harus nambahin css atau html'a lagi yg berbeda,coz trik yang saya kasih ini,CSS'a hanya buat page navigasi.

      BalasHapus
    6. Hmm :) Apa bisa ya aku minta dibuatin script seperti itu??? Kalau bisa Tolong yah :D

      trims

      BalasHapus
    7. Ini yang guwe cari2 akhirnya nyasar di tempat mas :D

      BalasHapus
    8. gan kayaknya di blog saya gk bisa dech T_T :( , pas dicari gk ada di tempalte saya ?

      BalasHapus
    9. bang jo kalo mau ganti kata'a seperti posting lama menjadi next bagaimana?

      BalasHapus
    10. mantap gan, terima kasih banyak ya atas ilmunya.. :)

      http://www.jamtanganori.com

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -