前端小白也会的博客美化方法

 

美化一时爽,一直美化一直爽

 本人纯前端小白,下面代码都是看源码推理出来的,如有错误不喜勿喷

大体美化请参考:https://www.cnblogs.com/Emcikem/p/11342072.html

或者 https://www.cnblogs.com/enjoy233/p/10328361.html

第一个博主写的好是好就是没啥注释。。,相比之下第二个更详细

我这里就补充一下博主没有讲到而又比较常用的东西(都喜欢藏私货啊

如何更换翻页按钮

很多人弄完之后会发现 翻页 与自己博客的风格非常不匹配。

为之奈何?

我根据类比,终于搞定了这个(前端小白,不喜勿喷)

我这里拿simple memory 举例

进入首页检查模式

点击翻页元素

发现它有个id 

根据别人的代码可以推测出id .class{属性}可以改变页面元素id后面一定要有空格

然后现在就是调页面pager 里的参数到你喜欢

复制下来加到页首css里面即可

然后你就可以看到

后面custom...代表是你自己的代码

这是我的参数

/*顶部翻页按钮消失*/
#homepage_top_pager{
display: none;
}
/*底部翻页*/
#homepage_bottom_pager .pager {
font-size: 12px;
font-weight: 700;
color: #676262;
background-color: #f4f5f7;
border-radius: 6px;
}

 

当然你如果喜欢顶部翻页按钮,修改操作也是类似的

如何去掉下划线

在页面定制css代码中加上这句话:

/*去掉下划线*/
#cnblogs_post_body a:link, #cnblogs_post_body a:visited, #cnblogs_post_body a:active
{
  text-decoration: none;
}

解决目录显示不全

这要根据你写目录的代码来了...

如果是自己写的估计不会有这个问题吧

不过一般就是元素路径不同,

比如你大标题元素路径是 h1

那你h1下面的h2标题路径就应该是h2

而不是什么 div h2|div div h2|其他乱七八糟的路径

快速解决方法就是在后台的html代码上直接修改

美化推荐按钮

本人比较懒|其实是不会搞,所以这里素材用到的是‘大白技术控’第二个链接的博主的推荐的图片样式)

最终结果:

推荐按扭很好改,只要在页面定制里面加上这些代码:

/*自定义点赞按钮*/
#div_digg {
    font-weight: bold;
    right: 65px;
    padding: 8px 8px 8px 10px;
    border: 2px solid #04A292;
    position: fixed;
    background-color: #FFFFCC;
    z-index: 100;
    width: 110px !important;
    border: 3px solid #55895b !important;
}

#div_digg .diggit {
    animation: tada infinite 2s;
}

#div_digg {
    position: fixed;
    bottom: 10px !important;
    right: 330px;
    padding: 12px;
    width: 48px;
    background-color: rgba(255,255,255,0.7);  /*半透明#FFF*/
    border-radius: 5px;
    opacity: 0.9;  /*透明化*/
    margin: 0 !important;
}

.diggit {
    margin-left: 38px !important;
        background: url(//images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_vote_fb.png) no-repeat;
        width: 33px !important;
        height: 25px !important;
        /* padding-top: 30px !important;  */
}

.diggnum {
    font-weight: bold;
    margin-right: -60px !important;
}

然后发现你的点赞按钮到旁边去了,页面也变了

如果你觉得有必要也可以再加上下面两句

/* 隐藏踩按钮 */
.comment_bury {
    display: none !important;
}

/* 隐藏评论处的反对 */
.buryit {
    display: none;
}

那么关注按钮怎么改呢?

先在页脚html加上这几句

(应该是添加按钮的感觉...)

<div id="addThis">
<div class="at-share-tbx-element addthis-smartlayers addthis-animated at4-show">
        <!-- <b>Share this</b> -->
        <a class="addthis_button_linkedin"></a>
        <a class="addthis_button_tencentweibo"></a>
        <a class="addthis_button_wechat"></a>
        <a class="addthis_button_qzone"></a>
        <a class="addthis_button_sinaweibo"></a>
        <a class="addthis_button_tumblr"></a>
        <a class="addthis_button_exchangle"></a>
        <a class="addthis_button_onenote"></a>
        <a class="addthis_button_evernote"></a>
        <a class="addthis_button_sms"></a>
        <a class="addthis_button_digg"></a>
        <a class="addthis_button_compact"></a>
</div>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>

然后再加上这句应该就好了|顺序不能反?

<script language="javascript" type="text/javascript">
// 关注按钮
$('#div_digg').prepend('<div style="padding-bottom: 5px"><span class="icon_favorite" style="padding-top: 2px"></span><a onclick="follow(\'c949168d-ad31-4464-8ef3-08d753a9a8fd\');" href="javascript:void(0);"  style="font-weight: bold; padding-left:5px;">🌵关注下博主呗</a> </div>');
</script>

不过有时候关注按钮要等一下才会出来。

啊?为什么别人点赞会动啊?

我没搞明白怎么实现的哇/(ㄒoㄒ)/~~饶了我这个小白吧

置底|置顶按钮

置顶按钮大多数人都说了

本质其实就是点这个按钮相当于点文末的返回顶部

但是置底却没有现成的链接,怎么办呢?

没有我们可以自己造啊?!

(我这里是返回到签名的地方|你理解思路之后可以任选地方返回

(首先你得有签名,没有就去设一个再来吧)

在页脚html加上:

//增加签名置底链接
<script language="javascript" type="text/javascript">
$("#MySignature").prepend('<a href="#MySignature" title="置底"></a> ');
</script>

页面定制css里面加:(设置按钮)

<!--返回到侧边栏底部-->
<span id="back-to-bottom"><a href="#MySignature"></a></span>
<span id="toBottom"></span>

页面定制css里面加:

#back-to-bottom {
    background-color: #e6e9ea;
    width: 20px; 
    bottom: 10px;
    font-size: 30px;
    text-align: center;
    box-shadow: 0 0 1px #f4f7f9;
    padding: 5px 12px;
    position: fixed;
    border-radius: 8px;
    opacity: 1;
}

OK,参数就自己看着调吧....

可能你会发现自己置顶|底按钮怎么按不了?(如果正常当我没说)

那应该是和body里面的代码冲突了(本萌新不太懂)

把按钮设置到侧边栏那边就行了|就是把设置按钮的代码加到侧边栏css里面

posted @ 2020-03-17 23:11  Sakura_Momoko  阅读(334)  评论(0编辑  收藏  举报