-->
  • 丑博客儿: 教程
  • 返回主页 教程 技巧 资源 杂谈 关于

    • 显示标签为“教程”的博文。显示所有博文

    2013年4月11日星期四

    blogger模板编辑器升级

    Blogger的模板编辑器最近得到升级，界面更加友好，功能得到提升。

    1、编辑器界面增加了行数的现实，语法高亮，代码自动缩进，允许代码折叠。
    2、html编辑器界面扩大到整个block，不再以伪悬浮窗的方式出现。增加快捷按钮，比如[Jump to widget]可直接跳转到指定的widget代码处，[Preview template]方便的预览模板改动，[Format template]格式化模板的代码使之更规范更便于阅读，[Revert widget templates to default]回复默认widget代码，等等。
    3、快捷键：模板代码中文本的查找直接使用Ctrl+F，单个替换使用Ctrl+Shift+F，全部替换使用Ctrl+Shift+R。

    //经测试，尚存bug，期待改进。

    五个非 于 07:42:00 发表，转载请注明出处。 添加评论

    标签儿: ,

    2013年3月20日星期三

    blogspot博客采用多说评论的常见问题及解决办法

    废话不多说，直接说blogspot博客采用多说评论的常见问题及解决办法。

    问题一：多篇文章显示为同样的评论

    问题分析：如果我们在blogger站上发表文章的时候不去指定文章链接，那么blogger默认的文章链接格式就是类似于
    http://www.choublogger.com/2013/03/blog-post_5044.html
    http://www.choublogger.com/2013/03/blog-post_9.html
    这样的链接。如果多说后台设置不当，这样的链接会被当作一片文章的不同分页，因此显示为一样的评论。

    解决方法：登录多说评论的管理后台，将设置中的 多页文章网址替换规则 设置为 不使用替换规则 即可。

    问题二：手机页面和PC桌面浏览同一篇文章，显示的评论不同

    问题分析：手机浏览blogger博客的时候，会被跳转到网页地址后面跟上了 ?m=1 的字样，这就导致多说误以为这和原文链接是两篇不同的文章，因此显示了不同的评论。

    解决方法：登录多说评论的管理后台，将设置中的 忽略网址“?”后面的参数 填入 m 即可。

    问题三：已经存在的多说评论指向错误网页，但是评论链接的title属性还是正确的

    问题分析：未知，偶尔会出现，且多说后台无法更改评论内容及链接

    解决方法：加载多说评论框时，最好把所有的参数都加上，核心参数包括 data-author-key data-thread-key data-title data-url 这四个，如果有上述问题，这四个参数可帮助解决问题。

    五个非 于 21:12:00 发表，转载请注明出处。 添加评论

    标签儿: ,

    2013年3月18日星期一

    blogger博客的robots.txt的自定义的写法

    推荐的blogger博客的robots.txt的写法，不要问我为什么。

    # Blogger Sitemap generated on 2013.01.31
    User-agent: *
    Disallow: /search
    Allow: /
    Sitemap: http://www.choublogger.com/atom.xml?redirect=false&start-index=1&max-results=500
    Sitemap: http://www.choublogger.com/feeds/posts/default?orderby=UPDATED

    五个非 于 20:59:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年3月16日星期六

    推荐一个skydrive的外链工具

    前面曾经提到，如果采用了一个blogger模板，其中很多图片来自墙外，那就需要修改这些图片到国外的稳定未屏蔽图床，或者干脆国内的图床。

    其实这时候采用skydrive是个比较平衡的方法，skydrive来自微软，鉴于微软与我共保持了强大而稳定的政府关系，skydrive还是始终活在大墙内外的。

    skydrive为每个用户提供了高达25G的免费空间，不用真浪费了。但是我们从skydrive分享的图片是拿不到外链地址的，damn it，好在功夫不负有心IT攻城狮，网上有不少转换skydrive外链的工具。我一般用的是这款

    http://www.crifan.com/files/tool/html/genSkydriveExtLink.html

    五个非 于 20:53:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年3月10日星期日

    如何在模板中区分主页和其他页

    为了区分主页和非主页，可以使用这段代码

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    这里放置主页才需要的内容
<b:else/> 
    <a expr:href='data:blog.homepageUrl' title='Home'>返回主页</a>
