雪花栈（部落格教程，软件与IT实践）: Blogger Hack

Showing posts with label Blogger Hack. Show all posts

Sunday, July 4, 2010

Blogger的分页功能

许多人都弄不到之前的分页功能，在这里提供大家这个功能
而且非常方便~

首先，点击以下的图片

点击了之后，你就可以将这个功能安装到你的部落格了
简单吗？=)

by:kenchy

参考更多：http://www.bloggerplugins.org/2009/09/numbered-page-navigation-for-blogger.html

阅读全文

Thursday, July 1, 2010

Tuesday, June 29, 2010

有时候想把什么文章分享到facebook给朋友们看，用这个方法容易多了~
想要的人请进入以下网址：
http://www.facebook.com/share/

在里面你可以选择如何显示你要的Share，然后将他给的代码Copy起来~
这时就到你的部落格Design-->Edit HTML-->将右上角的Expand Widget Templates打勾

按Ctrl+F寻找以下代码
<div class='post-header-line-1'/>
在他之后放上你Copy的Share代码就可以了=)

by:kenchy

阅读全文

Sunday, June 27, 2010

部落格下拉菜单/分类菜单

这是一个不错的下拉菜单，它可以分类成很多~
通常下拉菜单是提供给有许多页面/标签要向读者分享的人
不然用了会不知道该放什么好~而不放却又显得多余
想要的人请跟着以下步骤做，在此我也先声明，不是每个人的部落格背景都能接受这个插件
新版本背景的用户可能无法实现下拉的效果

步骤一：
到Design-->Edit HTML找到以下的代码
]]></b:skin>

步骤二：
然后在他的上面放上以下代码：

#menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:500;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}

#menu ul {display:inline-block;}

#menu li {margin:0; padding:0; list-style:none;}

#menu li {display:inline-block; display:inline;}

#menu ul ul {position:absolute; left:-9999px;}

#menu ul.level1 {margin:0 auto; background:#710;}

#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}

#menu ul.level1 {background:#3aa3d3;}

#menu ul.level2 {background:#ae4621;}

#menu ul.level3 {background:#c98b14;}

#menu ul.level4 {background:#9f690e;}

#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 20px 0 10px;}

#menu ul.level1 li.level1-li a.level1-a {float:left;}

#menu ul li:hover > ul {visibility:visible; left:0; top:25px;}

#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}

#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}

#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}

#menu a:hover ul {left:0; top:23px;}

#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}

#menu li.left ul a {text-align:right; padding:0 10px 0 20px;}

#menu a:hover a:hover ul,

#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}

#menu li.left a:hover a:hover ul,

#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}

#menu a:hover ul ul,

#menu a:hover a:hover ul ul {left:-9999px;}

#menu li.left a:hover ul ul,

#menu li.left a:hover a:hover ul ul {left:-9999px;}

#menu li a.fly {font-variant: small-caps;}

#menu li.left ul a.fly {font-variant: small-caps;}

#menu li a:hover,

#menu li a.fly:hover {background-color:#555555;}

#menu li:hover > a,

#menu ul li:hover > a.fly {background-color:#555555;}

#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}

#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}

#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

*有时候可能会因为代码的干扰，造成无法显示，所以如果放了所有代码之后依然无法正常显示
那么你可以将以上的代码放到Headings之下或Header之下

颜色代码可以自行更改，太多了，大家自己看看哦

放好了之后按Preview看能不能打开部落格首页，如果没有问题才按Save。

步骤三：
然后到Design-->Add A Gadget-->HTML/JavaScript
将以下的代码放进去

<div id="menu">

<ul class="level1">

<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>

<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level2">

<li><a href="#url">Email</a></li>

<li><a href="#url">Telephone</a></li>

<li><a href="#url">Online Form</a></li>

<li><a href="#url">Snail Mail Address</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level2">

<li><a href="#url">Ski Hire Facilities</a></li>

<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level3">

<li><a href="#url">Beginners Slopes</a></li>

<li><a href="#url">Intermediate Slopes</a></li>

<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level4">

<li><a href="#url">Local</a></li>

<li><a href="#url">Nearby</a></li>

