基本代码使用方法

要设计部落格最重要是要会基本的代码
要会去用或改就简单的多了 =]

首先我先教如何把gadget小工具移到中间,
因为多数的gadget工具都是靠边的...
 只要你分别在gadget代码前后添加以下代码
小工具就能移到中间了..

Example:


再来就是这个代码
这个是代表空格的意思,
例如你想把2个工具放在同一个Gadget框框里
可是又不想两个工具黏在一起
就可以使用这个方法...

暂时先教大家最简单的两个先,
接下我会让大家了解HTML每个代码的作用,
和如何去改,有多少方法改 =]

在帖子标题添加框框

Example:

首先Design -> Edit Html ->Ctrl+F找到

post h3 {

然后在post h3 {的之后添加以下代码

border:2px solid #FBF5EF;

保存,就完成了=]

Example:


2px是框框线条的粗细
solid 是框框的线条
#FBF5EF是框框线条的颜色



别忘记点击广告哦=]

Ctrl+F 有什么用?

Example:

是什么用的吶?
就是让你方便添加或更改代码,
快速的找出你要找的代码...

你的网页就会出现类似小小的格子
Example:

把你要找的代码写上
就能找到你想找得代码了

Example:

要活用这项功能哦,
省时又省力=]

为文章区添加框框


别忘记点击广告哦=]

框框的线条

框框的线条可以分为几种

Example:

而这些有什么用呢?
你能用在整体框框,文章框,Gadget框...
选择自己要的款式 =]

在blogger文章显示添加程式码区

什么时候会用到这个功能吶?
如果你想做个部落教学就一定会需要它=]
因为有时候部落格会使你所发出的代码变的不完整...

首先Design --> Edit HTMl  -->CTRL+F找到以下代码

body {

然后在body { 之前添加以下代码


Example:

在发布文章时候分别要在程式码的前后添加以下代码(看图)
Example:



程式码区的模板
Example:


别忘记点击广告哦=]

禁止右键功能Can't COPY(三款)

害怕别人做COPY CAT,
COPY你辛苦完成的原创文章?

那就用这项功能吧...
封锁或完全禁止右键功能..

第一款

这是使用JAVA SCRIPT 代码禁止右键和highlight Ctrl+C 功能,
(使用此功能后可能会应该到你的鼠标效果)

Design -->Page Element -->Add Gadget -->JAVA/HTML Script

然后在的右边添加以下代码

<script language=javascript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>

第二款

这是一款完全禁止右键和highlight Ctrl+C功能的代码,
是完完全全禁止的哦,
使用这个代码,会使你的鼠标效果也无法使用...

可是这款真的很好用,我还找不到破解它的方法..

Design -->Edit HTML --> CTRL+F找到
</head>

然后把<body>替换成以下代码

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>


Example:


在文章里添加FB LIKE

Example:

首先 Design --> Edit HTML --> 在Expand Widget Templates打勾勾
然后在CTRL+F 找到

 <data:post.body/>

然后在 <data:post.body/>的上面添加以下代码

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>  

Example:(一定要看图)

预览后看看,有了就保存=]



若是想放在文章下端也能,

Example:


首先 Design --> Edit HTML --> 在Expand Widget Templates打勾勾
然后在CTRL+F 找到

<data:post.body/>

然后在 <data:post.body/>的下面添加以下代码

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>  

Example:

就完成了啦 =]


别忘记点击广告哦=]

颜色代码

linkwithin widget <您或许对这些文章有兴趣>

Linkwithin 是什么?

Example:

每一次Reload都会Random的显示不同的文章...

制作方法很简单,
首先点击以下LINK


进去那网址后输入资料..

Example:

Email =邮件信箱
Blog Link =部落格网址
Platform =选择BLOGGER
Width =选择显示3或到5文章 

若是你的背景是黑色的就在 
My blog have light text on a dark background 
打勾勾

完成后就点击下Get Widget ..

就会看到这

