小君的友情世界

有些格友不愛新版快捷列,若將他隱藏又沒連結可到管理後台

所以小弟弄了一個可以藏起來,半透明的快捷列在左側或是下方

快捷列內含管理後台的幾個功能連結,再將動態通知功能放進去

內含痞客邦新版快捷列隱藏語法

程式碼如下 適用瀏覽器[Chrome,FireFox,IE9]

快捷列在左邊 [目前本人使用的]

<style type="text/css"> /*隱藏新版快捷列*/ #topbar { display:none!important; } /*快捷列顯示設定*/ #notifybar { -webkit-transition: left 0.5s ease-out; -moz-transition: left 0.5s ease-out; -ms-transition: left 0.5s ease-out; transition: left 0.5s ease-out; } #notifybar{ /*opacity 快捷列透明度設定,0.1(最透明)~1.0(不透明)*/ opacity: 0.5; position: fixed; top:0px; /*left 若要將動態通知也隱藏,可將-48px改成-70px*/ left:-48px; height: 100%; width:75px; background: white; box-shadow: 1px 1px 6px -2px rgba(20%,20%,40%,0.7); z-index: 10000000; } #notifybar:hover{ left:0px; opacity: 1.0; } #notifybar:hover div#divFunc{ left:20px; } div#divFunc { bottom: 180px; position: absolute; left:0px; } ul.functool li{ line-height: 30px; font-family: "Microsoft JhengHei" !important; font-size: 12px; border-bottom: solid 1px #e0e0e0; } #functool a { text-decoration: none !important; } ul.functool li a:hover { color: black !important; } #toolbar-box { position: absolute; bottom: 60px; left:-40px; height: 35px; width:195px; z-index: 1000000; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform:rotate(90deg) } </style> <!--Made by Hunt http://blogbackup.pixnet.net/blog--> <div id="notifybar"> <div id="divFunc"> <ul class="functool"> <li><a href="http://panel.pixnet.cc/blog/articlenew" target="_blank">發表文章</a></li> <li><a href="http://panel.pixnet.cc/blog/article" target="_blank">文章列表</a></li> <li><a href="http://panel.pixnet.cc/blog/comment" target="_blank">留言管理</a></li> <li><a href="http://panel.pixnet.cc" target="_blank">管理後台</a></li> <li><a href="http://panel.pixnet.cc/logout" >登出</a></li> </ul> </div> <div id="toolbar-box"> <iframe name="toolbar" id="toolbar-iframe" src="http://panel.pixnet.cc/toolbar/frame" width="100%" allowtransparency="true" height="34" frameborder="0" scrolling="no"></iframe> </div> </div> <!--定時更新狀態列--> <script type="text/javascript"> function _refresh(){var x=document.getElementById("toolbar-iframe");x.src=x.src;} //設定60秒更新一次 setInterval(_refresh,60*1000); </script>

快捷列在下方 

<style type="text/css"> /*隱藏新版快捷列*/ #topbar { display:none!important; } #notifybar{ opacity: 0.5; position: fixed; bottom: 0px; right:0px; height: 26px; width:100%; background: white; box-shadow: 1px 1px 6px -2px rgba(20%,20%,40%,0.7); z-index: 10000000; } #notifybar:hover{ opacity: 1.0; background: #87b9dd; } #notifybar:hover div#divFunc{ bottom:0px; } div#divFunc { bottom: -30px; position: absolute; right: 300px; } ul.functool li{ font-family: "Microsoft JhengHei" !important; font-size: 14px; border-bottom: solid 1px #e0e0e0; display: inline; } ul.functool li a{ text-decoration: none !important; color: #fff !important; } ul.functool li a:hover { color: #000 !important; } #toolbar-box { position: absolute; right:-140px; z-index: 1000000; } </style> <!--Made by Hunt http://blogbackup.pixnet.net/blog--> <div id="notifybar"> <div id="divFunc"> <ul class="functool"> <li><a href="http://panel.pixnet.cc/blog/articlenew" target="_blank">發表文章</a> | </li> <li><a href="http://panel.pixnet.cc/blog/article" target="_blank">文章列表</a> | </li> <li><a href="http://panel.pixnet.cc/blog/comment" target="_blank">留言管理</a> | </li> <li><a href="http://panel.pixnet.cc" target="_blank">管理後台</a> | </li> <li><a href="http://panel.pixnet.cc/logout" >登出</a></li> </ul> </div> <div id="toolbar-box"> <iframe name="toolbar" id="toolbar-iframe" src="http://panel.pixnet.cc/toolbar/frame" width="100%" allowtransparency="true" height="34" frameborder="0" scrolling="no"></iframe> </div> </div> <!--定時更新狀態列--> <script type="text/javascript"> function _refresh(){var x=document.getElementById("toolbar-iframe");x.src=x.src;} //設定60秒更新一次 setInterval(_refresh,60*1000); </script>

