blogger模版分享

本文摘要：
要想创建一个成功的blogger，一个好的模版必不可少，现在我的这个blogger模版，已经用了一段时间了，感觉还不错，拿出来和大家分享一下......

其余部分：
这个模版的原版是aspire-blogger，我对它进行了一些小小的修改，解决了原版中留言不能正常显示的问题。
呵呵，这个模版总的来说还是不错的，在遨游和火狐中都能正常显示，不会出现页面错乱的现象。我将自己修改后的模板放在了ziddu上面，感兴趣的朋友可以去下来看看！

下载地址：
http://www.ziddu.com/download/4726488/mb.rar.html

[本文地址：http://jin-mario.blogspot.com/2009/05/blogger.html]

Blogger显示最新日志/评论的方法（5条以上）

本文摘要：

一般来说，在后台添加侧边栏小工具后，blogger支持显示1-5条最新日志/评论。如何使其显示数量超过5条呢？这里有一个利用GoogleReader使其能显示1~N条的方法......
具体方法：
1、获得Blogger日志/评论的供稿地址；

日志供稿地址：http://jin-mario.blogspot.com/feeds/posts/default
评论供稿地址: http://jin-mario.blogspot.com/feeds/comments/default

把上面红色部分的jin-mario.blogspot.com换成你的blogger地址就行了。

2、进入GoogleReader，点击页面左上角的<添加订阅>，如图1所示； 中添加获得的供稿地址。

图1

3、在空白栏中加入你的日志或评论的供稿地址，如图2所示；

图2

3、点击页面右上角的设置，如图3所示；

图3

4、点击<订阅>，如图4所示；

图4

5、点击供稿地址后面的<更改文件夹>或<新建文件夹>，如图5所示

图5

6、点击<文件夹和标签>，可见"私人"前面那个音波标志尚未被点亮，如图6所示；

图6

7、点击这个音波标志，使其点亮，"私人"变为"公共"，如图7所示；

图7

8、点击<向网站添加剪辑>，如图8所示；

图8

9、如图9所示进行设置；

图9

10、点击图10所示，就可将"最新评论"加入你的blogger；

图10

11、如果你想显示更多最新评论，可将代码中的10修改为你需要的数字进行修改。

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-zh_CN.js"></script>
<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/11937009939200865768/label/pinglun?n=10&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%5Cu6700%5Cu65B0%5Cu8BC4%5Cu8BBA%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"></script>


给blogger文字添加上酷酷的下划线

本文摘要：

通常的Blogger强调一段文字的方法只能是加粗、斜体或者简单的下划线，而现在我们却可以通过修改模板，给自己的blogger文字添加上酷酷的下划线，具体效果如下所示：

给blogger文字添加上酷酷的下划线

具体方法如下：

1、 在下面的下划线样式中挑选一种你喜欢的，将图片下载，然后上传到你的网络相册，取得网络链接备用（当然你也可以自己设置下划线的样式，但注意下划线的底色要与你blogger的背景色一致）；

（1）

（2）
（3）

（4）

（5）
（6）

下划线打包：下载

2、进入blogger的<控制台>-<布局>-<修改HTML>，进行blogger模板的修改；（修改前保存一下模板，以备不测。）

3、查找下面这条代码：

]]></b:skin>


4、在上面这条代码前添加如下代码，将"图片地址"替换为你的下划线图片地址；

em{
background: url(http://图片网址) repeat-x bottom;
line-height:22px;
font-style:normal;

}


5、保存模板，以后在编辑文章时，只要用"<em>"和"</em>"标签包住想要添加特效下划线的文字就行了，例如：

<em>给blogger文字添加上酷酷的下划线</em>

效果如下：
给blogger文字添加上酷酷的下划线

给Blogger增加"随机文章"功能

本文摘要：

当你的博文足够多的时候，很多的文章都被"埋"在了下面，暗无天日，现在就要把这些好的文章再次展现出来，就需要一个增加一个随机文章的显示功能......

具体方法如下：

1、访问bstir，输入你的blogger网址，设定好需要的关键字、显示的数量等等，然后再选择显示的形式"动态"或者"静态"；

2、再将其添加到Blogger，可以通过添加小工具或者复制代码两种方式进行。

将Blogger底部修改为三栏的方法

本文摘要：

blogger的底部长期被人们所忽视，其实这个区域可以放许多有用的信息，如广告、链接等，下面给大家介绍下，如何将blogger的底部修改为三栏,来放置这些信息......

其它部分：

1、首先在Blogger模版代码的完整模式中搜索<b:section class='footer' id='footer'/>这条语句，如果存在则将这条语句换为下面的代码；如果不存在，则找到<div id='footer'>这条语句，将下面这段语句放在它的前面。

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>


2、接着在代码中继续搜索</b:skin>，并将下面的代码放在</b:skin>之前。

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}