<li><a href="#url">With instructor</a></li>

<li><a href="#url">Snow boarding</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li><a href="#url">Expert</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li><a href="#url">Night Life</a></li>

<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level3">

<li><a href="#url">Snow Hotel</a></li>

<li><a href="#url">The Snowman</a></li>

<li><a href="#url">Ice Cavern</a></li>

<li><a href="#url">Ski Inn</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level3">

<li><a href="#url">From Airport</a></li>

<li><a href="#url">In Resort</a></li>

<li><a href="#url">Multiple Resorts</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level2">

<li><a href="#url">Where to go</a></li>

<li><a href="#url">What to do</a></li>

<li><a href="#url">Places of interest</a></li>

<li><a href="#url">National parks & Museums</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level2">

<li><a href="#url">Money Exchange</a></li>

<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level3">

<li><a href="#url">Lift Passes</a></li>

<li><a href="#url">Insurance</a></li>

<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level4">

<li><a href="#url">Boots</a></li>

<li><a href="#url">Skis</a></li>

<li><a href="#url">Ski Wear</a></li>

<li><a href="#url">Goggles</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li><a href="#url">Ski Schools</a></li>

<li><a href="#url">Snow Report</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="level3">

<li><a href="#url">Austrian</a></li>

<li><a href="#url">German</a></li>

<li><a href="#url">French</a></li>

<li><a href="#url">English</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li><a href="#url">Short Breaks</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>

</ul>

</div>

这一个代码有些许的混乱，我尝试调整了之后大概明白了一些
在这里向大家解释，也算是小小的教大家一些基本的代码=)
不过说真的，我的解释能力不是很好-.-请大家见谅..

1.那些level1-level4都分为菜单的层级，菜单第一层是level1，从level分出来的是level2

level2分出来的就是level3，随着这样来区分

2.level1-li代表下拉菜单朝向右侧打开

3.level1-li left代表下拉菜单朝向左侧打开

4.level1-a代表不打开下拉菜单

5.level1-a fly代表level1菜单要下拉

6.fly代表分类，如果你的菜单要分类，那么记得要放fly这字眼哦~

7.#Url可以替换为你的连接

我所知道得就上面这些了@@

如果你要开多一个分类而不要下拉，那么就添加以下代码
<li class="level1-li"><a class="level1-a" href="#url">名字</a></li>

如果你要添加一个分类，但是要有下拉，那么就添加以下代码

<li class="level1-li"><a class="level1-a fly" href="#url">名字</a>

<!--[if lte IE 6]><table><tr><td><![endif]-->

<!--[if lte IE 6]>是为了让他呈现下拉效果，所以别删除哦

添加了之后，你就可以在他下面添加下拉菜单了，如：

<ul class="level2">

<li><a href="#url">名字</a></li>

<li><a href="#url">名字</a></li>

</ul>

感觉自己解释到很复杂，但他真的就是这么复杂= =
而且还有些我没解释，我怕会越说大家越不懂哦
大概就这些了，大家慢慢弄~

还有现在Blogger限制要写标题，如果不要放标题的，就在标题的框内打<h2></h2>就可以了=)

by:kenchy

阅读全文

Friday, June 25, 2010

Cloud Flash Label（Flash标签）

昨天没开教程，让自己放松了一天~感觉很轻松...但还是回来了~
还是空之屋适合自己=)
在这里新开一个教程，关于Label（标签）~这是使用Flash做出来的~
喜欢的人就照着以下步骤做吧=)

步骤一：
首先下载以下这个文件：
http://www.box.net/shared/sjd27ru5lm

步骤二：
里面有一个Swf文件，将他上传到你的空间，如：Fileden之类的
然后将文件的连接（Direct Link）Copy起来

步骤三：
然后到Design-->Edit HTML，将右上角的Expand widget templates打勾
按Ctrl+F找到类似以下的代码
<b:section class='sidebar' id='sidebar' preferred='yes'>

步骤四：
然后在他的下面放上以下代码：

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

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

</b:if>

<div class='widget-content'>



<object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >

<param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>

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

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

</tags>" />

<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>

</object>





</div>



<b:include name='quickedit'/>

</b:includable>

