全网最全的博客美化系列教程08.自定义地址栏logo(代码片段)

ecjtuacm-873284962 ecjtuacm-873284962     2022-12-17     452

关键词:

全网最全的博客美化系列教程相关文章目录

【全网最全的博客美化系列教程】01.添加Github项目链接

【全网最全的博客美化系列教程】02.添加QQ交谈链接

【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠

【全网最全的博客美化系列教程】04.访客量统计的实现

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

【全网最全的博客美化系列教程】07.添加一个分享的按钮吧

【全网最全的博客美化系列教程】08.自定义地址栏Logo

【全网最全的博客美化系列教程】09.添加"扩大/缩小浏览区域大小" 按钮

【全网最全的博客美化系列教程】10.小火箭置顶特效的实现

【全网最全的博客美化系列教程】11.鼠标点击爱心特效的实现

【全网最全的博客美化系列教程】12.修改鼠标图案

【全网最全的博客美化系列教程】13.鼠标点击效果升级的实现

【全网最全的博客美化系列教程】14.代码高亮设置的实现

【全网最全的博客美化系列教程】15.动画幻灯效果的实现

【全网最全的博客美化系列教程】16.给博客添加一个打赏的实现

【全网最全的博客美化系列教程】17.博客背景刷新切换效果的实现

【全网最全的博客美化系列教程】18.数学之美---动态几何线条的实现

【全网最全的博客美化系列教程】19.旋转立方体的实现

【全网最全的博客美化系列教程】20.给博客添加一个萌萌哒的看板娘

【全网最全的博客美化系列教程】21.给博客添加一个夜间模式吧

【全网最全的博客美化系列教程】22.添加一个文章目录特效

【全网最全的博客美化系列教程】23.图片水纹特效的实现

【全网最全的博客美化系列教程】24.给博客增加一个音乐播放器特效

【全网最全的博客美化系列教程】25.给博客增加一个音乐播放器特效

【全网最全的博客美化系列教程】26.评论头像旋转的实现

【全网最全的博客美化系列教程】27.IP地址定位及天气预报的实现

【全网最全的博客美化系列教程】28.3D标签云动画的实现

【全网最全的博客美化系列教程】29.自制HTML源码运行Javascript特效

【全网最全的博客美化系列教程】30.博客文章实现markdown书写机制

【全网最全的博客美化系列教程】31.用Canvas和requestAnimFrame做动画特效

【全网最全的博客美化系列教程】32.公告栏添加自己的头像

【全网最全的博客美化系列教程】33.添加一只舞动的小知音

【全网最全的博客美化系列教程】34.皮肤背景的选择与定制

自定义地址栏Logo

技术分享图片

效果如上图所示~

那么我们如何去自定义地址栏logo呢?

首先,我们得准备一个icon类型的文件~

首先你得准备一张png或者jpg/jepg的图片,这个时候你可能会想要你的博客头像作为图片,你只需要这样子:

技术分享图片

然后保存好了图像之后,上传到在线生成icon的网站:https://tool.lu/favicon/

上传成功后点击下载icon图标

技术分享图片

进入自己的博客后台管理->文件->选择文件->上传,然后点击已上传的文件,copy这个文件的网络地址

比如这是我的地址:https://files.cnblogs.com/files/ECJTUACM-873284962/favicon.ico

然后再进入自己的博客园->设置,将以下JavaScript代码添加到“页脚Html代码”

 

<script type="text/javascript" language="javascript">
  //Setting ico for cnblogs
  var linkObject = document.createElement(link);
  linkObject.rel = "shortcut icon";
  linkObject.href = "https://files.cnblogs.com/files/ECJTUACM-873284962/favicon.ico";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

 

将href种的地址路径替换成你自己的就好了~

保存设置后,刷新页面,就会看到地址栏的图标变了:

技术分享图片

 

全网最全的博客美化系列教程05.公告栏个性时间显示的实现(代码片段)

全网最全的博客美化系列教程相关文章目录【全网最全的博客美化系列教程】01.添加Github项目链接【全网最全的博客美化系列教程】02.添加QQ交谈链接【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠【全网最... 查看详情

全网最全的博客美化系列教程06.推荐和反对炫酷样式的实现(代码片段)

全网最全的博客美化系列教程相关文章目录【全网最全的博客美化系列教程】01.添加Github项目链接【全网最全的博客美化系列教程】02.添加QQ交谈链接【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠【全网最... 查看详情

博客美化08.添加"扩大/缩小浏览区域大小"按钮

 博客园美化相关文章目录:【博客美化】01.推荐和反对炫酷样式【博客美化】02.公告栏显示个性化时间【博客美化】03.分享按钮【博客美化】04.自定义地址栏logo【博客美化】05.添加GitHub链接【博客美化】06.添加QQ交谈链接【... 查看详情

