正文

博客园自定义主题样式(代码片段)

southbegonia  southbegonia  2022-12-11  454

关键词：

记录我在定制个人blog页面效果时遇到的技巧及方法等。

基本流程

设定博客皮肤为BluSky
定制首页代码：引入外部CSS

页顶博主名字及副标题

在首页html内输入以下代码可添加博主名到页面顶端，也可添加副标题：

<header class="main-header" id="site-head">
        <div id="top" class="vertical">
            <div id="site-head-content" class="inner row">
                <div class="col-md-9">
                    <div class="site-description">
                        <h2 class="blog-title">YourBlogName</h1>
                        <h3 class="blog-description">SubtitleContent</h2>
                    </div>
                </div>
            </div>
        </div>
</header>

YourBlogName：主标题，可写博主名等
SubtitleContent：副标题，可写座右铭、博客说明等

字体及背景图

创建CSS编写页面字体的信息及背景图；首先需要引入所创建的CSS，方法为通过link标签引入，在首页html输入：

<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/YourBolg/YourTheme.css"/>

YourBlog：个人创建博客园blog时的Blog地址名
YourTheme：上传编写好的.css文档到博客-管理-文件内，以便上述代码调用

关于.css文件的定制信息包括各类标题、字体样式、背景图片等信息，能力有限暂不细讲，但若采用其他主题可有更便捷方法实现更换背景图、修改字体等功能。

Fork me on Github 标签

在首页html内输入以下代码即可实现标签：

<a href="https://github.com/YourGithub">  
<img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;" 
    src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" 
    alt="Fork Me On GitHub" data-recalc-dims="1">
</a>

YourGithub：个人github的链接
src="..."：github官网提供的标签样式，可自行查找

参考

博客园自定义样式编辑(代码片段)

...gt;</a></span> 侧边栏公共html代码<p>本博客仅用作学习交流使用，查看详情

博客园自定义样式修改标签页的icon图标(代码片段)

有没有发现大多数的博客园标签右上角都是一个小矿工，千篇一律没有什么特色，想不想设置一个像我一样的个性化icon图标呢？按照以下四步你也可以实现自定义标签图标。FromTo第一步：挑挑拣拣选一张icon图标（尺寸不要太大... 查看详情

博客园自定义鼠标点击特效(代码片段)

需要申请JS权限，JS权限申请通过之后，将如下代码放入侧边栏，页首，页末，都可以复制如下代码<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("?Linux?","?Shell?","? 查看详情

自定义博客园主题样式(代码片段)

背景知识了解图片url获取1.将选定的背景图上传至博客园服务器将选定的图片上传至自己博客园的相册中2.获取上传至博客园服务器背景图的url打开相册，选择需要的背景图片-->单击-->在打开的图片上方右键-->复制图片地... 查看详情

博客园自定义css代码

*{margin:0;padding:0;}ul{list-style-type:none;}ul::after{content:‘‘;display:block;clear:both;}a,a:link,a:visited,a:hover,a:active{color:black;text-decoration:none;}#blogTitle,#blog-calendar,#blogCalen 查看详情

博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)(代码片段)

前言在之前所写过的博客园自定义页面风格设计篇中，我们已经说明了其中两种风格的页面设计，鼠标图案的修改，公告栏的设置，背景音乐的制作，关于CSS以及用Canvas和requestAnimFrame做动画特效，在本文中我们将教大家制作当... 查看详情

cnblog博客园自定义样式修改标签页的icon图标

有没有发现大多数的博客园标签右上角都是一个小矿工，千篇一律没有什么特色，想不想设置一个像我一样的个性化icon图标呢？按照以下四步你也可以实现自定义标签图标。From To 第一步：挑挑拣拣选一张icon图... 查看详情

博客园自定义公告显示代码

1.博客公告栏中显示时间如图所示。2.在我的博客页面点击管理按钮。3.在管理界面中点击设置按钮。4.在设置界面中找到下图红色区域，把相应的代码加入其中即可。5.各种时间显示代码小人时间a.背景透明版本<scriptcharset="Shift... 查看详情

如何设置博客园好看的标题样式(代码片段)

1.向博客园申请js权限　　我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷... 查看详情

如何设置博客园好看的标题样式(代码片段)

1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一... 查看详情

博客园自定义页面风格设计

转：http://www.cnblogs.com/ECJTUACM-873284962/p/7628894.html#_nav_0Angel_Kitty的原创博文①拥有自己的CSS代码②修改鼠标图案③公告栏的设置关于背景音乐④关于CSS动画特效⑤用Canvas和requestAnimFrame做动画特效查看详情

博客园自定义地址栏logo

自定义博客园地址栏logo一、首先自己需要下载一个logo图片，png、jpg格式的都可以。挑选自己喜欢的图片就可以。二、然后制作成icon图标在线制作icon图标网站：http://www.bitbug.net/ 三、上传至博客园文件中四、将以下代码... 查看详情

博客园自定义页面风格设计

最近好多人问我博客的页面设计模版，时间挺紧张的，赶着搞策划和学习。。。趁着现在放假写写吧~~~全部过程都是在“管理->设置”中完成的，博客皮肤推荐使用SimpleMemory，可以自适应，方便我们进行页面CSS定制论如... 查看详情

自定义博客园主题样式

自定义博客园主题样式基础实现之前有记录自己自定义目录以及相关样式功能，感兴趣的可以看下博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色在此基础上再加点捣鼓内容，实现主题样式透明化、... 查看详情

博客园主题样式修改教程(代码片段)

实现代码高亮那怎么使用呢？我是先向博客园申请了js代码的权限，申请入口还是在刚刚那个【设置】里：我这里是批准了所以显示支持js代码，你们要想实现这个代码高亮，那就得先申请（希望博客园的管理员别打我—..&mdas... 查看详情

element如何自定义主题(代码片段)

...写一遍，加深一下印象，也希望能给别人带来帮助。这篇博客的思路，总结性比较强，指的大家j借鉴：https://blog.csdn.net/you 查看详情

冰淇淋主题博客皮肤(代码片段)

页面定制Css代码1/**************************************************2第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。3如果不符合你皮肤的要求，你可以在后面通过更高的优先级覆盖着这些样式，但是... 查看详情

自定义博客园主题和自动生成目录(代码片段)

背景最近觉得博客园网站太老旧了，不好看，并且没有移动端，于是想转到简书去写博客（主要简书有移动端），写出来的效果还是不满意，于是又回到了博客园，只能自己修改下博客主题了。于是百度了下，找到了两篇参考博... 查看详情