注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

YGGL 268的博客

老年生活质量 ——贵在心态

 
 
 

日志

 
 

《博主推荐的相关阅读》-图标的代码及其说明  

2014-08-17 07:23:39|  分类: 博客纪事 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
漂漂、春回大地

(一)《博主推荐的相关阅读》图标
——春回大地的初步设计
    YGGL268博客是“个博”,也是“群博”,它的特点在于博客日志不是博主一个人的原创或转载,而是由十几位南化院院友参与撰写或推荐转载。一直以来博主总在寻求用一种迅捷、悦目的方法,替代以作者名字为标签的链接,以便在发表其作品时,推荐与他(她)有关的相关阅读。
    网易博客有一款《您可能也喜欢》的管理功能,能自动生成同类内容日志的相关链接,显示在每篇日志的尾部。春回大地最近模拟了这种链接。图标形式如下图:点击图片或日志题目的文字即可进入相关链接。


《您可能也喜欢》图标的代码及其说明 - 春回大地 - YGGL 268的博客
       漂漂编制了以上示例图标的代码,优化了链接功能 ,并对代码的使用作了详尽的说明,在此与朋友们分享,希望与您进一步磋商交流,发现问题,修改完善。

 
(二)图标代码

<TABLE title=点击文字进入相关分类阅读 border=1 cellSpacing=3 borderColorLight=#666666 borderColorDark=#666666 cellPadding=0 width="90%" align=center>

<TBODY>

<TR align=middle>

<TH height=160 borderColorLight=#404040 rowSpan=4 width=160 borderColorDark=#eeeeee>

<P align=center>

<A

href="http://dichun39.blog.163.com/blog/static/19472356320135298270472//target=_blank><FONT color=#333333><IMG style="MARGIN: 0px 10px 0px 0px; WIDTH: auto; FLOAT: none; HEIGHT: auto; cssfloat: none"src="http://img2.ph.126.net/7M9A6WyNI9WebMSXHex2nw==/133700614037855960.jpg" P ____="ev_9244972935"></FONT></A></P>

<A

href="http://dichun39.blog.163.com/blog/static/19472356320135298270472//;" target=_blank ><FONT color=#ff0000>

<FONT size=2>我爱这蓝色的海洋<WBR></FONT></FONT></A></TH>

 

<TH height=120 borderColorLight=#404040 rowSpan=4 width=160 borderColorDark=#eeeeee>

<P align=center>

<A

href="http://dichun39.blog.163.com/blog/static/1947235632013329102913948//target=_blank><FONT color=#333333><IMG style="MARGIN: 0px 10px 0px 0px; WIDTH: auto; FLOAT: none; HEIGHT: auto; cssfloat: none"src="http://img1.ph.126.net/0x8qPF6CtTqDWKxw_816Jw==/6608720191864351402.jpg" P ____="ev_9244972935">

</FONT></A></P>

<A

href="http://dichun39.blog.163.com/blog/static/1947235632013329102913948//;" target=_blank><FONT color=#ff0000>

<FONT size=2>莫斯科郊野的晚上<WBR></FONT></FONT></A></TH>

 

<TH height=120 borderColorLight=#404040 rowSpan=4 width=160 borderColorDark=#eeeeee>

<P align=center>

<A href="http://dichun39.blog.163.com/blog/static/194723563201323072323713//target=_blank><FONT color=#333333><IMG style="MARGIN: 0px 10px 0px 0px; WIDTH: auto; FLOAT: none; HEIGHT: auto; cssfloat: none" src="http://img2.ph.126.net/Zhs05IASCINwyz-N1moCEw==/1371627561611213000.jpg" P ____="ev_9244972935"></FONT></A></P>

<A href="http://dichun39.blog.163.com/blog/static/194723563201323072323713//;" target=_blank><FONT color=#ff0000><FONT size=2>衷心赞美<WBR></FONT></FONT></A></TH>

 

<TH height=120 borderColorLight=#404040 rowSpan=4 width=160 borderColorDark=#eeeeee>

<P align=center>

<A href="http://dichun39.blog.163.com/blog/static/19472356320137273155579//target=_blank><FONT color=#333333><IMG style="MARGIN: 0px 10px 0px 0px; WIDTH: auto; FLOAT: none; HEIGHT: auto; cssfloat: none" 

src="http://img1.ph.126.net/zgrtA74O8_sBUZrKLlnqZA==/1664080062413685445.jpg" P ____="ev_9244972935"></FONT></A></P>

<A href="http://dichun39.blog.163.com/blog/static/19472356320137273155579//;" target=_blank><FONT color=#ff0000><FONT size=2>海港之夜<WBR></FONT></FONT></A></TH>

 

<TH height=120 borderColorLight=#404040 rowSpan=4 width=160 borderColorDark=#eeeeee>

<P align=center>

