简单的博客页面客制化 v2

DIY博客的页面

　　去繁就简，去掉了一些不必要的功能。

　　针对新版本的特性做了更改，修正了一些bug。

　　自己水平不够，选了个比较顺眼的皮肤，大部分是套用网上现成的模板完成的。

具体定制的内容：

　　1.字体的修改

　　2.版面占比的调整　　

　　3.UI细节的修改(新增了代码框灰色背景)

　　4.加入了用户头像和一些修饰动图

　　5.时钟，Github conner，侧边分享栏，回到顶部按钮等小插件

　　6.删除了访客访问来源统计面板

　　7.添加了城市天气插件

　　8.删除了 Live2d看板娘

　　9.图片放大功能(改善了双击放大的bug

　 10.图片分享动态浮窗

　 11.去掉了 flash音乐播放器

　 12.3D效果标签云

　 13.背景图更换(优化了随机壁纸分辨率)

　 14.背景漂浮线段的动态效果

　 15.鼠标点击浮现字幕的特效

　 16.删除了 QQ联系、一键加群和打赏功能

　 17.更改了推荐按钮

　 18.段落标题hover效果

　 19.去掉了网址栏logo

　 20.自定义按钮栏

　 21.评论区默认字幕更改

　 22.标题栏下方冒泡动态效果

23.定制鼠标贴图

22.动态改变网页标题

需要先申请JS权限

代码：

　　标题：

<h1 style="text-align: right"><span style="color: rgba(255, 255, 255, 1)"><strong>YukiRinLL</strong></span><span style="font-style: italic"><p>&nbsp;SutsuharaYuki</p></span>
</h1>

　　子标题：

 <h2 style="text-align: right"><span style="color: rgba(255, 255, 255, 1)"><strong>我知道,痛苦乃是唯一的高贵,无论人世和地狱都不能将其侵蚀.</strong><br><strong>&nbsp; &nbsp; 为了把我那神秘的冠冕编缀,须将一切时代一切领域征集.</strong><br></span><span style="color: rgba(129, 215, 211, 1)"><p>&nbsp; &nbsp; ——波德莱尔 《恶之花》· 祝福</p></span>
</h2>

　　皮肤：

　　页面定制CSS代码：

/*================================*/
#home {zoom:0.85;/*缩放 0.85*/opacity: 0.80;/*透明度 默认0.80*/margin: 0 auto;width: 75%;/*原始65 自定义55*/min-width: 980px;/*页面顶部的宽度 默认980*/background-color: rgba(245, 245, 245, 0.5);padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
/*================================*/
body {color: #000;/*原来用的背景图*/background: url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg')fixed;/*背景图*/background-size: cover;background-repeat: no-repeat;/*字体修改*/font-family: "Helvetica Neue",'Lato', "PingFang SC", "Microsoft YaHei", sans-serif,Helvetica,Verdana,Arial,sans-serif;font-size: 12px;/*set14*/line-height: 2;min-height: 101%;color: #555;}/*博客标题*/
#blogTitle {height: 100px;  /*高度*/clear: both;background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {font-size: 36px/*set 26*/;font-weight: bold;line-height: 1.8em;/*原始 1.6em set 1.5*/margin-top: 10px;/*原始 15px */margin-bottom: 20px;text-align: center;color: #81D7D3;
}
.headermaintitle {display: inline-block;vertical-align: top;line-height: 36px ！calc;font-size: 26px;font-weight: normal;color:#fff !important;font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
}
#blogTitle h2 {font-weight: normal;font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      line-height: 1.8;color: #111;font-weight: bold;text-align: right;float: right;
}
#navigator{width: 61.8%;/*customed*/background-color: rgba(0,0,0,0.35);
}
#navList a:link, #navList a:visited, #navList a:active{color: #eee;font-size: 18px;font-weight: bold;
}
.blogStats{color: #eee;
}
.postTitle {border-left: 8px solid rgba(33, 160, 139, 0.68);margin-left: 10px;margin-bottom: 10px;font-size: 20px;clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {color: #21759b;transition: all 0.4s linear 0s;
}
.postTitle a:hover {margin-left: 30px;color: #0f3647;text-decoration: none;
}
.postCon {float: right;line-height: 1.5em;width: 90%;/*默认100*/clear: both;padding: 10px 0;
}
.day .postTitle a {padding-left: 10px;
}
.day {background: rgba(255, 255, 255, 0.5);
}
/*================================*//* 修改鼠标样式为图片 */
*{cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku1.png'), auto;
}
a{cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku2.png'), auto;
}/*反馈栏*/
.feedback_area_title {margin-bottom:0;border-bottom:1px solid #EDEDED;
}
.feedbackItem {background-color: #F5F5F5;margin-top:10px;
}
.feedbackListSubtitle {padding:10px 10px 0 10px;
}
.feedbackCon {padding:10px;margin:0;
}
.feedbackCon img {border-radius: 50%;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}
.feedbackCon img:hover {-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);-o-transform: rotateZ(360deg);transform: rotateZ(360deg);
}
.feedbackCon .body_right {padding:0 10px 0 0;
}
.feedbackCon .comment_vote {padding:10px 0 0 0;
}/*评论区*/
#comment_nav {margin-top:10px;
}
#commentform_title {margin-bottom:0;border-bottom:1px solid #EDEDED;
}/*button input 美化*/
.input_my_zzk{border-radius:3px;
border: 1px solid #000000;
width:120px;
height:26px;
}
input.btn_my_zzk {height: 30px;padding:5px  10px;vertical-align: none;
border-radius:3px;
border:1px solid;
}
.comment_btn{height: 38px;
border-radius:3px;
border:1px solid;
}/*代码框背景*/
.cnblogs_code {background: #D6D6D6 !important;
}/*代码框一些其他定制*/
.code_img_closed,.code_img_opened {cursor:pointer;
}
.cnblogs_code_collapse {cursor:pointer;border:0;padding:0;
}
.cnblogs_code_toolbar {display:none;
}/*文章附加信息*/
.postDesc {   background: url(images/posted_time.png) no-repeat 0 1px;color: #757575;float: left;width: 100%;clear: both;text-align: left;     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;font-size: 13px;padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/margin-top: 20px;line-height: 1.8;padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{background: rgba(255, 255, 255, 0.5);margin-bottom: 35px;word-wrap: break-word;
}
.CalTitle{background: rgba(255, 255, 255, 0);
}
.catListTitle{background-color: rgba(33, 160, 139, 0.9);
}
#topics{background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{display: none;
}
#tbCommentBody{width: 100%;/*默认100*/height: 200px;background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
.cnblogs_code{background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{background: rgba(255, 255, 255, 0);
}
.entrylist{background: rgba(255, 255, 255, 0.5);
}/*推荐置顶设置*/
#div_digg{position:fixed;bottom:5px;width:140px;right:650px;border:2px solid #6FA833;padding:10px;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);}
#div_digg:hover {box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5);}
/*段落标题Hover效果设置*/#cnblogs_post_body{color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;font-size: 15px;}#cnblogs_post_body h1    {background: #169FE6;border-radius: 4px 4px 4px 4px;font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;font-size: 23px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h2    {background: #169FE6;border-radius: 4px 4px 4px 4px;color: #FFFFFF;font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;font-size: 20px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h3    {background: #D191FF;border-radius: 4px 4px 4px 4px;color: #FFFFFF;font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;font-size: 18px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h4{background: #A8D08D;border-radius: 4px 4px 4px 4px;color: #FFFFFF;font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;font-size: 18px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h1:hover {transform: rotateX(360deg);background-color: #0066FF;}#cnblogs_post_body h2:hover {transform: rotateX(360deg);background-color: #0066FF;}#cnblogs_post_body h3:hover {transform: rotateX(360deg);}#cnblogs_post_body h4:hover {transform: rotateX(360deg);
}
/*QQ_contact --未实现*/