</b:widget>

注意：

红色部分更改为你刚才上传文件的连接

青色部分可以调整你的插件大小

蓝色部分是颜色代码-tcolor=字体颜色/bgcolor=背景颜色

紫色部分是Flash的移动速度

好了之后按Preview看看~可以了才按Save~还有要提醒大家~中文字不会显示哦！

完~

by:kenchy

阅读全文

Wednesday, June 23, 2010

Blogger文章中添加表情符号

想要在部落格文章中添加表情符号的~来学学~~非常简单~不需要添加小工具~不需要修改HTML之类的~简单又方便~哈哈~好东西大家来看~

首先你必须确认在Setting-->Select Post Editor那是不是勾选Old Editor~
中文是：设置-->选择帖子编辑器，勾选旧编辑器（如图）

确认了之后，将这个超连接Blogger表情符号加入书签（Bookmark）就可以了~怎么加？
按右键（right click）~点击Bookmark this link就可以了哦~如果要更方便的~就直接将它拉到上面那排导航栏之中就可以了~

不明白的人，可以自行添加~一下是连接网址
连接网址：

javascript:var%20oScript=document.createElement('script');oScript.src='http://nvoms123.googlepages.com/hahablogger.js';void(document.body.appendChild(oScript));

好了之后，就去开一个新文章（New Post）吧~然后在你的新文章中点击刚才保存的超连接~

bookmark的请跟着以下图片做（如图）：

直接放在导航栏的直接点击就可以了（如图）：

点击了之后就会出现以下的画面：

按OK之后他就会自动得将表情添加到你的文章内容旁边了~想要什么表情~
直接按着拉到你的文章中就可以了哦！方便吧？本人今天想吃大餐~谁要请客？嘻~

注意：

此功能只提供给[旧编辑器]使用者
如果你不喜欢里面的表情，向自行添加~那么你可以下载以下文件自行更改
http://nvoms123.googlepages.com/hahablogger.js
更改之后再上传到到空间获取连接~不明白的就讲究使用吧~
毕竟里面的表情也很多了哦=)

插件原作者網站:
http://billconan.blogspot.com/2007/03/blogger.html

By:kenchy

阅读全文

Tuesday, June 22, 2010

教你隐藏小工具的标题

Blogger限制必须填写标题（如图）

最近Blogger开始限制在添加小工具时必须填写标题（Title）了~很多人都觉得影响了部落格的美观~以下教你如何隐藏小工具的标题~

步骤一：
到Design-->Add Gadget-->HTML/JavaScript添加你要放的小工具，然后按save（如图）

*现在我要隐藏的，就是这一个标题：[不打不行吗= =]（如图）

步骤二：
来到你的部落格首页，按右键（Right Click）选择View Page Source，在IE的字眼是View Source（如图）

步骤三：
然后按Ctrl+F寻找你的标题~找到了之后便看他的ID名是什么，应该都是HTML1之类的名~
然后将名字Copy起来~（如图）

步骤四：
这时到Design-->Edit HTML
寻找以下代码：
]]></b:skin>

然后在他的上面放进以下代码

#HTML9 h2.title{

display: none;

}

红色的部分是我小工具的ID名，记得要更改为你的小工具ID名哦~以下是更改之后的成果~（如图）

大家试一试=)

by:kenchy

阅读全文

在Blogger留言添加表情符号

相信很多人都觉得Blogger的留言太普通了~什么都没有~在这里教你添加表情符号哦~

步骤一：首先~到Design-->Edit/HTML
（为了以防万一，先保存模版比较好）
将Expand Widget Templates打勾

步骤二：然后按Ctrl+F找到以下的代码

<p class='comment-footer'> 

<b:if cond='data:post.embedCommentForm'> 

<b:include data='post' name='comment-form'/> 

<b:else/> 

<b:if cond='data:post.allowComments'> 

<h3><a expr:href='data:post.addCommentUrl' 

expr:onclick='data:post.addCommentOnclick'> 

<data:postCommentMsg/></a></h3> 

</b:if> 

</b:if> 

</p> 

</b:if>

如果找不到，那么就找以下这一段

<p class='comment-footer'> 

