2012年10月17日星期三

[原创][教程] 给部落格一个自定义的域名

网络上流传很多类似的文章,可是——不一定每个教程都能在Blogger上使用,所以笔者亲自试验后,才写了这个文章。
先介绍一个几乎是最最最简单的顶级域名注册网站——http://www.dot.tk

【Dot.tk 域名注册+设置】

进入http://www.dot.tk,先点击上方的Login To My Dot Tk (登入可以方便日后管理已经注册了的域名) :
image
然后以Facebook(或其他服务)登录dot.tk:

image

然后就会redirect到控制面板,点击Doman Panel,在点击Add Domain:
image

输入欲注册的域名,点击Add New Domain:
image

如果域名不可用就想个新的域名呗!过后选择Free Domain,在点击Next
image

先在Your Current Web Address 下填入部落格的原本的域名(过后我们会修改):
image

然后选择Registeration Length,一般是12个月,过期了还可以再次更新(只有注册登录dot.tk才有这个功能):
image

填入验证码,点击Next:
image

点击Domain Panel:
image

点击Modify
image

选择 Dot TK DNS Service,
添加一个A Record:
Hostname 为tk网址 (笔者的是garyngblog.tk)
IP address 为: 216.239.32.21

再添加一个CNAME Record:
Hostname 为 www 加上tk网址 (笔者的是www.garyngblog.tk
IP address 为 ghs.google.com

设置完了后点击Save Changes
image

DOT TK 这部分已经大致上完成,现在到Blogger 内设置。

【Blogger 内设置自定义域名】

登录Blogger 控制面版:http://www.blogger.com,到Dashboard内,点击Settings——》Basic:
image

在Publishing 下 点击 Add a custom domain:
image

填入www 加上dot tk的域名 (笔者的是 ww.garyngblog.tk),在按下Save
image

这时会看到一个错误信息,把第2行copy起来 (笔者的是lltxnnxqld65 和gv-umfuubdlui6q7t3l2bjrpfa7uzwmcgt3dmjvyb5wbq3pan6me33a.domainverify.googlehosted.com )
image

再次打开Dot TK的控制面板,在域名上点击Modify,点击Dot TK Sevice DNS:
添加一个CNAME Record:
Host Name 和IP Address 填入刚刚从Blogger copy下来的 (笔者的分别是lltxnnxqld65 和gv-umfuubdlui6q7t3l2bjrpfa7uzwmcgt3dmjvyb5wbq3pan6me33a.domainverify.googlehosted.com)
注意:去掉gv-umfuubdlui6q7t3l2bjrpfa7uzwmcgt3dmjvyb5wbq3pan6me33a.domainverify.googlehosted.com. 后面的句号!应该填入gv-umfuubdlui6q7t3l2bjrpfa7uzwmcgt3dmjvyb5wbq3pan6me33a.domainverify.googlehosted.com 不是gv-umfuubdlui6q7t3l2bjrpfa7uzwmcgt3dmjvyb5wbq3pan6me33a.domainverify.googlehosted.com.
image

点击Save Changes 后,耐心等待30分钟到1个小时,DNS设置才会生效 (这是看看视屏,听听音乐吧!)
DNS为生效期间,点击Save 还是会有错误的。
等待直到点击Save,提示保存成功后,就接近完成啦!
DNS Service 已经生效

点击Edits,点击 Redirect garyngblog.tk to www.garyngblog.tk,点击Save
image

大功告成咯!日后就可以直接以Dot TK的域名访问部落格了!

2012年10月8日星期一

[资源收集][教程] 部落格大翻新——Dynamic Views美化教程

各位有没有发现到本部落格换了个样子,改了个面貌啊?还不错吧?
自从Blogger 推出了新的“动态视图”(Dynamic Views)过后,笔者鉴于他的简洁度而使用了动态视图的Sidebar模板。
image

但是,早期时的动态视图缺乏很多功能——比如不能使用“修改HTML”、“布局”、不能调整Sidebar大小,这一直困扰着笔者——要不要换回之前的模板呢?
直到最近,Blogger 才逐一加入并完善了这些功能,现在的动态视图也可以加入gadget了!

前几天,笔者找到了这个部落格——Southern Speakers,大多数的部落格教程都是为旧版的blog写的(即非动态视图的部落格),然而Southern Speakers 大量的教程都是以CSS代码为主,不必更改HTML 代码,所以非常适合使用动态视图的部落格,笔者在里面逛了一整天,找到了一些挺不错的教程,也将其CSS代码运用到了本部落格上~

【动态视图部落格美化】

一下的教程多数以CSS代码为主!
怎样添加自定义的CSS代码?(以新版本的Blogger管理界面为例子)
image
逐一点击 模板——》在“博客现用图片”下的 自定义
 image
——》高级——》Add CSS 就可以啦!

【开始!】

1、有木有看到本部落Sidebar多了个漂亮的滚动条?
image
这个滚动条漂亮吧!
笔者参考了Southern Speakers的这篇教程—— Scrollbar for Sidebar Posts in Blogger Dynamic Views
在Add CSS 加入以下代码!
加入滚动条的代码如下:


.sidebar #sidebar, .ss{
margin-top: 12px !important; /*12px就是滚动条距离headerbar 的距离,笔者的为0px,表示无距离*/
overflow-y: scroll !important;
}


