a n n y i

anyeonghaseyo

Travel kaki | Ocean addict | Shopper | Banker

Believe you can and you're halfway there

Try to be a rainbow in someone else's cloud

network

followers

recent posts

monthly archive

nuffnang

Tutorial

5/11/2020 at 12:21

● favicon

● 鼠标效果 - 星星/雪

● 禁右键 disable right click

● 怎样隐藏nav bar

● 放- 欢迎框框 -

● 换cbox背景

● 换shoutmix背景

● CBOX的smilies

● 聊天室隐藏法

● 多种框框

● Rainbow Link Hover

● 制作自己的link

● header hover的效果【消失】

● Disable highlight text

● 置放签名档Signature

● 会滚动的[最新的帖子]

● 旋转cursor

● Energy Saving Mode

● Welcome Page 欢迎页

● FB Like Button 【BLOG】

● 鼠标效果 - 心型

● Text (marquee)

● 每篇帖子下面的字
● banner和body连在一起
● [动态视图Dynamic View] 侧边栏Scrollbar

Labels: 部落教学

[动态视图Dynamic View] 侧边栏Scrollbar

10/26/2014 at 22:46

无Scrollbar

有Scrollbar

Step:

模版 --> 自定义 --> 高级 --> 添加CSS --> 把code贴上 --> 在code的最后一行
最后一个字按Enter --> 应用于博客 √

Code :

.sidebar #sidebar, .ss{
margin-top: 12px !important;
overflow-y: scroll !important;
}

Source : southernspeakers

Labels: 部落教学

0 lovely comments

banner和body连在一起

10/09/2012 at 17:53

列图：我的部落格banner和body连在一起后

原样：只是个banner

Steps

1。首先，你要制作一个和你部落格一样宽(width)的banner，要知道自己部落格有几宽，参考：

模板 > 自定义 > Adjust widths > 来到上图那里

2。知道几宽（960那个！）了后，就开始制作和那宽度一样的banner，建议软件：

# Photoshop

# 美图

# 其他制图软件

3。把图片上传到：配置标题那里

4。保存了后，去模板 > 修改HTML > 按 Ctrl + F 寻找 .header-outer

5。在.header-outer 的下面放 margin-bottom:-10px;

6。预览看看在banner和body之间有*缝隙没有？如果有的话没关系，只需要把-10调到banner和body合在一起为止就可以了。

**banner和body之间不要有小工具存在
**部落格外框如果是圆角的话，最好换掉它，要不然效果没有你想象的美
**美的banner只需要自己平常多多研究多练习找资料，就可以制的了，所以不要羡慕别人的banner有多美，你也可以的！

Labels: 部落教学

0 lovely comments

每篇帖子下面的字 (kawad真是sibeh累！

6/27/2012 at 18:39

好吧我知道很久没更了，所以现在火速胡乱更一小篇！T^T

1：edit HTML

2：在Expand Widget Template打勾
3：按F3查找

4：找到了后，把

paste在 <data:post.body/>的下面
5：preview先，如果成功，SAVE! DONE!!

Labels: 部落教学

0 lovely comments

Text (marquee)

6/15/2012 at 20:27

今天放教程 =D 小更新一番

marquee？marquee是神马？？

marquee就是会滚动的字：

marquee

首先不会这个代码的人是不是都是在Crazyprofile
生成你们所谓‘会滚动的字’？大部分吧~~
现在如果学会这个代码的话就可以自己制作咯！

1. 开html/javascript，打以下的代码：

<marquee> 你要写的字 </marquee>

2. SAVE! 就这样，容易吗？试下吧！

Labels: 部落教学

0 lovely comments

鼠标效果 - 心型

5/25/2012 at 22:19

去韩国前，懒懒的更新了一篇 TT^TT

附图：

是不是很常见？？ XD

1. 把下面的代码copy到HTML/JAVASCRIPT里：

<script type='text/javascript'>
// <![CDATA[
var colour="#F7024B";
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(5, 5);
var rdow=createDiv(5, 5);
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()*5;
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+"49px";
div.style.width=width+"50px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

2. 更换心型颜色在这里：

可以把#F7024B换成别的颜色：颜色CODE

3. 嗒哒！SAVE 完成！！

Labels: 部落教学

0 lovely comments

FB Like Button (BLOG)

5/11/2012 at 21:29

FB Like Button 大家都知道吧？我部落格上面也有个~~

想要把这个放进部落格的亲，以下是教程，简简单单：

1. 复制粘贴下面的code，贴进HTML/JAVASCRIPT :

2. URL BLOG 那里放你们的部落格网址，exp : http://my-style-my-story.blogspot.com

3. SAVE，等人按LIKE吧 =D

Labels: 部落教学

0 lovely comments

Welcome Page 欢迎页

5/08/2012 at 17:12

范图：欢迎页

1. 按 f3 查找：

2. 把下面代码放到step 1代码的上面

/* to top */
#toTop { width:100px;background:none;border:0px solid #ccc;text-
align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-
decoration:none; }
</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<center><div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<img src="图片代码"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
</div></center>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>

