Trik membuat page navigasi melayang

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

Komentar

  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

Posting Komentar

"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"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template