• 你也可以的,个性化自己的博客推荐


    打开小洋的博客文章,例如IT草根的江湖路之二:改变,破釜沉舟的斗争

    可以看到右下角:

    image

    打开自己的一篇文章:例如:完全详解--使用Resource实现多语言的支持

    可以看到:

    image

    效果反差还是比较大的。

    首先博客园是可以自己写CSS的,在

    image

    下面的通过CSS定制页面风格里面可以输入自定义的css代码。

    image

    原理:找到控制”推荐一下的”div是哪一个,然后设置它的css

    在这里我使用IE8来找,当然你也可以用firefox。

    在ie8里面输入地址:例 http://www.cnblogs.com/LoveJenny/archive/2011/08/02/2125442.html

    按F12:弹出开发人员工具

    选择 “查找->单击选择元素”

    选择后效果如下:

    image

    同样你在开发人员工具中也可以看到:

    image

    OK,既然找到了控制”推荐一下”的div是div_digg,那么就应该自定义了。

    如果你css学的不错的话,那可以自己写css,否则就还是用别人的吧,在这里我用的是别人的。

    可以打开fiddler,然后浏览小洋的文章:

    在fiddler里面的

    image

    可以找到:

    image

    在这里我把脚本贴出来:

    #div_digg {
    
    float:right;
    
    font-size:12px;
    
    margin-bottom:10px;
    
    margin-right:30px;
    
    margin-top:10px;
    
    text-align:center;
    
    width:120px;
    
    position: fixed; right: 0px; 
    
    bottom: 0px; z-index: 10; 
    
    background-color: white; 
    
    margin: 10px; padding: 10px; 
    
    border: 1px solid rgb(204, 204, 204);
    
    }
    
    .vote
    
    {
    
    float:right;
    
    font-size:12px;
    
    margin-bottom:10px;
    
    margin-right:30px;
    
    margin-top:10px;
    
    text-align:center;
    
    width:120px;
    
    position: fixed; right: 0px; 
    
    bottom: 0px; z-index: 10;
    
     background-color: white; 
    
    margin: 10px; padding: 10px; 
    
    border: 1px solid green;
    
    }

    把这段css写到后台自定义css文本框中:

    image

    保存

    然后浏览文章,你会发现:

    image

    查看div_digg的html代码

    <div id="div_digg" style="display:none;">
    	<div class="diggit" onclick="DiggIt(cb_entryId,cb_blogId,1)"> 
    
    		<span class="diggnum" id="digg_count"></span>
    
    	</div>
    
    	<div class="buryit" onclick="DiggIt(cb_entryId,cb_blogId,2)"> 
    
    		<span class="burynum" id="bury_count"></span>
    
    	</div>
    
    	<div class="clear"></div>	
    
    	<div class="diggword" id="digg_tips"></div>	
    
    </div>

    可以发现diggit就是"推荐一下",buryit就是"反对"

    如果你不希望人家投反对票,你可以加上:

    .buryit{display:none;}
    
    .diggit{margin-left:40px}

    效果如下:

    image

  • 相关阅读:
    c语言中逆向显示数值
    c语言中无限循环语句
    css静态网页css代码
    css静态网页css代码
    考试html代码
    考试css代码
    考试html框架代码
    css静态网页代码
    5个CSS书写技巧
    5个CSS书写技巧
  • 原文地址:https://www.cnblogs.com/LoveJenny/p/2134378.html
Copyright © 2020-2023  润新知