用新招扩充blogger的功能

Posted by 郑永
02月 28, 2008

听说blogger绑米以后国内又可以正常访问了，要验证这个事实还请国内的读者打开我的这个站试试，如果可以了，你再看下面的内容，这些内容可以帮助你扩充blogger的限制功能，让你完全打造自己的博客版面。
* 源起:

在读了 部落格会笑了！Blogger Smiley！ 一文，发现让 Blogger 利用 javascript 直接支持表情符号的确是一件方便且有趣的事，忍不住手痒也来扩充一下 Blogger 功能。
由于作者表示目前 Blogger Smiley 无法和 继续阅读功能 同时并存，有点可惜，再加上小弟我目前疯狂爱上及学习 jQuery 中，于是重新利用 jQuery 实作了一些 Blogger 扩充功能。

* 功能简介:
以目前 blogger_ext2 0.6b 来说，它提供了大部份 Blogger 所需的功能，且全部只要 6.3KB，相当的短小精干唷。

对于不需要所有功能的进阶使用者，您可以选用进阶安装，只要 1.1KB。

* 运作方式:
由于 blogger_ext2 当初的发展目标就是给一般网志站长即使不懂任何网页基楚都能上手使用。所以 blogger_ext2并不需要修改您的 HTML Template 。
它是利用 "档加载完成(document ready)"后，再重新为您的网志加上新功能，可以想成 "重新为您的网志排" 。
它是针对 New Blogger(beta)的内建功能加以扩充，让您不懂 HTML 亦能轻松使用来丰富您的 Blogger。当然，旧版本的 Blogger 亦能使用。

##CONTINUE##

* 如何使用(全自动安装):
新版本 Blogger 可直接使用由 Josh 提供之 超级无脑安装Blogger外挂功能 全自动安装，强烈建议使用此一方式!!!

* 如何使用(快速安装 all-in-one 8KB):

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

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

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

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

* 进阶安装:
自 blogger_ext2 0.5版开始，已全面改为 plugins 的方式来扩充。
所以，如果您不会用到所有的功能或您熟悉网页语法及设计，您可以使用进阶安装的方式来使用，让 blogger_ext2 更具弹性。
整个 blogger_ext2 核心只要 1.1KB，满足对大小及速度及客制化十分讲究的玩家。
新旧版本的安装差异同上，不再重复，仅说明 Script 语法上的差异。


<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>


其后再引入您所需要的功能 plugins ，如您需要 " 继续阅读功能" 则在上述二行后再加入一行:


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

* 隐藏 Blogger NavBar

·
<script>
// Blogger NavBar// true = 隐藏 false = 不隐藏
BloggerExtOptions.hide_navbar = true;
// Blogger NavBar// true = hover

BloggerExtOptions.fade_navbar = true;
</script>

* 隐藏 Widget


<script>
// true = 隐藏 false = 不隐藏
BloggerExtOptions.hide_sidebar_html_markup = true;
</script>

* 表情符号 plugin:
直接在您的文章中打入表情符号之代码，如同您在 IRC / MSN / AOL / Yahoo 等 IM 使用的代码，本 plugin 会自动为您代换成图片。
详细说明，请参考部落格会笑了！Blogger Smiley！ 一文。

·
<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_smiley-0.2.pack.js' type='text/javascript'></script>

·
<script>
// 表情符号功能开关
// true = 开 false = 关
BloggerExtOptions.replace_smiley = true;
// 自定的表情符号集，请参考下面范例置换
BloggerExtOptions.smilies = [];
</script>


当然，您可以自已加入您或设定您专属的表情符号(0.5b 设定功能)
idben's表情符号集设定范例: (10)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_benjamin.js' type='text/javascript'></script>


Yahoo Messenger 动态表情符号集(0.5b default): (54)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_yahoo.js' type='text/javascript'></script>


MSN 动态表情符号集(0.6.1b GeniusKiKi提供): (60)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_msn.js' type='text/javascript'></script>

