[Blogger] 如何建立自動選取單一文章分類的文章輪播區，以 nivoSlider 為例
之前所寫的 [Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget，利用該篇文章的同一支 script 改成 nivoslider 的格式之後，就可以建立一個自動選取單一文章分類的文章輪播區。
先介紹一下 nivoSlider 的基本語法》
建議要輪播的圖片最好都使用相同的圖片大小，如果要查更詳細語法請前往 http://nivo.dev7studios.com/#usage。
<!-- in <head> section -->
<link rel="stylesheet" href="http://your.url/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://your.url/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- in the <body> section -->
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
簡單說明一下，如果你只要放圖片就不用加 <a ….></a>，只有單行的摘要文字就在 <img> 裡面加 title=”…” 即可，如果你所要顯示的摘要文字想要有 HTML 格式的話，那就是 title=”#captionid”，然後在底下加一個 <div id='”captionid”></div>，把內容包在裡面。
再來你要加一下 CSS：一般是加在 </head> 之前
#slider {
position:relative;
width:630px; /* Change this to your images width */
height:350px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
最後把 nivoSlider 叫出來，一般是加在 </head> 之前
jQuery(document).ready(function($) {
$('#slider').nivoSlider();
});
自動選取某一分類的作法》
如果你按照上面的方式，nivoslider 有跑出來的話，那就 OK，只不過爾後你要換輪播不同的內容時必須要再去編輯版型的 HTML，所以我寫了一支 script，自動抓取「精選輪播」這個分類的最新 10 篇文章。
參數的話，imgwidth 和 imgheight 就配合你的 CSS，numposts 就是要抓該分類幾篇文章，catname 可以改成你想用來輪播的分類，showWords 是要抓文章的前幾個字，其他的就不解釋了，跟之前寫的 [Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget 那支程式大致上都相同。
<!-- Featured Content Slider Started -->
<script type='text/javascript'>
imgwidth = 630;
imgheight = 350;
showTitle = true;
showWords = 110;
showPostDate = true;
numposts = 10;
home_page = "http://jimmyyen.blogspot.com/";
catname = "精選輪播";
</script>
<div class='featuredposts'>
<script src='http://your.url/featuredposts.js' type='text/javascript'/>
</div>
<!-- Featured Content Slider End -->
那支 script 可以在這裡下載：featuredposts.js 參考，然後放到你的空間，粗黑字的地方請置換成你的 script 所在的網址。
有問題歡迎討論。
不好意思
回覆刪除吉米大大
請問我如果用最下面自動選取某一分類的作法
上面的我已是要全部做一次嗎?
感謝你的分享~感激
不好意思
回覆刪除站長大大
小弟有都試過了
從第一個步驟開始改起
是變成網頁最上方出現一堆程式碼
而只用最後一個帶入(以自行上傳JS檔)
但毫無作用
不知道是漏掉哪步驟或是安裝程序錯誤
是否可請站長解救
謝謝!!
站長大大
回覆刪除請問一下
我已經有從第一步驟開始都用了
但是結果是網頁最上面出現一堆程式碼
另外我有只用最後一個步驟
但是甚麼都沒有出現過
是否可以請教你是不是哪裡用錯了?或是哪邊的順序才對
抱歉一直打擾你~但是就是在學習怎麼用這樣
希望您能幫我
感謝你
Re: Frank 王 <782742873102719239>
回覆刪除我建議你先抓 http://www.premiumbloggertemplates.com/
這裡的版型安裝在您的 Blogger，順便觀察他的做法，然後有空再試著改用不同的輪播 js。
不是阿~最後一ㄍ
回覆刪除自動選取某一分類的作法》
我都完全照站長說的做~但是完全沒有東西啊?
Re: Frank 王 <7457134945049143946>
回覆刪除您的 blogger 網址，我可以幫您看一下。
Re: Frank 王 <7457134945049143946>
回覆刪除js 必須是要下載到自己的空間，另外，也要改一下那個方框裡的內容，包括放 js 的網址。
吉米老大
回覆刪除在這裡要先對您說聲感謝!
我的BLOG網址是http://nocheat.us.to/
位置是擺在在中間最上面
小工具代碼如下:
imgwidth = 630;
imgheight = 350;
showTitle = true;
showWords = 110;
showPostDate = true;
numposts = 10;
home_page = "http://nocheat.us.to/";
catname = "首頁文章";
div class='featuredposts'
script src='http://sites.google.com/site/342fwfq/featuredposts.js' type='text/javascript'/
有~您說的步驟我也都有確實用了
之前有成功架好其他的JS外連檔的經驗^^
真的很謝謝吉米!!!
Re: Frank 王 <2368298283160953207>
回覆刪除1.通常我上傳到 sites.google 的 js 檔都會改成 .txt 的檔名，這部份是 sites.google 的問題。
2.另外 sites.google 會認 blogger 的使用者，印象中換成非 .blogspot.com 的網址是會有問題的。
我的建議是您將 .js 放到別的網路空間。
吉米老大
回覆刪除經過更正後
效果友出來了
但是圖是一排的
沒有呈現SLIDER效果
如果套!-- in head section --
語法帶入的話
圖則會出不來 其他功能一樣
又如果CSS放入你說的地方的話
則會在網站最上面出現所新增的程式碼
不知該如何解決
感謝你的耐心與幫助
謝謝!
Re: Frank 王 <6148828951731027924>
回覆刪除你的語法好像多了一個 div (粗體那個)
div class='featuredposts'
script src='http://sites.google.com/site/342fwfq/featuredposts.js' type='text/javascript'/
/div /script /div
/div
請問我如果用最下面自動選取某一分類的作法
回覆刪除上面的css與head的內文也是要全部做一次嗎?
Re: Frank 王 <3380305147452326213>
回覆刪除css 需要調，這兩個東西顯示的方式不一樣。
作者已經移除這則留言。
回覆刪除