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

2017年8月8日星期二

2017年8月Blogger各项优化


2011年2月的时候,总结过一次Blogger的各项优化——《Blogger优化大全》,然而时过境迁,随着Blogger的不断改版,以及本人的不断摸索,最近在很多方面进行了各项修改,在这里备份一下,方便以后使用:

1、为 Blogger添加版权声明和文章链接

虽然本Blogger很多东西是网络上CPOY来的,但是添加个版权声明更加的正式一些,同时以后也要注意,文章末一定吧原文出处标注出来。
★ 具体的做法是这样的:为 Blogger添加版权声明和文章链接

2、去掉了Blogger超链接的下划线

Blogger侧边栏文章链接、标签等等超链接的文字都是带有下划线的,看起来很不爽,为此进行了修改,去掉了下划线,颜色方面只保留了本身颜色以及鼠标悬停的颜色。
★ 具体的做法是这样的:取消Blogger超链接的下划线

为Blogger添加畅言评论

Blogger的评论很难得到显示一次,所以使用Blogger的需要安装第三方的评论系统,最近多说系统停止维护,只好换到了搜狐的畅言,以下为使用方法:
1、找到后台如下代码:
<b:includable id='comments' var='post'>
2、在上边代码的后边直接添加畅言的通用代码:
<div expr:data-thread-key='data:post.id' expr:data-title='data:post.title' expr:data-url='data:post.url' id='SOHUCS'/>
<script charset='utf-8' src='https://changyan.sohu.com/upload/changyan.js' type='text/javascript'/>
<script type='text/javascript'>
window.changyan.api.config({
appid: 'cysRneaN9',
conf: 'prod_4b61a03b3f6accb8213ddd3f2059de03'
});
</script>
3、以上代码已经把SourceID进行了修改,Blogger可以直接使用了,如果需要到畅言的后台进行各种各样的定制和修改。

为 Blogger添加版权声明和文章链接

发布一篇文章之后可以在文末自动生成一个该文的链接,并且配合版权声明。本博客关于Blogger技术方面的文章大部分都是COPY来的,放个版权声明很有意思啊,包括本文基本都是COPY来的,以后尽量养成好习惯,在文末添加文章来源,但愿来源都是原创的。OK,开始吧:
1、首先找到以下代码:
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
2、在其之后添加如下代码就好了,根据需要自己可以修改颜色和尺寸的内容。
<!-- 版权声明开始 -->
<b:if cond='data:blog.pageType == "item"'>
<div style='background-color: #F2F2F2; padding: 5px; margin: 10px; border:1px solid #000000;'>如非注明,<a href='http://blog.mifia.tk'>mifia的Blogger</a>文章均为原创。转载请注明注明来自<a href='http://www.mifia.com.cn'>mifia的Blogger</a>和链接。
<p>本文地址:<a href=''><script>document.write(location.href)</script></a>
</p>
</div>
</b:if>
<!-- 版权声明结束 -->
3、本文来源:科研动力-为Google Blogger添加自动版权声明和文章链接的方法

取消Blogger超链接的下划线

当使用做链接时,默认情况下,当鼠标放在链接上面时,会有下划线
如何去除下划线?
text-decoration是控制下划线是否显示的属性:
1.不对链接进行操作时:
a:link{text-decoration:none;}//不显示下划线
a:link{text-decoration:underline;}//显示下划线

2.访问链接后:
a:visited{text-decoration:none;}//不显示下划线
a:visited{text-decoration:underline;}//显示下划线

3.鼠标悬停在链接上时:
a:hover{text-decoration:none;}//不显示下划线
a:hover{text-decoration:underline;}//显示下划线

4.鼠标点击链接时
a:active{text-decoration:none;}//不显示下划线
a:active{text-decoration:underline;}//显示下划线
注意:
当为链接的不同状态设置样式时,请按照以下次序规则:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

2017年8月7日星期一

为Blogger增加返回顶部的按钮

这个比较的简单,我是加到<body> </body>中的,以下代码加上就好了:
<a href='#top' style='position:fixed; right:60px; bottom:20px;'><img src='http://blog.mifia.com.cn/blogger/gotop.png'/></a>

建立Blogger内置搜索

Blogger内置搜索的建立,可以在小工具那里直接使用博客搜索,但是样式很不好看,所以我们自己建立博客内搜索,样式参照了Google Cloud官方Blogger的样式,最终效果见本Blogger右侧的搜索栏。因代码不是很熟悉,可能有多余的代码出现,如果大家看到,希望可以指正下,把代码精简下,好了开始吧:

1、建立自定义HTML的小工具,写入一下内容:
<div class='searchBox'><form action="http://www.mifia.com.cn/search" style="display:inline;" id="searchthis" method="get">
<input placeholder='Search blog ...' type="text" id="b-query" name="q" title='Search This Blog' type='text'/>
</form></div>

2011年3月2日星期三

