在blogger左側加入可隨著畫面浮動的導覽圖標及對話泡泡
有朋友問到左側那欄導覽圖標, 無論怎麼上下移視窗, 都還是可以看到的效果怎麼做的? 其實現在很多部落格都在使用. 整理一下常用的做法,及加入一個效果,只要滑鼠移動到圖標上方, 會出現一個對話泡泡. 1.先找到 ]]></b:skin>, 並將下列程式碼加在]]></b:skin> 之上
休息一陣子後, 總算打起精神來, 把這段程式碼修一修, 順便改掉原來的圖標. 現在看起來, 也多些趣味了!
首先要先準備一下自己的圖標icon(或參考這裡), 大小約設在高度, 寬度在30px左右, 或自訂都可以.然後將這些圖標上傳到一個網路空間, 如有google帳號的人, 就可以去http://pages.google.com/開通空間, 然後就可以取得這些圖標所在網址了.
接下來就是修改程式碼的部分.
/*-- smallnav--*/
#smallnav{
position:fixed;
text-align:left;
margin-left:-20px;
margin-top:17px;
}
* html #smallnav{ /*IE only*/
position:absolute;
}
#smallnav a img{
opacity:0.6;
-moz-opacity:0.6;
filter:alpha(Opacity=60);
}
#smallnav a:hover img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
position:relative;top:1px;left:1px;
}
* html #smallnav a img{
filter:alpha(Opacity=100);
}
#smallnav img{
margin-bottom: 5px;
}
* html .smallnav{
margin-bottom: 7px;
}
紅字部分, 可以調整導覽圖標的靠左或靠上方的距離
2. 在<body> 後, 找到 <div id='outer-wrapper'> , 修改下述程式碼放到<div id='outer-wrapper'>之後, 想放幾個連結, 就加幾個<a href...>....</a><br>的程式碼,如
<div id='smallnav'>
<span>
<a href='部落格網址' style='border:0;' title='回首頁'><img alt='回首頁' class='smallnav'
src='圖標所在網址'/></a>
<br/>
<a href='訂閱文章的連結' style='border:0;' title='訂閱我的文章'><img alt='訂閱最新文章' class='smallnav'
src='圖標所在網址'/></a>
<br/>
</span>
</div>
另外這個步驟, 是可以在點選圖標後, 出現一個對話泡泡的說明, 有興趣的話, 可以參考. 並不一定要加入.
1.在<head>之後, 加入下列程式碼<script src='http://bloggertips.googlecode.com/files/BubbleTooltips1.js' type='text/javascript'></script>
<script type='text/javascript'>
window.onload=function(){enableTooltips("smallnav");};
</script>
想看看效果,可以在我的部落格左側導覽圖標上試看看囉!
在IE7及Firefox下, 是可以正常運作的.
PS.用Firefox, 要等網頁全部載入後, 才看得到對話泡泡哦!
81 comments:
11/28/2007
不錯的效果，可以放一些工具鍵。謝謝分享。
11/28/2007
:) 不用客氣, 也謝謝scipao的留言!
11/28/2007
真棒，好奇這個功能好久了！真是期待每次看到Skyvee大的實用文章^^
11/28/2007
哈～終於知道怎麼做了！
這個疑惑藏在心中很久了！
又偷學到了！
11/28/2007
想學好久了,真是太謝謝你囉!
11/28/2007
羊,hubay,ethan, 很高興大家覺得實用. 我也覺得很開心了! :)
11/29/2007
thank you, Skyvee. ：）
謝謝您的分享，之前在 Ben's 部落不及格似乎也有看過教學，不過現在 Ben 把部落格改為 private 就看不到了啊。
我把這篇文章的連結也收到我的文章（這篇）裡喔，另外，是不是能跟您交換連結？我的 blog 站名是 thinkerCKD's Conscious Choices，網址是 http://thinkerckd.blogspot.com/
謝謝您！
11/29/2007
可惜我一直沒能看到Ben的文章呢!
我已加入您的連結了, 也謝謝您的支持.:)
11/29/2007
帥啦!!!
感謝阿!
我有空來用一下！
感恩阿！
11/29/2007
Skyvee大大！
我可以用妳導覽圖嗎?
你的圖好好看,我會在我的部落格貼上你的部落格連結！
11/29/2007
瑋, 請拿去用吧! :)
我是在這裡找到的, 你也可以參考一下!
11/30/2007
很久之前就想請教你那個東西要怎麼用了，可是因為最近太忙，沒太多時間去搞BLOG，所以想等有空時再問你，結果你現在自己招了，就不用去問了，有空我再試試吧！
11/30/2007
哈,老王,這也是一個網友問到,我才想到要整理的呢!不過也好, 順便重整一下程式碼及頁面. :)
1/30/2008
真是太感謝了,好可愛的小泡泡呢~
目前正在找背景為透明的小圖,
因為我的底色是深色,但現在找到的圖都會有方形的圖框,努力ing... ^^
1/30/2008
想請教版主,試了你的小圖的連結,發現您的圖是大的呢~要怎麼用大圖,只用語法來修改圖的大小呢?因我找到的圖,若用原本網頁上的圖就會有透明背景,但會很大張,我自己存回來,再上傳後,就變成有方框的圖哩...百思不得其解,不好意思了~~
1/30/2008
lica, 想要讓圖框不見, 及設定長寬的方法, 就是在＜img ...> 內, 加入 border=
"0", width="XX", height="XX"來設定,其中 XX 是數字 如我的是 width='30', height="30" . 你試看看. ^^
1/30/2008
感恩啊，我試成功了，謝謝哩～！
我有在文章上加上這裏的連結，謝謝版主快速的回覆 ︿︿
1/31/2008
Lica , 不用客氣, 很高興你達到想要的效果了!剛去看了你的部落格, 很可愛哦! ^^
1/31/2008
謝謝版主的誇獎,有空我會再來挖寶,也常來逛逛的^^ 祝你新年快樂,鼠年鼠錢鼠不完啊~!
1/31/2008
哈, 謝謝Lica,鼠錢鼠不完真是好句子! 也祝 Lica 新年快樂, 喜氣洋洋! ^^
2/01/2008
這功能真的好棒~豐富了我的部落格
謝謝你的無私教學^^~
預祝你新年快樂身體健康平安^^
2/03/2008
小束, 謝謝你的祝福, 也祝你有個鼠一鼠二的好年哦!新年快樂!^^
2/29/2008
打擾！關於在blog修改後，在火狐使用上圖標可以設定到左邊，但是一到了ie 7.0圖標便會跑到中間，但高度是正常的;一直弄不好！請問會是選的版面的問題嗎?
2/29/2008
火韋, 看起來是寬度設定不夠, 所以sidebar被擠下去了, 試著調一下寬度看看?
3/16/2008
好棒的分享，我試用了，不果我發生跟"火韋"類似的情形：「圖片按鈕用IE開起來，在中間上方，而且不會動」
請問一樣是調寬度嗎？
那寬度應該從哪裡調整呢？
謝謝指導...^^"
3/16/2008
willchange,
你可以試著調 margin-left 的值, 如margin-left:-25px; 直到你需要的位置.
此外, 我在ie7下看到是可以隨著視窗移動呢!
3/19/2008
感謝你喔！
我想應該是IE版本的問題...^_^
再次謝謝你的語法...超有用！
3/19/2008
willchange,
:) 別這麼客氣! 分享交流, 我也可以學到更多.
3/31/2008
版主我又來了,我直接使用圖酷的圖,結果近日發現圖都出不來,變成字,所以今天又重設了圖片的連結,發現firefox看都OK,可是在IE7的圖還是出不來,不知道版主知不知道原因呢?
3/31/2008
Lica, 有可能是圖片流量的限制, 太多人存取,會造成異常, 我剛用firefox及ie看, 都不能出現.
建議你直接下載回來, 然後, 上傳到網路空間, 如 http://pages.google.com , 由自己保管比較妥當!
4/27/2008
感謝你的分享，不過想請教該如何想你一樣底色是透明的呢？我加入以後還是有明顯的白色方框底圖，謝謝
4/27/2008
你好, 底色問題是要看那些泡泡圖檔,可能你選的圖, 背景不是透明的. 加入 style='border:0;' 就不會出現框線了!
5/01/2008
您好，再次打擾！
我也出現和火韋相同的情況，使用IE瀏覽時，icon會跑到中間去，請問調整寬度是調整哪裡呢？
自己調過好幾個，可是好像都沒啥作用，囧
margin-left要調到 -500px 才會出現在我想要的位置..這樣改用火狐又會產生看不到icon的情況 ="=
請問您會建議如何進行調整呢？
5/02/2008
第三步驟的程式碼在你的範本裡, 要放在別的位置, 如 ＜/div>＜div class='widget HTML' id='HTML7'>前面.
5/13/2008
請幫我看一下我的ICON會有間隔勒怎麼把他拿掉阿,另外怎麼讓圖沒有旁邊框框語法要家在哪阿，不好意絲麻煩大大幫忙看一下勒
shaynewu.blogspot.com
5/13/2008
shayne, 在img src 中加入border="0" 如, img border="0" ...就可以去邊框, 另外修改margin-bottom: -5px; 用負數讓間隔近一點. 試看看
5/16/2008
請問我的小泡泡怎麼都不會出現?
http://lonyice.blogspot.com/
謝謝...
5/17/2008
你好, 您的留言我有看到,因為需要時間找問題,所以遲了回信,不好意思. 我在IE下可以看到你的3個小icon, 但是在Firefox下卻完全看不到,剛查一下, 你的情況跟dada.hsu一樣, 你必須要將第三步驟的程式碼,放在別的位置, ＜div class='widget HTML' id='HTML7'> 的前面.這樣改之後, 你的smallnav margin-lef就要再調一下. 用FF測已沒有問題.
5/17/2008
謝謝，我改好了
因為語言寫法不同
所以稍微花了些時間才改好，
在火狐上應該看的到了。
(我沒裝所以無法測試^^")
但是小泡泡說明還是沒有顯示...
我還發現我的回應頭像有時候不會顯現
網頁也還有錯誤...不知道是哪裡有問題..
挺懊惱的...
5/18/2008
應是回應區大頭照那段語法有問題, 有修正了, 請重新修改程式碼.泡泡出不來,有可能是這一個js出問題所導致的.
5/21/2008
5/21/2008
很方便的功能，感謝分享。
5/21/2008
maoke, 謝謝你的造訪及留言.:)
7/31/2008
想請問一下大大
為什麼這段程式碼
....a href='部落格網址' style='border:0;' title='回首頁'....
我要加入我的部落格網址，他的按鈕就不給我按了，就是變成文字而已，請問一下為什麼呢? 單引號沒有刪掉
8/01/2008
好九不見^^
8/01/2008
耀,能不能麻煩你把本來想加入的程式碼,貼過來這裡看看?
8/01/2008
矛今, 好久不見 !^^ 新工作適應得如何?
8/21/2008
感謝skyvee的心法，讓我增加十年功力呀！XD
從thinkerCKD的blog逛過來這邊，拜讀您的blogger tips後，我覺得...以後根本可以直接用blogger架網站了！挖哈哈哈哈～（熬夜改版，過度興奮中）
8/21/2008
哈,的確已有人在blogger架商業網站哩!!
8/26/2008
你真是好人呀! 我學到很多啊!
8/26/2008
Wechner,別這麼說,有分享,有交流,大家一起進步啊!^^
9/12/2008
Thank u so much!
但請教個問題
若 我想把他放到右邊的話 要如何設定?
text-align:left margin-left:改成 right?有試過 好像也不行
3q!
9/12/2008
或是把margin-left的值調高一點,如 margin-left: 600px;
9/14/2008
多虧您的好文章豐富了我的Blog
小弟要先說聲感謝
另外請教一下
以這裡的導覽圖標為例
如果我希望讓那五個圓圈再加一個
不過多的那個要放在接近底部的地方
請問要怎麼設定??
這個Blog真的幫了很多像我這樣的初學者呢
9/14/2008
不好意思又是小弟
關於我上面提到的
如果我想讓最下面的那顆浮動圖標放在最下面
假如我用換行語法是否可行?
我試過這個方法算成功出現
只是不曉得會不會有其他方面的顧慮
例如瀏覽器或解析度的相容性
還是語法的執行
希望大家能幫小弟解惑
謝謝
9/16/2008
akaoni,你的意思是六個圖標中,第六個的位置要偏底部是嗎? 理論上應該是沒問題~~
10/05/2008
版大不好意思我又來請教問題了，我弄完導覽圖標以後，在firefox看是正常，可是當用ie看的時候，它位子就跑掉了，這樣子該如何解決？
10/06/2008
DTE,你的部份,在第三部份的程式碼,要改位置,放到＜div class='header section' id='header'>＜div class='widget Header' id='Header1'>之後,另外再調一下 margin-left:-20px;
10/08/2008
您好.一直以來參考您的部落格改版受益良多.我使用的是羊男的版模.也出現了在ff正常.在ie卻跑到右邊的問題.我參考了一下您的解決方法.但一直都找不到上述兩種程式碼...會是版模的問題嗎.這是我的網址http://cchlight.blogspot.com/
麻煩您解惑了.謝謝
10/08/2008
宏, 謝謝你的支持, ^^.
你的部份跟Down To Earth的改法一樣, 第三部份的程式碼,要放到＜div class='header section' id='header'>＜div class='widget Header' id='Header1'>之後,另外再調一下 margin-left:-30px;
10/08/2008
您好.我就是找不到您說的＜div class='header section' id='header'>＜div class='widget Header' id='Header1'>這一段程式碼.會是版模的問題嗎?
10/09/2008
sky大...我也找不到那一段程式碼...冏
10/09/2008
DTE, 宏, 你們有打勾展開小裝置範本嗎 ?? 不然找 ＜div id='header-wrapper'> ，把第３步的程式碼放到這行後面.
10/09/2008
我自己試了一下，放在＜div id='main-wrapper'>後就可以解決了，謝謝你，很棒的外掛
10/09/2008
宏,謝謝你的留言,DTE也可參考一下. 你的日本行介紹得很詳盡啊!^^
10/10/2008
12/02/2008
我弄得有點怪怪的也...
麻煩幫我看看好嗎...
謝謝
12/04/2008
詩萍,你沒有加入完整的程式碼,所以沒有任何效果.請參考文章內容的步驟,把程式碼加進去. 這功能的改法,比較複雜,最好先備份原來的template哦!
12/10/2008
好,我再試試看~謝謝你...
5/17/2009
感謝sky
對話泡泡功能-成功～
5/19/2009
丹尼爾，恭喜! :)
5/21/2009
HI，第一來留言。
冒昧請教一下，第二步驟好像沒有需要加入。在程式碼中沒有叫出prototype的功能，我自己測試把第二步驟的程式碼移除也沒有任何問題出現，實際上第二步驟是否有必要呢？請指教指教。
6/06/2009
對, 後來沒用到prototype,應該移除. 謝謝. 文章已修正.
10/28/2009
您好，請問如果我是要滑鼠移過連結(標題下的連結列以及最底下的新/首頁/舊文章)時出現泡泡框，
我有看到這個做法→http://cacolar.blogspot.com/2008/05/blog-post_9983.html
但是在FF下框框會跑到左上角，而且這個也不是出現像泡泡的小圖啦~
請問應該怎麼做呢？
10/29/2009
您好,
在您想要有泡泡框的連結裡, 加入 class='smallnav', 應該就能出現效果了.
10/30/2009
謝謝您的教學！不過我還有一個問題~要怎麼將泡泡框中的字體改小呢？我的字體變好大喔~並且如何使泡泡框再透明一點呢？
再度感謝！
10/30/2009
已解決！謝謝！
p.s.由於我沒有用到smallnav，所以有參考一些教學改成不用smallnav的樣子了~^ ^
11/04/2009
:) 嗯嗯,有解決就好!
11/28/2009
Hi,我操作了很多次..但圖示都無法鎖住...固定在頁面最上方.捲動時就看不到了..改了上方及左方的距離,還是都依樣,並不會隨著視窗而跑..
可以幫我看看哪裡出錯嗎
謝謝
11/28/2009
Hi Sky, 我已經將我的問題給排除掉了.我嘗試在CSS的每各區域都放看看,搞了很久才成功. 但另一個問題是當在IE瀏覽時,這各導覽列的圖示不但霧霧的且游標指向圖示時也無法跑出方塊文字..能否麻煩你幫我嗎,謝謝
11/30/2009
Winson,
1.方塊文字沒出現, 是因為你沒加入最後一段程式碼,就是bubbletooltips.js那一段
2.至於圖片出現鋸齒,是因為透明度的設定,可以將#smallnav a img{XXXX}這一段移除. 試看看效果. :)
我要留言
謝謝您願意在此分享心得, 讓文章內容更豐富.
這篇文章被引用到...