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.
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
0 comments:
Post a Comment