6/03/2011
之前所寫的 [Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget，利用該篇文章的同一支 script 改成 nivoslider 的格式之後，就可以建立一個自動選取單一文章分類的文章輪播區。 建議要輪播的圖片最好都使用相同的圖片大小，如果要查更詳細語法請前往 http://nivo.dev7studios.com/#usage。 簡單說明一下，如果你只要放圖片就不用加 <a ….></a>，只有單行的摘要文字就在 <img> 裡面加 title=”…” 即可，如果你所要顯示的摘要文字想要有 HTML 格式的話，那就是 title=”#captionid”，然後在底下加一個 <div id='”captionid”></div>，把內容包在裡面。 再來你要加一下 CSS：一般是加在 </head> 之前 最後把 nivoSlider 叫出來，一般是加在 </head> 之前 如果你按照上面的方式，nivoslider 有跑出來的話，那就 OK，只不過爾後你要換輪播不同的內容時必須要再去編輯版型的 HTML，所以我寫了一支 script，自動抓取「精選輪播」這個分類的最新 10 篇文章。 參數的話，imgwidth 和 imgheight 就配合你的 CSS，numposts 就是要抓該分類幾篇文章，catname 可以改成你想用來輪播的分類，showWords 是要抓文章的前幾個字，其他的就不解釋了，跟之前寫的 [Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget 那支程式大致上都相同。 那支 script 可以在這裡下載：featuredposts.js 參考，然後放到你的空間，粗黑字的地方請置換成你的 script 所在的網址。 有問題歡迎討論。
先介紹一下 nivoSlider 的基本語法》
<!-- 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>#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;
}jQuery(document).ready(function($) {
$('#slider').nivoSlider();
});自動選取某一分類的作法》
<!-- 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 -->
文章分類：Blogger Addon