zoukankan      html  css  js  c++  java
  • 博客中添加微博和流量计数器

    前言

    最近想对博客进一步优化一下,让博客显示出“我的地盘”的特点。之前一篇 博客美化之“黑白风” 已经讲解了如何对博客的UI进行优化,

    现在讲讲如何在博客的左侧边栏加上自己的 新浪微博 和 流量计数器。

    添加新浪微博

     打开“新浪微博”,进入“我的工具”,如下图所示:

    然后选择 “微博秀” ,并对“基础设置”和“样式设置”进行调整,改成自己喜欢的样式。由于博客中的区域有限,

    所以本人只让显示了两个部分,如下图所示:

    设置完成之后,复制下面文本框中的代码。

    打开 博客园 ,进入 “我的博客”-->管理-->设置,

    在“博客侧边栏公告(支持HTML代码)”框中添加如下html

    <div id="weibowidget">
    
    </div>

    将复制的代码在VS或者notepad或者其他工具中拼接成如下格式,由于博客园的个人设置里面是不允许用iframe的。

    所以要拼接成如下格式

    <script type="text/javascript">
            /*插入微博*/
            var ifr = '<ifra' + 'me width="100%" height="120" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=100&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=0&isFans=0&uid=2750465952&verifier=3201fa5c&dpc=1"></ifra' + 'me>';
            $('#weibowidget').html(ifr);
        </script>

    将这段 js 也复制粘贴到 “博客侧边栏公告(支持HTML代码)”框中。

    保存后查看效果吧!

    添加流量计数器

     打开网站 http://gostats.cn/ 注册账号,注册时 “URL”填写你的博客园博客首页地址,如“http://www.cnblogs.com/jaday/”,

    注册完成后,登录进去在“网站统计代码”中选择自己喜欢的样式,然后进行设置,最后选择HTML,复制a标签的内容。

     打开 博客园 ,进入 “我的博客”-->管理-->设置,

    在“博客侧边栏公告(支持HTML代码)”框中添加刚刚复制的html代码。

    根据个人喜好可以对html进行布局。

    本人是这样布局的。

    1 <p id="calflow">
    2<a target="_blank" title="网站计数器" href="http://gostats.cn"><img alt="网站计数器" 
    3 src="http://c3.gostats.cn/bin/count/a_382696/t_7/i_3/z_0/show_hits/counter.png" 
    4 style="border-0" /></a>
    5 位访客,欢迎您!
    6 </p>
    View Code

    至此,流量计数器设置完成。

    保存之后,查看效果吧!

  • 相关阅读:
    javascript核心基础(正则专题)
    JsonUtil(工具类)
    身份证验证要用到的代码
    来cnblog了
    强智科技教务处模拟登录
    Thinkphp学习日记:jQuery_ajax数据提交
    在win8中使用服务器管理器来管理windows server 2012
    在windows server 2012运行锐捷客户端
    CentOS 6.4 配置LAMP 环境 与安装 phpmyadmin
    Linux下的光盘挂载与卸载
  • 原文地址:https://www.cnblogs.com/jiangqw/p/3475878.html
Copyright © 2011-2022 走看看