* 继续阅读功能:
您可以使用 继续阅读功能 这篇文章或 继续阅读功能的困惑 这篇文章介绍的方式，但不需要引入它的 Javascript 以及修改 css 和您的Blogger Html Template。
只要您的文章中有 <div id="fullpost"> 或 <span id="fullpost"> 便会自动支持文章继续阅读功能，一切都是自动的。
** 注意! 0.6.1 前版本请一定要设定 BloggerExtOptions.continue_markup_expand_title 及 BloggerExtOptions.continue_markup_collapse_title 否则会出现乱码 **
(由于 google code 以 us-ascii charset 传递 javascript :( )

·
<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_continue_markup.pack.js' type='text/javascript'></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>


继续阅读功能 Markup 语法:
您可能和小弟一样，使用 Blogger 的 WYSISWYG 编辑器，为了加上 <div id="fullpost">或 <span id="fullpost"> 常要在 Edit Html 语法中切换来切换去，所以可以使用 Markup 语法来 偷懒，只要照你平常打字，在文章中打 ##CONTINUE## 关键词，后面跟的内容就会自动支持继续阅读功能了。
所以只要在平常的 WYSISWYG 编辑器下，打一下 ##CONTINUE## 就好了，非常直觉方便。
继续阅读功能 URL 模式:
如果您不想让内容以动态的方式在首页展开，可以选择传统的 URL 模式，使用者点了 "继续阅读后，会连至该文章的 URL 中。


<script>
// 使用 URL 连结文章而非 javascript 动态展开
BloggerExtOptions.replace_continue_markup_as_link = true;
</script>

* Sidebar 侧边网页元素 折收/展功 功能:
侧边中的网页元素，越加越多，整个侧边条长长长… 也来给他自动 收纳 一下吧。
你只要先用 Browser 的 View-Source 看您的 Blog 页面的原始码，然后找 class='widget ' 就能找出每一个测边功能的 id='xxx' ，然后把 id 填入设定中，这些菜单就自动收纳啦!!!

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

·
<script>
//侧边功能 // true = 开 false = 关
BloggerExtOptions.sidebar_widget_expandable = true;
// 动态展开时，是否使用动画效果
BloggerExtOptions.sidebar_widget_expandable_animate= false;

· // 测边展开的 html 语法，可以是图 img 或任何 html 语法
BloggerExtOptions.sidebar_widget_expan_title = '[+]';
// 使用图形而非文字实例
BloggerExtOptions.sidebar_widget_expan_title='<img border="0" src="http://racklin.googlepages.com/expandall.gif" align="left"/>';

· // 测边关闭的 html 语法，可以是图 img 或任何 html 语法
BloggerExtOptions.sidebar_widget_collapse_title = '[-]';
// 使用图形而非文字实例
BloggerExtOptions.sidebar_widget_collapse_title='<img border="0" src="http://racklin.googlepages.com/collapseall.gif" align="left"/>';

// 要收纳的组件 id
BloggerExtOptions.sidebar_widget_expandable_ids = ['Label1','LinkList1','BlogArchive1'];
</script>

* 让网志作者的响应文章高亮度显示:
让您的回应和访客的回应拥有不同的 style 样式。只要您的网志中有放入 "关于我自已" 这个网页元素，一切都全自动了。没有放 "关于我自己" 元素的朋友也没关系，只要您填入您自已的 profile ID 即可。
Profile ID 怎么来，就自已写一篇响应文章，然后移到自已的名字上，那个 URL 会长这样 http://www.blogger.com/profile/00734471337083697849，最后面那个 00734471337083697849 就是您本人的 Profile ID 喽。
效果及参考这篇 把部落主人的话给擦得火亮 但您不用改 html template 及 css 。

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

·
<script>
// 让您本人的回应火亮火亮的
BloggerExtOptions.author_comment_highlighting = true;
// 您本人的 Profile ID ，空白则自动判断，但您必须要有 "关于我自已" 的元素。
BloggerExtOptions.author_comment_highlighting_profile = '';

// 火亮的 css style
BloggerExtOptions.author_comment_highlighting_style = { 'color': '#C30014', 'font-width': 'bold' };
</script>

* 卷标云 Label Cloud 功能:
让您只要您在您的 Blog 加入 NewBlogger 的网页元素(Page Element)下的"卷标(Labels)元素"即可拥有 "卷标云" 功能喽，就是这么简单容易。

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

·
<script>
// 标签云设定 // 开关
BloggerExtOptions.labelcloud = true ;
//blogger 内建 label 元素的 id
BloggerExtOptions.labelcloud_widget_id = 'Label1' ;

· // 最大字体级数
BloggerExtOptions.labelcloud_maxFontSize = 24 ;
// 最小字体级数
BloggerExtOptions.labelcloud_minFontSize = 10 ;
// 最大字体颜色 RGB
BloggerExtOptions.labelcloud_maxColor = [168,181,248] ;
// 最小字体颜色 RGB

BloggerExtOptions.labecloud_minColor = [0,0,0] ;
</script>

* Sidebar 侧边网页元素 Icon 图标功能:
侧边中的网页元素，只能显示文字，觉得太单调了吗，给它加个 Icon 图示吧。
你只要先用 Browser 的 View-Source 看您的 Blog 页面的原始码，然后找 class='widget ' 就能找出每一个测边功能的 id='xxx' ，然后把 id 填入设定中，再为它设个 Icon 图示就 OK 啦!!!

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

·
<script>
//侧边 Icon 功能 // true = 开 false = 关
BloggerExtOptions.sidebar_widget_icon = true;
// 使用图形而非文字实例
BloggerExtOptions.sidebar_widget_collapse_title='<img border="0" src="http://racklin.googlepages.com/collapseall.gif" align="left"/>';

· // 要组件 id 所对映的 Icon
BloggerExtOptions.sidebar_widget_icons= {'Label1':'<img src="http://racklin.googlepages.com/bkmrk_nav.gif" align="left"/>',

· 'Profile1':'<img src="http://racklin.googlepages.com/home_nav.gif" align="left"/>',
'BlogArchive1':'<img src="http://racklin.googlepages.com/tree_explorer.gif" align="left"/>',

· 'LinkList1':'<img src="http://racklin.googlepages.com/discovery.gif" align="left"/>'
};

</script>

* 加入社群书签功能:
让您的 Blog 文章提供各个 社群书签 的加入连结及图示。

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

·
<script>
//社群书签功能 // true = 开 false = 关
BloggerExtOptions.bookmark_buttons = true;
// 社群书签功能自定语法模板
BloggerExtOptions.社群书签功能='<span class="post-bookmarks">%BOOKMARK_BUTTONS%</span>';

· // 社群书签设定 仅列出一个，其它请见 source code.
BloggerExtOptions.bookmark_buttons_bookmarklets= [
[
'http://blogger.ext2.googlepages.com/hemidemi.gif',

· 'HEMiDEMi',
'http://www.hemidemi.com/user_bookmark/new?via=sticker&url=%URL%&title=%TITLE%&description=%DESC%'

]
];
</script>

* Source Code:
本项目是一个完全 open source 的项目，欢迎大家使用及修改开发。
Source Code: http://blogger-ext2.googlecode.com/svn/trunk/
若您亦写了 plugin ，请将您的 plugin link 给小弟，小弟把它加入我的说明中...

* 开发 plugin :
0.5b 后，blogger_ext2 已是一个 plugin base 的开发环境，所有在下写的扩充也都是以 plugin 方式挂入。
您可以很容易的一起设计 plugin , 请参考 DIY 利用 blogger_ext 扩充 Blogger 功能!

* 其它功能:
待续
…
欢迎大家引用及给小弟建议。

建议大家直接使用，而不需另存，这样小弟可以远程为您 debug 或改版，您的网站可实时更新及享用。

* Change Log:

网络

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

还没有评论。

发表评论

（必填）

（必填）