3、现在进入blogger后台，点击<布局>-<页面元素>，就可以发现模板底部已经变成三栏模式了，完成。

Blogger添加标签Widget

本文摘要部分：

前面介绍过如何在blogger顶部加入导航标签，以及Blogger标签云的添加，都涉及到标签的使用，下面我们再向大家介绍一下向blogger中添加widget。具体方法如下：

本文其它部分：

方法一：如果你已经添加过标签，请先在<页面元素>中将其删除。然后修改模板（无须展开窗口小部件），查找Label，可以找到类似代码：<b:section class='sidebar' id='sidebar' preferred='yes'>，将下面的代码复制/粘贴到上面代码的后面；


<!-- Multi-style labels - zoom, menu and list styles -->
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAADxsXY4jsN0PiI7fX_GfuqiaI2J_EpHqMR24tIKvAIC09t7TZk30sYdwJZ_B8GOapk_VPRiqK-mt0uObdppEmBy5mNTojSQ0cRtoQVFxaVNBsB8RfZOEJw35YC3HCn_tdsleqIUAejf2/s1600/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEnDtHpeTjDLZUSwVoQazmFaN8zQq6qIrykybT9R7Nu4LaiPMLBregaI8QgkUFa-0K4oYO3YhxmkKy_V7tH1zAlpFX4xP9-kmCwc_tb6Z_ArVC-cM-Si6SVVxY7aq_HU7rU9Y8KB2PKxO/s1600/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyB3kT8WsGXsHQTyWInUkNND_Vb81pbB3uDL9nSXgMmuMh_zlwIEwZtBE6PYmEEb72Q9eWDGKi_S9cGDXGMgWkoMEjft2CO0fMwdbCJxtdRkVnR7qj8rzAoEGMMi1wdLzasAWRaS2aSb5/s1600/zoom.jpg'/></a>
<b><a href=''></a></b><br/><br/>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

// set default to zoom style
zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>




方法二、你也可以单独添加Zoom类型的标签，只需要添加以下的代码；

<!-- Zoom style labels -->
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Labels</h2><br/>
<div class='widget-content'>
<script language='javascript' type='text/javascript'>
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
document.write("<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>");
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
</script>

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

其中使用到的三张图片如下：
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAADxsXY4jsN0PiI7fX_GfuqiaI2J_EpHqMR24tIKvAIC09t7TZk30sYdwJZ_B8GOapk_VPRiqK-mt0uObdppEmBy5mNTojSQ0cRtoQVFxaVNBsB8RfZOEJw35YC3HCn_tdsleqIUAejf2/s1600/list.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEnDtHpeTjDLZUSwVoQazmFaN8zQq6qIrykybT9R7Nu4LaiPMLBregaI8QgkUFa-0K4oYO3YhxmkKy_V7tH1zAlpFX4xP9-kmCwc_tb6Z_ArVC-cM-Si6SVVxY7aq_HU7rU9Y8KB2PKxO/s1600/menu.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyB3kT8WsGXsHQTyWInUkNND_Vb81pbB3uDL9nSXgMmuMh_zlwIEwZtBE6PYmEEb72Q9eWDGKi_S9cGDXGMgWkoMEjft2CO0fMwdbCJxtdRkVnR7qj8rzAoEGMMi1wdLzasAWRaS2aSb5/s1600/zoom.jpg

Blogger标签云的添加

本文摘要部分：

与wordpress相比，blogger的许多功能都需要自己添加，比如说标签云，下面大家介绍一下，如何在blogger中加入标签云。

本文其余部分：

具体步骤如下：

1、查找"]]＞＜/b:skin＞"，将下面的代码添加在它的前面。

