zoukankan      html  css  js  c++  java
  • [aaronyang]分享我的博客园皮肤代码

    我的皮肤不好看,你打我..

    绝对感觉醉好用醉好的博客园皮肤,皮肤都给了,100块都不给我~

    在博客园后台里面:有个设置选项,打开它

    第一步:给你的博客去个主标题和副标题

    第二步:选择博客基础皮肤,并勾选禁用模板默认css

    定制css代码如下:

    /*公用*/
    body {
        font-size:15px;
        padding:0;
        margin:0;
        font-family:"微软雅黑","宋体",Arial;
        background:#243B0D url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_1335233352rbUwTp.jpg') no-repeat top center fixed;
        min-width:1200px;
    }
    
    #home {
        opacity:1;
        filter: alpha(opacity=100);
        box-shadow:0 0 10px #1C5495;
        margin:20px auto;
        width:96%;
        background:#fff;
        overflow:auto;
        border:solid 1px #fff;
    
    }
    /*段落*/
    .postBody p,.postCon p {
        margin:3px 0;
        line-height:24px;
    }
    h3 {
        font-size:16px;
        font-weight:bold;
    margin-bottom:3px;
    background:#1D5796;
    width:177px;
    padding:5px;
    text-shadow:2px 0px 11px #333030;
    }
    /*超链接*/
    a {
        color:#464646;
        text-decoration:none;
    }
    
    a:visited,a:hover {
        color:#464646;
    }
    ul {
        list-style:none;
        margin:0;
        padding:0;
    }
    image {
        border:none;
    }
    #header {
        padding:5px;
    }
    /*博客标题*/
    #blogTitle,#blogTitle a {
        font-weight:bold;
        color:#2796DE;
    }
    #blogTitle .title {
        margin-top:20px;
        height:100px;
        line-height:100px;
        font-size:55px;
        padding-left:120px;
        background:#fff url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_homelogo1.png') no-repeat;
    }
    .headermaintitle {
        }
    #blogTitle,#blogTitle a:hover {
        text-decoration:none;
    }
    /*子标题*/
    .subtitle {
        padding-left:30px;
        font-size:16px;
        color:#1E88AB;
        font-weight:normal;
        margin:5px 0;
    }
    /*导航栏*/
    #navigator {
        font-size:16px;
        height:48px;
        background:#144F94;
        text-align:center;
        margin-top:20px;
        margin-bottom:20px;
        margin:0 auto;
        z-index:100;
    }
    #navList li {
        margin:0;
        line-height:40px;
        display:inline-block;
        float:left;
    }
    #navList li:hover {
        background:#0A1F34;
    }
    #navList li a {
        padding:0 30px;
        text-decoration:none;
        line-height:48px;
        border:0;
        color:#fff;
        display:-moz-inline-box;
        display:inline-block;
    }
    .blogStats {
        height:48px;
        color:#fff;
        line-height:48px;
    }
    #main {
        padding:35px;
    }
    /*左边*/
    #sideBarMain {
        padding:0 10px 0 0;
        background:#fff;
        margin:0 0 20px 0;
        width:240px;
        font-size:12px;
        line-height:22px;
    
    }
    
    
    #sideBarMain a {
        color:#ffffff;
    }
    #leftcontentcontainer {
        color:#ffffff;
    }
    .newsItem {
        color:#ffffff;
    }
    /*公告*/
    #profile_block {
        width: 172px;
        background: #1D5796;
        border: 1px solid #14497F;
        padding: 5px 15px;
        margin:10 0 10px;
    }
    
    
    /*主面板*/
    #mainContent {
        margin-top:0px;
        padding-top:0px;
        padding-right:0px;
        background:#fff;
        padding-bottom:0px;
        float:right;
        width:98%;
        padding-left:0px;
    
    }
    /*每日文章列表*/
    .day {
        background:#fff;
        padding:0;
        margin-right:-10px;
        margin:0 0 20px 0;
    }
    /*博客标题*/
    .postTitle a {
        color:#144D8C;
    }
    .postTitle {
        padding-bottom:10px;
        font-size:20px;
        font-weight:bold;
        color:#464646;
        width:100%;
    background:url('http://images.cnblogs.com/cnblogs_com/AaronYang/476978/o_blog12.png') no-repeat 0 3px;
        padding-left:30px;
    }
    .dayTitle {
        display:none;
    }
    
    
    /*摘要*/
    .c_b_p_desc {
        padding:2px;
        line-height:24px;
        color:#888;
    }
    
    
    .c_b_p_desc a {
        color:#086F95;
    }
    .c_b_p_desc a:hover {
        text-decoration:none;
        border-bottom-width:1px;
        border-bottom-style:dotted;
        color:#259BD2;
    }
    /*右侧图片*/
    .desc_img {
        margin-left:10px;
        border:solid 1px #fff;
        box-shadow:0 0 10px #aaa;
        float:right;
    }
    /*博文页*/
    #topics .post {
        background:#fff;
    }
    .postCon {
        padding:10px 0px 0 5px;
        width:100%;
    }
    .postDesc {
        margin:0 30px;
        margin-bottom:2px;
        padding:8px 0px;
        font-size:12px;
        color:#aaa;
        background:#fff;
        text-align:right;
    }
    .postDesc a {
        color:#1C5495;
    }
    .postBody {
        padding:0;
    }
    /*google搜索框*/
    #google_q,#q {
        height:22px;
        width:120px;
        border:solid 1px #ccc;
        box-shadow:inset 0 0 3px #ddd;
        border-radius:4px;
    }
    /*搜索按钮*/
    .btn_my_zzk {
        font-family:'Microsoft Yahei';
        border:none;
        height:26px;
        width:60px;
        padding:1px;
        font-size:14px;
        cursor:pointer;
        position:relative;
        vertical-align:middle;
        display:inline-block;
        background:#55895B;
        border-radius:4px;
        color:#fff;
    }
    .btn_my_zzk:hover {
        background:#6DA47D;
    }
    /*评论按钮*/
    
    #btn_comment_submit {
        border:none;
        height:48px;
        width:910px;
    }
    /*评论按钮*/
    .comment_btn {
        font-family:'Microsoft Yahei';
        border:none;
        height:48px;
        width:120px;
        font-size:18px;
        cursor:pointer;
        position:relative;
        vertical-align:middle;
        display:inline-block;
        background:#1C5495;
        color:#fff;
    }
    
    #btn_comment_submit:hover {
        background:#0495FF;
    }
    
    /*评论标题*/
    .feedback_area_title {
        padding:10px;
        font-size:24px;
        font-weight:bold;
        color:#1C5495;
        border-bottom:solid 6px #0495FF;
    }
    .feedbackListSubtitle {
        font-size:12px;
        color:#888;
    }
    .feedbackListSubtitle a {
        color:#888;
    }
    .comment_quote {
        background:#FCFAAC;
        padding:15px;
        border:1px solid #CCC;
    }
    #commentform_title {
        color:#1C5495;
        background-image:none;
        background-repeat:no-repeat;
        margin-bottom:10px;
        padding:10px 20px 10px 10px;
        font-size:24px;
        font-weight:bold;
        border-bottom:solid 6px #1C5495;
    }
    /*评论框*/
    #comment_form {
        margin:10px 0;
        padding:0;
    }
    .commentform {
        margin:10px 0;
        padding:10px 20px;
        background:#fff;
    }
    /*评论输入域*/
    #tbCommentBody {
        font-family:'MIcrosoft Yahei';
        margin-top:10px;
        width:940px;
        max-width:940px;
        min-width:940px;
        background:white;
        color:#333;
        border:2px solid #fff;
        box-shadow:inset 0 0 8px #aaa;
        padding:10px;
        height:120px;
        font-size:14px;
        min-height:120px;
    }
    /*评论条目*/
    .feedbackItem {
        font-size:14px;
        line-height:24px;
        margin:10px 0;
        padding:20px;
        background:#F2F2F2;
        box-shadow:0 0 5px #aaa;
    }
    .feedbackListSubtitle {
        font-weight:normal;
    }
    /*分类页*/
    .entrylist {
        padding:10px 20px;
        background:#fff;
    }
    .entrylistItem {
        margin:10px 0;
        padding:10px;
    }
    .entrylistPosttitle {
        font-size:18px;
        font-weight:bold;
        background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
        padding-left:30px;
    }
    .entrylistPostSummary {
        padding:10px;
    }
    .entrylistItemPostDesc {
        font-size:12px;
        color:#999;
        padding-left:40px;
    }
    /*尾部*/
    #footer {
        font-size:12px;
        margin:20px;
        padding:12px;
        text-align:center;
        background:#144F94;
        color:#DDD;
        font-size:14px;
    }
    /*文章内图片*/
    #cnblogs_post_body p img {
        margin:5px;
    }
    #cnblogs_post_body{
    padding:3px;
    }
    /*顶一下*/
    .diggnum {
        font-size:28px;
        color:#428133;
        font-family:'Microsoft Yahei';
    }
    #div_digg .diggnum {
        line-height:100px;
    }
    .diggit {
        float:left;
        width:128px;
        height:128px;
        background:url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_o_dig.gif') no-repeat;
        background-position:0 0;
        text-align:center;
        cursor:pointer;
    }
    .diggit:hover {
        background-position:-128px 0;
    }
    /*踩一下(园友反映,这个有点“邪恶”,呵呵,其实是我没来得及设计这个背景图片,就暂时把它隐藏了……可以去掉这句话)*/
    .buryit {
        display:none;
    }
    .diggword {
        display:none;
    }
    /*green_channel*/
    #green_channel {
        text-align:right;
        height:30px;
        background:#237DE5;
        padding-left:20px;
        font-weight:normal;
        font-size:12px;
        border:none;
        color:#fff;
        padding:9px;
        position:fixed;
        right:0px;
        bottom:0px;
        opacity: 0.2;
        filter: alpha(opacity=20);
    }
    #green_channel:hover{
       filter:alpha(opacity=100);
        opacity:1;
     background:#26476D;
     -webkit-transition:all .5s ease-out;
        -moz-transition:all .5s ease-out;
        -o-transition:all .5s ease-out;
        transition:all .5s ease-out;
    }
    /*最新评论*/
    #myposts .PostList {
        font-size:14px;
        line-height:24px;
        margin:10px 0;
        padding:20px;
        background:#F2F2F2;
        box-shadow:0 0 5px #aaa;
    }
    #myposts .postTitl2 a {
        color:#132103;
    }
    ::selection {
        background:#BA6701; 
        color:white; 
    }
    ::-moz-selection {
          background:#BA6701;
    color:white;  
    }
    ::-webkit-selection {
         background:#BA6701;
         color:white; 
    }
    .catListPostCategory {
        width: 172px;
        padding: 5px 15px 5px;
        background: #1D5796;
        color: white;
        margin-top:4px;
        border: 1px solid #14497F;
        font-family:"微软雅黑","宋体",Arial;
    }
    
        .catListPostCategory a {
            margin: 0 -15px;
            display: block;
            padding: 5px 10px;
            color: #ffffff;
        }
    
            .catListPostCategory a:hover {
                background: #EB453D;
               width:200px;
                text-decoration: none;
    -moz-box-shadow:2px 2px 5px #333333, 0px 0px 6px #2D3636; -webkit-box-shadow:2px 2px 5px #333333, 0px 0px 6px #2D3636; box-shadow:2px 2px 5px #333333, 0px 0px 6px #2D3636;
                 color: #ffffff;
            }
    .boxshadow2{
        background-color:white;
        -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
        -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
        box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    
    }
    @-webkit-keyframes glow {
        0% {
            -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
            border-color: rgba(160, 179, 214, 0.5); 
            width:175px;       
        }
        100% {
            -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
            border-color: rgba(160, 179, 214, 1.0); 
            width:160px;
        }
    }
    @-webkit-keyframes glowred {
        0% {
            -webkit-box-shadow: 0 0 12px rgba(202, 137, 137, 0.5);
            border-color: rgba(197, 73, 73, 0.5); 
                 
        }
        100% {
            -webkit-box-shadow: 0 0 16px rgba(230, 72, 51, 1.0), 0 0 38px rgba(220, 34, 4, 1.0);
            border-color: rgba(160, 179, 214, 1.0); 
        }
    }
    .boxshadow3{
        background-color:#f0f3f9;
        -webkit-animation-name: glowred ;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease-in-out;    
    }
    
    .boxshadow2:hover {
        background-color:#f0f3f9;
        -webkit-animation-name: glow;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease-in-out;    
    }
    .boxshadow{
    -moz-box-shadow:0px 1px 1px #333333; -webkit-box-shadow:0px 1px 1px #333333; box-shadow:0px 1px 1px #333333;
    }
    
    .catListBlogRank ul{
    width:122px;
     background: #1D5796;
        border: 1px solid #14497F;
        padding: 5px 15px;
    margin:8 0 10px;
    -moz-transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);-o-transform-origin:0% 0%;transform:rotate(54deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);transform-origin:0% 0%
    }
    .catListBlogRank ul li{
    color:#ffffff;
    font-size:15px;
    text-shadow:2px 0px 11px #333030;
    
    }
    .catListBlogRank h3{
    display:none;
    }
    /*---滚动条默认显示样式--*/  
    ::-webkit-scrollbar-thumb{  
       background-color:#018EE8;  
       height:50px;  
       outline-offset:-2px;  
       outline:2px solid #fff;  
       -webkit-border-radius:2px;  
       border: 2px solid #fff;  
    }  
     
    /*---鼠标点击滚动条显示样式--*/  
    ::-webkit-scrollbar-thumb:hover{  
       background-color:#6FABEC;  
       height:50px;  
       -webkit-border-radius:2px;  
    }  
     
    /*---滚动条大小--*/  
    ::-webkit-scrollbar{  
       width:8px;  
       height:8px;  
    }  
     
    /*---滚动框背景样式--*/  
    ::-webkit-scrollbar-track-piece{  
       background-color:#fff;  
       -webkit-border-radius:0;  
    }
    ::-webkit-scrollbar-thumb:active{
          height:50px;
          background-color:#033367;
          -webkit-border-radius:2px;
      }
    .headph:hover img{
      -webkit-transform:rotate(360deg) scale(1.5);
        -moz-transform:rotate(360deg) scale(1.5);
        -o-transform:rotate(360deg) scale(1.5);
        -ms-transform:rotate(360deg) scale(1.5);
        transform:rotate(360deg) scale(1.5);  
    }
    .headph img{
        -webkit-transition:all 1s ease-in-out;
        -moz-transition:all 1s ease-in-out;
        -o-transition:all 1s ease-in-out;
        -ms-transition:all 1s ease-in-out;    
        transition:all 1s ease-in-out;
        width:48px;
        height:48px;
    }
    aaronyang 博客皮肤代码

    部分讲解:

    body {
        font-size:15px;
        padding:0;
        margin:0;
        font-family:"微软雅黑","宋体",Arial;
        background:#243B0D url('http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_1335233352rbUwTp.jpg') no-repeat top center fixed;
        min-1200px;
    }

    background设置整个博客的背景图片,我的是一张水的图片,你可以在博客园后台相册里面上传图片

    你可以新建两个相册,1个是用于博客皮肤资源存放的,一个是用于博客首页显示你的靓照的

    自己的靓照的相册里面的,相片注意事项:

    1.由于css样式侧边栏的限制,目前我的最佳尺寸是175px的宽,你可以使用美图秀秀 等比例缩放你的照片就行了

    2.照片上传的名称是有规律的,我的是统一  1.jpg,2.jpg,3.jpg...这样子上传的话,博客园自动处理成o_1.jpg,o_2.jpg,o_3.jpg...

    讲解二:

    http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_o_dig.gif是博客内容下,推荐 链接的图片,你可以ctrl+f查找这个位置,自己在相册里上传,然后替换地址即可,如果图片规格不一样,自己调整css代码

    讲解三:

    http://images.cnblogs.com/cnblogs_com/AaronYang/476978/o_blog12.png  是文章标题前面的图片

    讲解四:

    http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_homelogo1.png是博客你的logo的图片,这张图片在博客最上方可以看到

    讲解五:

    #green_channel  样式,是右下角的分享,推荐的那个样式

    讲解六:

    博客内容详情页,才显示快速评论,博客只有滚动了一定内容后,会自动全屏阅读,右上角显示滚动到顶部的按钮

    快速评论难点,因为阅读到一定高度,才全屏,所以要连续滚动到指定位置两次,才能精确定位到评论框,哈哈,不过解决了。

    滚动条自动全屏难点:以前会影响到滚动的性能,现在已经优化的很好了,不用担心哈。

    讲解七:

    #home 样式,调整opacity和filter的值,可以调整整个博客的透明度,比如,我调整到0.7,整个博客就会水汪汪的~

    #home {
        opacity:1;
        filter: alpha(opacity=100);
        box-shadow:0 0 10px #1C5495;
        margin:20px auto;
        width:96%;
        background:#fff;
        overflow:auto;
        border:solid 1px #fff;
    
    }

    更多细节,请自己调整吧

    第三部分:博客侧边栏公告(支持HTML代码)

    让你拥有自己的随机靓照和自己的qq群宣传吧

    <div style="  172px;
        background: #1D5796;
        border: 1px solid #14497F;
        padding: 5px 15px;
        margin:8 0 10px;"> 
    <p id="AaronYangImg"></p>
    <p>
    <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=66b827eb0962ef9375d6b80dd8327f43c06f07742b73084a7bfe74ef013cf871">
    <img class="boxshadow" style="
    -webkit-border-top-right-radius:2em;
    -webkit-border-top-left-radius:0em;
    -webkit-border-bottom-left-radius:2em;
    -webkit-border-bottom-right-radius:0em;
    -moz-border-radius-topright:2em;
    -moz-border-radius-topleft:0em;
    -moz-border-radius-bottomleft:2em;
    -moz-border-radius-bottomright:0em;
    border-top-right-radius:2em;
    border-top-left-radius:0em;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:0em;
    " src="http://images.cnblogs.com/cnblogs_com/fresh-air/385358/o_2.jpg"  alt="群号:135043714,这个群含有丰富的最新的.NET电子书和技术解决方案。资源数超过200,高级C#书籍一大堆" title="这个群含有丰富的最新的.NET电子书和技术解决方案。资源数超过200,主要是C#书籍,当然也有PHP,JAVA等" width="80" height="80" /></a>
    <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=6ff5dc5409adb3f3d10d8e6e7ee6a21e55cedd6fa86228f17a9c5e0e5b690a00">
    <img class="boxshadow"  src="http://images.cnblogs.com/cnblogs_com/fresh-air/385358/o_%E5%9B%BE%E5%83%8F%205_%E5%89%AF%E6%9C%AC2.jpg" style="-webkit-border-top-left-radius:2em;
    -webkit-border-top-right-radius:0em;
    -webkit-border-bottom-right-radius:2em;
    -webkit-border-bottom-left-radius:0em;
    -moz-border-radius-topleft:2em;
    -moz-border-radius-topright:0em;
    -moz-border-radius-bottomright:2em;
    -moz-border-radius-bottomleft:0em;
    border-top-left-radius:2em;
    border-top-right-radius:0em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:0em;" alt="群号:193247142(实验室人已满,不招了),入实验室的条件:C#学习者,必须有一定的基础,不问一些很低级的问题,不聊一些无关本群宗旨的伙伴,爱分享知识,有自己的学习计划,只限招收50人,能进一步的跟我交流技术" title="入实验室的条件:C#学习者,必须有一定的基础,不问一些很低级的问题,不聊一些无关本群宗旨的伙伴,爱分享知识,有自己的学习计划,只限招收50人,能进一步的跟我交流技术" width="80" height="80" /></a>
    </p>
    
    
    </div>
    <script>
    var chars = ['24','24','33','34','35','36','29','30','31','2','4','32','37','38'];
    
    function generateMixed(n) {
         var res = "";
         for(var i = 0; i < n ; i ++) {
             var id = Math.ceil(Math.random()*13);
             res += chars[id];
         }
         return res;
    }
    
    $(function(){
    $("#AaronYangImg").html('<a href="http://user.qzone.qq.com/875556003" target="_blank"><img class="boxshadow2" src="http://images.cnblogs.com/cnblogs_com/AaronYang/489758/o_'+generateMixed(1)+'.jpg" alt="AaronYang" title="点我进入AaronYang的QQ空间"/></a>');
    });</script>

    这里我创建了一个 <p id="AaronYangImg"></p>

    然后再下面创建了一个chars数组(注意,第一个,第二个元素值要一样哦),其实是相册里面 图片的名称,下面写了一个随机数方法。

    下面*13  是 chars的长度减去1。好了,这里不多讲了,自己去摸索吧

    QQ群代码生成链接地址:点击前往

    第四部分:页首HTML代码

    <style type="text/css">
        .Abstract
        {
            padding: 15px;
            border: dotted 2px #999;
            color: #999;
            font-family: 'Microsoft Yahei';
            border-radius: 4px;
        }
            
        .First
        {
            margin: 10px 0;
            font-family: 'Microsoft Yahei';
            text-align: left;
            padding: 6px 20px;
            color: #fff;
            background: #55895B;
            font-size: 20px;
            border-radius: 4px;
            clear: both;
        }
            
            
        .Second
        {
            margin: 10px 0;
            font-family: 'Microsoft Yahei';
            padding: 6px 20px;
            background: #93C8A2;
            color: #fff;
            font-size: 18px;
            border-radius: 4px;
            clear: both;
        }
            
            
        .Third
        {
            margin: 10px 0;
            padding: 6px 20px;
            font-family: 'Microsoft Yahei';
            margin: 15px 0;
            font-size: 16px;
            color: fff;
            background: #C6EFD2;
            color: #999;
            border-radius: 4px;
            clear: both;
        }
        .note
        {
            margin: 10px 0;
            padding: 15px 20px 15px 60px;
            background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png') no-repeat 20px 0;
            font-size: 15px;
            font-family: 'Microsoft Yahei';
            box-shadow: 0 0 8px #aaa;
            clear: both;
        }
            
        .demo
        {
            text-align: left;
            padding: 6px 20px;
            overflow: auto;
            border-radius: 4px;
            background: orange;
            color: #fff;
            font-size: 16px;
            clear: both;
        }
            /* Image style */
    #scrollUp {
    -moz-box-shadow:1px 1px 5px #333333; -webkit-box-shadow:1px 1px 5px #333333; box-shadow:1px 1px 5px #333333;
        top: 0px;
        right: 10px;
        height: 58px;  /* Height of image */
        width: 58px; /* Width of image */
        background: url("http://images.cnblogs.com/cnblogs_com/fresh-air/476978/o_selectTop3.png") no-repeat;
             
    }
      
    </style>
    
    <script>
    $(function(){
    $("#header").append('<div id="cnzzDivPlace" style="100%;margin-top:-5px;"></div>');
    
    $("#green_channel").append('<div id="pageSign"></div>');
    
    });
    </script>

    这里有个scrollup样式,有个图片,就是回到顶部的那个按钮的代码和样式调节的地方

    下面我家了一个js,cnzzDivPlace是cnzz统计代码的显示位置

    第五部分:页脚HTML代码

    <span style="float:right;padding-right:10px;padding-top:10px;padding-bottom:10px" 
    
    id="cnzzspan">
    <a id="openWin" target="_blank" ></a>   
    <font color='red'>【推荐】</font>
    <a href="http://www.cnblogs.com/aaronyang/archive/2013/05/07/3065090.html" 
    
    target="_blank"><font color='red'><b>程序员网址大全</b></font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.cnblogs.com/AaronYang/tag/EntityFramework/" 
    
    target="_blank"><font color='red'>EF CodeFirst</font></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/AaronYang/tag/aaronyang百度地图/" 
    
    target="_blank">百度地图.NET</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/AaronYang/archive/2013/06/03/3113543.html" 
    
    target="_blank">MyNPOI</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/AaronYang/tag/%E5%BC%80%E6%BA%90/" 
    
    target="_blank"><b>开源</b></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/AaronYang/archive/2013/05/15/3079046.html" 
    
    target="_blank">我的皮肤</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/aaronyang/tag/ASP.NET%20MVC4%20IN%20ACTION/" 
    
    target="_blank">ASP.NET MVC4</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/AaronYang/tag/JavaScript/" target="_blank">前端提升
    
    </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/aaronyang/tag/%E9%82%A3%E5%A4%A9%E6%9C%89%E4%B8%AA
    
    %E5%B0%8F%E5%AD%A9%E8%B7%9F%E6%88%91%E8%AF%B4LINQ/" target="_blank">LINQ
    
    </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
    
    href="http://www.cnblogs.com/AaronYang/tag/WCF%E7%B3%BB%E5%88%97/" target="_blank">WCF
    
    </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.cnblogs.com/aaronyang/tag/EasyUI/" 
    
    target="_blank">EasyUI</a>&nbsp;&nbsp;|
    <script src="http://s14.cnzz.com/stat.php?id=4725984&web_id=4725984&online=2" 
    language="JavaScript">
    </script>
    </span>
    <script src="http://files.cnblogs.com/AaronYang/jquery.scrollUp.min.js" language="JavaScript"></script>
    <script>
    function ScrollFunction() {
            var sTop = $("#tbCommentBody").offset().top-189;
            $("html,body").animate({ scrollTop: sTop }, 500,function(){
            var sTop2 = $("#tbCommentBody").offset().top-189;
             $("html,body").animate({ scrollTop: sTop2 },10);
         }); 
       }
    
    $(function(){
    var ite=$("#cnzzspan").remove();
    $("#cnzzDivPlace").append(ite);
    
    });
    
      $(window).resize(function () {
                tabResize();
            });
    var $sbm=$("#sideBarMain");
    var $sbar=$("#sideBar");
    function tabResize(){
    var lh=$sbm.width();
    var rh=$("#home").width()-lh-60;
    $("#mainContent").width(rh);
    
    }
    var heighss=1300;
    $(window).load(function(){
    
         tabResize();
    var pinglun=$("#commentform_title");
    if(pinglun.length>0){
    $("#navList").append('<li style="background:#F15871" class="boxshadow3"><a id="MyLinks1_comment" class="menu" style="text-shadow:0px 0px 6px #E3D342;" href="javascript:ScrollFunction()">快速评论</a></li>');
    }
    $("li.liRank").css({"cursor":"pointer"});
    $("li.liRank").click(function(){
      var obj = document.getElementById("openWin");   
      obj.href = "http://www.cnblogs.com/AllBloggers.aspx";   
      obj.click();  
    });
       
    
    var isIE = !!window.ActiveXObject; 
    var isIE8 = isIE && !!document.documentMode; 
    $.scrollUp();
    $("#scrollUp").text("");
    $("#scrollUp").attr("title","[AaronYang]杨洋
    帮你回到顶部");
    
    var firstStep=true;
    var SecStep=true;
    
    lastkuandu=$("#mainContent").width();
      var $navc=$("#navigator");
        //获取要定位元素距离浏览器顶部的距离
        var navH = $navc.offset().top;
           
        //滚动条事件
        $(window).scroll(function(){
            //获取滚动条的滑动距离
            var scroH = $(this).scrollTop();
                        if(scroH>=navH){
                          if(firstStep){
                        
                             firstStep=false;
          $navc.css({"position":"fixed","top":0,"left":"0%","width":"100%","z-index":"1000"});
                             $navc.addClass("boxshadow");
                         
                          }
                        if(!isIE8&&scroH>heighss&&SecStep&&$sbm.width()>2){
                             SecStep=false;
                             $sbm.css({"width":"0px"});
                             $sbar.hide();
                             tabResize();
    
                        } 
                       if(isIE8&&scroH>heighss&&SecStep&&$sbm.width()>2){
                             SecStep=false;
                             $sbm.css({"width":"0px"});
                            // $sbar.css({ opacity: 0 }); // 所有浏览器有效
                             $sbar.slideUp();
                             tabResize();
    
                        }
                   }else if(scroH<navH){
                             if(!firstStep){
                                firstStep=true;
                             $navc.css({"position":"static","margin":"0 auto","width":"100%"});
                                $navc.removeClass("boxshadow");
                               }
                             if(!isIE8&&scroH<heighss&&(!SecStep)&&$sbm.width()<3){
                                SecStep=true;
                                $sbm.css({"width":"240px"});
                                $sbar.show();
                                tabResize();
                              }
                           if(isIE8&&scroH<heighss&&(!SecStep)&&$sbm.width()<3){
                                SecStep=true;
                                $sbar.slideDown();
                                $sbm.css({"width":"240px"});
                                tabResize();
                              }
                          }
                });
    
    });
    
    
    </script>
    <script>
    var Enabled = true;
    $(window).load(function () {
    $("#sideBarMain").css({"margin-left":"-30px"});
    $.each($(".feedbackItem"),function(i,t){
    
    var comt=$(this).find(".blog_comment_body");
    
    var commentBodyId =comt[0].id; 
    var commentId = commentBodyId.substr(commentBodyId.lastIndexOf("_")+1);
    var hUrl = $("#comment_"+ commentId+"_avatar").html();
    if(hUrl==null){
    hUrl ='http://images.cnblogs.com/cnblogs_com/AaronYang/476978/o_11.jpg';
    }
       $(this).find("div.feedbackListSubtitle").before('<div style="margin: 0;position:relative;border-radius:5px; 49px; height: 49px; border: 2px solid #dddddd;float:left;margin-right:25px;margin-top:10px;"><div class="headph"><img src="'+hUrl+'" alt="AaronYang" style="border-radius:5px;border: medium none; background: none repeat scroll 0% 0% transparent; visibility: visible; padding: 0pt; margin: 0pt;  48px; height: 48px; clip: rect(0px, 94px, 94px, 0px); "></div></div>'); 
    
    var hasl=$(this).find("span.louzhu");
    if(hasl[0]){
    $(this).css({"background":"#252525","color":"#fff"});
    $(this).find("a[title='查看所回复的评论']").css({"color":"#fff"});
    }
    
    });
    
    
    
    
        if (Enabled) {
    var isIE = !!window.ActiveXObject;
    var isIE6 = isIE && !window.XMLHttpRequest;
    var isIE8 = isIE && !!document.documentMode;
    var isIE7 = isIE && !isIE6 && !isIE;
            var broTip = $("#browserTip");
            if (broTip.length < 1 && (isIE6 || isIE7 || isIE8)) {
                $("#home").before("<div id="browserTip" style="opacity:1;100%;height:30px;display:none;line-height:30px;border:1px solid #A8AAAC;text-align:center;background:#ffffff;valign:middle">AaronYang提醒:亲,你的浏览器不给力哦,为了获得更好的体验效果,建议使用<a target="_blank" href="https://www.google.com/intl/zh-CN/chrome/browser/" style="color:red;text-decoration:underline">谷歌浏览器</a>或<a target="_blank" style="color:red;text-decoration:underline" href="http://firefox.com.cn/download/">火狐浏览器</a>浏览本网站 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:CloseVersionTip()">立即关闭</a></span></div>");
                $("#browserTip").slideDown();
                setTimeout(CloseVersionTip, 8000);
            } else {
                $("#browserTip").slideDown();
                setTimeout(CloseVersionTip, 8000);
            } 
        }
    });
    function CloseVersionTip() {
        var broTip = $("#browserTip");
        if (broTip) {
            $("#browserTip").slideUp();
        }
    }
    
    </script>
    aaronyang 页脚html代码

    在这里你可以调节  二级菜单,这里的地址,建议是tag标签。这里我加了ie浏览器判断,如果ie推荐谷歌或者火狐,用不着的可以删掉

    cnzz的js代码怎么获得,自己去cnzz那里学习吧,或者用百度统计也可以。

    这里有 独一无二的  二级菜单,独一无二的评论头像,独一无二高大上的快速评论按钮,博主回复内容高亮,独一无二的阅读体验(自动全屏),独一无二的相册展示

    第六部分:拓展

    博客分享插件

    如果你想要  分享那个插件,可以自己去找个插件,然后生成一段javascript代码,放到页脚html代码处就行了,列子

    <!-- JiaThis Button BEGIN -->
    <script type="text/javascript" src="http://v3.jiathis.com/code_mini/jiathis_r.js?
    
    uid=1362230515548537&move=0&amp;btn=r3.gif" charset="utf-8"></script>
    <!-- JiaThis Button END -->

    博客背景音乐思路:

    找个音乐播放空间,上传一首歌,然后在线播放,拷贝别人的flash生成后的代码,加载博客的地步就行了,然后把播放器的透明度调低,示例代码:

    <div class="player" id="player" style="opacity: 0.1;filter: alpha(opacity=10);"><object type="application/x-shockwave-flash" data="http://m.zonse.net/player/?php=music" width="100%" height="40" id="cmp"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent"><param name="flashvars" value="lists=Playerlist.php%3Fid%3D12709&amp;src=http%3A%2F%2FM.ZonSe.Net%2FMusic%2FData%2FUpload%2F0E88BEF6B420313864476A1276B73D90.mp3"></object></div>

    第七部分:为了让你的文章更好看阅读,我自己写了一个适合本博客阅读排版简单示例

    代码,我放到了我的博客官网上的那篇博客去了: 点击查看完整版

    以后也在那里更新博客了,这边的博客我觉得有用的我已经迁移过去了。

    谢谢你已经阅读完,如果你有什么技术问题,可以到 点击这里 给我留言

    (我的bootstrap还没学,请不要太在乎我的排版。。我先学bootstrap吧,因为那个wordpress就是bootstrap主题的,默认引入了bootstrap的js包了)

  • 相关阅读:
    Python3之random模块常用方法
    Go语言学习笔记(九)之数组
    Go语言学习笔记之简单的几个排序
    Go语言学习笔记(八)
    Python3之logging模块
    Go语言学习笔记(六)
    123. Best Time to Buy and Sell Stock III(js)
    122. Best Time to Buy and Sell Stock II(js)
    121. Best Time to Buy and Sell Stock(js)
    120. Triangle(js)
  • 原文地址:https://www.cnblogs.com/AaronYang/p/4147908.html
Copyright © 2011-2022 走看看