<b:if cond='data:post.embedCommentForm'> 

<b:if cond='data:post.allowNewComments'> 

<b:include data='post' name='comment-form'/> 

<b:else/> 

<data:post.noNewCommentsText/> 

</b:if> 

<b:else/> 

<b:if cond='data:post.allowComments'> 

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> 

</b:if> 

</b:if> 

</p>

步骤三：找到了之后，用下面这段代码代替它

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'> <b> <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/ <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-* <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :| <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-} <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)] <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) </b> </div> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if>

步骤四：在用Ctrl+F找到</body>

步骤五：将以下的代码放在</body>的上面

<script src='http://xavierliu.googlecode.com/files/smiley.js' type='text/javascript'/>

完成~保存之后到你的留言那就能看到了哦~

注意：

1.记得要确保在你的Setting-->Comments-->Comment Form Placement

所选择的是Embedded below post哦~

中文的应该是设定-- > 意见-- > 意见栏位置，选择已內嵌下列文章

2.>听说这个Hack在IE?下不能执行@@<不过本人的可以，所以不知道是IE几不能了~

By:kenchy

阅读全文

教你在部落格添加回复楼层

这个也是Blogger的失败之一~而痞客的也已经生锈了=P
如果大家注重视野上的完美~那么就来学学吧~

首先,到Design-->Edit HTML，将右上角的Expand Widget Templates打勾

然后按Ctrl+F找到</head>
在它的上面放上以下代码

<script type='text/javascript'>

//<![CDATA[

<!-- Function used for generating the index number for each post: ShowCommentIndex() -->

var CommentIndex = 0, CommentPostID = '';

function ShowCommentIndex(PostID) { 

if (CommentPostID != PostID) {

CommentIndex = 0;

CommentPostID = PostID;

}

document.write(++CommentIndex);

}

//]]>    

</script>

还没完哦~然后你就要找到类似下面这段代码

          <dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

找到了之后，将以下的代码放在</span>的下面，</dd>的上面

<!-- Fixed for display comment index -->

| <data:commentLabel/> #

<script type='text/javascript'>

ShowCommentIndex('<data:post.id/>');

</script>

例子：

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

| <data:commentLabel/> #

ShowCommentIndex('<data:post.id/>');

</script>

</dd>

</b:loop>

</dl>

就是这样了~看得明白吗？@@

by:kenchy

阅读全文

Monday, June 21, 2010

标题旁边添加图片

如果你想在标题旁添加图片，那么就跟着以下的步骤做=)

首先到Design-->Edit HTML
将Expand Widgets Template打勾

然后找到类似以下的代码：

<b:includable id='post' var='post'>

<div class='post hentry'>

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title entry-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

每个人的背景代码不同~所以找到类似的就可以了哦~
然后在<b:if cond='data:post.url'>的下面放上以下代码

<img src="你的图片网址" style="border-width:0px" />

记得将你的图片网址换掉~好了之后按Preview看看~可以了才按Save哦~

by:kenchy

阅读全文

将博主留言背景改为图片

看这教程之前必须先看完以下两个教程的其中之一哦~不然你就看不懂了~

1.加强博主留言和访客留言的分别
2.加强作者留言和访客留言的分别(新版本)

看完了之后，现在教你简单的把留言换成图片~
首先，到Design-->Edit HTML
将Expand Widget Templates打勾~
然后找到你之前放的这段代码

.comment-kenchy {

margin-right: 35px; 

margin-bottom: 5px;

color: #666666; 

font-size: 8pt; 

line-height: 1.5em; 

background-color: #E0ECFF;

border: 1px dotted #C0C0C0;

padding:5px;

}

将上面红色的那一段代码替换成以下的代码就可以了~

background:url(图片网址Direct link) repeat;

注意：
1.记得将图片网址Direct link更换成你的连接
2.repeat是图片重复，如果你不要图片重复的话就换成no-repeat

完~

by:kenchy

阅读全文

加强作者留言和访客留言的分别(新版本)

这是给新版本背景用户的~所以如果你不是使用新版本的背景~那么就到以下的网址看：
http://kenchyclass.blogspot.com/2010/06/blog-post_1864.html

