在blogger加入浮動式廣告/工具列

豬腦爸本身是不大喜歡浮動廣告的…一直黏在旁邊趕也趕不走
但是我們可以利用這種浮動廣告的css來做一些創意的事情
受限於blogger為了適應多數螢幕把blogger的寬度定制為1000px
像我的22吋螢幕通常調解析度1024以上
blogger旁邊就浪費了
所以豬腦爸的網站上放的是兒子女兒的照片
雖然可以設計在背景上
但是用成浮動式廣告樣式
我們還可以放些連結來連到別的地方去
換了網站背景會不用再去重新畫一張
一舉二得喔
 

要如何設計呢?
❶找好圖片，以豬腦爸這張圖來說是90×67…主要是要看寬度，前面提過blogger寬度上限1000，我們也要兼顧一下1024解析度的用戶，所以圖片在做的時候就小一點
❷在blogger的版面配置修改html，加入css語法，範例如下，主要是做顯示位置(一般是做絕對位置)和背景的設定，請看範例中的補充說明(在css中，在/* 和*/包起來的就是補充說明字串)，加入到</b:skin>標籤前面

/* Fixed  Bar
----------------------------------------------- */
.menu_by_dnowba {
position: fixed; 
bottom: 0px; /*設置顯示的垂直位置，指令名稱可以是底部bottom、頂部top*/
right: 0px;/*設置水平位置，指令名稱可以是右邊right、左邊left*/
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff; /*可以拿掉不要，這張的效果就是拿掉背景*/
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/
* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/

❸再來是設一個div容器放置圖片和連結，並且套用上面的css樣式，第1行是class，名稱就使用css範例第1行的名稱來套用css範例，後面就寫圖片位置、連結、提示文字。修改完後放到</body>前面

<div class='menu_by_dnowba'>
<a href='javascript:scroll(0,0)' title='Back To Top'><img src='yoursite/blogger/back to top.png'/></a>
</div>