╰☆ Myshero520╭☆

2014.07.21 修改隱藏痞客邦新版快捷列語法

2014.07.29 修改登出,登入後回到之前的頁面,原本是都跑到痞客邦首頁去

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

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

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

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

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

快捷列在左邊 [目前本人【Hunt】使用的] ↓

<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.1; position: fixed; top:0px; /*left 若要將動態通知也隱藏,可將-48px改成-70px*/ left:-48px; height: 100%; width:75px; background: black; 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; color:#666;font-size: 12px!important; } ul.functool li a:hover { color: yellow !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> </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); jQuery(function($){ if($('#topbar__user__list__link--logout').html()==null) { $('ul.functool').append('<li><a href="http://www.pixnet.net?done='+escape(top.location.href)+'">登入</a></li>'); } else { $('ul.functool').append('<li><a href="http://panel.pixnet.cc/logout?done='+escape(top.location.href)+'">登出</a></li>'); } }); </script>

快捷列在下方 ↓

<style type="text/css"> /*隱藏新版快捷列*/ #topbar { display:none!important; } #notifybar{ opacity: 0.1; position: fixed; bottom: 0px; right:0px; height: 26px; width:100%; background: black; box-shadow: 1px 1px 6px -2px rgba(20%,20%,40%,0.7); z-index: 10000000; } #notifybar:hover{ opacity: 1.0; background: #080300; } #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: #FFB3FF !important; } ul.functool li a:hover { color: #000000 !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> </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); jQuery(function($){ if($('#topbar__user__list__link--logout').html()==null) { $('ul.functool').append('<li><a href="http://www.pixnet.net?done='+escape(top.location.href)+'">  登入</a></li>'); } else { $('ul.functool').append('<li><a href="http://panel.pixnet.cc/logout?done='+escape(top.location.href)+'">  登出</a></li>'); } }); </script>

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

<style type="text/css"><!-- /*隱藏新版快捷列*/ #topbar { display:none!important; } #notifybar2{ opacity: 0.1; position: fixed; bottom: 0px; right:0px; height: 26px; width:170px; background: black; 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: #080300; width:550px; } #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: #FFB3FF !important; font-size:16px!important; } ul.functool2 li a:hover { color: #FF1493 !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: #000FFF; 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> </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); jQuery(function($){ if($('#topbar__user__list__link--logout').html()==null) { $('ul.functool2').append('<li><a href="http://www.pixnet.net?done='+escape(top.location.href)+'"> 登入</a></li>'); } else { $('ul.functool2').append('<li><a href="http://panel.pixnet.cc/logout?done='+escape(top.location.href)+'"> 登出</a></li>'); } }); // ]]></script>

複製上面三個區塊內的程式碼（任選一種）↑~

安裝方式請照著下面的步驟去做…

請到痞客邦管理後台的 [側邊欄位設定] http://panel.pixnet.cc/blog/sidecolumn

新增一個版位

貼到新增版位的 [自訂欄位內容],[自訂欄位標題]可自行填寫

再將這版位從 [版位暫存區] 拖拉到你的側欄1或是側欄2,

最後按下右下角的[儲存版面]即可.

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

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

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

myshero 安裝【Huntの自製痞客邦快捷列】〈失敗經〉心得碎唸：

在 2014 / 06 / 13 這一天的晚上，

看到「min格友」的推文【Huntの自製痞客邦快捷列】…

點了連結進去看看…真的被這3種「快捷列」深深的吸引著…

尤其是【右下角伸縮版快捷列】更酷，整個晚上都在測試這3種快捷列，

無奈都失敗也不知道錯在哪裡…

心想是不是我【CSS原始碼編輯】裡面的〈某一組語法〉與它【衝突到】啊！

就這樣【少女情懷版型】裡面的〈語法〉

我是一段刪除後按「儲存」後再去觀察「它」的變化…

接著是一段又一段的刪掉去作測試，幾乎可以說整個【少女情懷版型】

裡面的「語法」全部都被我刪光了，還是找不到失敗的原因到底在哪兒…

就這樣經過了十幾天的測試，數不清的「N次」安裝都失敗，

到了( 2014 / 06 / 26 ) 這天，這3種快捷列，

還是與我無緣…信心快崩潰啦！當時真的很想放棄！

103 / 06 / 26 晚上

坐在電腦桌前思考著已經耗掉了我「十幾天青春」的

【自製痞客邦快捷列_Hunt】到底要不要「放棄」ㄋ…

要放棄真的〈心不甘情不願〉的說，也不合乎我的本性…

於是~閃過一個念頭，檢視【Huntの自製痞客邦快捷列】

這篇文章的「原始檔」來看看吧…


走了十幾天的「冤枉路」，終於「豁然開朗」了！

找到答案了：是我【貼錯地方】貼到【CSS原始碼編輯】裡面去了啦！

話說~~102年10月31日，從「雅虎」搬來「痞客邦」到103年5月下旬，

因為「諸多因素」一直沒碰電腦…

所以什麼是【痞客邦舊版動態通知列】？

說真的我一點印象都沒有，更別說看過、用過…


而【貼錯地方】的原因：是我「初來乍到」對「痞客邦」諸多不了解…

太小看了痞客邦「左、右欄位」的功能，

不知道「它」的功能如此強大，可接受這樣的「語法」ㄋ…

之前在「雅虎部落格」的「左、右欄位」

也只能貼一些連結、音樂語法、天氣雲圖等等之類的小程式…

所以才會走了那麼長的「冤枉路」ㄋ…

從第一天認識【Huntの自製痞客邦快捷列】到今天

～自製痞客邦快捷列_第二代「適合深色系版面」myshero重製再分享～

再過4天就4個月啦…

這一路走來…只能以〈寒天飲冰水、點滴在心頭〉來形容啊！

深刻體會到〈成功的果實〉是給堅持到底的人最好的回報ㄋ…

最…最…最「感恩」的人是【部落格備份網のHunt大師】，

沒有您這一路來的〈不厭其煩、指點迷津&解惑〉就沒有「這篇文」的旦生啦！

真的很高興認識你…謝謝您…您真是個大好人，慶幸的是…

要不是「雅虎部落格」關格，還真的是「沒這個機會」認識Hunt大師ㄋ~

Myshero 安裝心得報告：

同時安裝【快捷列在下方】和【右下角伸縮版快捷列】，

只會出現【右下角伸縮版快捷列】，

此文有安裝【快捷列在下方】這時候「它」會搞「失蹤」走企藏囉…

同時安裝【快捷列在下方】和【快捷列在左邊】，

有一種現象是【快捷列在下方】，會跑到螢幕的左上方去，

樣式會有些「走鐘」…這時候【快捷列在左邊】會搞「失蹤」走企藏囉…

或是~另一種現象是現在看到的【快捷列在左邊】變形的樣子並沒有失蹤喔

這時候【快捷列在下方】會搞「失蹤」喔！走企藏囉…

只是要讓「看倌」知道，它會影響到【快捷列在左邊】的樣式「走鐘」變形，

在這「這篇文」可以看到這兩種「快捷列」無法和平相處的「範例」ㄋ…

同時安裝【右下角伸縮版快捷列】和【快捷列在左邊】

這兩種「快捷列」可以和平共存…

跳岀這「這篇文」 後，就可以看到 myshero 有安裝

【右下角伸縮版快捷列】在螢幕的右下角處，

和【快捷列在左邊】在螢幕左邊的邊邊任一地方，

這兩種「快捷列」範例「看倌」可以點點看喔！

╰☆ Myshero520╭☆ \ 文於 2014.10.09-4