搶先發表 Xuite「好文轉寄」的 CSS 定義

Xuite「好文轉寄」的顯示位置異常，經過許多網友們的反應，現在已經可以用 CSS 來定義了，如果你不喜歡本文右上方的「好文轉寄」，那麼你可以在 CSS 中加入下面的定義，或是修改成你所想要的呈現方式～
------------------------------------------------------------
/*好文轉寄項目符號*/
span.mail li{
display:none;
/*
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/email_forward.gif);
*/
}
/*好文轉寄*/
span.mail{
display:none;
/*
float:right;
margin-top:15px;
*/
}
------------------------------------------------------------

問題請參閱：Xuite「好文轉寄、以文找文」的顯示位置異常

在 Xuite 頁首及本文底部顯示 AdSense 廣告 - JavaScript

在上一篇「在 Xuite 頁首顯示 AdSense 廣告 - CSS」中，可是說是讓 AdSense 以最簡單的方式放在 Xuite 的頁首，但如果我們希望也能夠讓 AdSense 出現在文章中要怎麼做呢～其實「簡睿隨筆」提供了很好的方案，能夠讓我們用最少的指令來解決這個在文章中產生 AdSense 的問題；其實這個方法也與之前的文章「在 xuite 文章底部顯示隨機文章清單」有點異曲同工。

首先，我們需要一個網址能夠放置 google_adsense.js，亦或直接取用「簡睿」本身所使用的網址。google_adsense.js 是「簡睿」針對 Xuite/Roodo 所寫的「內文廣告」程式。

google_adsense.js 請由 http://emisjerry.googlepages.com/google_adsense.js 下載檢視。

我們只要下列格式把指令加到自由欄位裡即可運作：



【注意】
當您的 AdSense 不僅只有用 google_adsense.js 呈現在「頁首、本文」時，需要特別注意 AdSense 在自由欄位中的載入順序，老人發現一定要讓 google_adsense.js 所負責的部份先載入後，而且最好是放在同一個自由欄位中，這樣所有 AdSense 的格式才不會「錯亂」。

舉例來說，老人有三個 AdSense 廣告「搜尋、頁首、本文、側邊」，都寫在同一個自由欄位中，而且將「側邊」部份放在最後面。



相關文章：
在 Xuite 文章底部顯示隨機文章清單
在 Xuite 頁首及本文底部顯示 AdSense 廣告 - JavaScript
在 Xuite 頁首顯示 AdSense 廣告 - CSS

不用再一篇一篇剪貼了：在文章內文動態產生 Google AdSense 的廣告
完全圖解在文章裡顯示 Google AdSense廣告的步驟(Xuite)

在 Xuite 頁首顯示 AdSense 廣告 - CSS

由於 Xuite 的自由欄位僅能擺在「側邊」，因此廣告版面很自然的就局限於「直式廣告」，但我們還是可以利用 css 的設定，讓「自由欄位」的物件「跳脫」兩側，而達成頁首「橫幅廣告」的效果。

把由 Google AdSense 網頁取到的指令用 <> 包起來，此區域命名為 divAdSenseLinkCSS，並且置入 CSS 的控制，存入「自由欄位」，同時建議該自由欄位放在最上方，如此會比較方便在中調整 divAdSenseLinkCSS 的顯示位置。

最後要使用的完整指令碼如下，把指令複製到自由欄位裡即可：



資料原始來源：用樣式控制Google AdSense廣告顯示的位置

在 xuite 文章底部顯示隨機文章清單

有時看到一些 blog 的文章中，會隨機取出幾篇文章的清單功能，覺得這項功能還蠻不錯的，但除非自己架站或 BSP 有提供隨機取用文章清單的功能，否則想要在文章裡顯示相關文章是沒有直接有效的方法。而 xuite 偏偏就是沒有這項功能。而在一次無意的瀏覽中，發現有位高手「簡睿」有說明如何在 xuite blog 的文章中，加入「隨機文章清單」的功能；終於，老人的 xuite blog 也可以有這樣的功能了。

