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

简介:

打开小洋的博客文章,例如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






本文转自LoveJenny博客园博客,原文链接:http://www.cnblogs.com/LoveJenny/archive/2011/08/11/2134378.html,如需转载请自行联系原作者
目录
相关文章
|
5月前
|
存储 算法 数据库连接
[AIGC] 实现博客平台的推荐排行榜
[AIGC] 实现博客平台的推荐排行榜
213 1
|
JavaScript 前端开发 小程序
【2023新星计划 】博客创作指导 & 活动解读
【2023新星计划 】博客创作指导 & 活动解读
177 0
|
JavaScript Java 应用服务中间件
从 0 开始搭建一个技术博客,私藏干货~
技术博客的选型有很多种,如:博客园、CSDN、开源中国、简书、知乎等……都可以用来写文章,形成自己的技术博客。 上面的博客都是第三方的,有没有方式搭建自己的服务器、自己的域名的博客呢?栈长知道的成熟方案有:WordPress, Hexo 等,栈长的博客就是用 Hexo 搭建的。
970 0
从 0 开始搭建一个技术博客,私藏干货~
|
前端开发 JavaScript 开发工具
Silence - 专注于阅读的博客园主题
最近花了点心思整理了下我的博客园主题代码,今天正式和大家分享一下,感兴趣的园友可以了解一下。 主题介绍 Silence 追求大道至简的终极真理,旨在打造一个干净、专注阅读的博客主题,没有二维空间元素、不存在花里胡哨。
1598 0
为什么写博客?如何在博客中更好的分享?
  为什么要写技术博客呢?主要是受一本书的启发,这本书叫《软技能--代码之外的生存指南》,乐于分享就是其中的一项软技能。写技术博客是对自己已有知识和经验的总结和归纳,便于日后温故而知新,也把自己的知识和经验分享出来给有需要的人。
1385 0
|
JavaScript Shell 开发工具
用码云搭建简单的个人个性博客
很简单,大概一个小时就可以做好! 先说下原理 码云pages是一个静态网站托管地方,再加上码云本来就是个代码托管的地方,集成pages后,可以很方便的部署你的代码 本文原理:利用 马克飞象生成博客的md文件,利用He...
2534 0
|
搜索推荐 数据安全/隐私保护 SEO
看看这五种博客推广方法的具体说明
  在互联网的圈子里有关推广的问题是一个永恒的话题,你的商品哪怕再好如果没有推广出去一切都是白搭,经常听有人说“酒香不怕巷子深”,但结合当今社会的形式,特别是在竞争日益残酷的今天我想“酒香也会怕巷子深了”。
1404 0
下一篇
无影云桌面