Example:

点击那个 Install window

就会弹出一个小窗口

example:

点击Add Widget 就可以了...
在回去你的page element查看有没有,
有了就成功了=]


别忘记点击广告^^

如何移动banner

什么是banner?

example:
就是部落格标题咯
想要去移动它?
很简单只需要跟着我的方法一步一步来,
一定能成功的...
而这就有三种方法..

第一种

首先 Design ->Edit HTML-->
Ctrl+F找到

a img {

然后在a img {的下面添加

margin: 0% 0% 0% 0%;

Example:

红色的是调整你要的距离..
第一个0% 是往下移
第二个0% 是往右移
第三个0% 是上移(这个基本上不需要调)
第四个0% 是往左移

  
第二种方法

一样的Design ->Edit HTML-->
Ctrl+F找到

/* Header

往下看看有没有

#header {

若是有了就只需要在#header { 的下面添加

margin: 0% 0% 0% 0%;

若是没有就是在/* Header的下面添加

#header { 
  margin: 0% 0% 0% 0%;
  border: none;

Example:

红色的是调整你要的距离..
第一个0% 是往下移
第二个0% 是往右移
第三个0% 是上移(这个基本上不需要调)
第四个0% 是往左移


第三种

按Design --> Edit HTML -->Ctrl +F 找到

.header-outer {

然后在.header-outer {的右边添加

margin-left : ?% ;

就会变这样,

Exmple :

.header-outer {margin-left : ?% ;


数目越大就越右边

完成后按预览,没问题就能保存了=]



别忘记点击广告哦=]
你的支持是我写下去的动力

SCM Music Player

SCM MUSIC PLAYER是什么?
就是部落格音乐器啦...

Example:


选择了要那种颜色后就能按Edit Playlist-->Manual Playlist

example:

Song title = 歌曲名字
Song URL = 歌曲的LINK

要如何取得歌曲的LINK呢?
很简单...

example:
就是红色格子里那个啦=]

完成后按configure settings

example:

Auto start = 自动播歌
Shuffle play back = 重复和shuffle播歌
Default volume:歌声大小
Placement of the player :要放的位置
show playlist default 选 OFF 就好了...

好了之后按DONE -->Copy HTML code 

然后回到你的部落格按...
Design -->Page Element -->  Add Gadget -->HTML Java Script
然后paste 进去就好了 =]

*SCM Music Player 本身有一种Bug,会使你的Website Address无法更换...


别忘记点击广告哦..
你的支持是我写下去的动力=]

移除 Blogger Navbar bar

什么是Blogger Navbar bar?

Example:

是不是有时候觉得很碍眼?
那就把它给移除吧 =]

步骤1: Design-->Edit Html-->Ctrl +F 找到
/* Variable definitions

然后在/* Variable definitions的上面添加以下代码


#navbar-iframe {
display: none !important;
}

Example:


好了save起来就完成了 =]

别忘了点击广告哦^^

goodbye 弹窗

这个教程是转载至

至于什么是goodbye弹窗吶...
就是在你按右上角的X想离开时,
会弹出一个弹窗,
那就是所谓的goodbye弹窗啦 =]

Example:

方法很简单,
首先Design -->Page Element -->  Add Gadget -->HTML Java Script

然后在把以下代码copy and paste 进去,


<script type='text/javascript'>
function goodbye(){
alert('写你想要写的');
}
parent.window.onunload=goodbye;
</script>


save 就完成了 =]

别忘记点击广告哦..
你的支持是我写下去的动力哦 =]

如何在blogskin里添加follower

使用blogskin的博主们一定都能懊恼吧?
不能像新模板一样只要添加小工具就能使用follower了,
只能使用代码添加...
example:

首先你必须进入以下网址,

就点击左边的overview (先选择你的部落格)-->Add the member gadget 

Example:

再接下来呢...

黑色格子是设定大小
红色格子是设定颜色
蓝色的格子是设定字体

完成后就点击下面的
generate code,
copy and paste进你的blogskin里就完成了=]
(至于要放在那里我就很难解释了,毕竟每一种blogskin的代码格式都不同)


别忘了点击广告哦 =]
你的支持是我写下去的动力哦^^

energy saving mode

什么是energy saving mode?
就是当你放着完全不动维持几分钟后会出现的黑屏,
据说是能省电啦xD
可是我不懂是不是真的能啦...

Example:

步骤1 : design -->; page element -->; Add gadget -->Add HTML

<script src='http://www.vincentcheung.ca/jsencryption/jsencryption.js' type='text/javascript'></script><script type="text/javascript">if (window.jstiming) window.jstiming.load.tick('headEnd');</script><br /> <!-- save your energy --><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script><!-- save your energy end --><script type='text/javascript'></script><script type='text/javascript'> 

就完成了啦 =]

别忘记点击广告哦,
你的支持是我写下去的动力哦=]

用美图秀秀自制个性鼠标

步骤1 :打开美图秀秀-->新建-->透明-->150像素 100像素(别太大)


之后就能开始设计啦 =]
你能利用美图秀秀里的饰品或特色字体..
若是你有素材了想添加进去,
只要在图里按右键,
添加图片就能了.

设计好后,
就是使用裁剪,
剪出适当的大小.
(建议不要把鼠标设计成GIF格式因为会出现白色背景)

之后在save起来(换成PNG格式)upload上 Photobucket
copy下Direct Link Code

完成后的example:

(喜欢可以拿走=])

如何更换鼠标?
点击以下文章Link



不要忘记点击以下广告哦,
你的支持就是我写下去的动力啦 =]

如何使用美图制作闪图

Example:
很简单的制作方法,
首先打开美图-->按滑鼠右键(插入一张图片)


按闪图-->自己做闪图,
然后就会跳出一个window 出来
 就可以添加照片了...
 添加好了后就能调整换图速度了..
完成后就可以点击预览闪图效果 =]
觉得满意后就能保存了...

如何放上部落格
首先去photobucket upload 闪图
sign in (没有账号的就sign up register)
按upload,
点击你的闪图位子,
然后在copy你那闪图的HTML Code,
然后在到你的部落格,
deisgn-->page Element -->Add gadget -->Add Html
然后paste下去就完成了=]


别忘记按下广告哦...
你们的支持是我些下去的动力 =]

如何更换部落格显示图片+如何制作 (美图)

什么是部落格显示图片?
example:
就是左边那个B的图标。

要如何更换它呢?
步骤1 : Design --> Edit HTML -->然后在Expand Widget Templates旁边的格子里打勾


然后CTRL+F找到以下代码








然后在下面把一下代码添加进去








就完成了 =]

-----------------------------------------------------------------------
如何用美图制作部落格显示图标

首先你一定要有美图秀秀这个软件啦(废话)
没有的能到美图秀秀的官网下载
美图秀秀官方网站

打开美图-->新建

100像素 X 100像素 然后在选是要背景白色/透明/颜色

然后就能开始制作了...
可以活用左上角的工具=]
例如饰品,文字


就能完成了=]
最后我想说,
部落格就像你自己...
做为最真实的自己,
别去copy模仿别人的部落风格,
而是自己创造属于自己的风格。


-----------------------------------------------------------------------
或者使用第二种方法...
使用美图秀秀做出16px X 16px 的图片然后再去以下网址upload那张图片...

http://www.iconj.com/favicon_hosting.php 

Example:

*Step 1:选择你要Upload的图片(16px X 16px)

*Step2: 点击Upload

*Step3:确认图片后Copy Direct Link


然后回去的你的部落格
Design-->Edit HTML-->Ctrl+F找到以下代码

</head>

然后在</head>的上面Ctrl+V paste 刚才拿到的图片Direct Link

Example:

就完成啦=]



离开前按按下面的广告=]
你的支持是我写下去的动力^^