為了使用「簡睿」所設計的功能，除了 xuite blog 之外，必需要有兩項要素：

1. 需要有 del.icio.us 的帳戶，並且將自己在 blog 中欲納入隨機清單的文章連結發佈到 del.icio.us，並且設定好專門給 xuite blog 使用的「標籤」，取清單時就用此類標籤來取出文章清單。
2. 找一個網址能夠放置 related_posts.js，亦或直接取用「簡睿」本身所使用的網址。

目前使用上，比較不方便的就是每次都要自行將新文張發佈到 del.icio.us，還好這只是舉手之勞；另外，也希望 xuite 能夠早日提供這樣的功能，並強化文章的管理功能，像老人就認為 pixnet 的文章管理功能做的很好。

據「簡睿」表示，目前程式尚有下列問題：

1. 有時會取到相同的文章，重覆狀況尚待處理
2. 有時會取到超過大小的亂數，導致取到的不足 5 篇
3. 原本構想是依目前文章的分類以分別取出各分類的隨機文章，但動態叫用 JavaScript 的寫法尚未測試出來

如果您只是想直接使用此隨機文章的功能，只要把下列指定貼入自由欄位裡即可；用戶名稱填入您的 del.icio.us 的帳號，標籤則填入要顯示的標籤準名稱，若不指定標籤的話就會取所有的書籤；count=30 也可自行放大或變小要抓取的書籤數量。

網址連結 http://blog.xuite.net/emisjerry/tech/11277281

xuite blog 如何讓文章置頂

經常逛論壇或布落格的網友們都知道「置頂文」就是把重要的文章放到最前面，可惜 xuite 目前沒有提供這項功能，萬一我們真的很想很想要這樣的功能時該怎麼辦呢～其實說穿了，真的很簡單，就是修改文章的「發表日期」，只要時間大於其它所有文章，就自然會置頂囉，雖然很不方便，但總是可以有點效果！

注意～如果「發表日期」大於目前的時間，那麼該文章要等到時間到才會出現喔！

xuite css 的網址 !

你知道嗎，檢視你網誌任一網頁的原始檔，就能找出自訂樣式 css 的網址。

若您使用的瀏覽器是 firefox，可以很輕易的取得網頁的資訊，當然包括了 css 的實際位置，只要在網頁中按右鍵「檢視頁面資訊」，在出現的視窗中，切換到第三個頁面就可以看到幾個「樣式檔」的網址，或在網頁中按右鍵「檢視原始碼」，在出現的視窗中，搜尋 blog.css 就可以找到樣式的網址。

若您使用的瀏覽器是 ie 在網頁中按右鍵「檢視原始檔」，亦可搜尋 blog.css 就可以找到樣式的網址。

以 xuite 來說，每個自訂樣式檔案都被命名為 blog.css，所以很容易辦別，只要看到 http://blog.xuite.net/_users/....../blog.css 的就是該網址的自訂樣式表囉。

xuite 自動摘要 - 另類技巧 !

相信所有使用 xuite 的網友們都知道 xuite 所提供的「文章摘要」是每篇文章各別設定，而且有三種模式「使用自動摘要、不使用摘要、使用自訂摘要」，而絕大多數的人應該都是用「自動摘要」的功能，而 xuite 的自動摘要主要是取第一個「段落(換行)」之前的文字，但有時我們的「第一個段落」可能只有幾個字，所以就使得自動摘要的顯示變得極短。
其實我們可以很簡單的就解決這種情況，那就是改變「第一個段落」的識別；怎麼做呢～

• 切換到 html 原始碼的模式；可以看到第一個段落的結尾、第二個段落開始之間，是以 <br/> 來做識別的。
• 將 <br/> 以 <div/> 取代原本的「換行」識別，這樣就可以囉，很簡單吧。

