{置顶}如何在BLOGGER中置顶一篇日志

如何置顶?呵呵,这不就置顶了么?看看这篇日志的时间吧~

相应的,想设置多篇置顶日志的顺序的话就修改下发表时间咯~

强化Blogger的引用功能（二）

其实昨天就在色彩斑斓找到这个方法了，不过由于改到最后提示变量失败再加上时间很晚，所以就没有继续弄下去。今天闲来无事，又试了下，终于成功了。

老规矩，和之前的“强化Blogger的引用功能”作下比较：
1.由于定义了变量，所以可以更加方便地更改引用区的颜色。
2.引用区长度需要根据不同模板自己设定。
3.编辑日志时同样需要调用函数。
4.配合“让Blogger首页显示文章摘要时”功能时稍微有点问题(会紧贴着引用区，不过可以解决)。

演示：

























下面来说实现方法——

依次进入“控制台”-“布局”-“修改HTML”，先备份一下当前模板，然后查找

在其下方添加如下代码：



再查找
]]>
再其上方添加如下代码：
/*引用区*/
.pullquote {
width: 90%;
background-color:$pullquoteBgColor;
background-image: url(http://sunrrr.googlepages.com/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: left;
border:1px solid $pullquoteborderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

然后保存模板，小功告成。

注：
1.修改模板后可以在“字体和颜色”中修改引用区相关的颜色。
2.上面代码中红色的数值请根据各自的Blogger模板做相应调整，对应的是引用区的宽度，多试几次就行了。
3.上面代码中蓝色的数值是引用区内“引号”的图片地址，可以根据个人喜好换成自己喜欢的图片。
4.在想使用引用功能的时候，需要用将文字包围起来，如：
在此输入想引用的内容


-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

强化Blogger的引用功能

再次在GG圈(貌似挂了，我是用Google快照看的)上学到一招——强化Blogger的引用功能。

该技巧有以下优点：
1.突出显示引用区，使引用区更加明显，比如我的模板引用区就非常不明显，现在好多了。
2.能直接在引用区内打出“<”和“>”，不用再麻烦得用代码代替了，（但是如果涉及到Html代码就无效了，真无奈）。
3.有CSS知识的可以自己美化。我不太懂所以只改了几个颜色代码配合下整体的色调。

演示：
能直接打<和>就是爽:)

方法：（修改前务必备份模板！）

在“布局”的“Html”中查找：
]]<>/b:skin>
在其上方添加如下代码：

CODE {
border-bottom: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
display:block;
padding: 10px 10px;
padding-top: 20px;
margin: 10px 0 0 10px;
background:#F5F5F5;
font-family:"Courier New", Courier, mono;
-moz-border-radius: 15px;
}
CODE:hover {
background-color:#F7FEDC;
}


保存模板就小功告成了。

以后，将要显示这个引用区修饰的位置放在和中间即可。比如：

能直接打<和>就是爽:)



-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

Google再次强化Blogger广告功能

今天在调整Blogger布局时发现新增了“Monetieze”功能，很惊喜地点进去一看原来是用来强化Adsense广告的。


如此一来，在Blogger上添加Google的广告就更加方便了，形式也更加多样，可惜我个人目前对这个还不是很感兴趣，就不多评论什么了。



-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

为Blogger添加站内搜索(二)

经之前在老李那学了一招，刚才又在小李那琢磨出了一招（笑）。与之前提到的那种方法不同的是，第一种方法借助了Google的搜索，而这个方法运用的完全是Blogger自身的搜索功能，感觉更纯粹一点。缺点是速度比较慢，准确度也没有第一种方法高。（演示：查询免费空间的结果）

这次添加的方法仍然很简单——

只要将以下代码加入到新建的小工具栏里：

就OK了：）



-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

为Blogger添加导航栏（二）

在之前的帖子里已经介绍过如何为Blogger添加导航栏，不过今天在老李的飞刀部落又发现了一个添加导航栏的方法。就个人角度将这个方法和我之前介绍过的方法比较一下：

优点：
1.添加起来更加方便：一步就行
2.更美观（演示|那个带有蓝色标签的导航栏）

缺点：
1.后期添加修改链接不方便——必须重新修改代码，没有之前的方法方便明了。
2.要定制导航栏的颜色的话，需要一定网页知识（我网页知识基本为零 T T）
3.有些模板的侧边栏会遮掉导航栏（比如我的演示，解决方法就是减少导航项）

下面来讲解方法（大部分直接复制老李的日志了，稍微修改了下）：

布局---页面元素---添加小工具那里加入一个“HTML/JavaScript”，添加如下代码：

class="align-center">

Site navigation:

• 首页


• 免费空间推荐


• Blogger技巧汇总


• 控制台

然后将该小工具拖曳到日志栏的上面。



注：

• 如果不想让其居中（有些模板居中有问题）就去掉红色部分

• 蓝色部分要改成自己的链接，想添加的话就按照相同的代码添加就行。

• 如果粘贴好上面的代码测试时出现有的导航显示为“ li”的情况,就在代码里面把
中/li之前的空格去掉就行了。

-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

为Blogger添加标签云

终于忍不住为Blog添加了标签云功能（演示|本Blogger没用使用，因为目前还不想用，之所以为那个Blog添加标签云是因为自己想实践一下。）,用的是色彩斑斓的方法。

方法还是很简单的——

修改之前请先确认自己的Blogger已经添加了“标签（Label）”小工具并备份模板！

Step1:
添加CSS代码。找到

]]>

并将以下代码添加在其之前:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Step2：
添加布局部分代码。仍然找到 ]]>，但这一次我们要在它之后、Head之前添加以下代码：

