顯示具有 blog 教學 標籤的文章。 顯示所有文章
顯示具有 blog 教學 標籤的文章。 顯示所有文章

星期二, 5月 20, 2008

現在你也可以在"法蘭雞八號"上面"放屁"啦!


之前看到人家的blog上面都有一個推薦的按鈕,
上面會記錄有多少人推薦,
感覺蠻好的!
所以...
我"尬意ㄟ"我一定要有~~~
所以再次請教"孤狗大神"囉!
沒想到也是出奇的簡單!
想要嗎?爸爸買給你~~~
不是啦!是爸爸show給你看!


前前後後只要剪貼兩次就可以啦!

Setp 1. 先登入你的blogger吧!然後到[版面配置\修改HTML]
記得[展開小裝置範本]要打開哦!(好像不開也可以,不過我習慣打開!)


然後找到</head>
在後面貼上下面的code,
------------------------------------------------------------------
<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>
------------------------------------------------------------------

Setp 2.接下來,隨便找一個地方貼上下面的code吧!
------------------------------------------------------------------
<div style='float:right; margin-left:10px; font-size:0px;' class="funp_button"> <data:post.url/></div>
------------------------------------------------------------------
這個是要配合你自己的版面啦!
我的話是把它貼在 <data:post.body/>的前面啦!
這樣就完成啦!
有空幫我按按吧!

以上文章參考[誰在funP 推薦我的文章? for Blogger]

改變你的風格[使用其他模板][2008/5/22 update]


那天在網路逛阿逛的,
發現原來blogger除了它提供的模板之外,
還有其他的模板可以使用,
然後有看到別人推薦的一個牛仔褲風格的模板感覺還不錯!
因為一直以來都覺得原來的樣子旁邊兩條空白好浪費空間哦!
所以就給他拿來用啦!
就是你現在看到的樣子!


他有兩種版本!兩欄的跟三欄的,
我比較偏好三欄的,兩欄的看起來空空的感覺!
網址在這兩欄三欄
下載之後裡面有一個說明檔,
只要按照說明檔就可以完成了!
這個模板本身有提供[最新文章][最新回應]的功能,
不過之前的[繼續閱讀][延伸閱讀]就不見了,
所以必須手動加回來,
就之前的剪剪貼貼再做一次囉!
做完之後就大功告成啦!

不過這個模板畢竟是配合英文的,
所以拿到中文的環境,
有一些排版就有點跑到!
所以還需要一些加工,

1.修改了文章發表日期的排版


2.修改了較新的文章、較舊的文章的排版,原來的會變成兩行。


前前後後我弄了四五個小時,
感覺下班回家後又上了半天班,
真是辛苦~~~
不過弄完之後看到成果就感覺有值得啦!

ps1.你可以在這裡找到更多的模板
ps2.如果有人需要我改好的版本,麻煩留email給我!我會寄給你的!

[2008/5/22 update]
如果你有使用 Google Analytics (分析) 的話,
記得要重新把接收的那段 js 重新加入,
不然你就會跟我一樣,
想不透為什麼這幾天都沒有人看我的網頁!

星期日, 5月 11, 2008

新增[最新回應]~~~真是超級簡單的啦~~~


你的blog沒有[最新回應]嗎?
來來來~~~
這個還真的不是普通的簡單,
是超級easy的簡單~~~

跟著我往下做吧!

Step 1.
先連到這個網址吧!http://lvchen716.googlepages.com/default
然後會出現下面這個網頁的畫面~~~

沒錯!你沒看錯!
沒想到網頁還可以有安裝程式~~~
現在連吸星大法都不用使出來~~~
真是太神奇了~~~

興奮之餘~~~
在紅色的框框裡面填上妳的blog的網址吧!
然後二話不說就給他[下一步]、[下一步]吧~~~
我想這個大家都會~~~

Setp 2.
沒錯快結束了,
最下面的藍色框框是裝上去之後你的網頁上會怎麼呈現~~~
如果沒有問題~~~
就往紅色框框給他按下去吧!
這樣就會新增到你的網頁了!


Step 3.
按下去之後會跳出這個網頁,
他告訴你妳的網頁要新增東西了!
這個時候你只要打上標題就可以了!
然後按下[新增迷你組件]就可以啦~~~


這時候就會跳到[網頁元素]的畫面去~~~
你看~~~他就出現在紅色框框的地方啦!


沒想到居然有這麼簡單的方式~~~
真是太太太太太太太......神奇了!

這應該是作者的網址吧![LVCHEN 的美國生活指南]
上面有更詳細的說明,覺得好用的話!
記得去幫他推薦一下哦~~~

PS.提醒一下,你這邊的[允許網誌資訊提供]記得選完整哦!

繼續加油~~~加上[延伸閱讀]的功能吧~~~~[2008/5/17 update]


看完一篇文章之後,
如果有興趣我通常都會看看那個作者還有沒有其他相關的文章~~~
這個時候如果那個網站有[延伸閱讀]的功能就派上用場啦~~~
自從有了上次那個[繼續閱讀]的經驗之後~~~
我相信一定可以用吸星大法(其實就是剪剪貼貼啦)來為我自己的blog加上這樣的功能~~~
接下來~~~有需要的人就開始跟著我施展吸星大法吧~~~



SETP 1.
先登入你的blogger吧,然後到版面配置\修改HTML,記得把[展開小裝置範本]打勾。


