要设计部落格最重要是要会基本的代码
要会去用或改就简单的多了 =]
首先我先教如何把gadget小工具移到中间,
因为多数的gadget工具都是靠边的...
只要你分别在gadget代码前后添加以下代码
小工具就能移到中间了..
Example:
再来就是这个代码
这个是代表空格的意思,
例如你想把2个工具放在同一个Gadget框框里
可是又不想两个工具黏在一起
就可以使用这个方法...
暂时先教大家最简单的两个先,
接下我会让大家了解HTML每个代码的作用,
和如何去改,有多少方法改 =]
在帖子标题添加框框
Example:
首先Design -> Edit Html ->Ctrl+F找到
post h3 {
然后在post h3 {的之后添加以下代码
border:2px solid #FBF5EF;
保存,就完成了=]
Example:
Example:
2px是框框线条的粗细
solid 是框框的线条
#FBF5EF是框框线条的颜色
别忘记点击广告哦=]
Ctrl+F 有什么用?
Example:
是什么用的吶?
就是让你方便添加或更改代码,
快速的找出你要找的代码...
你的网页就会出现类似小小的格子
Example:
把你要找的代码写上
就能找到你想找得代码了
Example:
要活用这项功能哦,
在blogger文章显示添加程式码区
什么时候会用到这个功能吶?
如果你想做个部落教学就一定会需要它=]
因为有时候部落格会使你所发出的代码变的不完整...
首先Design --> Edit HTMl -->CTRL+F找到以下代码
body {然后在body { 之前添加以下代码
Example:
在发布文章时候分别要在程式码的前后添加
以下代码(看图)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>
</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/>的上面添加以下代码
Example:(一定要看图)
预览后看看,有了就保存=]
若是想放在文章下端也能,
Example:
别忘记点击广告哦=]
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&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/>的下面添加以下代码
Example:
就完成了啦 =]
<data:post.body/>
然后在 <data:post.body/>的下面添加以下代码
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&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:
Click here SCM MUSIC PLAYER LINK
选择了要那种颜色后就能按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;
}
#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的代码格式都不同)
(至于要放在那里我就很难解释了,毕竟每一种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格式因为会出现白色背景)
(建议不要把鼠标设计成GIF格式因为会出现白色背景)
之后在save起来(换成PNG格式)upload上 Photobucket
copy下Direct Link Code
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下去就完成了=]
别忘记按下广告哦...
你们的支持是我些下去的动力 =]
首先打开美图-->按滑鼠右键(插入一张图片)
按闪图-->自己做闪图,
然后就会跳出一个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:
就完成啦=]
离开前按按下面的广告=]
你的支持是我写下去的动力^^
Subscribe to:
Posts (Atom)