blogger 标签文章 - 李海鑫个人博客

(2013-7-29) 给blogger博客添加页面描述-head Description

编辑文章 没有评论 :

本文HTML永久地址doc

根据blogger官方使用搜索引擎优化 (SEO) 增加访问量,建议还是给blogger添加页面描述(head Description),当前新版的blogger支持帖子和首页增加页面描述的功能,下面分别介绍

1 首页|标签页|归档页增加描述

要创建您自己的博客首页搜索说明,只需转到 设置 > 搜索偏好设置,然后点击 说明 旁边的编辑即可显示文本字段。选择 ,填写本博客的描述文字,然后点击保存更改。下面截图是我目前博客描述

(2013-7-28)给blogger博客模板关闭版权组件-Attribution Gadget

编辑文章 没有评论 :

本文HTML永久地址doc

有时候给blogger挑选了模板,发现模板最下方的版权信息无法删除或者调整,那有没有其他的办法删除呢?

方法一:解锁方法

在html模板里找到

<b:widget id=’Attribution1′ locked=’true‘ title=” type=’Attribution’/>

修改为:

<b:widget id=’Attribution1′ locked=’false‘ title=” type=’Attribution’/>

然后保存模板,然后在 布局 里找到 attribution widget,单击 修改 链接,单击 删除 按钮

方法二:CSS隐藏法

(2013-7-28)给blogger博客自定义关键字-Meta Keywords

编辑文章 没有评论 :

本文HTML永久地址doc

关键字Meta Keywords 的重要性已经不像以前那么重要了,但是设置正确的 Keywords 还是对你的排名有利,本文通过在blogger/Blogspot 添加labels/Tags 作为Meta Keywords,我已经成功在这个博客部署好了,现在访问首页和帖子页面,你都可以看到类似<meta name="keywords" content="" />,下面是详细步骤:

(2013-7-26)给blogger博客调整帖子快速编辑链接

编辑文章 没有评论 :

本文HTML永久地址doc

为了方便在游览文章的时候,发现某些地址书写的不正确,或者格式不规范,需要在给文章添加快速编辑按钮,通过在 布局 > 博文 > 修改 > 勾选显示快速修改 ,然后在html模板里找到下面语句:

<b:includable id='postQuickEdit' var='post'>
    <b:if cond='data:post.editUrl'>
        <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
            <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
                  <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
            </a>
        </span>
    </b:if>
</b:includable>

修改为:

<b:includable id='postQuickEdit' var='post'>
    <b:if cond='data:post.editUrl'>
        <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg' rel="nofollow">编辑文章</a>
    </b:if>
</b:includable>

这样就可以使用文字链接替换默认的图片链接

(2013-7-25)给blogger博客自定义标题-title

编辑文章 没有评论 :

本文HTML永久地址doc


迄今为止,blogger博客系统为每个页面生成的标题(Title)依然为先显示博客名,再显示帖子名,这样不利于搜索引擎优化(SEO),文章标题关键字在博客标题之后,如果你要改善博客的SEO,用于下面步骤:

(2013-7-23)给blogger关闭标签页status-message消息

编辑文章 没有评论 :

本文HTML永久地址 doc

使用blogger作为博客系统的你们,有没有觉得打开标签页面的时候,有这样一句提示:

显示标签为"标签名称"的帖子。显示所有帖子

有点不协调

那么如何关闭它呢,以前我在前添加css语句调整不显示

 .status-msg-wrap { display: none !important; }

这样访问标签页面时候,就不会出现下图的格式

(2013-7-23)给blogger定制错误代码404(页面没找到)页面

编辑文章 没有评论 :

本文HTML永久地址 doc

1 什么是404页面

HTTP 404或Not Found错误讯息是HTTP的其中一种“标准回应讯息”(HTTP状态码),此讯息代表客户端在浏览网页时,服务器无法正常提供讯息,或是服务器无法回应且不知原因。404错误讯息可能与“server not found”(无法找到服务器)或其他类似讯息容易产生混淆。来源

(2013-7-20)给blogger添加联系表单功能