Blogger侧边栏优化之Css Sprites应用

   本身Blogger是一直被封了的,虽然经过绑定域名CNAME的方式可以浏览Blogger了,可是速度总是不很理想,闲了就搜索关于博客速度优化的帖子看,能做到都基本做了,做不了的始终是无法下手,代码盲啊,复制什么的还可以。

   我的博客上的图片有点多了,这肯定增加了Http请求,无疑会拖慢显示速度,知道Css Sprites两年多了,始终不会使用啊,前两天无意中看到了一篇介绍,代码都贴出来了,反复的实验,终于被我给搞成功了,哈哈对于代码盲来说是非常痛苦的事情,目前能做到只是把侧边栏里的Feed图标等做了优化,也就是5张小图标合成一张图片来显示,这样以前5次Http请求现在变成了1次,当然了一张图片肯定是要大一些的,没办法啊,下面把本人的实践贴出来:

2011年2月15日星期二

Blogger优化大全


目前使用Blogger的人是越来越少了,很多以前的Blogger都转到了WordPress,后来的很多网友干脆直接就Qzone,新浪,搜狐了,可是依然有很多网友在坚持着,也有很多新来的Blogger,这里就把建立Blogger后需要做的优化归纳下,一来大家互相学习,而来为自己以后查找方便,一大堆代码谁也懒的记忆。

1、Blogger优化之域名

建立Blogger后,会得到一个http://×××.blogspot.com的地址,不是很好记不说,目前Blogspot在国内是无法访问的,方法呢就是要搞一个属于自己的域名,好处多多啊,绑定Blogger后就可以用自己的域名访问了,例如本博客:http://blog.mifia.tk/.

2、Blogger优化之标题

blogger和WordPress有个共同的缺点,使用了网站名称在页面标题前的内容页标题格式。且不说SEO,这样格式的标题带来的用户体验非常差。

修改方法很简单:参考这篇文章——为Blogger做标题优化

2010年6月24日星期四

关于留言板的说明

听了OceanBan的建议,建立一个独立的留言板页面,由于本人对代码这个东西是一窍不通的,留言那里的各项设置真的和头大。

网上找到了DISQUS的留言系统,一个非常傻瓜的系统,马上安装、建立页面、允许评论、实验,竟然下边没有嵌入的,反复测试,就是没有。我估计只有在帖子页面才会出现,独立页面无法嵌入?肯定有办法,目前不可知。于是点评论使用Blogger自有的评论系统,没有弹出应该有的评论页面,估计是DISQUS安装后取代了原来的评论系统了,我实在是没招了,只有发表一篇文章做留言板了,最笨的办法了,哈哈……如果有朋友知道在独立页面如何解决DISQUS的嵌入问题的话,还请赐教,谢谢啊……

独立的留言页面见这里:http://blog.mifia.com.cn/p/comments.html

2010年6月22日星期二

Blogger侧边栏标题出问题了

今天由于要改动Blogger侧边栏小工具内容,当改好了以后竟然无法保存了,提示“必填字段不得为空”,改动的是HTML/JavaScript 小工具的内容,如果非得加个标题的话,那真的是难看死了,比如大家的广告小工具,搜索小工具,都加个标题吗?Blogger怎么想到啊,还是我这里出了问题了,大家看看图:

2010年6月20日星期日

让文章标签分两列显示

最近呢,一直被标签云那里的显示所困扰,标签那里以列表显示可以很快的显示,而以标签云的方式显示(Blogger已经支持标签云),则要停顿一下,我估计是要调用Blogger的JS,由于Blogger被封的缘故,源于Blogger的JS显示是很慢甚至出现错误的,看到很多WP博客那里有用列表显示,分成两列或3列显示,在HTML里编辑了半天也对不齐,就想一定是有办法,结果翻墙后在一台湾哥们的Blogger那里找到了,由于被墙的缘故就不发台湾网友的地址链接了,方法如下:

首先进入Blogger后台,备份你的模本,这是基本常识了,勾选扩展窗口小部件模板,找到以下这一行:
<b:widget id='Label1' locked='false' title='文章分类' type='Label'>
或是查询label这个关键字,按Ctrl+F就会跳出查找框的:)

2010年6月17日星期四

Blogger博客归档的建立

自从Blogger封掉后,博客归档那里总是显示不大正常,表现为以树形结构展示时无法展开和收缩,严重影响博客的美观度,于是到网上搜啊搜,可是真的不好找,到处是关于WP的安装插件法,功夫不负有心人啊,终于翻墙在一个英文博客那里找到了方法,借助Google翻译的帮助,理解了他的意思,其实也很简单就是本人E文太差了,哈哈……以后得好好学习了……这个博客归档也就是文章列表。

这里的做法是不在侧边栏里展示了,做一个单独的页面充当博客归档,然后在导航那里做个页面内的链接,WP的很多博客都采用这样的做法,也避免了侧边栏过于长了(文章太多的时候)

下面将做法公布如下:

2010年6月11日星期五

让Blogger兼容IE8

X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循指令。对于多数网站来说,它是首选的兼容性模式。
目前IE8尚在测试版中,所以为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
这样我们才能使得页面在IE8里面表现正常!

本文来自网络,用于学习!

2010年6月7日星期一

