显示标签为“Blogger”的博文。显示所有博文
显示标签为“Blogger”的博文。显示所有博文

一款漂亮的Blogger模板：Black Nero

发帖者 桃源水榭 on 2009年5月1日星期五 / 标签： , / Comments: (8)
preview
Download Template

Total downloads: 2,901

如何在Blogger加入“阅读全文”

发帖者 桃源水榭 on 2009年3月21日星期六 / 标签： / Comments: (0)
向来对这个Blogger在首页显示全文不太满意，总希望能加上“阅读全文”这个功能。简单地说，就是在首页只显示摘要，而非全文。要看全文，就按“阅读全文”进入全文阅读。

今天我终于成功在自己的Blogger加入此功能。为了与更多人分享，就将教学写出来啦。

##CONTINUE##


第一步：修改模板

首先进入“布局”=>“修改 HTML”，在您的模板中找寻<div class=’post-header-line-1′/>和<div class=’post-header-line’>（如果您的模板两个都有的话），然后在下方加入以下代码：

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

结果将会如下：



或者如下：



接着，在<data:post.body/>下方加上以下代码：

<b:if cond='data:blog.pageType != "item"'><br />

<a expr:href='data:post.url'>Read more...</a>

</b:if>

</b:if>

结果将会如下：



您的最后代码修改结果将如下图：



第二步：在默认帖子模板加上标签

进入“设置”=>“格式设置”，然后再“帖子模板”里加入以下代码：

<span class="fullpost">

</span>

如图：



第三步：发帖

把摘要写在<span class="fullpost">的上方，其余写在代码里面，如图：



发布后，您将会看到您的首页只出现摘要和“阅读全文”字样，而非以前的全文显示。



如果您的新帖不长，您可以直接将帖内的代码删除就可。

为Blogger添加标签云(原创)

发帖者 桃源水榭 on 2009年3月17日星期二 / 标签： , / Comments: (1)
相信这是很多人期待的功能吧。以前用Delicious为Blogger添加标签云，现在我们的方法更简单。
请于修改之前备份你的模板。
Step1:我们知道，Blogger beta的代码分为三部分：样式表、布局、Widget。第一步我们不需要展开代码，添加CSS代码。找到 ]]＞＜/b:skin＞ ，并将CSS添加在其之前。

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Step2：添加布局部分代码。我们仍然要先找到 ]]＞＜/b:skin＞　，但这一次我们要在它之后、Head之前添加以下代码：
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

修改YOURBLOG为你的名字，其中关于颜色，文字大小等值可以自定义，以跟你的Blog色调打配。
简单介绍一下，maxFontsize表示字体最大值，minFontSize表示字体最小值，minColor表示颜色最浅值，maxColor表示颜色最深值。

Step3:最后要修改的是Widget本身了。继续往下看就会找到Label的Widget
类似这一句：<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
如果你没有展开代码，只需要用以下代码替换这一行;相反，你要替换整个Widget。

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>


<b:if cond='data:title'>


<h2><data:title/></h2>


</b:if>




<div class='widget-content'>


<div id='labelCloud'/>

<script type='text/javascript'>



// Don't change anything past this point -----------------

function s(a,b,i,x){


if(a&gt;b){


var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)


}


else{


var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)


}


return v


}



var ta=0

var c=[];

var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = &quot;<data:label.name/>&quot;;

ts[theName] = <data:label.count/>;

</b:loop>



for (t in ts){


if (!labelCount[ts[t]]){


labelCount[ts[t]] = new Array(ts[t])


}


}

tz = labelCount.length-1;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){


for (var i=0;3 &gt; i;i++) {


c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)


}


var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);


li = document.createElement('li');


li.style.fontSize = fs+'px';


li.style.lineHeight = '1';


a = document.createElement('a');


a.title = ts[t]+' Posts in '+t;


a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';


a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);


if (lcShowCount){


span = document.createElement('span');


span.innerHTML = '('+ts[t]+') ';


span.className = 'label-count';


a.appendChild(document.createTextNode(t));


li.appendChild(a);


li.appendChild(span);


}


else {


a.appendChild(document.createTextNode(t));


li.appendChild(a);


}


