魚兒 | 美化教程部落格 ♥: 10月 2011

制作会移动的文章标题 ( Post Title )

Click & Share

很多人问过我

那个 Bii1996 会移动的文章标题怎么弄的

之前只懂 Blogskin 的方法

现在我终于研究到了 BlogTemplate 的方法

Blog Template

登入你的部落格 > 设计 > Edit Html

然后展開小裝置範本

按 CTRL + F 寻找

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

在它前面和后面分别加入 <marquee> ... </marquee>

变成

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

按 Preview 看看有没有效果

好了就大功告成 , 按 SAVE ！

Blogskins

登入部落格 > 范本设计

按 CTRL+F 寻找

<$BlogItemTitle$>

在它的前面和后面分别加入 <marquee> ... </marquee>

变成

<marquee><$BlogItemTitle$></marquee>

这样就大功告成了 :)

如何安装字体进电脑

Click & Share

这里提供给大家一个网站

http://www.searchfreefonts.com/categories/

其实还有很多网站提供免费字体

大家可以自己去找 :)

找到自己喜欢的字体

点击图片下载此字体

然后按

然后打开下载后的文件

大多数会自动弹跳出来

使用 Google Chrome 的朋友从左下角那边打开文件

打开后下载后的文件

在左上角会看到一个 Extract all files

华语叫做压缩文件

按一下

然后会跳出一个格子

按 Extract 就好了

把压缩后的文件 Copy & Paste 在

Acer (C:) > Windows > Fonts

不是每一个人的电脑都是 Acer (C:)

试试在 Hard Disk Drives 那边找找看

Paste 好了过后

不管是美图秀秀 , Photoshop , Paint

所有 Software 里就会有这个字体 :)

上下跑马灯 ( 鼠标指着时会停止移动 )

Click & Share

生活日记部落格
www.Bii1996.com

登入部落格 > 设计 > 添加 Html / Java Script

<marquee onmouseover=this.stop() style="WIDTH: 196px; HEIGHT: 220px" onmouseout=this.start() scrollamount=1 direction=up>

内容

<p></p></marquee>

width: 跑马灯的宽度
Height: 跑马灯的高度
空行 : <br>照片 : <height="200" src="照片网址" width="150" />

帖子里 FB 贊按鈕 ( For Blogskins )

Click & Share

使用 Blogskin 的朋友

有沒有發現 FB 贊按鈕不能放在帖子里 ?

我找到了一個方法

能置放 FB 贊按鈕在 Blogskin

登入部落格 > 範本

按 CTRL + F 尋找 <$blogitembody$>

如果想放在帖子上面就 Paste 在它的前面

如果想放在帖子下面就 Paste 在它的後面

<div style="text-align: right;">xx YourName xx</div></br><iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=like&amp;colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe><br></br>

按 Preview 看看 :D

Facebook 按鈕

置放在部落格的FB贊按鈕 ( Blog Template & Blogskin )
置放在帖子的FB贊按鈕 ( Blog Template )
置放在帖子的FB分享按鈕 Share Button ( Blog Template )

置放圖片在部落格 ( 禁止下載代碼 )

Click & Share

如何置放圖片在部落格 ?

第一種

第二種

<img src="圖片代碼" />

把圖片代碼換成圖片網址

比如 : <img sec="http://http://www.jiujiuba.com/xxpict2/picnews/2007104817470.jpg">

如何你不想你上載的圖片被下載

第一種無彈窗

http://kumiiko1996.blogspot.com/2011/09/blog-post_10.html

第二種彈窗

每個瀏覽器有不同效果

一個是左鍵 & 右鍵在照片里都不能點擊到

另一個是當鼠標已經過圖片

會發出一個彈窗警告



<table border=0 cellpadding="0" cellspacing="0">

<tr><td></td></tr>

<tr><td><a href="javascript:void(0)" onmouseover="alert('這個圖片不允許下載')"><img src="圖片網址" border="0" /></a></td>

</tr>

</table>

------------------ 完畢 ------------------

让你的链接出现框框

Click & Share

看到框框吗 ?

效果就是那个

登入部落格 > 设计 > Edit Html

按 CTRL + F 寻找 a:hover {

然后把以下的代码 paste 进去

padding: 5px;



background: #ffffff;



-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

Bacground : 背景颜色

【颜色代码】

好了就按 Save :D

更改 Highlight 颜色 ( 加 Shadow )

Click & Share

↑ 效果只有 Google Chrome & Firefox 看得到 ↑

如果不想有 Shadow + 使用 IE 的宝贝们

请看此帖 : http://kumiiko1996.blogspot.com/2011/08/hightlight.html

登入部落格 > 设计 > Edit Html

按CTRL + F 寻找 a:link {

把一下代码加在它的前面

::-moz-selection {

background:#000000;

color:#ffffff;

text-shadow: 2px 2px 3px #cccccc;

}

::selection {

background:#000000;

color:#ffffff;

text-shadow: 2px 2px 3px #cccccc;

}

如果之前已经有安装过这个代码

那在两个 } 前面添加

text-shadow: 2px 2px 3px #cccccc;

颜色自行更改

【颜色代码】

然后按 Save :D

如何预设文章 ?

Click & Share

我常常说预设文章

什么是预设文章 ?

预设文章就是实现已经打好文章

在设定好的时间内发布

我这里的每一篇文章都是预设的

每一篇都是早上 8点发布

我不可能那么准时爬起来打文章

更不肯能在 PMR 中早上 8点发布

( 我那时已经在学校了 - - )

到底怎么预设 ?

登入部落格 >

在打完文章后

在文章左下角有一个张贴选项

按它会出现一个框框

在张贴日期和时间那边

设定你想那篇文章的发布时间

然后按发布文章

你会看到一下画面

这代表你已经成功预设文章了 :)