3. 在图片代码放上你的图片direct link

4. SAVE ! 完成

下

楼

梯

** 私人'seng' 你们 x)

*你们可以拿这张试下

Labels: 部落教学

5 lovely comments

Energy Saving Mode

5/06/2012 at 20:29

*按放大

把代码放进HTML/JAVASCRIPT =D

SAVE! 完成

Labels: 部落教学

0 lovely comments

旋转cursor

4/28/2012 at 21:38

噔噔噔噔！ im back =D
今天放教程 YEAHH!

旋转的鼠标就是上面那个啦
颜色哇塞爱国的一下就看到就是bendera的color
这里有谁不爱国？？ xD
不是色盲的一下就看到只要你是malaysian 啦啦

代码：（只需放进html/javascript里头，建议部落格背景黑色, cursor才会显色）

<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

**没有被hightlight的部分，可以随你们自己喜欢改变鼠标颜色

Labels: 部落教学

1 lovely comments

会滚动的[最新的帖子]

1/01/2012 at 16:19

啦啦~我又发教程了啦

1.把以下代码添加到HTML/JAVASCRIPT里面就行了 =D

2.在你的部落格网址写上你的部落格URL；
- background:#EFEFEF （换背景颜色
- numposts = 10（出现的帖子字数
.....
**如果你会html，那就更可以随你自己的喜欢更改了！

3.记得copy进HTML/JAVASRIPT里面，SAVE！完成~

简单吧，会HTML的朋友也可以自行加效果进代码里面。这样就会漂亮、个性多了~

2012年，希望一切顺顺利利！就不要真的世界末日了哟！!

Labels: 部落教学

2 lovely comments

置放签名档Signature

11/23/2011 at 12:17

1. 按 F3 找：

<data:post.body/>

2. 复制下面的代码，把它放再<data:post.body/>的后面：

<br><div align="right">Yournamehere</div><br>

* 如果你的签名是图片模式，copy ：

<img src='图片direct link'/> 替代Yournamehere

<br><div align="right">Yournamehere</div><br>

* right 可以改去 left，随自己喜好：

<br><div align="right">Yournamehere</div><br>

3. Save 完成啦~

Labels: 部落教学

0 lovely comments

Disable highlight text

11/21/2011 at 18:23

经过试了以后，发觉这个比较有效~
当然如果要套用你的文字设定，正篇抄走也不是没有可能的哦！只是被抄袭的几率会比较低

Copy N Paste in HTML/JavaScript

代码：

<script type="text/javascript">

/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

Labels: 部落教学

0 lovely comments

header hover的效果【消失】

11/20/2011 at 15:26

1.打开edit html，在Expand widget Template打勾勾，按F3查找：

#header 或者 .header

2.把下面的代码paste在上面代码的后面:

#header:hover {
padding-left:160px;
-webkit-transition: .8s;
-webkit-transform: rotate(6deg);
opacity:.01; }

