博客园自定义皮肤扁平化设计

简介: 博客园自定义皮肤设计效果抢先看眼见为实!!!戳戳戳》》》marsggbo的博客园1. 博客皮肤首先将博客皮肤选为BlackLowKey2. 代码设置1) 页面定制CSS代码body{ background: url(http://dik.

博客园自定义皮肤设计

效果抢先看

img_a5933187b78105245b04fe91fb545ed0.png

眼见为实!!!戳戳戳》》》marsggbo的博客园

1. 博客皮肤

首先将博客皮肤选为BlackLowKey

2. 代码设置

1) 页面定制CSS代码

body{
    background: url(http://dik.img.lgdsy.com/pic/38/26542/7d7f902577c15f1e_1440x900.jpg) fixed center center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#navList a:link, #navList a:visited, #navList a:active{
    text-shadow: none;
}
#navList a{
    text-shadow: none;
}
#navList a:hover{
    font-weight: bold;
    color:rgb(10,186,157);
    text-shadow: none;
    text-decoration: none;

}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: rgb(7,113,126);
}
.postTitle {
    border-left: 5px solid rgb(10,186,157);
}
#Header1_HeaderTitle{
    font-size: 350%;
}

#Header1_HeaderTitle:hover{
    text-decoration: none;
    color:rgb(10,186,157);
}
#blogTitle h2{
    margin-left: 2em;
    font-size: 1.5em;
    padding-bottom: 20px
}
#back-to-top {
    background-color: rgb(10,186,157);
    bottom: 0;
    box-shadow: 0 0 6px rgb(10,186,157);
    color:white;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
    width:20px;
    height:20px;
    border-radius:20px;
    text-align:center;
}
#back-to-top a{
    width:16px;
    height: 16px;
    text-decoration: none;
    font-weight:bold;
    color:white;
    font-size:18px;
}
#back-to-top a:hover{
    color:rgb(255,202,189);
}

#sidebar_shortcut{
display:none;
}

#div_digg{
  position:fixed;
  bottom:5px;
  width:120px;
  left:0px;
  padding:5px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

2)博客侧边栏公告

<div id="myTime">
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="180" height="80" id="honehoneclock" align="middle">
 <param name="allowScriptAccess" value="always">
 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#ffffff">
 <param name="wmode" value="transparent">
 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="180" height="80" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
 </object>
 </div>

<div align="left">
<b>您是第</b>
<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3216805&c=9650728" alt="AmazingCounters.com"></a>
<b>位访客</b>
</div>

<div id="sidebar_friendLinks" class="sidebar-block">
<div class="friendLinks">
    <hr><br>
<b class="friendLinksTitle">友情链接</b>
<ul>
<li><a href="http://blog.csdn.net/marsggbo" title="CSDN博客">marsggbo的CSDN博客</a></li>
<li><a href="http://blog.163.com/hexin_mars_blog/" title="网易博客">火星教</a></li>
<li><a href="http://marsggbo.github.io/blog/" title="github博客">github博客</a></li>
<li><a href="http://www.cnblogs.com/marsggbo/p/" title="我的博客的评论列表">我的随笔</a></li>
</ul>
<div id="itemListLin_con" style="display:none;">
<ul>

</ul>
</div>
</div>
<hr><br>

3)页首Html代码

github地址

<a href="https://github.com/marsggbo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

4)页脚Html代码

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1263920205'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1263920205%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/marsggbo/category.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/marsggbo/category.js"></script>

<span id="back-to-top"><a href="#top">↑</a></span>
<br><br><hr>
<footer style="color: white; background-color: rgb(24,24,24); padding: 10px">
<h3 style="text-align: center; color: tomato; font-size: 16px">
<b>MARSGGBO</b><b style="color: white"><span style="font-size: 25px"></span>原创</b>
<br>
<br>
<b style="color: white">

</b>
</h3>
</footer>

页脚引入的文件链接: 博客园自定义设计

目录
相关文章
|
2月前
动漫风博客介绍页面源码
动漫风博客介绍页面源码
52 8
动漫风博客介绍页面源码
|
4月前
|
API
一个简约风的VitePress博客主题
前言 笔者的博客之前是使用 VuePress + reco主题 随着博客文章数量越来越多(md文件已经300+了),博客本地启动和构建越来越来慢了emmm 恰好此时 VitePress 也相对成熟了(1.x alpha),就萌生了迁移到 VitePress 的想法 其相比 VuePress 更加的简洁,可玩性强,上手成本也低,由 Vite 加持体验也是非常不错。 按照官方的给的定位,VitePress 只提供一些基础主题API,所有定制都在自己的主题里完成(个人感觉就像Hexo丰富多彩的主题一样),不提供插件系统
|
前端开发 搜索推荐
【博客美化】01.推荐和反对炫酷样式
【博客美化】01.推荐和反对炫酷样式
【博客美化】01.推荐和反对炫酷样式
|
C# UED 容器
原创C# Winform+DevExpress皮肤框架
作为.NET快速开发框架首选产品,C/S框架网专注研发基于C# Winform皮肤框架,借助DevExpress三方组件提供的强大界面功能、顶级的外观表现以及专业的用户体验
8914 0
|
JavaScript 前端开发
【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1450 0
|
JavaScript
【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1537 0
|
Web App开发 JavaScript 前端开发
详谈如何定制自己的博客园皮肤【转】
转自:http://www.cnblogs.com/jingmoxukong/p/7826982.html 目录   前言  Quickstart  定制博客园 CSS 的原理    页面定制CSS代码    博客侧边栏公告    页首Html代码    页脚Html代码  定制细节 ...
2192 0