如何隐藏 CBOX 内容

Click & Share

登入 www.cbox.ws 打开你的 CBox 代码

把第一段的 height 那边改成 height="0"

http://CBOX账户名称.cbox.ws

点击 Look & Feel > Layout options

在 Form Layout 那边的 Alternative layout 处打勾

在这里你们也可以顺便更改 CBOX 宽度 & 高度

去 Look & Feel > Color & Font

Post Frame 我建议放黑色

因为内容已经被隐藏了 , 只有自己看得到

加快开启你的部落格速度

Click & Share

这篇适合那些在部落格里

放一大堆图片/ 放歌 / 广告在部落格

这些工具常常导致你的部落格加载速度变慢

这里有一个代码非常适合你们

登入部落格 > 设计 > Edit Html

按 CTRL + F 寻找 </body>

把以下代码 Paste 在它的前面

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script><script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script><script type="text/javascript">jQuery(document).ready(function($){if (navigator.platform == "iPad") return;jQuery("img").lazyload({effect:"fadeIn",placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYSMbcxIiQrn0ljzx_qrgRXmAJfp8BhMIrayK_HZzvkNKATab9BD-6eCFnAJqV6sNk4sUwLMjPgew4IG_WKYtii5eH_GLQHb5s8MTfVBcA_luHs7P9btpRIwB-ekx4jUPidrXCgvmKT4/s1600/grey.gif"});});</script>

确定没问题后 , 按 Save :D

有没有发现部落格的加载速度比以前快了 ?

让 Facebook 自动转帖你的部落格文章

Click & Share

此篇只适合拥有 Facebook Pages 的朋友

怎么说自动发布 ?

就是当你发布你的部落格文章时

你的 Facebook 会发布消息在你的 wall 上

效果如上

登入你的 Facebook > 专业 > 網誌

随便点击你其中一篇文章

注意左下角

点击編輯匯入設定

在红框里打下你的部落格网址

在格子里打勾

然后按

这样就大功告成了 :D

移动鼠标时 , 有星星飘落

Click & Share

登入部落格 > 设计 > 添加小工具

<script type="text/javascript"> // <![CDATA[ var colour="#666666"; var sparkles=40;  var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

好了按 SAVE ：）
* 颜色可以更改 *

两种会移动的 Recent Post

Click & Share

登入部落格 > 设计 > 添加小工具

就是普通你们看到的

可是常常出问题的也是它 - -

 <center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

</script>

<style media="screen" type="text/css">

<!--



#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff repeat-x;

border:1px solid #ddd;

}



#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}



.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}



-->

</style>

<script language="javascript">

imgr = new Array();

imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";

imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";

imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";

imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";

imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://部落格网址.blogspot.com/";

limitspy=4

intervalspy=4000

</script>



<div id="spylist">

<script src="https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js" type="text/javascript">

</script></div>

</center>

记得把 '部落格网址' 更换掉

这种比较聪明不会像第一种时常出问题显示不到

建议使用这一款

 <style type="text/css">

#rp_plus_img{height:377px;}

#rp_plus_img li {height:60px;padding:5px;list-style:none;

background-color:#ffffff;

border:solid 1px #000000;}

#rp_plus_img a{color:#00000;}

#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;

text-align:justify;

-moz-border-radius: 5px;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">

</script>

<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">

</script>

<script type="text/javascript">

var speed = 1500;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img"><script>

var numposts = 5;

var numchars = 0;

</script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">

</script> </ul>

如果你想特别一点的 ,

可以自己更改框框种类 , 颜色

至于怎么更改 , 要自己研究咯

添加 Main Border

Click & Share

看到吗看到吗 ?

效果就是那个 :)

PS * 使用 IE 的宝贝们看不到圆角的咯

登入部落格 > 设计 > Edit HTML

按 CTRL + F 寻找

.main-outer {

如果找不到那就找

.main-inner {

然后把一下的代码 paste 在它的后面

border:3px solid #736F6E;

border-radius: 60px 60px;

3px : 框框厚度

solid :框框种类

#736F6E : 颜色代码

border-radius : 框框圆角

添加文章搜索框框

Click & Share

登入部落格 > 设计> 新增小工具 > 搜索框

按 Save :)

登入部落格 > 设计 > 添加小工具

<<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="搜索" type="submit"/> </form></p>

你也可以更换 '搜索' 的字眼 :)

显示最新文章 (横着行走)

Click & Share

效果可以看我部落格上会行走的字 ↑

登入部落格 > 设计 > 添加小工具

<script style="text/javascript" src="http://dreamydonkey.googlepages.com/scrolling_blogger_posts.js"> </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://你的部落格网址/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>

把部落格网址换掉就好了 :)

大功告成

[素材] 彩带 Ribbon (2)

Click & Share