博客园页面定制html代码,你要的博客园主题都有!!!
基于最近很多小伙伴加我微信想要我的博客园主题,那我就把博客园主题整理一下,送给喜欢的小伙伴,园友们喜欢可以收藏,关注,博客园主题仅供参考,博主顺便再多说一句,虽然我可以分享给你们,但是我更愿意你们加我微信是来问问题的,毕竟再绚丽的外观终归不是我们在这条路上追求的最终归宿,当你有一技之长完全可以自己写一套自己喜欢的博客园主题,好了废话不多说了。
博客园自定义主题的设置主要是在自己博客园中的设置选项中进行设置的,主要包括:
页面定制 CSS 代码
博客侧边栏公告(支持HTML代码) (支持 JS 代码)
页首 HTML 代码
页脚 HTML 代码
一、定制博客园背景图片
1、代码存放位置
代码存放在:页面定制 CSS 代码
红色标注填写自己上传的背景图片地址即可
/* 定制博客背景图片,url里面是你的图片位置信息 */
body {
background-color: #efefef;
background-image:url(https://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxx.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 0;
background-size: cover;
padding-top:0px;
}
2、设置后的效果展示
二、侧边栏添加音乐
1、代码存放位置
代码存放在:博客侧边栏公告(支持HTML代码) (支持 JS 代码)
关键字段介绍:
titile:音乐标题(也可以设置成音乐的名字)
author:音乐名(也可以设置为音乐演唱者的名字)
url:你喜欢的音乐存放的位置
pic:每首音乐对应的背景图片
var ap = new APlayer({
element: document.getElementById('player'),
narrow: false,
autoplay: false,
showlrc: false,
theme: '#F5F5F5',
music: [{
title: '音乐1',
author: '小星星',
url: 'https://blog-static.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
pic: 'https://www.cnblogs.com/images/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg'
},
{ title: '音乐2',
author: '琵琶行',
url: 'https://blog-static.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
pic: 'https://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg'
},
{
title: '音乐3',
author: '林海',
url: 'https://files.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
pic: 'http://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png'
},
{
title: '音乐4',
author: '赵海洋',
url: 'https://files.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
pic: 'http://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png'
},
{
title: '音乐5',
author: '枷锁',
url: 'https://blog-static.cnblogs.com/files/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
pic: 'http://images.cnblogs.com/cnblogs_com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg'
}
]
});
ap.init();
2、设置后的效果展示
三、首页顶部设置滚动字
1、代码存放位置
代码存放在:页首 HTML 代码
center中存放你想要放入的文字即可
function func(){
var tag = document.getElementById('i1');
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
tag.style.cssText += 'text-align:center';
}
setInterval('func()',2000);
2、设置后的效果展示
四、二次元动画设置
1、代码存放位置
可以根据自己的喜欢放入自己喜欢的二次元主题动画,也可更具自己的习惯来调节二次元的位置以及大小
L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型,下面这个就是我觉得最可爱的小萝莉模型
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
"scale": 1
},
"display": {
"position": "right", //看板娘的表现位置
"width": 100, //小萝莉的宽度
"height": 200, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
2、设置后的效果展示
参考以上小伙伴们稍稍掌握一些前端知识,可以根据自己的需要自己开发定制自己的博客园主题页面,那如果你也掌握了一门后端编程语言,完全可以开发一套属于自己的博客,拥有自己的博客网站,当然这些都是需要你有一定的前后端知识,能够运用自如,就不用费劲加个微信来专程问博主要博客园主题了,好了可以滚去学习了,不要整天想整点花里胡哨的东西!
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[你要的博客园主题都有!!!]http://www.zyiz.net/tech/detail-136024.html
博客园页面定制html代码,你要的博客园主题都有!!!相关推荐
- 博客园页面定制html代码,博客园主题分享
博客园主题 分享 选择Custom主题 页面定制CSS代码 /*评论框祖传猫猫*/ .comment_textarea{ background:#f5f5f5 url(https://files-cd ...
- 博客园页面定制html代码,博客园代码定制
博客园代码定制 版本:2019-08-11 本文基于Simple Memory模板,且已获取CSS和JS权限,此版本并非最终版本. 如有错误请指出,代码开源可以修改完善,仅用于学习交流,转载时请注明出 ...
- 博客园 页面定制CSS代码
更新时间:2019-02-18 花了一点时间修改自己的博客背景设置,现在分享一下代码.希望对大家有帮助.我的比较简单,主要代码模板来源于另外一个博主,然后我在基础上进行了部分修改.原博主的连接:htt ...
- 博客园页面定制html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
- css皮肤模板管理,我的页面定制CSS代码(SimpleGamboge皮肤)
我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...
- 博客园页面风格+代码块美化+分类+深色模式+Mac代码
文章目录 页面效果 配置页面 参数设置 页面定制CSS代码 博客侧边栏公告 页首HTML代码 页脚HTML代码 保存提交 效果展示 主页 侧边栏 博客列表 博客内容 页首 页中 页尾 页面效果 点击跳 ...
- HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮 进入网页管理 -> 设置 在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式 此处可 ...
- 其他:博客园页面美化
看了其他大佬的博客园页面都那么好看,我也决定美化一下自己的博客园,顺便在这里分享一下我的博客园页面美化的方法.这里我选用的模版是SimpleMemory. 效果图 页面定制CSS代码 1)页面透明 # ...
- 怎么把网页源码家入hexo博客_一款被大厂选用的 Hexo 博客主题
首先这是一篇自吹自擂的文章,主题是由多位非前端程序员共同开发,目前经过一年半的迭代已经到达 v1.8.0 版本,并且获得大量认可,甚至某大厂员工已经选用作为内部博客,因此我决定写这篇文章向更多人安利它 ...
最新文章
- 面试:你知道Java中的回调机制吗?
- R语言ggplot2可视化在箱图中为箱图添加均值的标签及对应数值实战
- 32个最热CPLD-FPGA论坛
- php html 伪静态,php 伪静态(url重写)的写法
- URL转微信可识别的二维码
- 邮件服务 php,PHP基础-邮件服务
- Windows server 2016简单部署DNS服务,正向查找和委派
- jQuery起点教程之有序化插件实例
- vi/vim编辑器常用命令
- Chrome插件英雄榜111期更新《Unsplash For Chrome》查找免费无版权超清图并直接插入任意在线编辑器...
- 存储及可编程是未来物联网芯片发展的关键
- 论文阅读笔记《Optimal Image-Based Guidance of Mobile Manipulators Using Direct Visual Servoing》
- EasyPoi word导出教程
- 秦刚推荐:做流量的本质就是做用户
- 计算机修复无法启动怎么还原,电脑无法开机时如何恢复系统?
- phpword 利用phpword将信息导出成word文档进行下载
- 回望我的2019:35岁的程序员,没想到找工作这么难!
- 1、Matlab线性规划(线性约束下极值求解)
- navicat数据库管理软件延长试用期
- 你好Python!再见Excel?