右下角伸縮版快捷列 [此文右下角有範例]

<style type="text/css"><!-- /*隱藏新版快捷列*/ #topbar { display:none!important; } #notifybar2{ opacity: 0.8; position: fixed; bottom: 0px; right:0px; height: 26px; width:170px; background: white; box-shadow: 1px 1px 6px -2px rgba(20%,20%,40%,0.7); z-index: 10000000; -webkit-transition: background 1.0s ease-in-out; -moz-transition: background 1.0s ease-in-out; -ms-transition: background 1.0s ease-in-out; transition: background 1.0s ease-in-out; -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -ms-transition: width 0.5s ease-out; transition: width 0.5s ease-out; } #notifybar2:hover{ opacity: 1.0; background: #87b9dd; width:530px; } #notifybar2:hover div#divFunc2{ /*bottom:0px;*/ right:200px; } div#divFunc2 { bottom: 0px; position: absolute; right: -500px; -webkit-transition: right 0.5s ease-out; -moz-transition: right 0.5s ease-out; -ms-transition: right 0.5s ease-out; transition: right 0.5s ease-out; } ul.functool2 li{ font-family: "Microsoft JhengHei" !important; font-size: 14px; border-bottom: solid 1px #e0e0e0; display: inline; float: left; } ul.functool2 li a{ text-decoration: none !important; color: #fff !important; font-size:16px!important; } ul.functool2 li a:hover { color: #000 !important; border-width: 0px; background-image:url(''); } #toolbar-box2 { position: absolute; right:-140px; height: 26px; bottom: 0px; z-index: 1000000; } --></style> <div id="notifybar2"> <div style="background: #87b9dd; width: 10px; left: 0px; bottom: 0px;">&nbsp;</div> <div id="divFunc2"> <ul class="functool2"> <li><a href="http://panel.pixnet.cc/blog/articlenew" target="_blank">發表文章| </a></li> <li><a href="http://panel.pixnet.cc/blog/article" target="_blank">文章列表| </a></li> <li><a href="http://panel.pixnet.cc/blog/comment" target="_blank">留言管理| </a></li> <li><a href="http://panel.pixnet.cc" target="_blank">管理後台| </a></li> <li><a href="http://panel.pixnet.cc/logout">登出</a></li> </ul> </div> <div id="toolbar-box2"><iframe src="http://panel.pixnet.cc/toolbar/frame" width="100%" height="28" name="toolbar" scrolling="no" frameborder="0" id="toolbar-iframe2" allowtransparency="true"></iframe></div> </div> <!--定時更新狀態列--> <script type="text/javascript">// <![CDATA[ function _refresh(){var x=document.getElementById("toolbar-iframe2");x.src=x.src;} //設定60秒更新一次 setInterval(_refresh,60*1000); // ]]></script>

安裝方式請參考上一篇 痞客邦舊版動態通知列

覺得不錯請再分享推廣出去吧

有能力者,內容可自行隨意修改,歡迎重製再分享

有任何問題請再留言跟我說吧~