Tạo Thanh Menu (menu bar) ẩn hiện bên dưới blogspot/website

Sưu tầm từ: http://www.dynamicdrive.com

Xin chia sẽ với các bạn code Tạo Thanh Menu (menu bar) ẩn hiện bên dưới blogspot/website. Với cách làm này, các bạn sẽ có một thanh menu đẹp ẩn hiện bên dưới blog mỗi khi rê chuột vào nó.

Demo: Các bạn nhìn thanh menu bên dưới chân blog nhé.

Cách Tạo Thanh Menu (menu bar) ẩn hiện bên dưới blogspot/website như sau:
Copy toàn bộ đoạn code dưới đây và chèn vào 1 tiện ích HTML mới. Chỉnh sửa, thêm bớt các menu cần dùng.

Sau đó lưu lại và xem kết quả.

Thanh menu (menu bar below blogspot) ẩn hiện bên dưới blogspot/ website

ảnh minh họa

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style>#stickybar{-moz-box-shadow:0 0 5px rgba(0,0,0,0.24);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.24);box-shadow:0 0 5px rgba(0,0,0,0.24);position:fixed; background-image:url('http://1.bp.blogspot.com/-dbY_VVkPODk/UJTFnJtHmyI/AAAAAAAAGe8/jiGU6WOkWSI/s12/stripe.png');background-repeat: repeat-x;background-color:white; padding:6px; left:0px; bottom:-177px; color: #007ABE; z-index:10000; font-weight:bold; width:100%; height:200px}#stickybar .button{ border-width:0; float:right; margin-Right:25px; cursor:pointer;} </style> <div id="stickybar" > <div class="open" ></div> <img class="button" id="stickybaropen" src="https://lh6.googleusercontent.com/-X2rWbwSknaw/Uyz4GBHpjsI/AAAAAAAAFag/XTsKl8rjjwo/s20-no/open.gif" /> <img class="button" id="stickybarclose" src="https://lh3.googleusercontent.com/-0gxkpYIyX9M/Uyz4GferEMI/AAAAAAAAFak/V8YEq6ruRB8/s20-no/close.gif" /> <div style="text-align:center;padding-top:3px"><b><div class="typing-loader"></div><a href="http://4.bp.blogspot.com/-Ni3c3NmIQRM/UP38x88DMaI/AAAAAAAACw0/28UbyM4ENLM/s50/original_click-icon111.gif" imageanchor="1" ><img border="0" src="http://4.bp.blogspot.com/-Ni3c3NmIQRM/UP38x88DMaI/AAAAAAAACw0/28UbyM4ENLM/s320/original_click-icon111.gif"height="28" width="44" /></a> &#169 để chọn chủ đề cần xem!</b></div> <div class="resources" style="margin-top:10px"> <div style="float:left"> <b><span style="color: #2E2E2E;text-shadow: 2px 2px 3px #999;">●๋•TIN CÔNG GIÁO & THẾ GIỚI</span></b><br /><br /> <ul> <li><a href="http://gioitrelocthuy.blogspot.com/2013/09/the-gioi-nhin-tu-vatican.html">Thế giới nhìn từ Vatican</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2013/09/duc-me-tv-tuyen-thong-chua-cuu-the.html">Truyền thông Chúa Cứu Thế</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2013/10/rome-report-tv-vatican.html">Vatican TV</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/09/dai-chan-ly-chau.html">Nghe Radio Chân Lý Á Châu</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/09/nghe-radio-vatican.html">Nghe Radio Vatican tiếng Việt</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/03/kenh-tin-bbc-tieng-viet.html">BBC Việt Nam</a></li> </ul> </div> <div style="float:left"> <b><span style="color: #2E2E2E;text-shadow: 2px 2px 3px #999;">●๋•THEO CHÚA GIÊ-SU</span></b><br /><br /> <ul> <li><a href="http://gioitrelocthuy.blogspot.com/2014/01/nhat-ky-long-thuong-xot-chua-mp3.html">Lòng Thương Xót mp3</a></li> <li><a href="#">Để nên giống Chúa Giê-su</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/03/kinh-long-thuong-xot-chua.html">Kính Lòng Thương Xót</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/02/chuyen-muc-doi-tu-suy-gam.html">Theo Chúa như thế nào?</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/01/nhat-ky-long-thuong-xot-chua-mp3.html">Bài giảng Lòng Thương Xót</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/03/kinh-long-thuong-xot-chua.html">Giê-su có yêu bạn không!</a></li> </ul> </div> <div style="float:left"> <b><span style="color: #2E2E2E;text-shadow: 2px 2px 3px #999;">●๋•THÁNH MẪU MARIA</span></b><br /><br /> <ul> <li><a href="http://gioitrelocthuy.blogspot.com/2012/02/thanh-mau-hoc.html">Thánh Mẫu học</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/03/suc-manh-cuu-roi-cua-kinh-man-coi.html">Phép lạ Kinh Mân Côi</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2013/05/sach-thang-duc-ba.html">Sách suy niệm về Mẹ</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/search/label/K%C3%ADnh%20%C4%90%E1%BB%A9c%20M%E1%BA%B9">Kinh nguyện về Mẹ</a></li> <li><a href="http://www.gioitrelocthuy.blogspot.com">Thơ mừng Mẹ</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/02/toan-bo-phim-tai-lieu-linh-dia-duc-me.html">Phim Linh địa Đức Mẹ</a></li> </ul> </div> <div style="float:left"> <b><span style="color: #2E2E2E;text-shadow: 2px 2px 3px #999;">●๋•SỐNG LỜI CHÚA</span></b><br /><br /> <ul> <li><a href="http://gioitrelocthuy.blogspot.com/2012/12/download-kinh-thanh-mp3.html">Kinh Thánh tiếng việt mp3</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/01/bai-giang-mp3.html">Nghe giảng online</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/03/nghe-kinh-thanh-tieng-anh.html">Kinh Thánh tiếng Anh mp3</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/04/trac-nghiem-kinh-thanh.html">Trắc nghiệm Kinh Thánh</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/04/trac-nghiem-kinh-thanh.html">Vui học Kinh Thánh</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/02/cac-thanh-dia-cong-giao.html">Các Địa Danh trong Kinh Thánh</a></li> </ul> </div> <div style="float:left"> <b><span style="color: #2E2E2E;text-shadow: 2px 2px 3px #999;">●๋•PHÚT HỒI TÂM</span></b><br /><br /> <ul> <li><a href="http://gioitrelocthuy.blogspot.com/search/label/Suy%20g%E1%BA%ABm%20v%C3%A0%20C%E1%BA%A7u%20nguy%E1%BB%87n">Suy niệm Lời Chúa</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/03/audio-truyen-cac-thanh.html">Các Thánh Là...</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/02/suy-niem-ve-le-song.html">Suy gẫm về Cuộc đời</a></li> <li><a href="#"></a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2014/02/suy-niem-ve-le-song.html">Lẽ Sống</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/12/truyen-cong-giao.html">Để Đức tin sống động</a></li> </ul> </div> <div style="float:left"> <b><span style="color: #2E2E2E;text-shadow: 2px 2px 3px #999;">●๋•SỐNG ĐẸP +</span></b><br /><br /> <ul> <li><a href="#">Một Phút Khôn ngoan</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/02/nghe-thuat-song_17.html">Nghệ thuật ứng xử</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2013/05/danh-ngon-cong-giao.html">Những lời khôn ngoan</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2013/04/cam-hoa-nha-tho.html">Cắm hoa nghệ thuật</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2013/04/nhung-thanh-duong-dep-nhat-gioi.html">Tuyệt đẹp +</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/2012/02/chuyen-muc-suc-khoe-va-am-thuc.html">Cách giữ mãi Phong độ</a></li> </ul> </div> <div style="float:left"> <b><span style="color: #2E2E2E;text-shadow: 2px 2px 3px #999;">●๋•ÂM NHẠC +</span></b><br /><br /> <ul> <li><a href="http://gioitrelocthuy.blogspot.com/search/label/Th%C3%A1nh%20ca">Thánh Ca tổng hợp</a></li> <li><a href="#">Mẹ và Quê hương</a></li> <li><a href="#">Nhạc Trẻ</a></li> <li><a href="#">Lãng mạn</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/search/label/K%E1%BA%BFt%20n%E1%BB%91i%20websites">Web Công Giáo hay</a></li> <li><a href="http://gioitrelocthuy.blogspot.com/search/label/T%C3%A0i%20li%E1%BB%87u%20C%C3%B4ng%20Gi%C3%A1o%20t%E1%BB%95ng%20h%E1%BB%A3p">Tài liệu quý</a></li> </ul> </div> </div> <script type="text/javascript"> /*<![CDATA[*/ var zxcStickyBar={init:function(e){var t=e.ID,n=e.Position,r=e.RevealType,i=e.PeekAmount,s=e.Animate,o=document.getElementById(t);if(o){e.sz=-o.offsetHeight;i=e.sz+(typeof i=="number"&&i>10?i:-e.sz/4);e.ud=e.StartOpen===true;e.s=[o,typeof n=="string"&&n.charAt(0).toUpperCase()=="B"?"bottom":"top",i,e.ud?0:i];e.ms=typeof s=="number"&&s>20?s:100;e.open=document.getElementById(t+"open");e.close=document.getElementById(t+"close");o.style[e.s[1]]=e.s[3]+"px";e.t=r!="mouseover";if(r=="mouseover"){this.addevt(o,r,"slide",e,true);this.addevt(o,"mouseout","slide",e,false)}else{this.addevt(e.open&&e.close?e.open:o,"mouseup","slide",e);this.addevt(e.open&&e.close?e.close:o,"mouseup","slide",e)}e.close?e.close.style.display="none":null}},slide:function(e,t){e.t?t=!e.ud:null;e.ud=t;this.animate(e,e.s,e.s[3],e.ud?0:e.s[2],new Date,e.ms);e.open?e.open.style.display=t?"none":"inline":null;e.close?e.close.style.display=t?"inline":"none":null},animate:function(e,t,n,r,i,s){clearTimeout(t[5]);var o=this,u=new Date-i,a=(r-n)/s*u+n;if(isFinite(a)){t[3]=a;t[0].style[t[1]]=t[3]+"px"}if(u<s){t[5]=setTimeout(function(){o.animate(e,t,n,r,i,s)},10)}else{t[3]=r;t[0].style[t[1]]=r+"px"}},addevt:function(e,t,n,r,i){var s=this;e.addEventListener?e.addEventListener(t,function(e){return s[n](r,i)},false):e.attachEvent?e.attachEvent("on"+t,function(e){return s[n](r,i)}):null}};zxcStickyBar.init({ID:"stickybar",Position:"bottom",RevealType:"mouseover",PeekAmount:35,Animate:200,StartOpen:false}) /*]]>*/ </script> </div></!doctype> <style> .typing-loader{ margin: 0px auto;float:left; width: 6px; height: 6px; -webkit-animation: line 1s linear infinite alternate; -moz-animation: line 1s linear infinite alternate; animation: line 1s linear infinite alternate;} @-webkit-keyframes line{ 0%{ background-color: rgba(0,0,0, 1); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,0.2); } 25%{ background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 24px 0px 0px 0px rgba(0,0,0,0.2); } 75%{ background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,2); } } @-moz-keyframes line{ 0%{ background-color: rgba(0,0,0, 1); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,0.2); } 25%{ background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 24px 0px 0px 0px rgba(0,0,0,0.2); } 75%{ background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,2); } } @keyframes line{ 0%{ background-color: rgba(0,0,0, 1); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,0.2); } 25%{ background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 24px 0px 0px 0px rgba(0,0,0,0.2); } 75%{ background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,2); } }</style>