1. 程式人生 > >cnblog博客園自定義樣式修改標簽頁的icon圖標

cnblog博客園自定義樣式修改標簽頁的icon圖標

16px 特色 div rtc .get 地址 type light head

有沒有發現大多數的博客園標簽右上角都是一個小礦工,千篇一律沒有什麽特色,想不想設置一個像我一樣的個性化icon圖標呢?

按照以下四步你也可以實現自定義標簽圖標。

From 技術分享圖片 To 技術分享圖片

第一步:挑挑揀揀

選一張icon圖標(尺寸不要太大)不然加載會很慢

如果找到一個很滿意的圖片但是很大,那麽到這裏https://tinypng.com/ 壓縮圖片。

第二步:傳文件

在博客園的設置界面選擇文件,將你喜歡的圖片上傳上來

技術分享圖片

第三步:寫代碼

在設置中的頁腳Html代碼中插入以下script腳本

技術分享圖片

代碼如下,記得將你自己的圖片地址替換到linkObject.href

<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/lingyejun/yanzi.ico";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

第四步:刷新檢驗

保存——重新進入你的博客首頁——發現大功告成,新的icon圖標已經生效了。

最後一步

如果文章對各位兄弟姐妹有所幫助,還請給我點個贊??,謝謝。

cnblog博客園自定義樣式修改標簽頁的icon圖標