代码备份 | 博客侧边栏公告(支持HTML代码)(支持JS代码)

博客侧边栏公告(支持HTML代码)(支持JS代码)

<div id=‘btnList‘>

<a class="ivu-btn ivu-btn-primary" href="https://cn.vuejs.org/v2/api/" target="_blank">Vue</a>
<a class="ivu-btn ivu-btn-primary" href="https://www.iviewui.com/" target="_blank">iView</a>
<a class="ivu-btn ivu-btn-primary" href="http://www.dicts.cn/" target="_blank">dicts</a>
<a class="ivu-btn ivu-btn-primary" href="https://gitee.com/" target="_blank">gitee</a>

<a class="ivu-btn ivu-btn-primary" href="https://tw.voicetube.com/" target="_blank">voicetube</a>
<a class="ivu-btn ivu-btn-primary" href="https://www.buzzfeed.com/" target="_blank">buzzfeed</a>
<a class="ivu-btn ivu-btn-primary" href="http://www.ozdic.com/" target="_blank">ozdic词组</a>
<a class="ivu-btn ivu-btn-primary" href="http://electronjs.org/docs" target="_blank">electronjs</a>
<a class="ivu-btn ivu-btn-primary" href="http://huziketang.mangojuice.top/books/react/lesson28" target="_blank">react</a>
<a class="ivu-btn ivu-btn-primary" href="https://react.docschina.org/docs/hello-world.html" target="_blank">react2</a>
<a class="ivu-btn ivu-btn-primary" href="https://juejin.im/book/5bc844166fb9a05cd676ebca" target="_blank">掘金</a>
<a class="ivu-btn ivu-btn-primary" href="https://ant.design/docs/react/introduce-cn" target="_blank">AntDesign</a>
<a class="ivu-btn ivu-btn-primary" href="https://github.com/yezihaohao/react-admin" target="_blank">reactAdmin</a>
<a class="ivu-btn ivu-btn-primary" href="https://www.processon.com/" target="_blank">processOn</a>
<a class="ivu-btn ivu-btn-primary" href="https://www.draw.io/" target="_blank">draw.io</a>
<a class="ivu-btn ivu-btn-primary" href="http://www.demigods.top/" target="_blank">demigods</a>
<a class="ivu-btn ivu-btn-primary" href="https://medium.com/" target="_blank">medium</a>

<div style="height:10px"></div>
<img width=‘100%‘ src=‘http://images.cnblogs.com/cnblogs_com/pengchenggang/110921/o_ask.jpg‘ />
</div>

<script>
$(document).ready(function(){

// $("#subtitle").html("<button type=‘button‘ class=‘ivu-btn ivu-btn-default‘><span>Default</span></button>");

$("#content > p:eq(0)").before(document.getElementById(‘btnList‘));

});

</script>
页脚Html代码
 <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css" />
<script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script>
 <script type="text/javascript">
    layui.use([‘laydate‘, ‘laypage‘, ‘layer‘, ‘table‘, ‘carousel‘, ‘upload‘, ‘element‘], function() {
      var laydate = layui.laydate //日期
      ,laypage = layui.laypage //分页
      ,layer = layui.layer //弹层
      ,table = layui.table //表格
      ,carousel = layui.carousel //轮播
      ,upload = layui.upload //上传
      ,element = layui.element; //元素操作 等等...

      /*layer弹出一个示例*/
      layer.msg(‘waiting for VUE3.0‘);
    });
    </script>
<style>
body {

    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 30px;
    padding-bottom: 10px;
    padding-top: 0;
}
#cnblogs_post_body .toc {
position: fixed;
    right: 100px;
    top: 150px;
}

