zoukankan      html  css  js  c++  java
  • 博客园页面设置

    注册博客园已经老久老久了,现在依然是个老菜鸟。最近开始尝试着写写博客,一来可以督促自己,二来可以回顾自己在过去到底学了些什么。看到很多人的博客都很炫,自己也就开始慢慢摸索。这里把自己摸索的一些经验总结一下。

    一、编辑器

    1.链接

    我们很多时候需要引用别人或自己以前的代码。这里可以很方便的加上链接。

    一个添加链接 一个取消链接

    选中要链接的文字右键就可以选中链接。

    填入URL地址,目标一般选择在新窗口打开。

    2.书签

    插入书签

    写入书签名

    这样可以在文章开始写目录 跳到任意的书签。右键插入链接的时候可以绑定到书签。

    3.html

    点击可以看到源码,任意修改。

    4.插入代码

    这里可以选中编程语言。如果代码量比较多可以全部折叠。

    二、后台设置

    1.页面定制CSS代码

    这里就可以和前面编辑器联合起来。在编辑器里面的文字选中格式时

    如果选择的是标题 那么对应的是<h>标签,这样就可以在用CSS控制其样式。

    显示效果,风格统一的小标题。

    2.公告栏

    公告栏一般大家都是贴上自己的靓照,加上自己的简单介绍。

    还有的就是挂个漂亮的flash。

    例1:

    <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

    例2:

    <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;" width="200" height="160">
    <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;">
    <param name="AllowScriptAccess" value="always">
    <param name="wmode" value="opaque"></object>
    <span style="color: #3E8BD6;font-size: 9pt;">求投食~(点图即可)</span>

    例3:还可以贴上

    <!--把“XXXXXXXX”替换成你的QQ号-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=XXXXXXXX&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:XXXXXXXX:13" alt="有事您Q我" title="有事您Q我"></a>

    例5:还可以贴上你的主页被访问次数

    注册

    <div style="font-size:20px;font-weight:bold;">访次:&nbsp;<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=XXXXXXXX&amp;c=XXXXXXXX" alt="AmazingCounters.com"></a>&nbsp;次</div>

    3.页首Html代码

    这个我见得比较多的就是大家的GitHub,源码管理。

    如:

    这里还有很多别的样式图片 (注意,要将上图链接中的you换成自己的在Github上的账号) 

    GitHub在windows中的应用

    4.开通js权限

    博客园默认是没有开通js权限的。可以向管理员申请开通。邮箱:contact@cnblogs.com

    开通js权限后可以做很多事。

    如:在公告栏中自己写个日历或者时钟表什么的。我的就是自己加了个时钟表

    5.推荐按钮

    原本的推荐按钮是在最底下,不熟悉的人有时候可能找都找不到。

    为了方便我们可以设置样式,使之悬浮。

    /*快速评论*/
    #div_digg {
      position: fixed;
      bottom: 10px;
      right: 15px;
      border: 2px solid #ECD7B1;
      padding: 10px;
       140px;
      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);
    }

    如果开通了js权限的话,我们还可以动态添加别的快捷按钮。

    如:关注,回到顶部,快速评价。

    /**
      不知道为什么页面加载完成时还读不到div_digg。可能也是动态生成的。
      所以这里只能用定时器 不断的读取,当读取到了再给它动态添加快捷按钮
    **/
    
    //自定义 定时器[当元素加载完成是执行回调函数]
    function customTimer(inpId,fn) {
        if ($(inpId).length) {
            fn(); 
        }
        else {
            var intervalId = setInterval(function () {
                if ($(inpId).length) {  //如果存在了
                    clearInterval(intervalId);  // 则关闭定时器
                    customTimer(inpId,fn);              //执行自身
                }
            }, 100);
        }
    }
    
    //页面加载完成是执行
    $(function () {
        customTimer("#div_digg", function () {
            var div_html = "<div class=''>
                            <a href='javascript:void(0);' onclick='c_follow();'>关注</a>
                             &nbsp;|&nbsp;
                            <a href='#top'>顶部</a>
                             &nbsp;|&nbsp;
                            <a href='javascript:void(0);' onclick=" $('#tbCommentBody').focus();">评论</a>
                       </div>";
            $("#div_digg").append(div_html);
            //tbCommentBody    
        });
    });
  • 相关阅读:
    windows10 gcc编译C程序(简单编译)
    windows10 下 gcc/g++ 的安装
    神经网络内在逻辑:没打开的AI“黑匣子”
    tensorflow的变量作用域
    如何手画三相电相(线)电压(流)波形图
    pycharm如何添加固定代码块
    pycharm的个性化设置
    zookeeper学习三
    zookeeper学习二
    es中对mapping的理解
  • 原文地址:https://www.cnblogs.com/yzm10/p/7234973.html
Copyright © 2011-2022 走看看