xuite css 的架構及樣式 (推薦)

您準備好要開始調整一個屬於自己的 xuite css 了嗎！這裡已經為你整理好了一些不錯的資料，相信不論是 xuite css 的老手還是新手，一定對於 xuite css 的結構以及欄位屬性有更清晰的瞭解。

http://blog.xuite.net/ezpost/blog/12878954 xuite css 心得報告

Xuite Blog 中的文章，裡面有我們經常看到網友們在問題的一些問題

http://blog.xuite.net/blog/baby/8761165 Xuite 日誌導引閱讀
http://blog.xuite.net/blog/baby/4334465 xuite blog 的 css 架構
http://blog.xuite.net/blog/baby/6427680 css 教學
http://blog.xuite.net/blog/baby/4453922 常見問題解說
http://blog.xuite.net/blog/baby/6417717
http://blog.xuite.net/blog/baby/6427680 「關於我」區塊調整

某位網友所製作的，老人認為這做的非常好，值得推薦～

http://blog.xuite.net/c_ss/Css/11316441 css 樣式常用成員表
http://blog.xuite.net/c_ss/Css/11281091 xuite css 結構表/(整體結構)
http://blog.xuite.net/c_ss/Css/11281559 xuite css 結構表/(中間欄位)
http://blog.xuite.net/c_ss/Css/11281094 xuite css 結構表/(左右欄位)

老人的 xuite css 心得報告 !

在 xuite 的「佈景主題」中提供了蠻多的選擇，可以讓使用者直接套用自己喜歡的樣式，不過即然有可自訂修改版型 CSS 的功能，那麼自然就會有不少人喜歡把自己的 blog 搞的與眾不同一些，就算是我這樣落伍的資訊人，也不免想要自己動手調整，經過了一番折騰，因為先前完全不懂任何 css 的東西，最後終於也讓我這個布落格新手終於也搞出了一點點心得以及成果～其實要瞭解 xuite css 的基本架構並不難，真正麻煩的是要花不少時間去實際測試，並且調整出自己喜歡的樣式、主題。

相信其它 BSP 的 css 應該也差不多都是這樣的原理吧。

我原先並不想要寫如何調整 xuite css ，原因之一是我會調整的部份也不過是一些小小的皮毛，原因之二則是 xutie 到處都可以找到一些高手的範例及解說，所以認為何必再寫一些大家已經看膩的東西，於是先以「記要」的方式來陳述一些我在學習 xuite css 時的心得及問題。

乍看之下 xuite 的「佈景主題」中提供了蠻多的版型，其實說穿了 xuite css 就是只有一個版型而以～只是看每個人如何在這相同的版型結構下，將這些可用的「欄位物件」做出不同的「屬性變化」。

xuite css 的版型定義，主要分為七個區塊，分別是 #container,#banner(標題),#footer(頁尾),#mid(中欄),#linksLeft(左欄),#linksRight(右欄), #content(內容)等。

#container
#banner
#mid
#linksLeft
#linksRight
#content
#footer

在中欄 #mid 的部份，幾乎是佔據了整個版面，其內部又包含三個區塊 #linksLeft, #linksRight, #content；其中主要是以 padding 屬性來決定左右欄最大寬度，由於左欄和右欄都是設定某一固定寬度，而 #content 的寬度會隨著瀏覽器改變。(L-C-R) 是預設的版型，其實只要小改一下，我們就可以有不同的版型呈現。

(L-C-R) xuite 相準的版型，只要將所有欄位放在同一個側邊，亦可變成 (L-C) or (C-R)。
(L-R-C)
(C-R-L) ezPost 目前的版型，而且有「橙、黑」兩種配色主題。



當主要的版型定位之後，就是要調整其中各欄位的顯示屬性了，「欄位、物件、屬性」的定義；在上述七個區塊中，有不同功能的「欄位」存在，我們可以各別設定這些欄位的屬性，或是統一設定欄位的屬性而不需要一個個更改；「關於我、日曆」這兩個「欄位」的屬性需要各別獨立設定。