SETP 2.
找到 <head> 的標籤,然後在後面貼上下面的code
---------------------------------------------------------------------------------
<script type='text/javascript'>

//<![CDATA[

<!-- Script functions for Related Posts: RelatedLabels(), RemoveDuplicatedPosts(), contains(), ShowRelatedPosts()-->
var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();

function RelatedLabels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];

relatedTitles[relatedPostsNum] = entry.title.$t;
relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);

for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
relatedUrls[relatedPostsNum] = entry.link[j].href;
relatedPostsNum++;
break;
}
}
}
}

function RemoveDuplicatedPosts(PostUrl) {
var tmpUrls = new Array(0);
var tmpTitles = new Array(0);
var tmpDates = new Array(0);

function contains(a, e) {
for(var j = 0; j < a.length; j++)
if (a[j]==e)
return true;
return false;
}

for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) {
tmpUrls.length += 1;
tmpUrls[tmpUrls.length - 1] = relatedUrls[i];
tmpTitles.length += 1;
tmpTitles[tmpTitles.length - 1] = relatedTitles[i];
tmpDates.length += 1;
tmpDates[tmpDates.length - 1] = relatedDates[i];
}
}
relatedTitles = tmpTitles;
relatedUrls = tmpUrls;
relatedDates = tmpDates;
}

function ShowRelatedPosts(PostUrl) {
RemoveDuplicatedPosts(PostUrl);

var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if (relatedTitles.length > 0) {
document.write('Related Posts: <ul>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
if (r < relatedTitles.length - 1)
r++;
else
r = 0;
i++;
}
document.write('</ul>');
}
}
//]]>
</script>

---------------------------------------------------------------------------------

SETP 3.
找到下面的這一段 code
---------------------------------------------------------------------------------
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>


---------------------------------------------------------------------------------
在紅色的</b:loop>之前塞入下面那一段紅色的code
---------------------------------------------------------------------------------
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>

---------------------------------------------------------------------------------
這邊做完之後記得範本要存檔哦~~~
不然你就得再剪貼一次了!


結束!!!沒錯~~~這樣就結束啦!
快去試看看吧~~~

[2008/5/17 update]
那天在改版的時候一直失敗~~~
原來是少放了一段~~~~

---------------------------------------------------------------------------------
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts(&#39;<data:post.url/>&#39;);
</script>
</b:if>
---------------------------------------------------------------------------------

這一段就配合自己的blogger找地方放吧!
只有一個原則,
就是要放在上一段的後面!

註:以上的文章是參考[Abin's Tech Note]

星期五, 4月 11, 2008

終於有[繼續閱讀]的功能了


一直很討厭首頁打開後落落長的樣子, 第一個載入的速度慢, 第二個是我不"尬意", 舉例來說好了, 如果想看第二篇文章, 非得等第一篇文章下載完畢(尤其是圖片), 不然在你看的過程中,文章會不停的往下跑, 希望大家聽的懂我說啥。

那天在網路上逛到一個blog,發現他有[繼續閱讀]的功能,而且發現他也是blogspot的網址,怎麼我在設定的功能裡面找來找去的就是沒有這項功能呢?這件事情一直埋藏在我心中久久不能釋懷。



直到昨天,我終於受不了了,
在我不停的google下,終於找到相關線索,
原來是要寫程式、改模板!!!
這...
這...
這不是肯德基...ㄚ...說錯了,這不是我要的!
一定有更簡單的!
在我棄而不捨之下(其實是不想寫程式,也不會寫)終於找到了簡單的方法,
只要貼貼貼就可以完成這樣的功能了!YA~~~
想要有相同功能的人只要跟著我往下做就可以啦!

SETP 1.
先登入你的blogger吧,然後到版面配置\修改HTML,記得把[展開小裝置範本]打勾。


SETP 2.
找到 <head> 的標籤,然後在後面貼上下面的code
---------------------------------------------------------------------------------
<script type="text/Javascript">
function hidePost(postUrl)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More");
eA.appendChild(document.createTextNode("...Read More"));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>

---------------------------------------------------------------------------------
其中 ...Read More 改成你想要的標籤,例如我就改成了[繼續閱讀]


SETP 3.
找到 <p><data:post.body/></p>這一行,然後補上下面的 code
---------------------------------------------------------------------------------
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.url/>');</script>
</b:if>
</b:if>

---------------------------------------------------------------------------------

這邊做完之後記得範本要存檔哦~~~
不然你就得再剪貼一次了!

SETP 4.
接下來是要讓你以後每次寫文章的時候直接有這樣的功能,先到設定\格式

最下面的[文章範本]貼上下面的code,
---------------------------------------------------------------------------------
<div> //首頁看的到的文章 </div>
<div id="fullpost"> //隱藏部分的文章 </div>

---------------------------------------------------------------------------------

然後你在你每次張貼文章的地方就可以看到以下的畫面啦!


STEP 5.
接下來就是苦命的工作了,就是要把以前已經張貼過的文章也改成有[繼續閱讀]的功能,直接到張貼\修改文章,在你想要隱藏的文字前面貼上 <div id="fullpost"> 那行code,


然後直接跳到最最最最最.......最後一行,貼上 </div> 就大功告成啦!


就在我昨天一陣努力瘋狂貼貼貼之下,我終於把我以前的文章全部都有這個功能啦!

YA~~~高興中!

註:以上的文章是參考[Kaie's Blog]
--------------------------------------------------------------------
2008.04.18 update
配合玥玲的智力,修改了一些地方與一個bug

最新文章