.ivu-btn {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 400;
    text-align: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px 15px 6px;
    font-size: 12px;
    border-radius: 4px;
    transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear  !important;
    color: #515a6e;
    background-color: #fff;
    border-color: #dcdee2;
}
.ivu-btn-primary {
color: #2d8cf0;
    background: 0 0;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease;

    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
}
.ivu-btn-primary.active, .ivu-btn-primary:active {
    color: #f2f2f2;
    background-color: #2b85e4;
    border-color: #2b85e4;
}
.ivu-btn-primary:hover {
text-decoration: none;
    color: #fff;
    background-color: #57a3f3;
    border-color: #57a3f3;
}
</style>

原文地址:https://www.cnblogs.com/pengchenggang/p/12098605.html

时间: 2024-11-05 12:28:28

代码备份 | 博客侧边栏公告(支持HTML代码)(支持JS代码)的相关文章

页面定制CSS代码-博客侧边栏公告-页首Html代码-页脚Html代码

设置代码前说明:首先你得选用博客皮肤darkgreentrip,否则会出错 页面定制CSS代码: 说明:标注颜色位置可自行修改,第12行设置主页底层图片,可自行修改 #home { margin: 0 auto; width: 80%;/*原始65*/ min-width: 980px;/*页面顶部的宽度*/ background-color: rgba(245, 245, 245, 0.7); padding: 30px; margin-top: 50px; margin-bottom: 50

自制博客侧边栏公告网页链接“图标 ”

1.网上搜索网页图标并保存为.bmp文件 这是我用的一个图标搜索网站:http://www.easyicon.net/ 2.将图片文件上传博客,得到并复制地址链接(不会的自己动手搜) 3.博客后台设置侧边栏公告中插入以下代码 <m class="m"> <div><a href="http://weibo.com/u/5379175768" target="_blank"><img src="h

博客侧边栏公告html代码

<embed width="180" height="180" align="middle" wmode="transparent" quality="high" src="http://images.cnblogs.com/cnblogs_com/csharp/clock.swf" pluginspage="http://www.macromedia.com/go/ge

博客园背景加入飘落雪花的js代码

<script type="text/javascript"> window.onload = function () { var minSize = 15; //最小字体 var maxSize = 30;//最大字体 var newOne = 900; //生成雪花间隔, 数值越小越快 var flakColor = "#1bd3ff"; //雪花颜色 var flak = $("<div></div>")

许多博客都过滤或屏蔽alexa的widget代码script标签,有办法解决么

许多博客都过滤或屏蔽alexa的widget代码script标签,有办法解决么,如下: <a href="http://www.alexa.com/siteinfo/gmb2b.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=gmb2b.com"></script></a> 代码

博客园中Bootstrap4点击查看结果模板代码

博客园中Bootstrap4点击查看结果模板代码 <span class="btn btn-danger" data-toggle="collapse" data-target="#result">点击查看结果</span> <div class="collapse" id="result">请在这里书写您的代码</div> 原文地址:https://www.

博客侧边栏——装饰

设置方法,进入博客园后台,选择设置界面,在侧边栏下粘贴喜欢的装饰下的代码(需要支持html,js). 来自:   http://abowman.com/ <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" width="300&quo

MarkWord - 可发布到博客园的Markdown编辑器(支持图片同步)

这一段时间一直很迷恋MarkDown,语法简单,排版整洁.对于经常要整理归档文件是绝对的好东西. 于是就去上网搜一些Markdown软件,别说还真多,各种类型,然后就挑了几个都不进人意,因为我比较喜欢把文档生成为Pdf方便查阅.但是着了好多都没这个功能,唯一找到的一个还是要收费才能使用.所以就萌生自己做(zuzhuang)一个MarkDown软件的想法,另外也是想借这个软件学习一下WPF. 在本篇我先介绍一下本软件的使用方法,看看大家的反馈,如果好的话会出一个系列,并且会考虑放出代码. Mark

PHP在线调查程序代码-途牛博客

无需数据库在线投票调查php代码,这是一款由php +txt文本文件做的在线调用投票系统,无需数据库支持可以完成在线用户调查功能. html代码如下: <html> <head> <title>在线调查程序代码</title> </head> <body> <form method="post" action="survey.php"> <p><input type