傳說中的被動收入連載，第一集先寫非加密貨幣型的 EarnApp 。 先看一下今年的收錢紀錄，今年的網域續約就靠這個 EarnApp 還有找。 我一開始的時候大概是每 2.5 美金自動給付，後來變成 10 美金，為什麼是這樣不清楚，但領得到錢很棒棒。 收錢要求 Paypal 帳戶 一個家用寬頻 IP（一個對外 IP 只能跑一個，多跑沒用，所以如果用手機連家裡網路和電腦同時跑，沒用） 一台 Windows, Mac, Linux 電腦（手機好像也可以，但實測 Android 有點吃資源，建議是有多的閒置手機和門號可以玩玩） 下載和安裝軟體 先到 官網完成註冊帳號 才能下載。 我是用 Docker 跑的，有留言需要協助的話再補充，以下的操作還是以 Windows 電腦為例。 最後程式啟動的時候應該會自動連線，再確認裝置是否有連結至帳號應該就可以等收錢了。 記得設定自動收款 ，免得忘記 除了電腦掛機賺錢，也可以透過玩遊戲多領一些，但我遊戲苦手，就沒測試了。 最重要的，拜託用 我的邀請連結 去申請帳號鼓勵我寫這篇分享， EarnApp 會再分潤給我，我沒有朋友都沒領到過，愛你唷。 我的邀請連結： https://earnapp.com/i/C9TX3iNw
之前所寫的 [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 需要調，這兩個東西顯示的方式不一樣。
作者已經移除這則留言。
回覆刪除