分类: DayDayUp |
^^关于前面章节的留言答疑:
......基本回复了.不是在这回复的就是去大家博里回复了.先做本章节知识讲解吧.
DDU十一章——博客也能挂对联
其实,博客挂对联的部分方法,跟前面的第二章节讲的差不多.本章节提供2种挂对联的方法吧.
先简单介绍一下,第一种方法是静止的对联,也就是固定在博上的某个位置,第二种方法是滚动对联,但是更加适用于挂播放器。
首先说明,加太多东西会拖满自己页面的速度,如果浏览的人较多,建议不要使用。先从挂对联讲起。
方法一:
在博客的左右的上方加入对联。和之前第二章节讲的覆盖banner原理一样。
静止左对联代码:
<DIV id=moaz style="LEFT: 10px; POSITION: absolute; TOP:
50px"><IMG src="图片网址" border=0
alt=左对联></DIV>
静止右对联代码:
<DIV id=moaz style="RIGHT: 10px; POSITION: absolute; TOP: 50px"><IMG src="图片网址" border=0 alt=右对联></DIV>
<DIV id=moaz style="RIGHT: 10px; POSITION: absolute; TOP: 50px"><IMG src="图片网址" border=0 alt=右对联></DIV>
将此段代码新建成第一章节中的所提到的红蓝模板中的一种。(或者挂在某篇文章里也成)。原理和第二章节中讲述的图片位置覆盖的方法(第二章节中项目2中的第一种方法)一样。
举例说明:
替换图片地址后将得到如下代码:
左对联:
<DIV id=moaz style="LEFT: 10px; POSITION: absolute; TOP:
50px"><IMG alt=左对联
src="http://blog.sina.com.cn/pic/55a641f553dc3d65fb3e6"
border=0></DIV>
右对联:
<DIV id=moaz style="RIGHT: 10px; POSITION: absolute; TOP: 50px"><IMG alt=右对联 src="http://s13.sinaimg.cn/orignal/4782625a998e32e7fb07c" border=0></DIV>
<DIV id=moaz style="RIGHT: 10px; POSITION: absolute; TOP: 50px"><IMG alt=右对联 src="http://s13.sinaimg.cn/orignal/4782625a998e32e7fb07c" border=0></DIV>
将这2段替换后的代码复制新增到空白模板,得到效果如下:
上面的图片是2个gif动态图片,大家也可以直接用2张写字的静态图片写成对联替换在上面地址中。图片可以直接用某篇文章里的“图片剪切板”上传,得到图片地址后可以将图片从文章中点键盘上的backspace删除。以后更改可以在图片服务中更改。
这种方法优点在于对页面呈现效果美观,而且一定是在自己博客的上面banner附近。缺点在于,当页面不是最大化的时候,图片会随页面大小变化。
方法二:
跟随滚动的对联或播放器。
先讲随页面滚动的对联吧,提供代码如下:
滚动左对联代码:
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-100); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-470); TEXT-ALIGN: center"><IMG src="图片地址" border=0 alt=左对联></DIV>
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-100); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-470); TEXT-ALIGN: center"><IMG src="图片地址" border=0 alt=左对联></DIV>
滚动右对联代码:
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-970); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-470); TEXT-ALIGN: center"><IMG src="图片地址" border=0 alt=右对联></DIV>
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-970); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-470); TEXT-ALIGN: center"><IMG src="图片地址" border=0 alt=右对联></DIV>
举例说明,这次我们将上面2个图放相反位置:
替换图片地址后将得到如下代码:
滚动左对联代码:
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-100); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-470); TEXT-ALIGN: center"><IMG src="http://s13.sinaimg.cn/orignal/4782625a998e32e7fb07c" border=0 alt=左对联></DIV>
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; ; RIGHT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-100); FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-470); TEXT-ALIGN: center"><IMG src="http://s13.sinaimg.cn/orignal/4782625a998e32e7fb07c" border=0 alt=左对联></DIV>
滚动右对联代码:
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP:
medium none; ; RIGHT:
expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-970);
FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT:
medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP:
expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-470);
TEXT-ALIGN: center"><IMG alt=右对联 src="http://blog.sina.com.cn/pic/55a641f553dc3d65fb3e6"
border=0></DIV>
将这2段替换后的代码复制新增到空白模板,得到效果如下:
(本来想做成动画演示给大家看的,但是由于上次做成动画后有人提议还是用图片方便,所以本次还是做成图片解说吧。)
用鼠标将页面上下滚动时,对联会跟着页面滚动,如下:
^^关于左右对联解说完毕,已经详细的不能再详细了,请不懂的同志从第一章节学起,不要求一时的速成,也不要再提关于如何添加代码,代码加在哪的问题了。
下面解说挂播放器的代码。
挂播放器其实和上面挂对联是一个原理,只是播放器需要按照第十章和第十一章节讲解的上传后才能加入下面代码挂出。
第七章节的时候我已经申明过了,七章节之后属于针对高阶用户的教程,如果您不能熟悉前面的章节是很难继续下去,即使继续下去也只能一知半解的完成部分。而第七章我也申明过,各种讲过的细节不再重复讲解。
当您按照前两章节的方法制作并上传好您自己的播放器后。您就可以开始把播放器加入到您的页面中对联位置了。
因为时间关系,又只是给大家举例,我做了2个假播放器给大家演示。推荐下面的方法二的滚动播放器结合第十章节的播放器使用。
将播放器放入左右静态对联代码如下:
方法一:
在博客的左右的上方加入对联。和之前第二章节讲的覆盖banner原理一样。
左播放器嵌入代码:
<DIV id=moaz style="LEFT: 10px; POSITION: absolute; TOP:
50px"><IFRAME WIDTH='110' HEIGHT='150' ALIGN='CENTER'
MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0'
FRAMEBORDER='0' SCROLLING='NO'
SRC='播放器网页地址></IFRAME></DIV>
右播放器嵌入代码:
<DIV id=moaz style="RIGHT: 10px; POSITION: absolute; TOP: 50px"><IFRAME WIDTH='110' HEIGHT='150' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='播放器网页地址></IFRAME></DIV>
<DIV id=moaz style="RIGHT: 10px; POSITION: absolute; TOP: 50px"><IFRAME WIDTH='110' HEIGHT='150' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='播放器网页地址></IFRAME></DIV>
举例说明,首先,我上传播放器文件到到某个网页空间里,得到下列地址http://i6.sina.com.cn/dongman/lzs/mp.html(此处是朋友替我传了张图,并非真实网页)。
然后将上传好的播放器网页地址替换成自己的,代码变成:
左播放器嵌入代码:
<DIV id=moaz style="LEFT: 2px; POSITION: absolute; TOP:
15px"><IFRAME WIDTH='110' HEIGHT='150' ALIGN='CENTER'
MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0'
FRAMEBORDER='0' SCROLLING='NO'
SRC='http://i6.sina.com.cn/dongman/lzs/mp.html'></IFRAME></DIV>
我这个播放器大小似乎做大了,请作者自行制作的时候大小做小一点。^^
或者,右播放器嵌入代码如下:
<DIV id=moaz style="RIGHT: 2px; POSITION: absolute; TOP: 15px"><IFRAME WIDTH='110' HEIGHT='150' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='http://i6.sina.com.cn/dongman/lzs/mp.html'></IFRAME></DIV>
<DIV id=moaz style="RIGHT: 2px; POSITION: absolute; TOP: 15px"><IFRAME WIDTH='110' HEIGHT='150' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='http://i6.sina.com.cn/dongman/lzs/mp.html'></IFRAME></DIV>
此处不再做示例图了。
方法二:
结合第十章节、十一章节的播放器使用。随页面滚动,提供代码如下:
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP:
medium none; ; RIGHT:
expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-980);
FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT:
medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP:
expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-22);
TEXT-ALIGN: center"><IFRAME align=center marginWidth=0
marginHeight=0 src="播放器网页地址" frameBorder=0
width=980 scrolling=no
height=22></IFRAME></DIV>
举例说明,首先,我上传播放器文件到到某个网页空间里,得到下列地址http://moaz.xinwen365.net/Media%20Player/mp.html(此处是讲解上个章节的时候就传好的,请查看上个章节)。
将上传好的播放器网页地址替换成自己的,代码变成:
<DIV id=moaz style="BORDER-RIGHT: medium none; BORDER-TOP:
medium none; ; RIGHT:
expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-980);
FILTER: progid:DXImageTransform.Microsoftpadding:8px; BORDER-LEFT:
medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP:
expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-22);
TEXT-ALIGN: center"><IFRAME align=center marginWidth=0
marginHeight=0
src="http://moaz.xinwen365.net/Media%20Player/mp.html"
frameBorder=0 width=980 scrolling=no
height=22></IFRAME></DIV>
得到随页面滚动的播放器的效果图如下:
随页面滚动,如下图:
怕图片太小看不清,特别为大家临时制作了一个,将播放器放入了首页了,具体效果请看此页,短期内不会删除: http://blog.sina.com.cn/m/moaz
提示,放音乐或者音乐播放器在博客页的时候一定要注意"弹出广告"问题,
有些免费注册的空间是会自动加入一些弹出广告代码的,
请小心使用。此悬挂播放器的方法非常推荐……,只是请大家注意,选择免费上传空间的时候一定要小心出现此类情况,出现此情况,建议大家还是换个空间传吧。
本章节主要推荐对联和滚动的播放器(最后一种播放器效果)。本章节讲解结束。欢迎大家提问。下章节决定讲解如何在博客里放映幻灯片和加入相册。(^^!累死了)
返回 忘却天空的翅膀 首页,收听今日歌曲
前一篇:恐怖、暴力、清纯MM一把抓
后一篇:要和你一起做的100件事