ul.appendChild(li);


abnk = document.createTextNode(' ');


ul.appendChild(abnk);


}


lc2.appendChild(ul);

</script>



<noscript>


<ul>


<b:loop values='data:labels' var='label'>


<li>


<b:if cond='data:blog.url == data:label.url'>


<data:label.name/>


<b:else/>


<a expr:href='data:label.url'><data:label.name/></a>


</b:if>


(<data:label.count/>)


</li>


</b:loop>


</ul>

</noscript>


<b:include name='quickedit'/>


</div>



</b:includable>

</b:widget>

Step4：Game Over ^-^

在Blogger的首页输出文章摘要

发帖者 桃源水榭 on 2009年3月16日星期一 / 标签： / Comments: (0)

首页输出摘要的好处有很多，最明显的是避免了首页过长影响美观及读者的阅读体验。可不幸的是这个功能Blogger又没有提供。


##CONTINUE##

不过没关系，Blogger的自由使得我们可以做出任何事来，只要你能想得到！因此首页输出摘要只是小意思来着，网上的方法也很多。这里向大家推荐一个最好用的，就是台湾的小程序高手阿土伯写的Hack。


你只需进入『后台』，在『布局』处选择『添加小工具』，在弹出的窗口中选择『添加HTML/JavaScript』，在『职务』中填入＂##HIDEME##＂，就像这样：


Blogger首页输出摘要,BlogSpot首页输出摘要,Blogger首页输出摘要的方法


然后在『内容』处加入以下代码：


<script src="http://blogger-ext2.googlecode.com/files/jquery.pack.js" type="text/JavaScript"></script>

<script src="http://blogger-ext2.googlecode.com/files/blogger_ext2-core-0.6.3.pack.js" type="text/javascript"></script>

<script src="http://blogger-ext2.googlecode.com/files/plugin_replace_continue_markup.pack.js" type="text/javascript"></script>

<script>
// 使用 URL 連結文章而非 javascript 動態展開

BloggerExtOptions.replace_continue_markup_as_link = true;
</script>

点击保存，完成！


以后写文章的时候只要在你想要截断的地方前面加上＂##CONTINUE##＂就能在首页输出＂##CONTINUE##＂前面的文字了！是不是很方便呢？


当然，之前的文章你得去修改才能显示摘要喽...


效果如下：Blogger首页输出摘要,BlogSpot首页输出摘要,Blogger首页输出摘要的方法



你点击＂Read More...＂后是进入贴子页。


－－－－－－－－－－－－－2－－－－－－－－－－－－－－－－－－－


由于这个办法是将首页完全载入后再用js把你不想显示的文字给隐藏起来，所以呢这里还有另一种方式供读者去阅读全文。


只需将上面的代码里面的：


<script>
// 使用 URL 連結文章而非 javascript 動態展開
BloggerExtOptions.replace_continue_markup_as_link = true;

</script>

替换成：


<script>
// 支援 繼續閱讀功能 // true = 開 false = 關
BloggerExtOptions.replace_continue_markup = true;
// 動態展開時，是否使用動畫效果
BloggerExtOptions.replace_continue_markup_animate= false;

// 繼續閱讀功能顯示之說明文字
// 可以是圖 img 或任何 html 語法
BloggerExtOptions.continue_markup_expand_title = ' [+]繼續閱讀全文....';
BloggerExtOptions.continue_markup_collapse_title = '[-]取消繼續閱讀全文....';
</script>

效果变成这样：Blogger首页输出摘要,BlogSpot首页输出摘要,Blogger首页输出摘要的方法


你点击了图上的黄色字体之后全文是显示在首页上。而不是链入贴子页。


祝你在Blogger上玩得开心!

在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能

发帖者 桃源水榭 / 标签： , / Comments: (0)

Blogger 中的文章因為沒有 “隱藏內文” 及 “繼續閱讀” 的功能，所以就會把整個網頁拉得很長，較不利於閱讀。並且，如果文章內有很多圖片的話，那載入的時間就會變得很長。