修改红色的lukexzt为你的名字
其中关于颜色，文字大小等值可以自定义，以跟你的Blog色调搭配:
maxFontsize表示字体最大值
minFontSize表示字体最小值
minColor表示颜色最浅值
maxColor表示颜色最深值
lcShowCount 之后的false 和true 决定是否显示分类数量


Step3：
修改的是Widget本身。查找:

然后,如果你没有展开代码（推荐），只需要用以下代码替换这一行（即以“<”开头“>”结尾的代表Widget的那行代码）;相反，你要替换整个Widget：(代码比较长,务必全部复制!)

至此大功告成,保存模板。

图片解剖Blogger beta模板代码

说明：
1.个人觉得非常有用,很清晰明了。
2.所有蓝色的部分都是位于Style标记之间的CSS样式表代码，红色的部分是位于Body标记之间的Html代码。
3.并不是所有的模板都完全一样，但大体类似。
4.转自 色彩斑斓
5.色彩斑斓转自 Blogatech




A)头部（Header）。此部分位于页首部，包含标题和网站描述，概括了整个页首部分。

CSS=

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

HTML=

<$BlogTitle$>

<$BlogDescription$>

B）导航栏（Navigation Bar）。此部分代码默认在代码中是不显示的。如果你要去掉NavBar只要在CSS中添加以下代码即可：

CSS=

#b-navbar { height:0px; visibility:hidden; display:none
}

C) Blog标题（Blog title）

CSS=

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}

HTML=
<$BlogTitle$>

D)Blog 描述（Blog Description）

CSS=
#blog-description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=
<$BlogDescription$>

E)Blog日期首（Blog Date Header）。贴子发布时自动生成日期。

CSS=
h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
.date-header {
margin:1.5em 0 .5em;
}

HTML=

<$BlogDateHeaderDate$>

F)文章标题（Blog Item Title)

CSS=
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;

HTML=

<$BlogItemTitle$>

G)文章区域（Post Division）。此部分包含了Blog Date header, Blog Item Title, Blog Item Body 和 Blog Item Footer。

CSS=
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
.post div {
margin:0 0 .75em;
line-height:1.6em;

HTML=

H)文章援引区域（Post Block Quote）

CSS=
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

HTML=

I)文章文字区域（Blog Item Body)

CSS= .post div {
margin:0 0 .75em;
line-height:1.6em;
}

HTML=
<$BlogItemBody$>

J)个人资料部分（Blog Member Profile Division）

CSS=
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}


HTML=
<$BlogMemberProfile$>

K)文章底部（Post Footer）这部分包含了Authors Nickname, Item Date Time, Item Comment Count, Comments and blog item control variables等

CSS=
p.post-footer {
margin:-.25em 0 0;
color:#ccc;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}

HTML=

L)链接（Links）

CSS=
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

HTML=

Links

• Google News


• Edit-Me


• Edit-Me

M)之前文章（Previous Posts）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=

Previous Posts

• <$BlogPreviousItemTitle$>

N)存档（Archives ）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;

list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;

letter-spacing:.2em;
color:#999;
}

HTML=

Archives

• <$BlogArchiveName$>

O)侧边栏区域。此部分包含了Member Profile, Links, Resent Posts and Archives等

CSS=
#sidebar {
width:220px;
float:right;
}

#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#666;
line-height:1.5em;


HTML=

P)页脚部分

CSS=
#footer {
width:660px;
clear:both;
margin:0 auto;
}

#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

#sidebar p {
color:#666;
line-height:1.5em;


HTML=

---

注：该文章的日志中提到了

订正一个问题:
B）导航栏隐藏的部分:
CSS=

#b-navbar { height:0px; visibility:hidden; display:none
}

应该改为:
#navbar { height:0px; visibility:hidden; display:none
}
本人测试过

Luke没有测试过，但还是贴出来一下以防万一。

为Blogger添加导航栏

在网上寻寻觅觅,找到了简单的为Blogger添加导航栏的方法,效果(本Blogger或演示)还不错,既方便，区域划分也变得清楚了，最重要的是能根据自己的Blog配色方案进行调整,如此以来便可以放心大胆的去掉Blogger自己的导航栏了。

步骤——

1.进入后台的“修改HTML”，记得备份模板！

2.定义两个颜色的变量，为的是让字体颜色和鼠标经过时的颜色都可以在“布局”中里方便的修改。

查找 Variable name 可以找到一大堆定义的变量，在所有的变量定义之前加入

type="color" default="#000" value="#006699">
type="color" default="#000" value="#940f04">

3.添加CSS以定义导航栏区域。

查找 } 可以找到一大堆CSS代码，在任意一个 } （推荐最后一个 } ）后回车再起一行，加入

#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColour;
}
#menubar a:hover {
background-color: $headerCornersColour;
}

4.在Html里相应的区域加入

注：加入此代码的位置将决定导航栏的位置，请自行寻找位置添加,多试试就掌握规律了。Luke是放在

下面一行的。
红色的数字是设定为99是为了避免和其他的小部件编号冲突，可随意更改。

5.保存模板之后(此时按预览是看不到导航栏的,要在布局中添加好一个导航项才能看到导航栏!)就可以到“布局”里添加链接或到“字体和颜色”里修改相应的颜色了。

让Blogger在新窗口中打开链接

再三考虑,决定使用依着随心提供的方法,让Blogger在新窗口中打开链接,方便阅读。

步骤——
1.下载相应的js代码（要实现在新窗口中打开，需要javascript支持），并上传到可外链的网络硬盘或空间。

js代码下载：uushare

* 此步可省，见第2步。


2.将如下代码添加到Blogger模板的head部分之间（我是添加在之前的）,修改模板先请先备份!