/* 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}

2、仍然是查找" ]]＞＜/b:skin＞"，将下面的代码加入其后，将红色部分更改为你的blogger地址；


<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://jin-mario.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

其中关于颜色，文字大小的值可以自定义，以跟你的页面颜色相匹配。maxFontsize表示字体最大值，minFontSize表示字体最小值，minColor表示颜色最浅值，maxColor表示颜色最深值。

3、查找"Label"，找到类似下面的这一句：<b:widget id='Label1' locked='false' title='Labels' type='Label'/>，如果你没有展开代码，只需要用以下代码替换这一行;相反，你要替换整个Widget。

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>
<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>
<div class='widget-content'>

<div id='labelCloud'/>

<script type='text/javascript'>

// Don't change anything past this point -----------------

function s(a,b,i,x){

if(a>b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}

else{

var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}

return v

}

var ta=0

var c=[];

var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = &quot;<data:label.name/>&quot;;

ts[theName] = <data:label.count/>;

</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}

}

tz = labelCount.length-1;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){

for (var i=0;3 > i;i++) {

c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

li = document.createElement('li');

li.style.fontSize = fs+'px';

li.style.lineHeight = '1';

a = document.createElement('a');

a.title = ts[t]+' Posts in '+t;

a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement('span');

span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';

a.appendChild(document.createTextNode(t));

li.appendChild(a);

li.appendChild(span);

}

else {

a.appendChild(document.createTextNode(t));

li.appendChild(a);

}

ul.appendChild(li);

abnk = document.createTextNode(' ');

ul.appendChild(abnk);

}

lc2.appendChild(ul);

</script>

<noscript>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>

</noscript>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

4、保存模板，完成。

添加公告栏

本文摘要部分:
在blogger的侧边栏里添加公告栏，其实是比较简单的，只要我们在侧边栏里添加一个Html/JavaScript模块就行了。那么，我们能不能让公告栏滚动起来呢？具体代码如下：

帖子其余部分：

<table border="0" width="80%" bgcolor="#ffffff">

<tbody><tr>

<td class="RegionContent"><p>

</p><marquee scrolldelay="1" direction="up" onmouseover="this.scrollDelay=3000" style="font-size: 12px; color: rgb(65, 65, 65); line-height: 17px;" onmouseout="this.scrollDelay=1" scrollamount="1" height="90">

在这写下你要公示的内容。

</marquee></td>

</tr>

</tbody></table>

快速修改blogger的页首图片

本文摘要部分:
要修改blogger的页首图片，一般都要对其模板进行修改，对于不熟悉CSS/Html的人来说，就显得比较的困难，下面介绍一种不用修改blogger模板的方法，只需要简单的复制/粘贴就能做到，具体步骤如下：


帖子其余部分

1.进入blogger的控制台，点击<布局>-<页面元素>；
2.点击<添加小工具>，增加一个<HTML/JavaScript>;
3.在<HTML/JavaScript>中添加如下代码，并根据实际情况进行修改红色部分。


<div style="position:absolute; left:0; top:57px; text-align:center; width:100%">
<a href="博客地址" />
<img src="图片地址" />
</a>
</div>


如何在blogger顶部加入导航标签

本文摘要部分：

导航标签，其实质就是链接。如果我们能够在blogger的顶部加入链接，不但能够使访问者直接看到我们所要展示的网站，提高网站的访问几率，而且我们可以将其做成本站的导航链接，方便访问者更好的浏览本站。其在<页面元素>中的效果如下，即为Navbar导航条下的<Menubar>，我们可以在这加入导航链接。

图1

其具体操作步骤如下：
帖子其余部分：

1、在模板代码中查找Variable，一般在模板的靠前部分，在这我们先定义两个颜色变量，设置导航字体颜色和鼠标经过时的颜色，将下面的代码加入合适的地方；


<Variable name="headerTextColor"
description="headerTextColor"
type="color" default="#000" value="#006699">
<Variable name="headerCornersColor"
description="headerConersColor"
type="color" default="#000" value="#940f04">


2、查找"]]></b:skin>"，将下面的代码加在"]]></b:skin>"的前面，以定义导航栏区域；


#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: $headerTextColor;
}
#menubar a:hover {
background-color: $headerCornersColor;
}


3、在Html里添加相应的区域，即下面的红色代码。


<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>


4.保存模板之后，就可以到<页面元素>的<Menubar>里添加链接了，效果如图1所示。

blogger翻页功能图标化

本文摘要部分:

上文我们介绍了如何将翻页功能完全汉化，大家是不是觉得还不够过瘾，要是能够将这些文字翻页文字换成图标按钮的话，那该有多好？呵呵！下面我就将blogger翻页功能图标化的步骤进行一下介绍.....

帖子其余部分：

1、进入blogger的控制台，我们对blogger的代码进行修改，搜索newerPage，找到如下一段代码；


<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
</b:if>
</div>
<div class='clear'/>
</b:includable>


2、将红色标出的部分替换为图片地址（注意图片对应，<data:newerPageTitle/>对应前一页，<data:olderPageTitle/>对应后一页 Home:主页），具体办法：将红色部分替换成：<img src="图片地址"/>，完成。其它的文字信息也可以用这种办法替换成图片。

如何将blogger的翻页功能完全汉化

本文摘要部分：

由于blogger是在英文界面开发出来的，其默认的中文版面也和Google翻译等服务一样，经常让人觉得很不地道。比如说在默认的Blogger页面上，原始的页面导航显示的是"较新的帖子"、"主页"和"较早的帖子"，如果是英文博客就显示为"Newer Post"、"Home"和"Older Post"。这样的文字显然不符合我们的阅读习惯，博客看起来显得很不"专业"。那么我们应该怎么办才能使其满足我们的要求呢......

帖子其余部分：

1、进入的到Blogger代码的完整界面（勾选"扩展窗口小部件模板"）后，在代码中搜索id='blog-pager'就可以找到下面的页面导航代码。


<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>上一页</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>下一页</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>主页</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>主页</a>
</b:if>
</b:if>

</div>


2、用上面标注红色的部分替换掉原代码中对应的内容，"较新的帖子"与"较早的帖子"就会显示为"上一页"和"下一页"，如果你是英文博客，可以替换为"Previous"和"Next"。完成。

去掉Blogger中默认的图片边框

本文摘要部分：

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

帖子其余部分

具体方法如下：

1、在Blogger模版代码中搜索如下CSS特征标记：


.post img {


2、仔细查找代码，找到"border"的属性，一般情况下都是"border:1px"，只要将它改为"border:0px"就可以去掉图片边框了。

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

如何让Blogger显示最新文章?

本文摘要部分:

Blogger可以通过获取Feed的方式显示5篇最新文章，这似乎太少了，我们有没有办法让自己的blogger显示更多的最新文章呢......

帖子其余部分:

具体方法如下：
1、进入blogger的控制台，点击<布局>-<页面元素>，添加一个新的<HTML/JavaScript>，在其中直接添加以下代码：

<script src="http://bandofgirls.googlepages.com/recent-posts.js"></script>
<script>
var numposts = 8;
var showpostdate = true;
var showpostsummary = false;
var numchars = 100;
</script>

<h2>最新文章</h2>
<script src="http://jin-mario.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

2、代码中的红色数字"8"就是定义的显示最新文章数量的参数，你可以根据自己的需要定义数值大小。另外，将其中红色部分的jin-mario.blogspot.com替换成你自己的网站域名，完成。

（附：showpostdate是时间显示，showpostsummary是摘要显示，numchars用来定义摘要显示的篇幅）。

如何修改 Blogger 的页面主题

本文摘要部分：

到目前为止，Blogger 预设的页面主题都是将博客名显示在文章主题的前方。对搜查器来说（SEO)，这是不太友善的，因为您文章的关键字显示在后方......

帖子其余部分 ：

我们的目标就是要实现图1所示效果。方法如下：

图1

首先，进入到<控制台>－<模板>－<修改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>

然后保存模板，完成。

通过修改，能够提高文章被搜查器收录的几率，以增加博客的流量。

如何在Blogger加入“分享文章”标签

本文摘要部分

"分享文章"这个标签对博客浏览者而言，是一个非常有用的工具。如果他们觉得您的文章值得收藏以供日后参考，那么，这个工具不但能够实现这项功能，而且可以提高您的博客曝光率。因为您的文章将会公布在一些高流量的网站，全世界的人将会由此而来到您的网站......


帖子其余部分


具体步骤如下：

首先进入<布局>-<修改 HTML>，勾选<扩展窗口小部件模板>。在您的模板中找寻 <div class="post-footer"> ，然后再其下方粘贴上以下的代码：

<div align='left'><a expr:href='&quot;http://www.addthis.com/bookmark.php?pub=4QVQQ2TM5XDPAYVN&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' height='16' src='http://s5.addthis.com/button1-bm.gif' style='border: 0px; padding: 0px' width='125'/></a></div> <!-- AddThis Bookmark Post Button END -->



在保存前，先预览一下，以确保标签插入的地方正确，完成。

blogger导航条的隐藏

本文摘要部分
Blogger顶部的导航条看着不是那么美观，那么我们有没有办法将其删除呢？......

帖子其余部分

具体方法如下：


打开Blogger模板，将下面的代码放到<style type="text/css">后面即可。

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


blogger白屏的解决方法

    <本文摘要部分>
   

    Blogger在使用ftp的方法发布后，可能出现白屏的现象，我们怎么解决这个问题呢？......

   

    <帖子其余部分>

    具体方法如下：

    在Blogger管理界面中，点击"模版"，然后将第8行的"<$BlogMetaData$>"放到"<title><$BlogPageTitle$></title>"的前面，然后重建一下，就不会出现这个问题了。

    这个问题的原因可能是因为title里面包含中文字符，因此在没有确定编码前显示出来可能会有问题，所以meta中关于charset的声明应该放在title前面，这样就不会出现编码问题了。

在 Blogger 文章中加入程序代码框

本文摘要部分

在使用blogger编写文章的时候，如何才能加入程序代码框呢？具体方法如下：......

帖子其余部分

第一步：进入到<控制台>－<模板>－<修改HTML> ，不用打勾"扩展窗口小部件模板"。在模板内容里找到下面这段代码，你可以通过按Ctrl+F搜索"skin"两次找到
]]></b:skin></head>

然后将以下的代码段拷贝加到上面代码的前面，就是那两个中括号前面。

CODE {

display: block; /* fixes a strange ie margin bug */

font-family: Courier New;

font-size: 8pt;

color:#33f;

overflow:auto;

background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6xLq0RY75eFxrS6Coty2xI4Vo7FoTBnIt-NTLQl3mEGG7a60KaHqAVhm7DSq5WLO93ClNbL8JNTHJ57dY5IEFB_p2FPhz9XFxkkB382bEfxjelA88sGVnbafvtDxmUbUIzmxNSKOo5g/)
left top repeat-y;

border: 1px solid #ccc;

padding: 10px 10px 10px 21px;

max-height:200px;

line-height: 1.2em;

}

第二步：在Html模式下，把文章中将要引用的代码前后分别用<code>和</code> 包起来，这样就可以显示成代码框了。

注：请用HTML转换工具来转换您的代码，然后才将代码贴在Blogger里。不然< >里头的内容就会被Blogger的编辑器当成代码执行而不显示。

blogger的ftp发布

    本文摘要部分

    大家都想将blogger绑定上自己的顶级域名，但是blogger提供的ghs.google.com经常被封，自己去找A记录的ip又太麻烦，那么有没有别的方法呢？......

    帖子其余部分

    blogger为大家提供了ftp发布的这种方式，应该来说是一种不错的选择。只要你拥有一个顶级域名，一个支持ftp的空间就行了。（现在网上免费的空间很多，大家可以找个相对稳定的，如000的空间，速度和大小都相当不错。

    下面说一下blogger ftp发布的操作步骤：

    1、进入blogger的控制台，点击<设置>-<出版业>；

图1

    2、如图2，点击<传统模板>；

图2

    3、如图3，点击页面下方的"还原到经典模板"；

图3

    4、返回 <设置>-<出版业>，点击"FTP"；

图4

    5、在图5的空白框中填入你的FTP服务器名；

图5

    6、在博客URL栏中填入你想存放blogger的地方，可以直接是http:www.9ifree.org.ru，也可以是http:www.9ifree.org.ru/blog,下面我用后一种情况为例；

图6

    7、然后填上FTP路径：如果是第一种情况，直接填public_html即可；

图7

    8、填入FTP的用户名和密码、字符确认，完成。