SEBENARNYA menu bar gak pas disebut navigasi menu. Bahasa Inggrisnya "Floating Sticky Footer Bar", setidaknya menurut Help Blogger yang membagikan tips desain mempercantik blog ini.
Contoh atau demonya bisa Anda lihat di CB Blogger Lab. Lihat bagian bawah, bagian Footer. Kayaknya bisa juga dipasang di atas blog, seperti dalam tips Membuat Toolbar di Atas Header Blog.Footer bar statis ini, selain mempercantik blog, juga menambah menu navigasi dan elemen lain yang ingin kita tonjolkan di halaman depan. Kelebihannya, static footer menu bar ini bisa dihilangkan oleh pengguna jika meras tertanggu, dengan satu klik saja.
Cara Membuat Navigasi Menu Bar Statis di Footer (Sticky Footer Bar)
1. Seperti biasa, awali dengan klik "Template" > "Edit HTML".
2. Copy & paste kode berikut ini di atas kode ]]>
2. Copy & paste kode berikut ini di atas kode ]]>
#custom-toolbar {overflow: auto;position: fixed;
background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9AgEjE2tea7GH8J7-B-xB94QpCyGCQfLGpJWqmCcthXjKiNQqHubomam6i1G-cRYhKL_M7AM8-i5L__p8dQ6yf-8OYumxhabCdMr6CDcN378bWDe5t59PlJQ23N5nAc2XbB59yQ5RMIN/s1600/pagelist.png") repeat-x scroll 0 bottom;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
height: 33px;margin: 0 auto;width: 100%;bottom:0px;right:0;}
.close-toolbar {float: right;margin-top:6px;padding-right: 10px;cursor: pointer;}
.search-text {color: #D1D1D1;text-align: center;border-radius: 10px;}
.google_translate:hover img {filter:alpha(opacity=0.90);-moz-opacity: 0.90;opacity: 0.90;border:0;}
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
height: 33px;margin: 0 auto;width: 100%;bottom:0px;right:0;}
.close-toolbar {float: right;margin-top:6px;padding-right: 10px;cursor: pointer;}
.search-text {color: #D1D1D1;text-align: center;border-radius: 10px;}
.google_translate:hover img {filter:alpha(opacity=0.90);-moz-opacity: 0.90;opacity: 0.90;border:0;}
3. Copy & paste kode berikut ini di atas kode
4. Terakhir, Copy & paste kode berikut ini di atas kode
http://facebook.com/cbblogger' title='Follow on Facebook'> | http://twitter.com/contohblog' target='_blank' title='Follow on Twitter'> | http://feeds.feedburner.com/contohblognih' target='_blank' title='Subscribe to Feed'> | Tweet
Related video : Cara Membuat Navigasi Menu Bar Statis di Footer BlogRelated Posts:
Subscribe to:
Post Comments (Atom)
|
0 comments:
Post a Comment