</b:if>

    五个非 于 07:34:00 发表，转载请注明出处。 添加评论

    标签儿: ,

    2013年3月8日星期五

    删除quickedit的扳子图标

    直接介绍过，可以如何隐藏quickedit快速编辑的扳子图标，不过这仍然是网站的死链之一。然而还有个另外的方式彻底解决苦恼。即将模板代码中所有的
    <b:include name='quickedit'/>
    都改为
    <!-- <b:include name='quickedit'/> -->

    五个非 于 20:23:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年3月6日星期三

    一个蹩脚的相关文章调用

    所谓蹩脚，是因为这个相关文章调用的代码及其不成熟，只能调用当前文章的最后一个标签的相同标签文章的最近5篇。

    首先在</head>之前方这段代码

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
        function cat(json){
            var div = document.getElementById(&quot;re_po&quot;);
            var myhash = {};
            div.innerHTML = &#39;相关文章&#39;
            for (var i = 0; i &lt; 5; i++) {
                var entry = json.feed.entry[i];
                var posttitle = entry.title.$t;
                var posturl = entry.link[4].href;
                if (&#39;<data:blog.url/>&#39; != posturl){
                            div.innerHTML = div.innerHTML+&quot;&lt;li&gt;&lt;a title=&#39;&quot;+posttitle+&quot;&#39; href=&#39;&quot;+posturl+&quot;&#39;&gt;&quot;+posttitle+&quot;&lt;/a&gt;&lt;/li&gt;&quot;;
                }
            }
        }
    </script>
    </b:if>

    - 阅读更多 -

    五个非 于 23:14:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年2月28日星期四

    代码高亮的其他配色

    前面提到了如何将代码高亮显示，这里说一个其他配色的高亮代码。只需要修改老方法的加载配色的一句代码：

    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

    将上面这句替换为下面的任何一句皆可，每一句代表一种配色方案：
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    - 阅读更多 -

    五个非 于 09:19:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年2月22日星期五

    控制手机页面widget的隐藏或显示，或者显示特定代码

    我们可以通过添加参数使得widgets不显示在博客的手机页面中，比如这段代码中 mobile='no' 则为隐藏，另外mobile的值也可以是'yes'或者'only'

    <b:widget id='Text1' locked='true' mobile='no' title='chouBlogger.com' type='Text'>

    另外，我们也可以在模板的HTML中使用这样的语法来区分手机页面或者PC
    <b:if cond='data:blog.isMobile'>
        这句话只显示手机页面中
    <b:else/>
        这是pc浏览时候显示的
    </b:if>

    这写小技巧适合自己修改手机页面的朋友使用。一般来说，对于blogger上的博客，假使域名为   www.choublogger.com，那么其手机网页是www.choublogger.com/?m=1

    五个非 于 21:45:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年2月16日星期六

    如何移除模板中自带的来自blogger的css

    和前一篇文章类似，blogger模板里会自动加入诸如
    <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
    一类的css调用，而这些css是来自blogger的，不翻墙没法拿到啊亲。另外这也是blogger后台自动添加的，所以用老办法将这些调用语句注释掉！

    首先还是要到博客管理后台的模板HTML编辑处，找到如下代码
    <b:skin><![CDATA[
    然后再找到如下代码
    ]]></b:skin>

    - 阅读更多 -

    五个非 于 16:29:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年2月14日星期四

    如何移除blogger自带的javascript

    如果查看一个Blogger建立的博客的源代码，9成会发现类似这样的语句
    <script type="text/javascript" src="//www.blogger.com/static/v1/widgets/4127629733-widgets.js"></script>
    很不幸，这是blogger自动添加的，这是在墙外的，你在博客后台的HTML编辑器里也找不到这样的语句。

    为了加快网页加载速度，只好取巧来注释掉这些js的调用了。仍然到博客管理后台的模板的HTML编辑处，找到如下代码
    </body>
    然后替换成如下代码，注意是替换

    - 阅读更多 -

    五个非 于 16:23:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年2月10日星期日

    另外一个语法高亮的方法

    首先需要修改博客的HTML，在</head>之前加入下面这些语句：

    <!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
    - 阅读更多 -

    五个非 于 09:07:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年2月4日星期一

    使用prettify对代码进行语法高亮设置

    prettify是google提供的一款源代码语法高亮着色器，主页见 https://code.google.com/p/google-code-prettify/ 。只要在blogger模板里加几行代码，就可以实现在发表文章时候的代码语法高亮，并且提供若干种模板供使用。

    prettify提供了css和js供下载，可放于自己的服务器，下载地址为 https://code.google.com/p/google-code-prettify/downloads/list ，另外也可以使用google code服务器上的代码。

    打开blogger模板编辑，在<head>与</head>之间添加如下语句：

    <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>

    修改<body>为<body onload='prettyPrint()'>并保存模板。

    - 阅读更多 -

    五个非 于 07:37:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年1月29日星期二

    锁定后台Layout中小组件的位置

    后台Layout中小组件都是可以鼠标拖动换位置的，如果固定某些小组件使其无法拖动呢，举个例子。

    博客侧边栏的友情链接是个小组件，对应后台Template的HTML代码中的

    <b:widget id='LinkList1' locked='false' title='链接客儿' type='LinkList'>

    把locked='false'改为locked='true'就可以了，保存看看。

    五个非 于 07:39:00 发表，转载请注明出处。 添加评论

    标签儿: ,

    2013年1月25日星期五

    自定义评论系统之整合多说评论

    我们需要从多说获取两类数据，一类是评论和评论框需要被用来显示在单文章页面上，一类是评论数显示在首页文章列表内。

    多说提供的通用代码如下：

    <!-- Duoshuo Comment BEGIN -->
    <div class="ds-thread"></div>
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"你的多说二级域名"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
        || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- Duoshuo Comment END -->

    详细区分一下，<div class="ds-thread"></div>才是评论和评论框，下面大段的javascript代码是获取评论用的。
    - 阅读更多 -

    五个非 于 07:32:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年1月23日星期三

    自定义评论系统之定位篇

    Blogger自带的评论系统不太友好，其他给Blogger用的第三方评论系统在国内也很不稳定。修改博客的评论系统迫在眉睫，国内有好多很好的第三方社会化评论系统，比如多说、友言、贝米、评论啦、灯鹭。我现在的评论系统就是采用的多说，基本上符合常见的评论风格了吧，首页显示评论数，单页显示所有评论。

    先定位原先的评论，这是第一步。为了找到哪儿是评论，先要打开评论（废话！）。到管理后台的Settings - Posts and comments，将Comment Location修改为Embeded，其他的选项也可。

    定位工作我用的工具是firefox + firebug，chrome更方便，直接审查页面元素即可。打开自己的博客，找两个地方，一是首页显示评论数的地方，另一个是单页显示所有评论以及评论框的地方。重要的是看，这些地方位于哪个div里？这个div的id和class分别是什么。我的是<span class="post-comment-link">以及<div id="comments" class="comments">。

    返回博客后台的Template，点击Edit HTML按钮，在弹出的窗口中选中Expand Widget Templates，然后查找class='post-comment-link'以及class='comments'，此处为单引号。

    - 阅读更多 -

    五个非 于 13:11:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年1月21日星期一

    如何隐藏quickedit快速编辑的扳子图标

    我们在Blogger博客后台的Layout里可以把Post的quickedit图标隐藏，但是侧边栏的图标还在！奶奶的，关键这个图标在墙外！

    告诉大家隐藏所有页面的扳子图标的简单办法，注意只是隐藏，元素仍停留在页面，修改HTML，在顶部css出添加如下代码：

    .quickedit{display:none;}

    五个非 于 07:41:00 发表，转载请注明出处。 添加评论

    标签儿: , ,

    2013年1月19日星期六

    分页导航的代码的简化版本

    之前提到过一个分页导航的代码，可以放在HTML/JavaScript小插件中使用，但是需要调用其他网站的js文件，这是我们不想看到的。特把自己的修改版拿出来给大家观赏：

    <style type='text/css'>
