[Blogger] 如何建立自動選取單一文章分類的文章輪播區,以 nivoSlider 為例

image

之前所寫的 [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 = &quot;http://jimmyyen.blogspot.com/&quot;;
catname = &quot;精選輪播&quot;;
</script>
<div class='featuredposts'>
<script src='http://your.url/featuredposts.js' type='text/javascript'/>
</div>
<!-- Featured Content Slider End -->

那支 script 可以在這裡下載:featuredposts.js 參考,然後放到你的空間,粗黑字的地方請置換成你的 script 所在的網址。

有問題歡迎討論。

留言

  1. 不好意思
    吉米大大
    請問我如果用最下面自動選取某一分類的作法

    上面的我已是要全部做一次嗎?

    感謝你的分享~感激

    回覆刪除
  2. 不好意思

    站長大大

    小弟有都試過了

    從第一個步驟開始改起

    是變成網頁最上方出現一堆程式碼

    而只用最後一個帶入(以自行上傳JS檔)
    但毫無作用

    不知道是漏掉哪步驟或是安裝程序錯誤

    是否可請站長解救

    謝謝!!

    回覆刪除
  3. 站長大大
    請問一下
    我已經有從第一步驟開始都用了
    但是結果是網頁最上面出現一堆程式碼

    另外我有只用最後一個步驟

    但是甚麼都沒有出現過

    是否可以請教你是不是哪裡用錯了?或是哪邊的順序才對

    抱歉一直打擾你~但是就是在學習怎麼用這樣

    希望您能幫我
    感謝你

    回覆刪除
  4. Re: Frank 王 <782742873102719239>
    我建議你先抓 http://www.premiumbloggertemplates.com/

    這裡的版型安裝在您的 Blogger,順便觀察他的做法,然後有空再試著改用不同的輪播 js。

    回覆刪除
  5. 不是阿~最後一ㄍ
    自動選取某一分類的作法》

    我都完全照站長說的做~但是完全沒有東西啊?

    回覆刪除
  6. Re: Frank 王 <7457134945049143946>
    您的 blogger 網址,我可以幫您看一下。

    回覆刪除
  7. Re: Frank 王 <7457134945049143946>
    js 必須是要下載到自己的空間,另外,也要改一下那個方框裡的內容,包括放 js 的網址。

    回覆刪除
  8. 吉米老大
    在這裡要先對您說聲感謝!

    我的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外連檔的經驗^^

    真的很謝謝吉米!!!

    回覆刪除
  9. Re: Frank 王 <2368298283160953207>
    1.通常我上傳到 sites.google 的 js 檔都會改成 .txt 的檔名,這部份是 sites.google 的問題。

    2.另外 sites.google 會認 blogger 的使用者,印象中換成非 .blogspot.com 的網址是會有問題的。

    我的建議是您將 .js 放到別的網路空間。

    回覆刪除
  10. 吉米老大
    經過更正後

    效果友出來了
    但是圖是一排的
    沒有呈現SLIDER效果

    如果套!-- in head section --
    語法帶入的話
    圖則會出不來 其他功能一樣

    又如果CSS放入你說的地方的話
    則會在網站最上面出現所新增的程式碼

    不知該如何解決
    感謝你的耐心與幫助

    謝謝!

    回覆刪除
  11. Re: Frank 王 <6148828951731027924>
    你的語法好像多了一個 div (粗體那個)

    div class='featuredposts'
    script src='http://sites.google.com/site/342fwfq/featuredposts.js' type='text/javascript'/
    /div /script /div
    /div

    回覆刪除
  12. 請問我如果用最下面自動選取某一分類的作法

    上面的css與head的內文也是要全部做一次嗎?

    回覆刪除
  13. Re: Frank 王 <3380305147452326213>
    css 需要調,這兩個東西顯示的方式不一樣。

    回覆刪除
  14. 作者已經移除這則留言。

    回覆刪除

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!

這個網誌中的熱門文章

[古典相機] 巧緻實用的簡單精神.Nikon FE.1978

[古典相機] M42 機皇.快門最速機身.Fujica ST801.1973

在 Excel 裡轉換 Unixtime 格式

[中判相機] 開始 120 吧.Pentax 6x7.1969

[古典相機] 小型化 SLR 代表作,Olympus OM-1N.1979