OO第一單元部落格
轉自 https://www.cnblogs.com/ECJTUACM-873284962/p/9346853.html
全網最全的部落格美化系列教程相關文章目錄
【全網最全的部落格美化系列教程】01.新增Github專案連結
【全網最全的部落格美化系列教程】03.給部落格新增一隻萌萌噠的小倉鼠
【全網最全的部落格美化系列教程】05.公告欄個性時間顯示的實現
【全網最全的部落格美化系列教程】06.推薦和反對炫酷樣式的實現
【全網最全的部落格美化系列教程】09.新增"擴大/縮小瀏覽區域大小" 按鈕
【全網最全的部落格美化系列教程】10.小火箭置頂特效的實現
【全網最全的部落格美化系列教程】11.滑鼠點選愛心特效的實現
【全網最全的部落格美化系列教程】12.修改滑鼠圖案
【全網最全的部落格美化系列教程】13.滑鼠點選效果升級的實現
【全網最全的部落格美化系列教程】14.程式碼高亮設定的實現
【全網最全的部落格美化系列教程】15.動畫幻燈效果的實現
【全網最全的部落格美化系列教程】16.給部落格新增一個打賞的實現
【全網最全的部落格美化系列教程】17.部落格背景重新整理切換效果的實現
【全網最全的部落格美化系列教程】18.數學之美---動態幾何線條的實現
【全網最全的部落格美化系列教程】20.給部落格新增一個萌萌噠的看板娘
【全網最全的部落格美化系列教程】21.給部落格新增一個夜間模式吧
【全網最全的部落格美化系列教程】22.新增一個文章目錄特效
【全網最全的部落格美化系列教程】23.圖片水紋特效的實現
【全網最全的部落格美化系列教程】24.給部落格增加一個音樂播放器特效
【全網最全的部落格美化系列教程】25.給部落格增加一個音樂播放器特效
【全網最全的部落格美化系列教程】26.評論頭像旋轉的實現
【全網最全的部落格美化系列教程】27.IP地址定位及天氣預報的實現
【全網最全的部落格美化系列教程】28.3D標籤雲動畫的實現
【全網最全的部落格美化系列教程】29.自制HTML原始碼執行Javascript特效
【全網最全的部落格美化系列教程】30.部落格文章實現markdown書寫機制
【全網最全的部落格美化系列教程】31.用Canvas和requestAnimFrame做動畫特效
【全網最全的部落格美化系列教程】32.公告欄新增自己的頭像
【全網最全的部落格美化系列教程】33.新增一隻舞動的小知音
【全網最全的部落格美化系列教程】34.面板背景的選擇與定製
新增Github專案連結
你們肯定對左上角的Fork me on Github比較好奇吧，這個是怎麼弄的呢，其實你們通過F12控制檯去找到這個控制元件，你們也能實現這個效果，如下圖，很明顯，我們可以看到是我用紅色矩形框住的這部分語句控制著這個圖示，點選以後會跳轉到我的Github專案管理。
以上語句如下：
<a href="https://github.com/AngelKitty"> <img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"> </a>
把href的內容替換為自己的GitHub倉庫地址
src的圖片連結地址可以設定為其他地址，我就選擇直接引用了。
新增方式：進入自己的部落格園->設定，將以上html程式碼新增到“頁首Html程式碼”
原理：學過一點前端知識的人就知道，這是一個很簡單的東西，通過href引用連結跳轉，再用img標籤裝上一個圖片的樣式。
新增以後效果如下：
更多風格請移步至這裡：https://blog.github.com/2008-12-19-github-ribbons/
這裡有很多不同風格的形式供你選擇，上面都提供了原始碼，你只需要更改href地址，複製貼上到指定位置就行了~~~
全網最全的部落格美化系列教程相關文章目錄
【全網最全的部落格美化系列教程】01.新增Github專案連結
【全網最全的部落格美化系列教程】03.給部落格新增一隻萌萌噠的小倉鼠
【全網最全的部落格美化系列教程】05.公告欄個性時間顯示的實現
【全網最全的部落格美化系列教程】06.推薦和反對炫酷樣式的實現
【全網最全的部落格美化系列教程】09.新增"擴大/縮小瀏覽區域大小" 按鈕
【全網最全的部落格美化系列教程】10.小火箭置頂特效的實現
【全網最全的部落格美化系列教程】11.滑鼠點選愛心特效的實現
【全網最全的部落格美化系列教程】12.修改滑鼠圖案
【全網最全的部落格美化系列教程】13.滑鼠點選效果升級的實現
【全網最全的部落格美化系列教程】14.程式碼高亮設定的實現
【全網最全的部落格美化系列教程】15.動畫幻燈效果的實現
【全網最全的部落格美化系列教程】16.給部落格新增一個打賞的實現
【全網最全的部落格美化系列教程】17.部落格背景重新整理切換效果的實現
【全網最全的部落格美化系列教程】18.數學之美---動態幾何線條的實現
【全網最全的部落格美化系列教程】20.給部落格新增一個萌萌噠的看板娘
【全網最全的部落格美化系列教程】21.給部落格新增一個夜間模式吧
【全網最全的部落格美化系列教程】22.新增一個文章目錄特效
【全網最全的部落格美化系列教程】23.圖片水紋特效的實現
【全網最全的部落格美化系列教程】24.給部落格增加一個音樂播放器特效
【全網最全的部落格美化系列教程】25.給部落格增加一個音樂播放器特效
【全網最全的部落格美化系列教程】26.評論頭像旋轉的實現
【全網最全的部落格美化系列教程】27.IP地址定位及天氣預報的實現
【全網最全的部落格美化系列教程】28.3D標籤雲動畫的實現
【全網最全的部落格美化系列教程】29.自制HTML原始碼執行Javascript特效
【全網最全的部落格美化系列教程】30.部落格文章實現markdown書寫機制
【全網最全的部落格美化系列教程】31.用Canvas和requestAnimFrame做動畫特效
【全網最全的部落格美化系列教程】32.公告欄新增自己的頭像
【全網最全的部落格美化系列教程】33.新增一隻舞動的小知音
【全網最全的部落格美化系列教程】34.面板背景的選擇與定製
新增Github專案連結
你們肯定對左上角的Fork me on Github比較好奇吧，這個是怎麼弄的呢，其實你們通過F12控制檯去找到這個控制元件，你們也能實現這個效果，如下圖，很明顯，我們可以看到是我用紅色矩形框住的這部分語句控制著這個圖示，點選以後會跳轉到我的Github專案管理。
以上語句如下：
<a href="https://github.com/AngelKitty"> <img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"> </a>
把href的內容替換為自己的GitHub倉庫地址
src的圖片連結地址可以設定為其他地址，我就選擇直接引用了。
新增方式：進入自己的部落格園->設定，將以上html程式碼新增到“頁首Html程式碼”
原理：學過一點前端知識的人就知道，這是一個很簡單的東西，通過href引用連結跳轉，再用img標籤裝上一個圖片的樣式。
新增以後效果如下：
更多風格請移步至這裡：https://blog.github.com/2008-12-19-github-ribbons/
這裡有很多不同風格的形式供你選擇，上面都提供了原始碼，你只需要更改href地址，複製貼上到指定位置就行了~~~