天天看點

【部落格美化】04.自定義位址欄logo前言:1.首先得準備一個icon類型的檔案 2.上傳自己的ICON圖示3.添加腳本檔案

前言:

當我們打開我們自己的部落格的時候,比如用谷歌浏覽器打開:

【部落格美化】04.自定義位址欄logo前言:1.首先得準備一個icon類型的檔案 2.上傳自己的ICON圖示3.添加腳本檔案

顯示的圖示為部落格園的預設圖示

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

1.首先得準備一個icon類型的檔案

方法一:我們可以線上制作一個icon圖示

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

如下圖所示:

【部落格美化】04.自定義位址欄logo前言:1.首先得準備一個icon類型的檔案 2.上傳自己的ICON圖示3.添加腳本檔案

方法二:線上下載下傳一個icon圖示

打開這個網站,圖示下載下傳,ICON(PNG/ICO/ICNS)圖示搜尋下載下傳,搜尋想要的圖示,然後下載下傳圖示。

 2.上傳自己的ICON圖示

進入自己的部落格背景管理->檔案->選擇檔案->上傳,然後點選已上傳的檔案,copy這個檔案的網絡位址,這個網絡位址在第三步會用到。

【部落格美化】04.自定義位址欄logo前言:1.首先得準備一個icon類型的檔案 2.上傳自己的ICON圖示3.添加腳本檔案

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的網絡位址。

儲存設定後,重新整理頁面,就會看到位址欄的圖示變了:

【部落格美化】04.自定義位址欄logo前言:1.首先得準備一個icon類型的檔案 2.上傳自己的ICON圖示3.添加腳本檔案

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

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

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

複制

是以我用了之前的JavaScript,這段JavaScript腳本我是檢視頭頭哥部落格的網頁源代碼copy過來的,在這感謝頭頭哥。

作  者: Jackson0714

出  處:http://www.cnblogs.com/jackson0714/

關于作者:專注于微軟平台的項目開發。如有問題或建議,請多多賜教!

版權聲明:本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連結。

特此聲明:所有評論和私信都會在第一時間回複。也歡迎園子的大大們指正錯誤,共同進步。或者直接私信我

聲援部落客:您的鼓勵是作者堅持原創和持續寫作的最大動力!