以下的內容是我參考其它 Blogger 的做法所做的改良，主要的不同，就是我覺得其它 Blogger 在載入時會先顯示全文，再做隱藏，視覺上的效果比較不好，我把它改成一開始就會隱藏內文了，也可以避免自動載入內文的圖片。




安裝步驟



  1. 編輯樣版，搜尋 “</head>”，在其上方加入:
    <b:if cond='data:blog.pageType != "item"'>
    <style>
    #fullpost { clear:both; display:none; }
    #read-more { float:left; color:#FFFFFF; background-color:#00FF00; border:1px outset; padding:2px; text-decoration:none; font-weight:bold; font-family:Arial; }
    </style>
    </b:if>


  2. 繼續搜尋 “<body>”，在標籤內的 onload 事件加入:

    if(window.readMore){readMore();}

    繼續在下一行加入:


    <b:if cond='data:blog.pageType != "item"'>
    <script type='text/javascript'>
    var tagSpan = document.getElementsByTagName('span');
    var more1 = new Array();
    var more2 = new Array();
    function readMore(){
    var x = 0;
    for(var i=0; i&lt;tagSpan.length; i++){
      if(tagSpan[i].id == 'fullpost'){
        more1[x] = tagSpan[i];
        var readMore = document.createElement('a');
        readMore.setAttribute('id','read-more');
        readMore.setAttribute('href','javascript:toggleMore('+x+')');
        readMore.setAttribute('onclick','toggleMore('+x+');return false;');
        readMore.appendChild(document.createTextNode('Read more &gt;&gt;'));
        more2[x] = more1[x].parentNode.insertBefore(readMore,more1[x]);
        x++;
      }
    }
    }
    function toggleMore(theElement,theStatus){
    if(theStatus == true || more1[theElement].style.display=='' || more1[theElement].style.display=='none'){
      more1[theElement].style.display = 'block';
      more2[theElement].innerHTML = '&lt;&lt; Less';
    //  more2[theElement].parentNode.removeChild(more2[theElement]);
    }else{
      more1[theElement].style.display = 'none';
      more2[theElement].innerHTML = 'Read more &gt;&gt;';
    }
    }
    function expandAll(theStatus){
    for(var i=0; i&lt;more1.length; i++){
      toggleMore(i,theStatus);
    }
    }

    </script>
    </b:if>

    請注意一下程式碼的第 25 行，如果將前面的註解拿掉，則訪客展開內文之後，”Read more” 的連結就會自動消失了。

  3. 儲存即可


使用方式


    你必需在 Blogger 編輯文章時使用 “修改 HTML” 模式，在要顯示/隱藏內文的部份用下列標籤包起來:
    前文
    <span id="fullpost">
    欲隱藏的內文
    </span>



全部展開/隱藏全文


    你如果想要增加一個的控制項，可以用來展開或隱藏所有文章的內文，則請自行新增一個 “HTML/Javascript” 網頁元素，內容:

解決 “隱藏內文/繼續閱讀” 失效的問題

几款漂亮的Blogger模板

发帖者 桃源水榭 on 2009年2月27日星期五 / 标签： , / Comments: (0)

Violet Rays




Lifegreen



Randomness Theme




Red Leaves



Outono Cinza




Zinmag Tribune




Zinmag GameZine


Goolly




City Sleeps 3C



Official Corp



Zinmag Tribune





Evolution Red




Codigo Geek




Precision




一款漂亮的Blogger模板

发帖者 桃源水榭 / 标签： , / Comments: (0)

Compositio




给Blogger添加“回复此评论”功能

发帖者 桃源水榭 on 2009年2月19日星期四 / 标签： / Comments: (0)
虽然 Blogger 支持了不少功能，但还是无法满足我们的需求，所以我之前自己用 JavaScript 写了一个可以回复某评论的脚本。现共享如下。



事先说明，我使用的是 Blogger 模板(Template)，而非最新的 Blogger 布局(Layout)，所以这些代码都以模板模式出现，请使用布局模式的 Blogger 自行查找 Blogger Help，找到相应的代码。我也会尽量在之后查找相关帮助，进行补充。因为我目前对布局模式很不熟悉。



功能大致是以下思路：


