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





很多人问过我

那个 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>


这样就大功告成了 :)






HELP HELP , Press A Nuffnang For Me ♥


如何安装字体进电脑



这里提供给大家一个网站


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

大家可以自己去找 :)

找到自己喜欢的字体

点击图片下载此字体


然后按 

然后打开下载后的文件

大多数会自动弹跳出来

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

打开后下载后的文件 

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

华语叫做 压缩文件

按一下 

然后会跳出一个格子

按 Extract 就好了



把压缩后的文件 Copy & Paste 在

Acer (C:) > Windows > Fonts


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

试试在 Hard Disk Drives 那边找找看

Paste 好了过后

不管是美图秀秀 , Photoshop , Paint 


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


HELP HELP , Press A Nuffnang For Me ♥


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





生活日记 部落格
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" />



HELP HELP , Press A Nuffnang For Me ♥



帖子里 FB 贊按鈕 ( For Blogskins )







使用 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 )


HELP HELP , Press A Nuffnang For Me ♥


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


如何置放圖片在部落格 ?





第一種









第二種

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

把圖片代碼換成圖片網址

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



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

第一種 無彈窗



第二種 彈窗



每個瀏覽器有不同效果

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

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

會發出一個彈窗警告

<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>


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


HELP HELP , Press A Nuffnang For Me ♥


让你的链接出现框框



看到框框吗 ?

效果就是那个

登入部落格 > 设计 > 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






HELP HELP , Press A Nuffnang For Me ♥


更改 Highlight 颜色 ( 加 Shadow )



↑ 效果只有 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

HELP HELP , Press A Nuffnang For Me ♥


如何预设文章 ?


我常常说预设文章

什么是预设文章 ?

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

在设定好的时间内发布

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

每一篇都是早上 8点发布

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

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

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


到底怎么预设 ?

登入部落格 > 

在打完文章后

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

按它会出现一个框框

在张贴日期和时间那边

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


然后按发布文章

你会看到一下画面



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


如何隐藏 CBOX 内容


登入 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 我建议放黑色


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





加快开启你的部落格速度




这篇适合那些在部落格里

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

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

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

登入部落格 > 设计 > 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: "http://3.bp.blogspot.com/_LZtXSNcp76A/THkEtEOZfrI/AAAAAAAABRo/IARVMD_8TwA/s1600/grey.gif"});});</script>

确定没问题后 , 按 Save :D

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


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


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

怎么说自动发布 ?

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

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


效果如上

登入你的 Facebook > 专业 > 網誌 


随便点击你其中一篇文章

注意左下角


点击 編輯匯入設定 


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

在格子里打勾

然后按 

这样就大功告成了 :D


















HELP HELP , Press A Nuffnang For Me ♥





移动鼠标时 , 有星星飘落



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

  <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


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

第一种


就是普通你们看到的

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

<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



看到吗 看到吗 ?

效果就是那个 :)

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

登入部落格 > 设计 > Edit HTML


按 CTRL + F 寻找


.main-outer {

如果找不到那就找

.main-inner {


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

border:3px solid #736F6E;
border-radius: 60px 60px;

3px : 框框厚度

solid :框框种类



#736F6E : 颜色代码

border-radius : 框框圆角


添加 文章搜索框框


第一种 Google 自定搜索框

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


按 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>


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


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


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

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

<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)