编辑文章 没有评论 :

本文HTML永久地址 doc

1 概述

对于一个blogger博客来说,已经有留言系统,可以方便博主与访问者交流,但是有时候访问者需要针对其他的方面联系,不便于公开留言,可以通过email与博主联系,只要在页面上放置邮箱地址,通过防止垃圾邮件的新方法公布邮箱地址,如果考虑到公开邮件不安全, 可以用添加一个联系表单页面,方法很多,国外有kontactr,这里我使用blogger自带的联系人表单

(2013-7-18)给blogger添加相关文章功能

编辑文章 13 条评论 :

本文HTML永久地址 doc

1 概述

为了方便访问博客的用户查看相关的文章,需要给博客安装一个相关帖子的功能,在这先感谢Hei Notes指导,给blogger添加相关文章的方案有很多,例如有国内的无觅和国外的linkwithin,而我使用blogger-related-posts

(2013-5-25)给blogger博客使用CSS自定义样式

编辑文章 2 条评论 :

CSS调整可以查看下面网站 https://github.com/sofish/typo.css/blob/master/typo.css

调整博客帖子里图片大小

本文HTML永久地址 doc

当图片大于600px时候,自动缩小为最大600px

.post-body img {
max-width:600px; 
//IE7、FF等其他非IE浏览器下最大宽度为600px;
//width:600px; 
//所有浏览器中图片的大小为600px;
width:expression(document.body.clientWidth>600?"600px":"auto"); 
//当图片大小大于600px,自动缩小为600px;
overflow:hidden;
padding: 5px;
//background: #f8f8f8;

}

关闭页面顶部的导航页面

.navbar { 
height: 0px;
padding: 0;
margin: 0;
height: 0px;
}

段落前空两个字

.post-body p {
text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
}

pre code样式表

.post-body pre {
font-size: 12px;
padding: 0;
margin-top: 20px;
border:1px dotted #f0f0f0;
border-top:1px solid #f0f0f0;
border-radius: 10px;
line-height: 20px;
//width: 600px;
overflow: auto;
overflow-Y:hidden;
background-color: #f8f8f8;
}

.post-body pre code {
margin: 0 0 0 10px;
padding: 10px 0;
display: block;
border: 0px;
background-color: #000;
border-radius: 3px;
}

.post-body code {
margin: 0 2px;
padding: 0px 5px;
border: 1px solid #ddd;
background-color: #f8f8f8;
border-radius: 3px;    
}

引用样式