以下就簡列大多數我們所看到的一些欄位名稱；其實只稍做觀察，就可以發現一些共通性，就可以很快的調整 css 的內容了。
/******************************************/
#container{}
#banner{}
#mid{}
#linksLeft{}
#linksRight{}
#content{}
#footer{}
/******************************************/
/*檔頭*/
menulist{} , menu{} , logo{} , blogname{} , blogemotion{} , blogemotion{} , description{}

/************************************************/
/*關於我*/
avatar{} , avatarPhoto{} , avatarID{} , avatarDesciption{} , .avatarbutton{}

pTitle li{} , pTitle{} , personaltitle{} , personallink{}
plink li{} , plink{} , pfriend li{} , pfriend{}
pphoto li{} , pphoto{} , pvlog li{} , pvlog ul{} , pboard li{} , pboard{}

/************************************************/
/*日曆*/
.calendarTitle li{} .calendarTitle{}
.calendarSide li{} .calendarSide{}

.calMonth{} .calMonthNav{}
.calMonthBackward{} .calMonthCurrent{} .calMonthForward{}
.calMonthHeader{} .calMonthDay{} .calMonthToday{} .calholiday{}
.calendarbutton{} .cal_event {}

/************************************************/
/*側邊欄位*/ sidetitle li{} , sidetitle{} , side li{} , side{}

/*文章分類*/ .categoryTitle li{} .categoryTitle{} .categorySide li{} .categorySide{}
/*最新文章*/ .articleTitle li{} .articleTitle{} .articleSide li{} .articleSide{}
/*最新留言*/ .messageTitle li{} .messageTitle{} .messageSide{} .date{}
/*搜尋文章*/ .searchTitle li{} .searchTitle{} .searchSide{} .searchbutton{}
/*最愛連結*/ .linkTitle li{} .linkTitle{} .linkSide li{} .linkSide{}
/*已建立的日誌*/ .bloglistTitle li{} .bloglistTitle{} .bloglistSide li{} .bloglistSide{}
/*已建立的相簿*/ .albumTitle li{} .albumTitle{} .albumSide{}
/*參觀人次統計*/ .countTitle li{} .countTitle{} .countSide{}
/*日誌評價*/ .rankTitle li{} .rankTitle{} .rankSide{}
/*日誌使用資源*/ .resourceTitle li{} .resourceTitle{} .resourceSide{}
/*自由欄位*/ .customTitle li{} .customTitle{} .customSide{}
/*我的哈拉室*/ .chatTitle li{} .chatTitle{} .chatSide{}
/*留言塗鴉版*/ .paintTitle li{} .paintTitle{} .paintSide{}
/*背景音樂*/ .musicTitle li{} .musicTitle{} .musicSide{} .musicbutton{}
/*訂閱電子報*/ .epaperTitle li{} .epaperTitle{} .epaperSide{} .epaperbutton{}
/*我的訂閱*/ .rssrollTitle li{} .rssrollTitle{} .rssrollSide li{} .rssrollSide{}

/************************************************/
/*中間欄位*/

/*文章*/
#content{}
.title{} span.titlename{} span.titledate{} .blogrank{} span.category li{}
span.category{} span.counter li{} span.counter{}

/*文章主體*/
.blogbody{} span.fullpost{}
.morebtn li{} .morebtn{} .backbtn li{} .backbtn{} .posted{} .selectbar{}

/*引用*/
.trackbacktitle{} .trackbackurl{} .trackbackdate{} .trackbackcontent{}
/*留言*/
.comment{} span.commenttitle{} span.commenttitle li{} span.commentbutton{}

.author{} .commenttext{} .commentedit{}
span.authorname{} span.commentdate{} span.email{}
span.line{} span.urlicon{} span.url{}