新版本背景用户~如果要使用此功能请跟着以下步骤做~
首先到Design-->Edit HTML

(为了以防万一，先保存模版-Download Full Template)

将右上角的Expand Widget Templates打勾
然后按Ctrl+F寻找类似以下的代码~

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p>

<data:comment.body/>

<span class='interaction-iframe-guide'/>

</p>

</b:if>

</dd>

然后用以下的代码将它完全替换

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<b:if cond='data:comment.author == data:post.author'>

<p>

<div class='comment-kenchy'>

<data:comment.body/>

</div>

</p>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</b:if>

</dd>

说明：

红色的代码是我自己编出来的，他原本是背景颜色代码

所以你们可以自行更改名字，主要是不影响其他的代码名称就可以了

而你改的名字记得要与以下的代码名称也更换掉~如果不明白得可以直接用我的名称

上面的步骤好了之后，按Ctrl+F找这代码：

]]></b:skin>

将下面这排代码放在他的上面

.comment-kenchy {

margin-right: 35px; 

margin-bottom: 5px;

color: #666666; //字体颜色

font-size: 8pt; //字体大小

line-height: 1.5em; 

background-color: #E0ECFF; //背景颜色 

border: 1px dotted #C0C0C0;

padding:5px;

}

这一个代码是根据我的部落格宽度来更改的，所以如果不适合你的部落格
可以自行更改margin-right部分~
好了之后按Save，到你的留言去看就有了~
弄到的人请回来向我报平安~因为这是本人想出来的方法
自己可以，但不知道其他人可不可以= =

弄好了可以看以下特别给大家的教程~
将博主留言背景改为图片：
http://kenchyclass.blogspot.com/2010/06/blog-post_649.html

by:kenchy

阅读全文

加强博主留言和访客留言的分别

这是给不是新版本背景的用户教程~所以如果你使用的是新版本背景~那么就到以下的网址看：
http://kenchyclass.blogspot.com/2010/06/blog-post_4336.html

其实这个我原本是看别人教程弄的，结果弄不成功~无论如何更改都不能~到最后还是决定使用自己更改的小方法~对我的背景是能使用的，但是对其他人的我就不知道了
所以如果你们用到了记得回来说声~

首先到Design-->Edit HTML

(为了以防万一，先保存模版-Download Full Template)

将右上角的Expand Widget Templates打勾
然后按Ctrl+F寻找类似以下的代码~

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

然后用以下的代码将它完全替换

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<b:if cond='data:comment.author == data:post.author'>

<p>

<div class='comment-kenchy'>

<data:comment.body/>

</div>

</p>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</b:if>

</dd>

说明：
红色的代码是我自己编出来的，他原本是背景颜色代码
所以你们可以自行更改名字，主要是不影响其他的代码名称就可以了
而你改的名字记得要和以下的代码名称也更换掉~如果不明白的可以直接用我的名称

上面的步骤好了之后，按Ctrl+F找一下其中一个代码：

