飛翔部落

    因為本人不會做美美的圖當作 header背景圖， 一直以來都只能套用別人設計好的版型及header背景圖，看久了也是會膩的啊!! 所以心想既然做不出美美的header背景圖的話，那我就放 google adsense 看能不能增加點擊數XD ，雖然不太好看冏  所以..來惡搞一翻吧~~

1. 將header圖片拿掉

(進入後台版面管理的css編輯,並找到#header)

background: 將這一段刪掉

height: 設定高度(自己斟酌)

width: 設定寬度(自己斟酌)

2. 放入 Google AdSense

(至pixnet'blog後台版面管理的版面設定裡,打開編輯公告版位進行編輯)

a. 載入jQuery
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script type="text/javascript">var $jq = jQuery.noConflict();</script>
注意: 因為pixnet有使用到prototype所以會跟jquery有衝突, 所以將jquery原本的$改為$jq

b. 將Google AdSense用div將它包住,並設定css樣式
<div id="google_ads" style="display:none;position:absolute;">
    Google AdSense
</div>
注意:
div: id一定要設之後會用到
style: 我們先將這div隱藏並設為浮動

c. 將 Google AdSense 放置 header
<script>

$jq('body').attr('onload',function(){
    $jq('#google_ads').css({ left: $jq('#banner').offset().left+120, top: $jq('#banner').offset().top-13 }).fadeIn('slow');
});

</script>
注意: 當頁面讀取到body時就會執行這段javascript
google_ads: 上面div的id
+120: 自己設定左右位置(數值越大越靠右邊,反之亦然)
-13:  自己設定上下位置(數值越大越往下面,反之亦然)
fadeIn('slow'): jquery的淡出效果

完整javascript:
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script type="text/javascript">var $jq = jQuery.noConflict();</script>
<div id="google_ads" style="display:none;position:absolute;">
    Google AdSense
</div>
<script>

$jq('body').attr('onload',function(){
    $jq('#google_ads').css({ left: $jq('#banner').offset().left+120, top: $jq('#banner').offset().top-13 }).fadeIn('slow');
});

</script>