#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {
color:#333333;
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px 7px;
background-color:#FFFFFF;
}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333;
border: 1px solid #cccccc;
padding:3px 7px;
background-color:#cccccc;
margin:0 3px;
}
.showpageOf {
color:#333;
text-decoration:none;
padding:3px 7px;
margin: 0 3px 0 0;
}
    - 阅读更多 -

    五个非 于 07:27:00 发表，转载请注明出处。 添加评论

    标签儿: ,

    2013年1月17日星期四

    三个Blogger技巧/模板网站

    http://24work.blogspot.com/
    http://www.bloggerplugins.org/
    这都是介绍Blogger博客的技巧的网站

    http://www.way2blogging.org/
    这里有Blogger的小插件、教程以及模板

    五个非 于 23:26:00 发表，转载请注明出处。 添加评论

    标签儿: , , ,

    2013年1月15日星期二

    分页导航的代码

    Blogger没有自带分页导航，网上搜得的代码。首先在博客layout中添加HTML/JavaScript的组件，然后把下面的代码复制进去。效果见本站，略作修改。

    <style type='text/css'>
#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {
color:#333333;
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px 7px;
background-color:#FFFFFF;
}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333;
border: 1px solid #cccccc;
padding:3px 7px;
background-color:#cccccc;
margin:0 3px;
}
    - 阅读更多 -

    五个非 于 23:10:00 发表，转载请注明出处。 添加评论

    标签儿: ,