<A href="http://dichun39.blog.163.com/blog/static/1947235632014410103119220//target=_blank><FONT color=#333333><IMG style="MARGIN: 0px 10px 0px 0px; WIDTH: auto; FLOAT: none; HEIGHT: auto; cssfloat: none" src="http://img1.ph.126.net/6U0WiZa6LNz33cBVhgKWGA==/1141099555685924146.jpg" P ____="ev_9244972935"></FONT></A></P>

<A href="http://dichun39.blog.163.com/blog/static/1947235632014410103119220//;" target=_blank><FONT color=#ff0000><FONT size=2>酒干倘卖无<WBR></FONT></FONT></A></TH>

<BR></TR></TBODY></TABLE>


       试试效果:

 

(三)代码说明

说明如下:

1. 上面代码共链接五个单元:

http://dichun39.blog.163.com/blog/static/19472356320135298270472//

http://img2.ph.126.net/7M9A6WyNI9WebMSXHex2nw==/133700614037855960.jpg我爱这蓝色的海洋

http://dichun39.blog.163.com/blog/static/1947235632013329102913948//

http://img1.ph.126.net/0x8qPF6CtTqDWKxw_816Jw==/6608720191864351402.jpg

莫斯科郊野的晚上

http://dichun39.blog.163.com/blog/static/194723563201323072323713//

http://img2.ph.126.net/Zhs05IASCINwyz-N1moCEw==/1371627561611213000.jpg衷心赞美

http://dichun39.blog.163.com/blog/static/19472356320137273155579//

http://img0.ph.126.net/9VhsxWnRltxMIcD6Y62dwQ==/2688930452534965683.jpg

海港之夜

http://dichun39.blog.163.com/blog/static/1947235632014410103119220//

http://img0.ph.126.net/9VhsxWnRltxMIcD6Y62dwQ==/2688930452534965683.jpg

酒干倘卖无


2. 每个单元,都有三个基本数据。例如:

链接网址:http://dichun39.blog.163.com/blog/static/1947235632014410103119220//

链接图形标识:http://img0.ph.126.net/9VhsxWnRltxMIcD6Y62dwQ==/2688930452534965683.jpg

链接文字:酒干倘卖无


3. 一个单元的代码如下,例如:

<TH height=120 borderColorLight=#404040 rowSpan=4 width=160 borderColorDark=#eeeeee>

<P align=center>

<A href="http://dichun39.blog.163.com/blog/static/1947235632014410103119220//target=_blank><FONT color=#333333><IMG style="MARGIN: 0px 10px 0px 0px; WIDTH: auto; FLOAT: none; HEIGHT: auto; cssfloat: none" src="http://img0.ph.126.net/9VhsxWnRltxMIcD6Y62dwQ==/2688930452534965683.jpg

" P ____="ev_9244972935"></FONT></A></P>

<A href="http://dichun39.blog.163.com/blog/static/1947235632014410103119220//;" target=_blank><FONT color=#ff0000><FONT size=2>酒干倘卖无<WBR></FONT></FONT></A></TH>


4. 如果将文字写在图上,就可以将文字代码部分省去。代码如下:

<TH height=120 borderColorLight=#404040 rowSpan=4 width=160 borderColorDark=#eeeeee>

<P align=center>

<A href="http://dichun39.blog.163.com/blog/static/1947235632014410103119220//target=_blank><FONT color=#333333><IMG style="MARGIN: 0px 10px 0px 0px; WIDTH: auto; FLOAT: none; HEIGHT: auto; cssfloat: none" src="http://img0.ph.126.net/9VhsxWnRltxMIcD6Y62dwQ==/2688930452534965683.jpg

" P ____="ev_9244972935"></FONT></A></P></TH>


5. 要击图片(或文字)到新的日志以后可以回到原文件,关键是target=_blank

(两处都要加!!)



                 (四)形式多样的推荐链接图标

                      (1)网易博客可以自动生成的《您可能也喜欢》图标
《你可能也喜欢》图标的代码说明 - 春回大地 - YGGL 268的博客
                    
                     漂漂告诉你引用此图标的操作步骤
                     点博客右上角的《个人中心》-------进入新的页面后------点左下角的《更多博客工具》
                 ------进入下一个页面后------点中间的《无觅相关文章》-------选《自动匹配相关文章》就可。


                (2)博客推荐阅读的图标示例
                                  《你可能也喜欢》图标的代码说明 - 春回大地 - YGGL 268的博客

                     (3)博客《您可能也喜欢》的图标示例

                《你可能也喜欢》图标的代码说明 - 春回大地 - YGGL 268的博客
                   
                    (4)《博主推荐的相关阅读》图标
《您可能也喜欢》图标的代码及其说明 - 春回大地 - YGGL 268的博客
                  
                  (五)附注
                    图标小照片的获取
                    春回大地的做法比较笨,不妨说一下,有好方法的请赐教。选择一张合意的图片用美国秀秀软件加工,裁剪成90×90的尺寸,插入一篇日志草稿中,点击图片,按鼠标右键,在弹出的菜单中选择“复制图片网址”,就粘贴在图片下方。
  评论这张
 
阅读(232)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017