CSS

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

Border

　　页首Html代码：

<!--随机背景图--><script type="text/javascript">//<!CDATA[var bodyBgs = [];bodyBgs[0] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg";bodyBgs[2] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_99dc832a4dbb6bb3d62a292e8cf12f8d1652b5fd.jpg";bodyBgs[3] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_92206e6dd9468cf5b3d3202f7f66c7dfc64d4e04.jpg";
bodyBgs[4] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044364624-3.jpg";
bodyBgs[5] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_1-1Z10H24410-50.jpg";
bodyBgs[6] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_81877565632b8c89eacd8bd0ae26938199d49f79.jpg";
bodyBgs[7] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_e6674c08fbe0db19383ee84310c39459c2b44453gai2.jpg";
bodyBgs[8] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720150814130149.jpg";
bodyBgs[9] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044362493-19.jpg";
bodyBgs[10] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170133.jpg";
bodyBgs[11] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170140.jpg";
bodyBgs[12] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170216.jpg";
bodyBgs[13] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044361E0-2.jpg";
bodyBgs[14] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170227.jpg";
bodyBgs[15] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_o_IMG_107gai.jpg";
bodyBgs[16] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443C944-15.jpg";
bodyBgs[17] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443B236-14.jpg";
//bodyBgs[18] = "";
//bodyBgs[19] = "";
//bodyBgs[22] = "";
//bodyBgs[23] = "";
//bodyBgs[24] = "";var randomBgIndex = Math.round( Math.random() * 17 );//输出随机的背景图document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ')fixed;background-size:cover;no-repeat 50% 0}</style>');//]]></script><!--Wider的一些样式-->
<link href="https://blog-static.cnblogs.com/files/SutsuharaYuki/font-awesome.min.css" rel="stylesheet"><!-- 定时器 -->
<script>
function customTimer(inpId, fn) {if ($(inpId).length) {fn();}else {var intervalId = setInterval(function () {if ($(inpId).length) {  //如果存在了clearInterval(intervalId);  // 则关闭定时器customTimer(inpId, fn);              //执行自身}}, 100);}
}
function generateTagClouds() {$('.catListTag>ul').wrap('<div class=\'wrap\' ></div>').parent().css({ 'width': '240px', 'height': '240px' });var options = {'range': [-200, 300],'gravity': -10,'xPos': 0.5,'yPos': 0.5,'gravityVector': [0, 0, 1],'interval': 100,'hoverGravityFactor': 0};$('div.wrap').starfieldTagCloud(options);
}
$(function () {...customTimer('.catListTag', generateTagClouds);...
});
</script><!-- 自定制样式文件以及脚本 -->
<!-- 分享 --><!-- 外源加载 -->
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" >
var jiathis_config={siteNum:15,sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",summary:"",boldNum:6,showClose:true,shortUrl:false,hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->

head

　　页脚Html代码：

<script src="https://blog-static.cnblogs.com/files/SutsuharaYuki/MathJax.js?config=TeX-AMS_HTML"></script>
<script src="https://files.cnblogs.com/files/SutsuharaYuki/SmoothScroll.min.js"></script>
<script type="text/javascript">
//var canShowAdsense=function(){return !!0};//去广告$(document).ready(function(){//美化footer var footer=$("#footer");var text=footer.text();footer.empty();footer.prepend('<div id="customFooter"><h1 class="footer-title">Contact with me</h1><ul><li><a href="#" target="_blank">Email</a></li><li><a href="#" target="944989026@qq.com">Wechat</a></li><li><a href="#" target="_blank">Github</a></li><li><a href="#" target="https://github.com/YukiRinLL">QQ</a></li></ul><p id="copyright">'+text+' Theme By <a href="https://www.cnblogs.com/SutsuharaYuki/" target="http://wpa.qq.com/msgrd?v=3&uin=944989026&site=qq&menu=yes" style="color:#707070">YukiRinLL</a></p></div>');
});// 控制台输出信息
(function(a){if (!a) return;var msg = "%c欢迎访问YukiRinLL的博客,\n鄙人蒟蒻,望各位大佬多加指点.\n ";if (window.chrome) {a.log("%c ", "padding:50px;background:url('https://pic.cnblogs.com/avatar/1683480/20190509225808.png')no-repeat;background-size: contain;");a.log(msg, "color:#0080FF");} else {a.log(msg.replace(/%c/g,''));}
})(top.console);//ajaxComplete
$(document).ajaxComplete(function(event, xhr, option) {//评论头像if(option.url.indexOf("GetComments")>-1){setTimeout(function(){$.each($(".blog_comment_body"),function(index,ele){var self=$(ele);var id=self.attr("id").split("_")[2];var imgSrc=$("#comment_"+id+"_avatar").html()||"http://pic.cnblogs.com/avatar/simple_avatar.gif";self.before('<img src="'+imgSrc+'" style="float:left;" class="author_avatar">');});},200)};//评论框水印+调整页脚if(option.url.indexOf("CommentForm")>-1){setTimeout(function(){$("#tbCommentBody").attr("placeholder","来玩嘛大爷╰(￣▽￣)╭")},200)}if(option.url.indexOf("GetFollowStatus")>-1){//美化“加关注”按钮 if($("#sideBar #p_b_follow a").text()=="+加关注")$("#sideBar #p_b_follow :contains('+加关注')").html("<i class=\"fa fa-heart\" aria-hidden=\"true\"></i>&nbsp;关注");}if(option.url.indexOf("sidecolumn")>-1){//日历的两个换页按钮$('.CalNextPrev a:contains("<")').empty().prepend('<i class="fa fa-chevron-left" aria-hidden="true"></i>');$('.CalNextPrev a:contains(">")').empty().prepend('<i class="fa fa-chevron-right" aria-hidden="true"></i>');//多彩标签颜色var taglist=document.querySelectorAll('#sidebar_postcategory li a')for(var i = 0; i < taglist.length; i++) {taglist[i].className = 'color-'+Math.floor(Math.random()*12+1);}}
}); //用来在head标签中添加link标签
function createLink(URL,lnkId,charset,media){var head = document.getElementsByTagName('head')[0],linkTag = null;if(!URL){return false;}linkTag = document.createElement('link');linkTag.setAttribute('rel','shortcut icon');linkTag.setAttribute('type','image/x-icon');linkTag.href = URL;head.appendChild(linkTag);
};
createLink('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_u=2686629685,1606419266_fm=26_gp=0.jpg');var head=$("#header");//页首动态效果
head.prepend('<canvas id="bubble-canvas" style="position:absolute;left:half;top:half;"></canvas>');//位置
var _width, _height, largeHeader, _canvas, _ctx, _circles, _target, animateHeader = true;
function initHeader() {largeHeader = document.getElementById('header');_width = largeHeader.offsetWidth;// log(largeHeader.offsetWidth);_height = largeHeader.offsetHeight;// log(largeHeader.offsetHeight);_target = {x: 0, y: _height};_canvas = document.getElementById('bubble-canvas');_canvas.width = _width;_canvas.height = _height;_ctx = _canvas.getContext('2d');_circles = [];for(var x = 0; x < _width*0.5; x++) {var c = new Circle();_circles.push(c);}animate();
};
function addListeners() {window.addEventListener('scroll', scrollCheck);window.addEventListener('resize', resize);
};
function scrollCheck() {if(document.body.scrollTop > _height) animateHeader = false;else animateHeader = true;
};
function resize() {_width = largeHeader.offsetWidth;_height = largeHeader.offsetHeight;_canvas.width = _width;_canvas.height = _height;
};
function animate() {if(animateHeader) {_ctx.clearRect(0,0,_width,_height);for(var i in _circles) {_circles[i].draw();}};requestAnimationFrame(animate);
};
function Circle() {var _this = this;(function() {_this.pos = {};init();})();function init() {_this.pos.x = Math.random()*_width;_this.pos.y = _height+Math.random()*100;_this.alpha = 0.1+Math.random()*0.3;_this.scale = 0.1+Math.random()*0.3;_this.velocity = Math.random();};this.draw = function() {if(_this.alpha <= 0) {init();};_this.pos.y -= _this.velocity;_this.alpha -= 0.0005;_ctx.beginPath();_ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);_ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';_ctx.fill();};
};
addListeners();
initHeader();//文章列表美化
function breakSameDayArticles(article_list){var _i=0;while(_i<article_list.length) {var dayTitle=article_list[_i].getElementsByClassName('dayTitle')[0];var postTitle=article_list[_i].getElementsByClassName('postTitle');var postCon=article_list[_i].getElementsByClassName('postCon');var postDesc=article_list[_i].getElementsByClassName('postDesc');if(postTitle.length>1) {for (var _j = 0; _j < postTitle.length; _j++) {var day=document.createElement('div');day.className='day';day.appendChild(dayTitle.cloneNode(true));day.appendChild(postTitle[_j].cloneNode(true));day.appendChild(postCon[_j].cloneNode(true));day.appendChild(postDesc[_j].cloneNode(true));article_list[_i].parentNode.insertBefore(day,article_list[_i]);_i++;}article_list[_i].parentNode.removeChild(article_list[_i]);_i--;}_i++;}
};
function parseToDOM(str){var div = document.createElement("div");if(typeof str == "string")div.innerHTML = str;return div.childNodes[0];
};function initBeauty(){var article_list=document.getElementsByClassName('day');breakSameDayArticles(article_list);beautyArticles(article_list);
};// //消除遮罩
// document.addEventListener("DOMContentLoaded", function(){//     document.getElementById('loading').style.display = "none";
// });
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({showProcessingMessages: false, //关闭js加载过程信息messageStyle: "none", //不显示信息extensions: ["tex2jax.js"],jax: ["input/TeX", "output/HTML-CSS"],tex2jax: {inlineMath:  [ ["$", "$"] ], //行内公式选择$displayMath: [ ["$$","$$"] ], //段内公式选择$$skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code'], //避开某些标签
//        ignoreClass:"comment-content" //避开含该Class的标签},"HTML-CSS": {availableFonts: ["STIX","TeX"], //可选字体showMathMenu: false //关闭右击菜单显示}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script><script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("朧月","十六夜","花鳥風月","黄昏","花筏","雪月花","花吹雪","秋晴れ","冬枯れ","さようなら");var $i = $("<span></span>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});});
});
</script><!-- fork github 控件 -->
<a href="https://github.com/YukiRinLL" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><!-- 天气插件 --><!--外源加载-->
<script type="text/javascript">
WIDGET = {FID: '9fVgD01DNt'}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>

foot

　　部分模板在套用的时候根据自己的情况做了一些改变

　　一些脚本的浏览器可信还没做好

　　去掉了flash实现部分

　　可能会做反馈栏和评论区样式

　　可能会继续做未完成的移动端兼容

　　呈上源码以供分享

效果图

DIY博客的页面

写在前面：

　　申请了博客第一件事当然是整一个炫酷的界面。

　　自己水平不够，选了个比较顺眼的皮肤，大部分是套用网上现成的模板完成的。

具体定制的内容：

　　1.字体的修改

　　2.版面占比的调整　　

　　3.UI细节的修改(新增了代码框灰色背景)

　　4.加入了用户头像和一些修饰动图

　　5.时钟，Github conner，侧边分享栏，回到顶部按钮等小插件

　　6.添加了访客访问来源统计面板

　　7.添加了城市天气插件

　　8.Live2d看板娘更新了内容(后续可能添加语音声音)

　　9.图片放大功能

　 10.图片分享动态浮窗

　 11.新增了 flash音乐播放器

　 12.3D效果标签云

　 13.背景图更换(新增了随机壁纸)

　 14.背景漂浮线段的动态效果

　 15.鼠标点击浮现字幕的特效

　 16.QQ联系、一键加群和打赏功能

　 17.更改了推荐按钮

　 18.段落标题hover效果

　 19.网址栏logo

　 20.自定义按钮栏

　 21.评论区默认字幕更改

　 22.标题栏下方冒泡动态效果

23.定制鼠标贴图

22.动态改变网页标题

需要先申请JS权限

代码：

　　标题：

1 <h1 style="text-align:right"><span style="color:#FFFFFF"><strong>YukiRinLL</strong></h1>SutsuharaYuki

　　子标题：

 1 <h2 style="text-align:right">2 <span style="color:#FFFFFF">3 <strong>我知道,痛苦乃是唯一的高贵,无论人世和地狱都不能将其侵蚀.</strong>4 <br />5 <strong>&nbsp; &nbsp; 为了把我那神秘的冠冕编缀,须将一切时代一切领域征集.6 </strong>7 <br />8 <strong>9 <span style="color:#81D7D3">&nbsp; &nbsp; &mdash;&mdash;波德莱尔 《恶之花》&middot; 祝福
10 </strong>
11 </strong>
12 </span>
13 </h2>

　　皮肤：

　　页面定制CSS代码：

View Code

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

View Code

　　页首Html代码：

View Code

　　页脚Html代码：

View Code

　　部分模板在套用的时候根据自己的情况做了一些改变

　　一些脚本的浏览器可信还没做好

　　图片放大功能还存在一些小问题

　　(1.点击展开代码“+”时会触发展开　　2.放大后在最上层显示不完全　　

　　　3.评论区相关内容有时候加载不出来　　)

　　后续可能会添加 Pet 、flash小游戏之类的新功能

　　可能会做反馈栏和评论区样式

　　可能会继续做未完成的移动端兼容

　　呈上源码以供分享

效果图

简单的博客页面客制化 v2相关推荐

Android 11.0 充电指示灯红绿显示简单客制化
客制化充电指示灯的文章在网上也有不少了,项目的需求是在百分百情况下量绿灯,其它情况下都是红灯,这里简单记录下在Android11,kernel-4.19版本下的修改内容,也给有相关需求的各位提供下思路 ...
结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面
** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...
Magento教程 7：客制化网站
帮助你的Magento更上一层楼! 架站完成后,我们将分享一些Magento好用的功能.扩充套件.小技巧以及常见的问题. 开启多语言介面在Magento中,你可以轻松的进行语言切换,只要使用Mage ...
客制化 GH60 XD60 像 Poker 一样的 60% 机械键盘（2）采购以及组装
客制化 GH60 XD60 像 Poker 一样的 60% 机械键盘 (2) 采购以及组装在第一篇博文中客制化键盘设计,我最终设计了如下图的键盘: 但是我们仅仅是设计出来有个P用,还得把键盘做出来 ...
廿柒- 客制化爬虫以及爬虫调参
1. 前文提要前期用 Python 做了某些爬虫,但是发现有几个问题: 爬的内容有很多未完全读取网页内容的信息前期只爬取 tag 为 <p> 的信息,但其实很多内容在 <div& ...
这个客制化键盘，秀翻我了~
关注.星标公众号,直达精彩内容文章内容出处:稚晖君自称"鸽王"的稚晖君终于更新啦.这次他带来的新项目则是:一把完全客制化.带屏幕模块的机械键盘! 有网友表示,稚晖君的这个新项目 ...
SystemUi状态栏客制化功能和常见问题分析
一.多图标成点当系统图标区域或者通知图标区域图标过多,而区域不够时,就会将多余的图标隐藏,并显示一个点,如下图所示. 介绍此功能之前先看一下图标的初始化过程,从中可以看到有个config_statu ...
[MTK项目] 如何客制化谷歌开机向导
最近项目中有个任务,要在gms中的谷歌开机向导(SUW,SetupWizard)中加入客制化页面.之前没有做过相关的东西,第一反应这是不行的,因为gms包的谷歌软件我们都没有源码,不能做任何修改.接到 ...
究极丐版客制化机械键盘制作全纪录（下：程序下载）
究极丐版客制化机械键盘制作全纪录(下:程序下载) 前排提示:由于键盘制作时间距离写文章的时间比较久远所以不对分享文件的正确性保证!!!! 在比较久之前写了个上篇,当时比较有时间为了简单的记录自己做键盘 ...

简单的博客页面客制化 v2

简单的博客页面客制化 v2相关推荐

最新文章

热门文章