.post-body blockquote{border-left:5px solid #f0f0f0; margin:15px 30px 0 10px; padding-left:20px}

标题样式

.post-body h1{font-size: 1.4em;}
.post-body h2{font-size: 1.3em;}
.post-body h3{font-size: 1.2em;}
.post-body h4{font-size: 1.1em;}
.post-body h5,h6{font-size:1em;}

配置目录

.toc {
//float:right;
background-color: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
}
.toc li{list-style-type: none;}

更多阅读右对齐

 .jump-link {text-align: right;}

关闭帖子评论订阅

.feed-links  { display: none !important; }

(2013-5-18)几款提供留言的网站

编辑文章 没有评论 :

这是我收集的几款给网站提供留言系统的第三方网站,我打算使用友言作为我的博客留言系统,主要原因使用blogger自带的留言和google+留言在国内访问都不流畅

本文HTML永久地址 doc

(2013-3-4)使用nginx反向代理blogger博客配置

编辑文章 没有评论 :

概述

本文详细描述了如何在Centos下安装nginx反向代理blogger博客,这样就可以从国内访问blogger平台的博客

本文HTML永久地址 doc

ningx安装

环境配置

yum install -y \
gcc gcc-c++ glibc glibc-devel glib2 glib2-devel unzip make automake autoconf \
ncurses ncurses-devel libjpeg libjpeg-devel libpng libpng-devel \
freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel bzip2 \
bzip2-devel curl curl-devel e2fsprogs e2fsprogs-devel krb5-devel \
libidn libidn-devel openssl openssl-devel openldap openldap-devel \
nss_ldap openldap-clients openldap-servers xinetd sudo \
pcre pcre-devel subversion

(2012-2-26)如何使用markdown书写blogger

编辑文章 2 条评论 :

本文HTML永久地址 doc

如果你的博客存放在blogger上,又想使用markdown标签书写博客,但是到目前为止我还没找到blogger编辑界面支持markdown语法的选项,只好通过间接的方式实现了,下面仅仅介绍我自己的方式,大家有更好的方式请给我留言

  1. 使用google dosc书写博客内容(文件名用【L博客】+(发布时间)+帖子标题,其中L是博客编码,区分那个博客,例如:【L博客】(2012-2-26)如何使用markdown书写blogger)具体可以看一下我这篇文章我的博客内容CSS实例 markdown doc地址
  2. 然后复制到 在线markdown转换的网站 界面, 这样可以实时看到效果,调整细微错误(记得调整后复制会google Docs备份)
  3. 最后复制粘贴HTML到博客编辑界面发布

我发现这样做有2个好处,一方面不必担心写博客的时候游览器崩溃(google docs是实时备份的),导致写了好久的数据丢失。另一方面可以使用google强大的搜索引擎快速查询自己的资料

让blogger更好的兼容markdown生成的html

其实只需要做下面简单的操作,在新建帖子的时候

  • “换行” 设置为使用 < br> 标记
    选择这个的原因是因为markdown生产的html有很多空格,就不会自动转换为换行,也不会转换为< br>
  • “撰写模式” 设置为 解译型 HTML

(2011-10-8)我的博客内容CSS实例

编辑文章 没有评论 :

本文HTML永久地址 doc

这个是目前本博客通过google drive书写markdown格式发布博客

标题(h)

head 1

head 2

head 3

head 4

head 5
head 6

普通段落(p)

博客,又译为网络日志、部落格或部落阁等,是一种通常由个人管理、不定期张贴新的文章的网站。博客上的文章通常根据张贴时间,以倒序方式由新到旧排列。许多博客专注在特定的课题上提供评论或新闻,其他则被作为比较个人的日记。一个典型的博客结合了文字、图像、其他博客或网站的链接、及其它与主题相关的媒体。能够让读者以互动的方式留下意见,是许多博客的重要要素。大部分的博客内容以文字为主,仍有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题。博客是社会媒体网络的一部分。

格式段落(p)

博客,又译为网络日志(strong)部落格或部落阁(italic) 等,是一种通常由个人管理(strike)、不定期张贴新的文章的网站。博客(link)上的文章通常根据张贴时间,以倒序方式由新到旧排列。许多博客专注在特定的课题上提供评论或新闻,其他则被作为比较个人的日记。一个典型的博客结合了文字、图像、其他博客或网站的链接、及其它与主题相关的媒体。能够让读者以互动的方式留下意见,是许多博客的重要要素。大部分的博客内容以文字为主,仍有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题。博客是社会媒体网络的一部分。

引用(blockquote)

博客,又译为网络日志、部落格或部落阁等,是一种通常由个人管理、不定期张贴新的文章的网站。博客上的文章通常根据张贴时间,以倒序方式由新到旧排列。许多博客专注在特定的课题上提供评论或新闻,其他则被作为比较个人的日记。一个典型的博客结合了文字、图像、其他博客或网站的链接、及其它与主题相关的媒体。能够让读者以互动的方式留下意见,是许多博客的重要要素。大部分的博客内容以文字为主,仍有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题。博客是社会媒体网络的一部分。

无序列表(li)

  • 苹果
  • 荔枝
  • 香蕉

有序列表(ol)

  1. 苹果
  2. 荔枝
  3. 香蕉

表格(table)

123
ABC

或者使用

Item Value
Computer $1600
Phone $12
Pipe $1

下面的格式需要Markdown Extra支持,可以查看markdown在线网站资源汇集 那些支持扩展功能

源码

源码在markdown格式可以使用tab个空格,但是在google drive下需要使用4个空格替换才行

lync http://blog.lihaixin.name

图片

牡丹

视频

视频嵌入第三方的。

(2011-2-23)给blogger添加页面加载时间功能

编辑文章 没有评论 :

给blogger模板添加页面加载时间:

本文HTML永久地址 doc

在模板最前面添加如下代码:

<script type="text/javascript">
var begin = new Date();
var page_start = begin.getTime();
</script>

在模板最后没添加如下代码:

<script type='text/javascript'>
var end = new Date();
var page_stop = end.getTime();
var load_time = page_stop - page_start;
document.write('LoadTime:'+load_time/1000);
</script>

这样就可以通知页面加载时间,下面是返回当前时间:

<script type='text/javascript'>
var d = new Date(); 
document.write(d.getHours()+':'+d.getMinutes());
</script>

另外也可以通过测试网站完全加载时间 doc查看完整完全加载需要多长时间,好多网站速度有一定的了解

(2010-8-16)给blogger添加网页花絮(snap shots)

编辑文章 没有评论 :

看到有些网站提供超链接网页花絮功能,如下图所示:

本文HTML永久地址doc

snap网页花絮

那么如何获得此效果呢,很简单,首先到snap.com注册帐号,然后绑定网站,会提供你一个js文件,粘贴到模板之前就可以了。例如下面是我的粘贴内容

<script type="text/javascript" src="http://shots.snap.com/ss/3ccfe52a4b062791502dc9fd504021f1/snap_shots.js">
 </script>
 </body>

我这个博客没有添加此页面花絮,因为他与我的图片光亮效果有冲突


2013年7月9日更新:好像现在网站不在提供此服务了。

(2010-7-29)使用nginx搭建一个URL转发系统

编辑文章

目的: 看到很多朋友使用类似http://blog.lihaixin.name/go/jd 进行网址跳转,wordpress有相应的插件,而我使用blogger作为我的博客系统,使用nginx反向代理从国内访问,那么我可以使用nginx 反向代理goo.gl短网址。

本文HTML永久地址doc

goo.gl设置:

在URL输入你的需要短网址的全网址,系统会自动为你生成一个短地址

goo.gl设置

nginx重定向:

location /go/ {
            proxy_pass              http://goo.gl/;
            proxy_redirect          off;
            proxy_set_header        X-Real-IP       $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_intercept_errors  on;
              }

如果goo.gl过滤你的网址(很少一部分这个转发系统以为你的网址是病毒欺诈的内容)可以通过下面的具体指向

location = /go/jd {
         rewrite ^ http://click.union.jd.com/JdClick/?unionId=1298&t=1&to=http://www.jd.com/ permanent;
         }

这样配置后,就可以使用你自己的域名

http://blog.lihaixin.name/go/MD52z访问我的博客 http://blog.lihaixin.name/go/jd 访问我的京东联盟网站

(2010-5-2)在blogger上添加SyntaxHighlighter效果

编辑文章

安装SyntaxHighlighter 在blogger上 官方网站 :http://about.me/alexgorbatchev

本文HTML永久地址 doc

操作如下:

在模板

</head>

前添加如下代码:

<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushRuby.js"></script>
 <script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://file.blogger.xingke.info/js/syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://file.blogger.xingke.info/js/syntaxhighlighter/styles/shThemeEmacs.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://file.blogger.xingke.info/js/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.all();
</script>

(2010-4-13)关闭blogger快速编辑按钮

编辑文章

本文HTML永久地址doc

参考资料

http://www.bloggerplugins.org/2010/04/remove-quick-edit-and-wrench-on-blogger.html

(2010-4-13)关闭blogger顶端的Navbar导航条

编辑文章 没有评论 :

新版的blogger系统提供关闭Navbar导航条选项

本文HTML永久地址doc

在 Blogger 界面的布局标签中对其进行配置。只需在 Navbar 页面元素上点击编辑链接即可。

Navbar 页面元素

然后可以选择关闭

Navbar配置

本文HTML永久地址doc

参考文件:

https://support.google.com/blogger/answer/42269?hl=zh-Hans&ref_topic=10424