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

~~美化一时爽，一直美化一直爽~~

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

大体美化请参考：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 阅读(393) 评论(0) 编辑收藏举报

刷新页面返回顶部

Sakura_Momoko