3.Save Template，完啦~

Labels: 部落教学

0 lovely comments

制作自己的link

7/10/2011 at 11:49

给chinyi，这个？？

上面这一个呢，就是link-链接
怎样制作属于自己的link，很简单，只要你会edit图片就可以了...

step 1（已经会了的，可以skip
找一张喜欢的底图，譬如类似下面的：

或者

大张的-裁剪自己喜欢的部分：

step 2
在里面写上你要写的字
（可以用美图软件：美图秀秀，可牛影像，photoscape, photoshop.....

step 3

copy下面的代码：

根据上面的提示，完成你的link，paste进HTML/JAVASCRIPT就ok了

注：代码的框框语法：

Labels: 部落教学

1 lovely comments

Rainbow Link Hover

5/25/2011 at 15:54

效果：鼠标放在链接/LINK的时候会五颜六色

copy以上代码，

去[修改HTML],ctrl+f查找：

然后把以上代码paste前面就可以了

Labels: 部落教学

0 lovely comments

换shoutmix背景

3/20/2011 at 12:25

1.把以下代码放进 <iframe title='annyichan'....的前面

2.如要把背景变成透明，加下面的代码在scrolling="auto" 的后面

如果有什么不明白的就留言问吧~

Labels: 部落教学

5 lovely comments

多种框框

3/17/2011 at 14:07

*只有在MOZILLA才显现出效果,所以用IE和GOOGLE CHROME的人就抱歉啦！

第一种：


 -moz-border-radius: 10px;

第二种：（这个边缘比较圆）


-moz-border-radius: 2em;  
        -webkit-border-radius: 2em;
                border-radius: 2em;

第三种：


-moz-border-radius: 0 50px 50px 0;
       border-radius: 0 50px 50px 0;
}

第四种：


  -moz-border-radius: 40px 10px;  
            border-radius: 40px 10px;
}

红色部分可以根据自己喜好更改
save之前可以先预览看看噢！

以上这些效果可以把它添加到{...}：

h2 {

.post {

.sidebar .widget{

a:hover {

#main-wrapper

#sidebar-wrapper

Labels: 部落教学

11 lovely comments

聊天室隐藏法

2/03/2011 at 20:12

首先看个图：

把聊天室隐藏起来就是像上图这样子的放到旁边
平常我们都是把它放在homepage那边，现在换个方法
看起来不会比较乱的（如果blog真的有很多东西的话...

如上图：
把代表聊天室的图片按了后，聊天室就从旁边出来了

步骤：

1：<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i.imgur.com/IHwwt.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">   </div>
<div class="gbcontent">

CODE SHOUTBOX  

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

2：copy以上代码到HTML/JAVASCRIPT

3：copy你的聊天室的代码

4：paste进去[步骤1]的代码里（里面有指示）

*不要跟我贴了下去以后就直接保存啊，代码里面还要放你chatbox/shoutmix HTML的，看清楚来~
*图片可自行换

++++++++++++++++++++新年快乐!!++++++++++++++++++++

这代码有没有错，有没有对我不知道哈
我要feedback feedback =)

source: Cerita Hannafauzann

Labels: 部落教学

9 lovely comments

换highlight颜色

1/20/2011 at 16:50

嗒哒~!今天来写教程
电脑经典的highlight颜色，如图:

之后：

看到差别了没有，有没有变到更好看？
再也不是蓝色背景白色的字
而且还可以自行更换颜色!

步骤：

1：去[修改HTML]

2：按ctrl+f查找：

3：在a img {...}的后面加上以下代码：

4：颜色代码可以到这里参考

5：save! 完成

FOR html代码里面找不到a img {（这个代码的）的亲

1：copy code:

2：把以上代码paste进

的上面

3：- 完 -

selection是用于平常的帖子文字
code selection是用于语法（code）的文字
pre selection是用于Pre语法的文字
background为背景颜色，color为字体颜色

source: WHAT?!!

Labels: 部落教学

3 lovely comments

← O L D E R P O S T