Blogger改版喽!

      本博客使用默认的白色模板大约有一年了吧,心中总想折腾下,可想着白色模板加上图片少加载速度会快些,一直这样放着没有更换,可看着一个一个Blogger那么的漂亮,心中很痒痒的说,终于按奈不住,狂搜了一番,找到了目前的这个模板,叫什么名字忘了,反正都是拿来主义,一旦到我手里马上标上mifia的标记,这东西就是哥们的了,然后就是修修改改,图片放到PICASAWEB里了,目前可以显示,如果被墙了在说换地方吧,PICASAWEB有6个服务器,所以DNS查询次数多,估计显示要慢,目前发现还可以,就是打开得刷新一下,马上就可以显示,不刷新就慢慢的好久不开,不知道什么原因啊。
       现在还有4个地方很让我纠结:
  • 头部LOGO图片,整了半个多小时,现在看着还是不大舒服,就是头部那个"mifia的Blogger的图片",喜欢设计的朋友帮帮忙看看如何配色以及图片如何改改,谢谢大家

2009年4月12日星期日

去掉Blogger中默认的图片边框

blogger默认的图片格式是有边框的,但是大多数人都不是很喜欢这一功能,那么我们怎样做才能去掉这一边框呢?

具体方法如下:

1、在Blogger模版代码中搜索如下CSS特征标记:
.post img { 2、仔细查找代码,找到"border"的属性,一般情况下都是"border:1px",只要将它改为"border:0px"就可以去掉图片边框了。

不过网上提供的很多自定义模版都是默认将这一特征去掉了的,如果你属于这种情况,要让图片回到原来显示边框的状态,只要将上述语句补上即可。但要设置图片边框的话,最好使用"padding"属性将图片和边框之间空出一定间距,这样效果会更好一些。

本文来自: 博客职业组

2009年3月20日星期五

为Blogger做标题优化

很早就想改了,今天在Luke瞎折腾发现了这个方法,大家可以举一反三改成其他的形式。

演示:
Blogger默认显示单篇文章页面时标题栏是Blogger的名称在前,页文章名在后。比如:
“mifia的Blogger-为Blogger做标题优化”
更改后则变成文章名在前,Blogger名称在后(听说这样有利于搜索引擎的排名):
“为Blogger做标题优化-mifia的Blogger”
实现的方法很简单(修改模板前请务必备份原模板):

在 控制台-布局-修改HTML 中 查找如下代码:
<title><data:blog.pageTitle/></title>
将之替换为:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
然后就保存模板,看看效果吧。

2009年3月18日星期三

解决利用bug去除Navbar后blogspot的小bug

上次讲了如何利用bug让blogspot彻底摆脱Navbar,但是留了点尾巴,就是利用这个bug以后还会有一个新的小bug出现。不知道后大家自己发现这个bug没有呢?

其实就是你的博客此时无法判定打开博客页面的人是不是作者本人了。所以一律给页面元素加上了快速编辑按钮,导致一般访客看博客的时候显得非常不工整。 唯一的解决办法就是:

要删除下面这个代码才行,不然就有个快速编辑的XX在上面~
<b:include name='quickedit'/>
搜索一下,把找到的都删除,保存。

2008年11月13日星期四

关于如何订阅RSS Feed

通过IE浏览器直接订阅

1 如果您使用的是IE7.0 浏览器,可以通过以下步骤简单的订阅当前页面的RSS Feed:

首先,点击状态栏右边的RSS标识,或者点击旁边的三角箭头,再点击RSS Feed或者RSS Comments Feed(如果您想订阅当前网站的评论的话)。

接着,如果网页可以正常显示,点击“订阅该源”,然后会出现弹出窗口,您可以修改名称和存放的位置,点击“订阅”。至此,订阅成功。如果页面无法正常显示,那么就需要通过下面其他的方法订阅。

浅议增加RSS订户的50个简易方法

每日博客技巧发表了一篇《50 Simple Ways to Gain RSS Subscribers》,刀客征途翻译了原文的前面25个技巧,译文叫做《50个简单方法获得RSS订阅用户(一)》。原本mifia的Google也打算翻译的,但是看到已经有人翻译了,就作罢。

我对这50个方法做了些研究和尝试,发现大多数方法都的确是很简单很实用的,但是这些方法未必每一种都适合您。只要有利于增加 RSS Feed 的订阅数量,我都会尝试,希望您也会尝试。

1、弄一个大大的 RSS 图标

mifia的Google的RSS图标够大了吗?这个我还得想想。

2008年9月25日星期四

16个扩大博客影响力的有效方法

你是否期待着你的博客蒸蒸日上,你是否热衷于建立一个大型的读者社区,甚至成为一个全职的职业博客作家,这些都需要博客有更大的影响力和更大的声誉,这里就总结了一些有效的方法,通过这些方法可以逐步扩大你博客的影响力,使其逐渐成为一个专业的媒体或内容平台。

  虽然“内容建设”依然是博客成功的关键因素,但是还有一些技巧可以增加博客的影响力,比如用户产生内容、互动资源等等。建立一个博客网络也可以扩大博客的品牌和声誉,这需要和其它的博客建立一些相关项目进行改善。以下是16个扩大你的博客影响力的方法,请注意,内容始终应该是一个博客最关键的地方,其次才是一些额外的技巧。