comments h4 {
找不到就找这个：
comments-block {
在找不到才找这个
comments-block .comment-author {

将下面这排代码放在他们其中一个的上面

.comment-kenchy {

margin-right: 35px; 

margin-bottom: 5px;

color: #666666; //字体颜色

font-size: 8pt; //字体大小

line-height: 1.5em; 

background-color: #E0ECFF; //背景颜色 

border: 1px dotted #C0C0C0;

padding:5px;

}

这一个代码是根据我的部落格宽度来更改的，所以如果不适合你的部落格
可以自行更改margin-right部分~
好了之后按Save，到你的留言去看就有了~

弄好了可以看以下特别给大家的教程~
将博主留言背景改为图片：
http://kenchyclass.blogspot.com/2010/06/blog-post_649.html

by:kenchy

阅读全文

Sunday, June 20, 2010

文章下添加签名挡（signature）

首先，到Design-->Edit HTML
将Expand Widget Templates打勾
然后按Ctrl+F找以下的代码

<div class='post-footer-line post-footer-line-1'>

如果找不到上面的就找下面这一行

<p class='post-footer-line post-footer-line-1'>

找到了之后，将以下的代码放在他们的上面

<img src='图片网址' style='border:0px;'/>

记得将图片网址更换，然后按Preview看看~
注意：如果找不到刚才那两个代码的，就找以下这一个~

<data:post.body/>

找到了之后把刚才的代码放在他的下面就可以了~

完成~

by:kenchy

阅读全文

Back To Top简易教学

这里提供大家新的Back To Top教学，这个比之前的还容易
之前弄不到的大家可以使用这个方法~

首先到Design-->Edit HTML
按Ctrl+F找</body>

在</body>的上面放上以下代码

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='图片网址'/></a>

记得将图片网址换掉哦~以下提供大家一些图片使用：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXikOUEggFIZTFXT8TqL8AYW9saZk6FW9mh82qr013vou2x7WiZbhyphenhyphenSghKWDb4NFTCVeh7TfiGcnbrT65jsffKrx3H1YPTMli_6SNRRB1zMm9XenMbZilpxkcikD_CsS_bpoduszE86QbI/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijDXsQwXuBbg_EPgVdZ-dmtqMJdyAS7otoCRbcsvQAff1DNPju1dYcgr5aycsZLMiw6FBQE022rrz3j3rTIywEmrRIgm8qUlp4BYlR0TU1w4XKAMPTisrTOy09E2eXYqGIRLQ44OQI8JIG/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6RANki1pz22MfNWApVotkQFJ1VXF0pBwQg9ddVbcGR89eVZA_5VTIlQ2CPD56zUIyo8c_8QV5zPBI4i5N88tk0S2JZFuhvtWHcwTRgh2pZzgVrXddjCZvMgBORdDA1KC7W7HK565OUtwJ/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_JW3kVrKUAp5uyIH4in7Dgh6sQe97CDe4qQlHaZ7vN9oav9kqSuzRPP-yAQzhkxJOFBLbAYNC4_fUVq9P5C95EYXZuady_ZV8FduPXIUhPvz6WESUPrj29DXgIpWzbN5bQso_tCQ9IOH/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhg__dR-gnRUG05-IuSCiTzb-67XagVOnDLkDt0jjGpABmi_mWFoEV9frnbEfqBJKVwzECb5FJirxTeHkDUOzWTboQuBcKsIiksvn8sArnfsCBDFuXulVnXri5N5LiOyaZHRYBuRHHSRP/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk7_UdTeeIXUh4fi9RSOXIWEda1VMgSgEJrduXCCRcOzR5db6Nc3XkUFUtm1bsutO6yWSI06HKPrB-9dNCq7nNPvmCRH36mM7jtzJ0ZmILSBqiJR9X0PLXPPPKW5j-LPKIjaCEaXTWNJVC/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME-BYOS7ijNsOPiok0K0pFN2qJEV1ESgxtW8WNLaeqUUvKUPAwBA79QrEJWYKzlkoixGiR7X1tq6cKbWBujvtA_i4rtnZTiwYfCBIzeW_6UZjGTfgwrvVUkGIUuY0ckImQALSGb1Jjw76/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj93_GCHgwUm1hBCc6FcVGReSyMQUf0ueFGRJKYeNuwysX5Oo0BCdXQGApkW0d60TN6vhc8KaoMi1Lxlrw7-vqM1awYtaRzL_DqCWsvh-no-8F5tgicp7SlvvNwJzr-TcEhyydPlOBgRcib/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJyrdMIRfkZoTtTOxGPUukgvXYuoLUMJFIVRaHY0bYTtEPtex0lw6MutIqESD8b1IxXGbxgbbWGciXJGclEFO2FDCrYqIiY5zaWHjGSzJfaaKEMmUu59yh_TVSRc16rrleX64SSoZy80C//

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlU_oc-1QzmDmUneFPshD5PYgPL_ZOP7V3Ync33rYneJ9NC6uYtLuOqWCLnRhWlxHsPq2E6Mfw8wwCu1xuGiz2r1f9DhLCcamRMf1rMiUHNsb4VTx47zXM8xVkIkl3w6H9c85IkKRfT2m2/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQxjK_f89eKw-uG3rqlO6CJTya9t-OClyRtk4IkggNWAkEQX8W9BNEiFD6TTJxFDErKlsTsGYh8Bt9g5977yeSzSF0mnX3vDGg0U375D4fKfUHFav9DoPZk4TRHVQofV-1axqxSvoY0yNw/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDoPXLJFFdHOtiIhnrV3la5FS2klMXu3BwXeASHzfoRZ4iKEHKk0tVBveD4yu95XW3Y33EZd_K2v4G3fmNd4mFTH9gSjsK7nkLS0COq9bKyLwK9JXRmoVPOCKGM-kuWawa61C_AizcQTx/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8EK6wEZ71fqj8I5z7mJNotZzShaMRZClVT1N2qrqt3i7g9fkXuiYG0cxp3y758AuCBBbfKq-ndxlfpqU824eHg9FdlXvCfmCM3-wDwDlfYSLVItJBABdLIBNjBIO7AFKsXTt9BA-s78A/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7Vo4eEcIEtW-S1OG2Co9tdHGf3MmbeUc_WMRJr990hZGE6I6lRX7JgZ5CYojNFRw_yEAxDuIj_nBHC7yAINl8HkiLMMnvXQgDtEv3ffdi72KpYjHvSTawpjc3wi8vQ9BYUFBoW6nOBD_/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7N9imNCBadE4HzBoWmK5vdipQ4Ad5-95dQ8n8DiDKKoOkbDYGwbjA3UcTDwSinvKSX-ZInFXHN5h8CLNaot1SkjSUgYC0qwiFrwIYzm_i8MN-zI81UxEjZM36gMgZIvQ6cg8wwyvxS0e/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8Nyq3Ji1g7IRM7SFkHyFgf3wMlQLLBMZV-V7JOFzTjHth1wmiNUv_fdQq6yjTD6k7Nm35Mt4x5wdO7-6ViFPZoVLfQ1dkqsyreA3MhwpIVLPmZdYUqpuvd46pbjsKUB0ZMLF6oX_0IFf/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8BWiNKL6AkN4gV1pSgSD-SOYKqP4cbvEaSATQBIdp34rpl22CHCBKtN6ox_r57E43yOgktTjqaoxP2U3S-PJ8CRszMijZCohxl2SsYCBDMZ5UbY3Ik4bLnjyn0ka3q3g4AyQKaiUWuuB/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXO0VV0z2gF-iKl4nEyh9lgXIUvAXaiglEOcFuDup5BEEbqCe9c4h7mTZA6IxoUX9Q517k_Cmmm8xh9kMAkG6BLLHBlPg1HQCRy11WISD-n6UdIqU3EPpXZ-bWaQhhnv2GpcIbmi1Hl4GA/s400/20.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLipBptIdHDxw5M5XCKbh0oJBXBMbXw1O5ooslqMKpEOQLJnviRW6EdORzxrG4fkq1mNS-sHSHeJ80ssu73zG3_xd-Jz2m3vafycv4lBJN0Xbai1YySRFTksphL4v3YteQXJDaeeC_2UXh/s320/BlurMetalDc3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWn5wYnLWHnkDB3tk6Hx0jER4cpEvQkJowL62Y8U_C1z8opF-oF3idFuBgd5fabiDCKVMRYPmmYv5C6QMJD7rlIzh16C9AR5xGp6i6Qe5DtopCK3HyB9efZ78uzTdIlhqQqaVqkEJalaIO/s320/BlurMetalDc8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYBcTKdACil8uloNjhJiGfz6E_QDywlZjmmaS1lwK9oAptbjXdIkqzEccXuvTXYOAKrccMdnaUDEty20a3-wppdmaT7ZqdGPrawf5Bn-Uw-m3Za4_F52kKYSucMOWhgH1zQly9PxF954u/s320/BlurMetalLc0.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrq6ycIR-i4C780-1KVe3DCbgAzxx58tFvvFyGWQ5x7HA81cdvibrQLnKPMrZr1viTA_oXc8ivkD6gCnKgXBrKxgdDH_Y41woC3t4ceWpTsNuV_-Rmp1imjudHggYAQePyEAFH8ttFou19/s320/BlurMetalLc1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxRObQ1P843gDNDUkDNvtZARn-LacK_4HonhLTUzx4R1cVQQdQKW2YUspD7p_2FpiwHTeK0yo9NQSBH5WGbUISlycFpOuuBoZBnQixokLm781Jh-AFKnWeptoX0TuJdji0GyUdSa6pG53/s320/BlurMetalLc2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqgcp4Nm5C9SXx89YAf9KThhm-5gSNYN7ZVoG9qiL1EUWR2K1XYWOuUjU43n3nUTf-7EnuYM26UgYdWo9YjGrHJ0GkcI619wA7DGJSj9hNKmXylPLzbWFhqDAp5pN1jZHslHPRSvBbECW9/s320/BlurMetalLc6.gif

by:kenchy

阅读全文

Saturday, June 19, 2010

教你添加分类菜单(Menu Bar)

这个方法是比较简单的，而每个人的部落格斗一定能做到，除非你使用的背景是那一类不正统的背景= =，好像Blogskin那种我就没办法了，因为它的代码有点乱。但因为每个人的背景代码不同，所以可能还是有人会弄不到，不过调整一下应该就可以了~

首先，到Design-->Add A Gadget-->HTML/JavaScript
将以下的代码放进去，Save起来

<ul class="basictab">

<li class="selected"><a href="http://kenchyclass.blogspot.com/">Home</a></li>

<li><a href="网址">Edit</a></li>

<li><a href="网址">Edit</a></li>

<li><a href="网址">Edit</a></li>

</ul>

记得将红色部分改成你要连接的网址和名字
如果还要添加就直接在</ul>的上面添加以下代码就可以了
添加多少个不限~

<li><a href="网址">Edit</a></li>

当然没有这么快就完成了~现在到Edit HTML找这一段代码]]></b:skin>
将以下的代码放在他的上面

.basictab{

padding: 3px 0;

margin-left: 0;

font: bold 12px Verdana;

border-bottom: 1px solid gray;

list-style-type: none;

text-align: left;

}



.basictab li{

display: inline;

margin: 0;

}



.basictab li a{

text-decoration: none;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid gray;

border-bottom: none;

background-color: #f6ffd5;

color: #2d2b2b;

}



.basictab li a:visited{

color: #2d2b2b;

}



.basictab li a:hover{

background-color: #DBFF6C;

color: black;

}



.basictab li a:active{

color: black;

}



.basictab li.selected a{

position: relative;

top: 1px;

padding-top: 4px;

background-color: #DBFF6C;

color: black;

}

上面的红色部分是颜色代码，所以如果要换颜色可以自行更换哦~
background-color是背景的颜色，color则是字体的颜色，但是是哪个部分的颜色我就不清楚了@@所以大家要自己更改了哦=P
关于颜色代码可以到我的菜单那寻找Color Code的字眼，里面有很多让你选~

放了之后就按Preview看看，如果还是不能那么就把它放到一下这段代码的下面

.profile-link { 

font: $postfooterfont;

text-transform: uppercase;

letter-spacing: .1em;

}

大家弄得到吗？

by:kenchy

阅读全文

雪花栈（部落格教程，软件与IT实践）

Sunday, July 4, 2010

Blogger的分页功能

Thursday, July 1, 2010

隐藏标签分类页面的说明文字

Tuesday, June 29, 2010

Facebook share button（分享面子书）

Sunday, June 27, 2010

部落格下拉菜单/分类菜单

Friday, June 25, 2010

Cloud Flash Label（Flash标签）

Wednesday, June 23, 2010

Blogger文章中添加表情符号

Tuesday, June 22, 2010

教你隐藏小工具的标题

在Blogger留言添加表情符号

教你在部落格添加回复楼层

Monday, June 21, 2010

标题旁边添加图片

将博主留言背景改为图片

加强作者留言和访客留言的分别(新版本)

加强博主留言和访客留言的分别

Sunday, June 20, 2010

文章下添加签名挡（signature）

Back To Top简易教学

Saturday, June 19, 2010

教你添加分类菜单(Menu Bar)

Search This Blog

帮我点击广告，谢谢你=)

回复排行

Labels

支持我哦~

免费广告刊登

我的连接

Labels