【博客美化】04.自定義地址欄logo


博客園美化相關文章目錄:

【博客美化】01.推薦和反對炫酷樣式

【博客美化】02.公告欄顯示個性化時間

【博客美化】03.分享按鈕

【博客美化】04.自定義地址欄logo

【博客美化】05.添加GitHub鏈接

【博客美化】06.添加QQ交談鏈接

【博客美化】07.添加打賞按鈕

【博客美化】08.添加"擴大/縮小瀏覽區域大小" 按鈕

【博客美化】09.評論帶頭像,且支持旋轉

【博客美化】10.圖片預覽放大

 

前言:

當我們打開我們自己的博客的時候,比如用谷歌瀏覽器打開:

顯示的圖標為博客園的默認圖標

那么怎么改成自定義的logo呢???

1.首先得准備一個icon類型的文件

方法一:我們可以在線制作一個icon圖標

打開這個網站:在線ico圖標制作,然后上傳自己的圖片(jpg,png),就可以download一個icon圖標了。

如下圖所示:

方法二:在線下載一個icon圖標

打開這個網站,圖標下載,ICON(PNG/ICO/ICNS)圖標搜索下載,搜索想要的圖標,然后下載圖標。

 2.上傳自己的ICON圖標

進入自己的博客后台管理->文件->選擇文件->上傳,然后點擊已上傳的文件,copy這個文件的網絡地址,這個網絡地址在第三步會用到。

 

3.添加腳本文件

進入自己的博客園->設置,將以下JavaScript代碼添加到“頁腳Html代碼”

<script type="text/javascript" language="javascript"> 
  //Setting ico for cnblogs
  var linkObject = document.createElement('link');
  linkObject.rel = "shortcut icon";
  linkObject.href = "icon的網絡路徑";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

  將上面icon的網絡路徑替換為自己的上傳的icon的網絡地址。

保存設置后,刷新頁面,就會看到地址欄的圖標變了:

 

小伙伴們,新技能get了嗎?趕快去試下吧!順手點個贊哦! 點我推薦

 

還有一件事,直接在頁首HTML代碼中添加下面這段代碼不能成功

<link rel="shortcut icon" href="icon網絡地址" />

所以我用了之前的JavaScript,這段JavaScript腳本我是查看頭頭哥博客的網頁源代碼copy過來的,在這感謝頭頭哥。

 


作  者: Jackson0714
出  處:http://www.cnblogs.com/jackson0714/
關於作者:專注於微軟平台的項目開發。如有問題或建議,請多多賜教!
版權聲明:本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。
特此聲明:所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤,共同進步。或者直接私信
聲援博主:如果您覺得文章對您有幫助,可以點擊文章右下角推薦一下。您的鼓勵是作者堅持原創和持續寫作的最大動力!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM