Posts Tagged ‘Blogger使用经验’

删除默认的Blogspot顶部导航条的方法

关于此问题,我搜索了很久,发现有以下几种解决办法:
1、编辑模版,将下面代码放到<style type=”text/css”>后面即可。
#b-navbar { height:0px; visibility:hidden; display:none}
但我进入模板里找了半天,竟然未找到<style type=”text/css”>这部分代码,看来这一方案只有放弃了。

2、在”布局”中“页面元素”那里加入一个”HTML/JavaScript” Element,写入代码

<style>#navbar-iframe { height: 0px; visibility: hidden; display: none }</style>
即可去掉navbar。

更进一步的解释

Beta版的Blogger Navbar是由http://beta.blogger.com/css/navbar/classic.css控制它的样式的,代码如下:

html body {margin:0;padding-top:0;padding-left:0;padding-right:0;}body #wrapper {margin-top:30px;}body #header {margin-top:50px;}#leftcontent {_margin-top:30px !important; }#rightcontent {margin-top:30px !important;}#Main #Title {margin-top:30px !important;}body #wrap #wrap2 #header {margin-top:0;}body #wrap {margin-top:34px;}#blog-header {margin-top:-4px; }body #wrap4 {padding:15px 15px 0 15px;margin-top:-4px;}#space-for-ie {display:none;_border:0 !important;_display:block;}#navbar-iframe {position:absolute;top:0;left:0;z-index:500;>}

所以只要自己当前的模板中有wrapper、header、leftcontent,等等,上面代码中的id就会受到影响。#header更是经常用到的顶部id,如果去掉顶部搜索条后发现顶部还是多出一块影响自己的布局,就是它在作祟了。在自己的css代码区加入#hearder{ margin-top: 0px !important;},!important的意思是强制使这个css提高到最优先级,相当于覆盖掉了classic.css中的定义。而且#navbar-iframe是绝对定位,如果你发现顶部搜索条覆盖掉了自己的一些内容,可以在自己的css代码区加入 #navbar-iframe { position: relative !important;}把#navbar-iframe变成相对定位,就不会覆盖掉什么内容了。(当然也可以把它去掉)。那么不影响布局去掉navbar的方法应该是这样的,在自己的css代码区加入

#hearder { margin-top:0px !important;}
#navbar-iframe { display:none;}

更多

2 comments  Posted by admin - 2008 年 10 月 30 日 at 19:18 Just 4,001 views

  Categories: Blogger经验   Tags:

在Blogger中上传图片或影片的方法

在Blogger中,要上载图片或影片,只要在编写张贴文章时处理即可。
插入图片:在建立编写文章的工具列上按下『插入图片(Add Image)』按钮可选择自电脑或网页中来新增图片并可直接设定图片与文字间的版面配置记得要勾选『我接受服务条款』项目按下『上载图片』按钮上载完毕后,上载图片便会被贴入编写文章中,再自行调整位置或修改HTML码即可插入影片:做法与插入图片类似,但只提供从电脑中来新增影片.

还有一个更简单的方法:
直接通过电子邮件的方式将包含图片的文章发送到您Blogger博客的系统邮箱中就ok了。

Be the first to comment  Posted by admin - 2008 年 10 月 13 日 at 19:50 Just 1,301 views

  Categories: Blogger经验   Tags:

Google的免费博客blogger.com的使用与相关的工具--经验之谈

blogger.comgoogle旗下的blog服务。是世界知名的blog服务提供者之一。Mr徐的blog就是由blogger.com发布的。
blogger的主要优点有:强大的可订制性,易用
,支持ftp发布。不过和大部分国外的blog一样,由于被伟大的GFW所封,blogger的发布站 点blogspot在国内是无法访问的。在用了一段时间blogger后,觉得实在比msnspace好用多了。

一.用ftp发布blogger.com。前面说过,国内是无法访问blogspot,不过呢,由于blogger支持ftp发布,可以发布在别的ftp空间上,比如5000megs的免费ftp空间。登录进blogger.com后,选择自己的blog里的设置->发布,点切换至ftp选项就可以输入你ftp的设置了FTP
服务器:填写ftp提供者给你的服务器地址。Blog URL:你blog的访问地址。FTP
路径:你准备在ftp服务器上把blog文件放在什么目录下,如果不指定目录的话可以留空。Blog
文件名:就是从哪个页面可以访问你的blog了,一般填index.htm就可以了,具体可以咨询你的空间提供者。FTP 用户名:ftp服务器上的用户名。FTP
密码:ftp服务器上的密码。通知 Weblogs.com:选是然后点保存设置按钮,google会提示你:
已成功保存设置
您必须重新发布
Blog,才能看到更改。
(您也可以仅仅 重新发布索引
。)选择重新发布就可以了。现在你的blog就已经发布完成了然后再选择存档页面,填写里面的存档路径和存档文件名然后再选择站点馈送,也就是feed,指定你的feed地址全部设置好以后,你的blog发布就已经设置好了。

二.用email发布blogger.com其实这是个很不错的功能,我就很喜欢用gmail来发布blog。选择
设置->电子邮件标签,设定Mail-to-Blogger
地址,然后选上后面的单选框,就可以通过email来发布了。我个人推荐gmail发布,因为gmail发出的邮件很干净,不附带任何多余的东西。而且通
过过滤器,可以起到备份blog的功能。而gmail的编辑器也十分好用,还有很强的自动保存功能。

三.用haloscan为你的blogger.com加入trackback功能.trackback是在网络上加强blog与blog之间的联系的很好的办法,但blogger.com本身并不提供trackback功能,但我们可以通过haloscan来弥补这点。首先,在haloscan上注册一个新id,记得要在邮箱里点确认信的,然后登陆haloscan,选member里的install,选第一个选项里的 automatic
install
按钮,按提示输入blogger.com的账号,密码,选择你需要加入trackback的的blog,然后一路next,等你的blog上出现了haloscan发布的新帖子,你的网站就已经加入了trackback的功能了。

四.利用del.icio.com为blogger.com添加tag功能。blogger.com本身并不支持tag功能,不过由于它的开放性,可以很方便的为他添加tag。首先,为你的blog单独注册一个del.icio.com账号,然后在del,icio.com的帮助里选择tag
rolls
,通过一些设定就能为你的blog加上tag云的功能了(如果选择 link
rolls
可以添加分类功能)。首先在Display
Options里进行一些设置,第一个拖动条是你的tagroll的标题,建议留空,也不选择icon。第2行是经常使用的tag的最大字体和颜色,第三
行是为基本不使用的tag设置的最小字体和颜色。sort建议选择alphabetically
,按字母排序,不然不美观。flow建议选择cloud,而且不要选择tag
counts,然后把底下的代码复制到你的blogger.com的模版里,就能使用和Mr徐的blog一样,甚至更漂亮的tag云了

五.利用flickr为blogger.com添加相册功能。同样的,先注册一个flickr的相册。然后在
Photos:yours里选择flickr
badge
功能,就可以开始设置了。首先,选择是html样式的还是flash样式的相册,点next,选择公布所有照片或者指定tag的照片,接着是相册的样式,相册的颜色,最后就能得到常常的代码了。把代码放在模版里,发布一下,大功告成了吧。

六.为blogg.com加入流量统计功能。掌握自己的blog的流量统计,能更清楚地直到别人是通过什么途径进入你的blog的,你的读者来自何处。统计流浪最好的自然是Google Analytics了。不过Google
Analytics需要邀请,我使用的是免费的 itsun的服务。首先在itsun上注册一个账号,登录后,选择开通流量统计功能,输入网站信息后,点获得统计代码,加入blog的模版,以后再登陆itsun就可以查看blog的流量了。

七.在搜索引擎上登录blogger.comgoogle的登陆入口baidu的登陆入口在这些入口提交你的网址就可以了。baidu登陆后,不用多少时间就会收录你的blog了,而google则要过比较长的时间

八。提交你的blogger的google
sitemap。Google的 sitemap是一个及时提醒google搜索的新服务。一般网站要通过程序来生成sitemap的文件,但是在google的帮助文件里很明确的说明了:”Google 接受 RSS(真正简单的联合供稿)2.0 和 Atom 0.3
供稿。通常,只有您的网站已有联合供稿时才能使用此格式。请注意,此方法可能不能让 Google
了解您网站的所有网址,因为供稿可能只提供最近访问的网址的信息”所以,只要把我们的feed提供给google,就能使用sitemap功能了。首先,让我们进入登陆页面,选择 常规 Web
Sitemaps,下一页,填写我们blog的feed,就提交成功了。之后,让我们选择刚刚提交的网站,在这里能看到我们的网站在google上的信息,不过呢,我们还有事情要做。让我们点确认那个选项页,按google的提示建立那个名字怪怪的确认文件,然后提交,ok,我们的sitemap大功告成了,以后只要记得来更新下feed就可以了。好了,我的blogger经验就这些了,大家如果有自己的心得,要和我共享一下啊

Be the first to comment  Posted by admin - at 19:49 Just 1,373 views

  Categories: Blogger经验   Tags: , , ,

如何在Blogger首页只显示文章的摘要内容

Blogger没有提供文章摘要功能,不过可以通过脚本实现类似功能。具体制作分为三步:
(例牌声明一下,修改Blogger模板前,请先备份!切记!!!)

一是在<./head>前加入如下代码:
<!– 隐藏文章内容 –>
<b:if
cond=’data:blog.pageType == “item”‘>
<style
type=’text/css’>
span.fullpost
{display:inline;}
</style>
<b:else/>
<style
type=’text/css’>
span.fullpost
{display:none;}
</style>
</b:if>

二是每次写文章时,将要隐藏的部分放在<span
class=”fullpost”></span>内(在Html编辑模式下)。比如要隐藏“隐形人”的话,就这样:
<span
class=”fullpost”>隐形人</span>
以上已经实现隐藏功能,但还是有点欠缺,用户会以为文章已经结束了。所以还要进行最后一步美化工作,在文章结尾加上“阅读全文”的链接(该链接会在首页所有文章尾部加上)。
当然,大家也知道Blogger网站,在后台也只有一个文件,假如就直接加上链接的话,那打开文章后,还会有“阅读全文”的尾巴。为了去除这个尾巴,需要多加个判断,继续往下看:
先找到模板中原来文章显示的代码,类似<data:post.body/>,将其换成如下代码:
<b:if
cond=’data:blog.pageType ==
“item”‘>
<data:post.body/><br/>
<b:else/>
<data:post.body/>

<br/><a expr:href=’data:post.url’>阅读全文…
</a>
</b:if>
如无意外,可以收工了!

经测试可行的另外一个办法:
1.到Blogger的控制(後台)頁面
2.範本->網頁元素
3.按下「加入網頁元素」,出現可用的網頁元素清單
4.找一個名稱為「
HTML/JavaScript」,按下「加入BLOG」,會進入設定的頁面
5.「標題」欄位,請填入
##EasyReadMore##
6.「內容」部份,請複製以下程式碼填入

<script
src=”http://cjh829-easy-read-more.googlecode.com/files/jquery-1.2.1.pack.js”
type=”text/javascript”></script>
<script
src=”http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.1.0.js”
type=”text/javascript”></script>
<script>
EasyReadMoreSettings.Enabled
= true;
EasyReadMoreSettings.Read_More_Mode =
‘mix’;
EasyReadMoreSettings.Mode_Auto_MaxLine =
3;
EasyReadMoreSettings.Mode_Custom_Tag_Type =
‘text’;
EasyReadMoreSettings.Mode_Custom_Tag_Expr =
‘##ReadMore##’;
EasyReadMoreSettings.Link_Style =
‘directlink’;
EasyReadMoreSettings.Link_Text =
‘…继续阅读;
EasyReadMoreSettings.Link_Text_title =
‘继续阅读;
EasyReadMoreSettings.Collapse_Link_Text =
‘显示摘要…’;
EasyReadMoreSettings.Collapse_Link_Text_title =
‘显示摘要;
EasyReadMoreSettings.Collapse_MoveToEnd =
false;
EasyReadMoreSettings.Index_Page_Style =
‘abstract’;
EasyReadMoreSettings.Tag_Page_Style =
‘title’;
EasyReadMoreSettings.Archive_Page_Style =
‘title’;
EasyReadMoreSettings.Controller_Enabled =
true;
EasyReadMoreSettings.Controller_Default_Position =
true;
EasyReadMoreSettings.Controller_Splitter = ‘ |
‘;
EasyReadMoreSettings.Controller_Full_Text =
‘完整’;
EasyReadMoreSettings.Controller_Abstract_Text =
‘摘要’;
EasyReadMoreSettings.Controller_Title_Text =
‘標題’;
EasyReadMoreSettings.ShowFullPost_Tag =
‘##ShowAll##’;
</script>
<script>EasyReadMore.main()</script>

也可以将上述其中两行:<script
src=”http://cjh829-easy-read-more.googlecode.com/files/jquery-1.2.1.pack.js”
type=”text/javascript”></script>
<script
src=”http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.1.0.js”
type=”text/javascript”></script>
两个文件上传到你自己的空间,然后将地址改为自己的链接地址。

1 comment  Posted by admin - at 19:37 Just 1,772 views

  Categories: Blogger经验   Tags:

扩展Blogger版面宽度的方法

在剛建立好Blogger時,會發現顯示頁面不夠寬,預設顯示頁面只有660的寬度而已(根據所選原始模版不同,各別可能的預設值也會不同)。如果想要加寬頁面顯示寬度的話,就得動手改一改了。
按下Blogger的『版面配置』頁籤
再按下其下的『修改HTML』頁籤
若對HTML語言及CSS語法沒有把握,可以按下『下載完整模版』,先將現有模版儲存在自己電腦中,以便將來處理錯誤要復原時使用。
要復原模版,可以在『從硬碟的檔案裡上載模版』右方文字格中輸入自己電腦中的完整模版儲存路徑,或按右方『瀏覽…』鈕進入挑選。最後,再按『上載』鈕即可。
『展開小裝置範本』 核取盒,現在用不著,故,可以暫不理它。
在下方HTML碼中,找到下面段落,並將紅色字處改掉(以下內容,可能會因原始所選模版不同,而有所差異,找到大致類似位置修改之即可)。
下面者,原預設是660,視所需顯示頁面大小將之更改:(当前版本已不存在这一宽度定义)

/* Header
———————————————–
*/

#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

下面者,預設為700,此處可不改。:(当前版本已不存在这一宽度定义)
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:1040px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

下面者,預設為660。
/* Outer-Wrapper
———————————————– */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

下面為文章內容的寬度設定,預設為410。
#main-wrapper {
width: 750px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
當然,你也可以改Sidebar的寬度,預設為220。我沒改,要改的話,要注意與上方main-wrapper者之加總,不可超過Outer-Wrapper之寬度設定。
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
改完後,按下下方的『儲存範本』鈕即可。
按下『檢視Blog』連結,即可發現顯示頁面加寬了。

Be the first to comment  Posted by admin - 2008 年 10 月 11 日 at 13:50 Just 1,575 views

  Categories: Blogger经验   Tags:

Art Imagination-巴洛克风格的三栏式Blogger模板

如图,Art Imagination采用巴洛克风格设计,看后让人耳目一新,用来装点心爱的小站绝对可以抢些风头。
不过设计色调比较粉,估计适合MM多点,或是适合内容比较潮的博主。

该模板针对BLogger的新版设计,三栏式,版面安排比较紧凑。奇怪的是该模板没有默认搜索,可能是为了版面简洁。好在BLogger新版有好多widgets,添加个搜索模块也是不费吹灰之力。
Art Imagination的测试网站:>>> DEMO(国内多数要用代理访问)
Art Imagination下载:>>> Download

Be the first to comment  Posted by admin - at 13:45 Just 2,436 views

  Categories: Blogger经验   Tags:

教您如何在Blogger文章之间安插AdSense广告的方法

要在文章之间安插AdSense广告,你只要进入Blogger后台的“范本”(布局) -> “网页元素”(页面元素)中点击“blog文章“这个网页元素,然后在其设定中启用{在帖子之间显示广告}这个功能
设定文章间广告(Inline Ads)

按了编缉修改“blog文章“后会将跳出一个Blog文章设定视窗,在这个你可以设定Blog文章的显示方式等等。要启用文章间广告(Inline Ads)功能你只需要在”Show Ads Between Posts“这一个选项将它打勾就可以。

接下来你还可以设定AdSense广告出现的频率,你可以选择每1-5篇文章后就显示AdSense广告。但AdSense广告组目前规定只能放3个,超出的部份Simon测试的结果是它自动不显示。

选择好AdSense广告显示的频率后,你要设定AdSense广告格式。挑选一个合适你部落格面版的广告格式会比挑选一个公认点击效益高的广告格式来的好。

再来你还可设定AdSesne广告的配色。 AdSense广告的配色与你的收益也是有不少的关连,一个溶合度高的配色或高反差的配色都能增进广告的点击率,但那一种适合你的部落格呢?这就要靠你自已测试和追踪其广告效益了。

所有的设定都完成后,就只要最下方的”储存变更”按一下,你的部落格就会开始在文章间显示广告了。

只目前支援AdSense for contest .这个在BlogSpot文章之间安插AdSense广告的功能目前只支援安插AdSense for content广告组,目前还不支援AdSense for search搜寻框和推荐连结组(referral)的快速安插。

Be the first to comment  Posted by admin - at 13:43 Just 1,336 views

  Categories: Blogger经验   Tags: ,

一款灰色古典型Blogger模板介绍-巴洛克美女

巴洛克美女:一款灰色古典型Blogger模板介绍BLogger模板也介绍不少了,关键是又遇到一款令人惊叹的,不说不快啊!
这款叫tema的模板,适合Blogger 2.0,三栏式,主色调为暖灰色,配上右上角的巴洛克图案,古色古香;布局清晰简单,又不失现代气息!
模板布局传统,方便用户访问;加上用色和细节雕琢细致,设计上肯定下了不少功夫,基本可以拿来就用,用上也不觉得老土,加上免费赠送,君复何求?
模板的设计合理,运行速度也不错。当然,如果你要改造的话,就不要怪人家模板运行缓慢了。模板下载:>>>Download<<<模板演示:Demo

Be the first to comment  Posted by admin - at 13:40 Just 1,419 views

  Categories: Blogger经验   Tags: ,

在blogger文章中显示源代码的几种方法

时候我们需要在帖子中展示一些源代码,如果在Blogger的编辑器中,这些代码就会被执行。因此也就无法将代码显示出来,出现这样的情况应该怎么办呢?下面我就列出几种有效的方法:
1、通过Blogger发布软件如Live Writer、Zoundey Raven等软件发布
2、通过FireFox的插件scribefire进行发布
3、通过邮件发布
4、通过网页编辑软件如Dreamweaver转换后再发布
5、替换法发布,即将所有的替换成&gt;(注意&是半角符号),然后再发表,用这种方法不仅可以在 Blogger里正常输出文件,而且COPY后不用再去替换全角,很是方便。
6、者我们也可以创建一个Text区域来显示代码

<center><textarea rows=”3″ cols=”45″>代码部分</textarea></center&gt<br />

即在输入代码时将上述代码中的“代码部分”替换成想写入的代码即可!

Be the first to comment  Posted by admin - at 13:29 Just 1,250 views

  Categories: Blogger经验   Tags:

通过在FireFox中安装scribefire插件发布文章的方法

Blogger 虽然解封可以访问,但是它与发布有关的 API却被封了多时。因此这一段时间我都只能使用Blogger 的后台发表文章,Windows Live Writer 和 Zoundey Raven 都不能用了。
我现在发现了一个非常简单的方法,就是在FireFox中安装scribefire插件(http://www.scribefire.com/)并在添加博客是的链接处将http改成https即可成功发布!

Be the first to comment  Posted by admin - at 13:23 Just 1,369 views

  Categories: Blogger经验   Tags:

下一页 »