首先，访客会看到文章下面已有的评论内容，比如如下的截图。评论之后有一个小图标，指示了访客，如果想对这个评论发表意见，点击即可。

当访客点击这个图标之后，会自动复制这个评论的作者名字和相关内容（比如本站复制的内容是“@评论者名字 ”），访客粘贴在评论框里即可快速回复指定的评论。这个评论之前的作者名带有链接，点击即可转到指定评论处。



首先需要获取指定评论的作者名字。这个值可以从 Blogger 模板的 <$BlogCommentAuthor$> 取得。但是这个返回值会带有评论者的帐户类型和其他标记，这些内容本不需要，所以用以下代码过滤 HTML 和名字最前面的一个空格。

之后便是复制代码的工作。因为访客可能使用各种各样的浏览器，所以复制函数会很复杂，而我选用了大多数桌面浏览器都支持的 Flash。JavaScript 把需要复制的文字传递给 Flash，随后 Flash 访问系统剪贴板，把需要的内容复制。这个方法来自网络上一位 Blogger 的作品，请阅读他的个人 Blog 了解更多信息。

把获得的信息，比如“@Marcher ”复制到剪贴板后，访客就可以快速地把要回复的评论者名字粘贴在评论框里了。为什么不能直接把内容放在评论框里？这是一个还无法解决的跨域问题，之前的帖子提到过。


这一切看起来顺理成章，但是访客用起来可能会有很大困难。Blogger 还需要就此进行说明；这更让阅读和回复 Blog 成为难事。



附参考代码：

（以下代码附在每条评论后，即传统模板的 <BlogItemComments></BlogItemComments> 之间。）

<script type="text/javascript">

function rmHTML<$BlogCommentNumber$>() { // 一个以当前评论 ID 为名称组成的函数名，防止重复


var fname = '<$BlogCommentAuthor$>'; // 获取评论者信息，代码中含有英文双引号，所以代码必须使用单引号

var fhtml = fname.replace(/<[^>].*?>/g,""); // 过滤掉信息里的 HTML 标记

var fname = fhtml.replace(/&nbsp;/,""); // 过滤掉名字最前面一个多余的空格

var content='@<a href="#comment-<$BlogCommentNumber$>">'+fname+'</a> '; // 给名字添加锚点链接


if(copy2Clipboard(content)!=false) alert("已复制。\n粘贴在评论框即可。");

}

</script>
（以下代码可以附在 Blogger 模板里，也可写作单独的 js 文档）

<script type="text/javascript">

function copy2Clipboard(replyThis) {

if (window.clipboardData) {

return(window.clipboardData.setData("Text",replyThis)); // IE 里可以简单地调用 clipboardData.setData 即可复制

} else { // 对于其他浏览器，则调用 Flash 复制功能


var flashcopier = 'flashcopier';

if(!document.getElementById(flashcopier)) {

var divholder = document.createElement('div');

divholder.id = flashcopier;

document.body.appendChild(divholder);

}

document.getElementById(flashcopier).innerHTML = '';

var divinfo = '<embed src="http://src.marcher.com.cn/template/2007/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(replyThis)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';


document.getElementById(flashcopier).innerHTML = divinfo;

}

}

</script>
当然，在 IE7 之后版本会弹出是否允许访问剪贴板的提示，如果访客选择了“不允许”，复制则是不成功的。可以自行设置错误信息；也可以删掉 IE 的复制函数，直接让所有浏览器都是用 Flash 复制。

最后，在评论之后添加一个回复评论的小图标。

<a href="#" OnClick="rmHTML<$BlogCommentNumber$>();return false;" title="回复此评论">
欢迎大家讨论更多实现和改进方法。

当然，更期待之后 Blogger 能实现这个功能。

几款Blogger模板

发帖者 桃源水榭 on 2009年2月7日星期六 / 标签： , , / Comments: (0)
Foliage for Blogger

Rounded Blue for Blogger

Rounded Blue for Blogger

Artica for Blogger

Artica template for Blogger

Green Lush for Blogger

Green Lush for Blogger
Newzen template for Blogger

Kiss for Blogger

Kiss template for Blogger

Conzep for Blogger

Conzep for Blogger