全网最全无错误的cmake教程20篇

CMake基础教程(1)什么是cmakeCMake基础教程(2)在Linux下为一个最简单的工程写一个最简单的CMakeLists.txt生成MakefileCMake基础教程(3)cmake变量 查看详情

python爬虫入门教程!全网最全反爬虫系列

halo~大家好今天我们来一起了解一下什么是爬虫什么是反爬虫。在了解什么是反爬虫手段之前,我们首先来看一看爬虫到底是什么? 名词解释爬虫 ——使用任何技术手段批量获取网站信息的一种方式,关键在批量。... 查看详情

博客美化09.评论带头像,且支持旋转

博客园美化相关文章目录:【博客美化】01.推荐和反对炫酷样式【博客美化】02.公告栏显示个性化时间【博客美化】03.分享按钮【博客美化】04.自定义地址栏logo【博客美化】05.添加GitHub链接【博客美化】06.添加QQ交谈链接【博客... 查看详情

博客园自定义地址栏logo

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

博客园美化教程大集合(超详细,看这篇就够了)(代码片段)

阅读目录:  1. 前言  2.定制自己的博客0.美化整体效果1.准备工作2.自定义个性化导航栏3.添加顶部博主信息4.添加顶部滚动公告5.为博客文章添加目录导航6.添加分享功能按键7.定制推荐和反对按键的炫酷样式8.添加快速... 查看详情

手把手教你virtualbox安装centos,全网最全教程

VirtualBox安装Centos全流程1.VirtualBox下载及安装VirtualBox镜像下载VirtualBox下载链接:http://download.virtualbox.org/virtualbox在该链接中有VirtualBox各个历史版本的下载链接,本文下载的是VirutalBox-6.1.20,需要下载VirtualBox-6.1.20-143896-Win.exe... 查看详情

记录帖如何自定义博客园界面

关于如何自定义博客园界面的文章记录博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了)博客园cnblogs:自定义页面风格博客园自定义样式 查看详情

全网最全最细青龙面板搭配ninja+依赖+ninja配置的超细讲解教程!!!(代码片段)

Title前言1.连接finalshell或者xshell2.停止容器(把以下代码复制粘贴进去)3.删除容器(把以下代码复制粘贴进去)4.安装安装docker-compose(把以下代码复制粘贴进去)5.创建docker-compose.yml文件6.如果使用的xshell的请... 查看详情

建议收藏万字长文,教你发布鸿蒙(harmonyos)组件到maven中央仓库,全网最全教程!(代码片段)

        目录1.使用组件的3种方式(1)引用同工程中的HarmonyOS组件(以调试为目的)(2)引用本地的HarmonyOS组件(3)引用Maven中央仓库中的HarmonyOS组件2.组件可以发布到哪里(1)没有自... 查看详情

转:typora入门:全网最全教程

Typora入门:全网最全教程  查看详情

博客园的界面自定义教程

地址为:http://www.cnblogs.com/asxinyu/p/Bolg_Category_For_BlogBeauty.html 查看详情

整理全网最全博客建站工具,各类博客cms创作平台(代码片段)

前段时间有点丧,碎碎念想到,一腔孤勇的活着也曾有过许许多多的压力,但觉得并不是很累。常言道,与天争,争了个天道无常,与世争,争了个世事沧桑,与人争,争了个人心叵测,何... 查看详情

全网最全“git安装本地仓库使用教程”,及github搜索技巧本地git使用ssh协议版本回退(代码片段)

全网最全“git安装、本地仓库使用教程”,及github搜索技巧(二)文章目录全网最全“git安装、本地仓库使用教程”,及github搜索技巧(二)1.前言1.1速查表1.2github搜索技巧2.本地git使用2.1工作流程2.2本地... 查看详情

全网最全-java简历优化-优质项目经历

全网最全-Java简历优化-优质项目经历应届生Java简历-项目经历部分头条移动端web应用(黑马头条)项目描述该项目要求仿照目前比较流行的“今日头条”app,内容则以技术类文章为主,为终端学习用户提供精准的.感兴趣的技术文... 查看详情

宝藏级全网最全的matplotlib详细教程-数据分析必备手册(4.5万字总结)(代码片段)

【宝藏级】全网最全的Matplotlib详细教程(4.5万字总结)1.数据分析中常用图折线图:柱状图:直方图:散点图:饼状图:箱线图:更多参考:2.Matplotlib库安装:基本使用:设置图的信息&#... 查看详情