在CSDN博客页面上显示微博内容

CSDN 的博客的确是乏善可陈,音视频、Flash 放不进,HTML 也不能添加,博客版面模块不能自定义,想把我新浪博客的内容同步更新显示到博客上,费了半天也没有找到合意的解决办法。最后参考了 Iijse 李毅 的博客《给CSDN博客加上腾讯微博》,通过自定义CSS的方式把新浪微博的最新一条微博用图片的形式显示到博客页面上方。

在CSDN博客页面上显示微博内容_第1张图片

实现方式如下:

1、在新浪微博页面,点击右上方的“工具”,然后选择“签名档”,用途选“图片”,复制“获得代码”中的图片地址。

在CSDN博客页面上显示微博内容_第2张图片

2、 打开“配置”进入CSDN博客的“显示设置”页面,在“自定义CSS样式”栏内复制如下代码:

/* 添加新浪微博 */
/* 基本原理:将微博图片与博客页面的搜索栏绑定显示 */
#csdnblog_header ul#personalnav { top:0; }
/* 设置搜索栏的格式 */
#csdnblog_header ul#blogsearchsty  {
margin-top:-102px; /* 这里可调整搜索栏和微博图片的垂直位置 */
position:relative;
text-indent:-9999px;
z-index:9999
}
#csdnblog_header ul#blogsearchsty  li.selectsty+li {
/* 在下面的 url 内换上你的微博签名档图片,支持新浪、腾讯、搜狐等多种微博 */
background: url(http://service.t.sina.com.cn/widget/qmd/1812724297/2cf42040/1.png) no-repeat center bottom;
display: block;
height: 100px;
position: absolute;
right: 0px;  /* 这里调整微博图片的水平位置 */
text-align: right;
width: 380px;
}
#csdnblog_header ul#blogsearchsty  li.selectsty+li input { display:none; }

在CSDN博客页面上显示微博内容_第3张图片

OK,有兴趣的朋友不妨试试,有更好的方法麻烦告诉我啊 O(∩_∩)O~

你可能感兴趣的:(css,新浪微博,腾讯,header,url,input)