更改滚动条样式的代码如下:

::-webkit-scrollbar {
margin-right: 5px;
background-color: #EEE;
width: 7px; /*滚动条宽度,笔者的为10px*/
}
::-webkit-scrollbar:horizontal {
margin-right: 5px;
background-color: #EEE;
height: 7px;
}
::-webkit-scrollbar-thumb {
border: 1px #EEE solid;
border-radius: 12px;
background: #777;
-webit-box-shadow: 0 0 8px #555 inset;
box-shadow: 0 0 8px #555 inset;
-webit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
::-webkit-scrollbar-track {
-webit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}
 
2、在部落格帖子下加入作者名字
image
打开Add CSS,加入以下代码


.article .article-header h1.title:after, .ss{
content:"by XXX"; /*把XXX换成作者名字*/
display: block;
padding-top: 10px;
font-size: 14px !important;
color: grey !important;
}

3、在部落格帖子旁边显示Date Ribbon
其他的Dynamic Views 模板都有这个功能,但是只有Sidebar 没有。。
image
打开Add CSS 加入以下代码:

.sidebar .article .article-header .date, .ss {
display: block !important;
}



4、更改Loading Icon

默认的Loading Icon 是这样的:

index

 笔者改成了:


这里的源码—— Remove Loading Gear from Blogger Dynamic View,原本的代码是去掉Blogger 的Loading gear:
.ss,.blogger-gear{
display: none;
}


笔者照着这个源码改成了更改Loading Gear的代码:
.ss,.blogger-gear{
background-image: url('XXX); /*把XXX 换成自定义的载入动画
}

 
5、把Pages定位到header bar 中间

image

 

在Add CSS中添加以下代码:
.tabs{
width: 80% !important;
text-align: center !important;
}

6、更改Blogger的“Add A Comment”

image




在Add CSS 中添加以下代码:

.comments-header h3{
font-size: 0px;
}
.comments-header h3:before{
content: "Drop some words!"; /*把Drop Some Words! 换成想要显示的提示信息,比如笔者的是Give Some Comments!*/
font-size: 14px;
}

2012年10月6日星期六

[资源收集][教程] 又一些Google的小秘笈

记得Google 的 do a barrel roll 么?( 本站的【特效】神奇的Google)还有 Askew、Tilt、ASCII ART和更加好玩的Goglogo 吗?(本站的【收集】Google 与关于Google的一些小花样),这次笔者带来了更多更好玩的!

PS:这些网页均在Google Chrome 中通过,但不保证其他浏览器能!

1、两个O会消失的Google 页面:http://darkartsmedia.com/google.html
可以拿来作弄人家~

2、反转版本的Google Search:http://elgoog.im/
image
搜索页面也是反转的:
image

3、“省电”版本的Google:http://www.blackle.com/

image

4、Google 也潜水啦!:http://elgoog.im/underwater/
image
搜索时,会掉入很多很多图片:
image
5、Google Terminal:http://elgoog.im/terminal/
怀念BBS么?
image
连搜索页面都被处理了:
image

6、当为Google Search页面施加引力:http://elgoog.im/gravity/
image
被挤成一团的搜索结果:
image

7、还有Google PacMan!:http://elgoog.im/pacman/
image

8、Google Search 也有一些搞笑的语言:https://www.google.com/preferences#languages
比如:https://www.google.com/webhp?hl=xx-elmer
image
还有 https://www.google.com/webhp?hl=xx-piglatin
image
Bork,Bork,Bork! :https://www.google.com/webhp?hl=xx-bork
image

Hacker!:https://www.google.com/webhp?hl=xx-hacker
image

来一些不一样的:

9、 April Fool's Day : Gmail Paper Archive:https://mail.google.com/mail/help/paper/more.html
愚人节:把你的邮件邮寄给你~
image

10、April Fool's Day :Toilet Internet Service Provider  :http://www.google.com/onceuponatime/tisp/install.html
image

11、April Fool's Day : Pigeon Rank  http://www.google.com/onceuponatime/technology/pigeonrank.html
额。。。很难解释。。
image

12、April Fool's Day : Google Gulp http://www.google.com/onceuponatime/googlegulp/
Gulp!Gulp!Gulp! 好喝!
image


[网站][工具] 网页时光机——Web.Archive.org

是否想看看10年前Microsoft的主页长什么样的?想看看几年前Google 的样子吗?要如何访问已经关闭的站点?
笔者介绍大家一个线上工具——http://web.archive.org
Browse through over 150 billion web pages archived from 1996 to a few months ago. To start surfing the Wayback, type in the web address of a site or page where you would like to start, and press enter. Then select from the archived dates available. The resulting pages point to other archived pages at as close a date as possible. Keyword searching is not currently supported.

The Wayback Machine,网页时光机。这个网站从1996年开始到最近的几个月保存备份了全世界月150亿个从不同网站、站点的网页。只要把欲查看的网页输入,The Wayback Machine 就会显示一个时间线,让用户选择特定时间的网页备份。

我们拿微软的官方网站开开刀吧:
去到http://web.archive.org,输入http://microsoft.com,然后点击“Take Me Back”:
点击Take Me Back
过后就能在上方的时间线选择该网站的备份了:
Timeline
我们来看看2001年的Microsoft是什么样子的!
蓝蓝色的圆圈是显示该网站在那个时间备份,把鼠标滑倒圈圈上还能显示以及选择在当天那个时间的备份:

image
点击日历上的日期后,就会转到备份页面
上方的ToolBar 可以通过点击那个小小的image 关闭
这就是2001年Microsoft网站长得网址了!
image
当时Windows 2000才刚刚出呢!
看看Google 1998年时的样子:
image
看得出,Google 的主页10多年来都没有变,那就是——简单就是美

看看1996年的Yahoo!1吧:
image
Yahoo!充满信息的页面,就这样一直流传下来。。。

当然,想要查看某个网页过去的样子的前提就是——The Wayback Machine一定要曾经备份该网站,要不然的话,The Wayback Machine就会事实显示该网站,网址也会转为http://liveweb.archive.org
image

The Wayback Machine 还有一个好处,那就是能“重温”已经关闭了的站点,比如http://bbs.verybat.org,直接访问的浏览器会给你个“This webpage is not available”,用时光机看看:
image
版面乱了点,但是有一些帖子依然能查看!