博客園的推薦欄,怎麽漂起來?
阿新 • • 發佈:2019-01-17
borde 打開 -s alt radius 研究 看到了 模式 element
說出來不怕你們笑話,寫代碼寫了這麽多年,竟然一開始搞不定博客園的推薦欄,怎麽讓它漂起來這個問題困擾了我很久!
漂起來的樣子是什麽樣的呢?
漂起來的樣子就像上面這張圖那樣,方便園友們推薦!
問了好幾個朋友,他們竟然也不知道怎麽搞,讓我很傷心——看來還得自己研究研究。
第一步:找樣式。
我在純潔的微笑的博客那裏,看到了推薦欄漂起來的樣子。於是就「F12」打開谷歌瀏覽器的開發者模式,然後通過「Elements」面板找到一串CSS代碼:
#div_digg { position: fixed; bottom: 5px; width: 136px; right: 0px; border: 2px solid #6FA833; padding: 10px; background-color: #fff; border-radius: 5px 5px 5px 5px !important; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); }
具體方式,見下圖:
第二步,在本地新建一個css文件,把以上代碼拷貝進去。
第三步,在博客園的「文件」面板中上傳css文件。
記得點擊css文件的鏈接,復制文件的路徑。
第四步,在博客園的「設置」面板的「頁首Html代碼」引入css文件。
最後,別忘了保存。保存後,再點開一篇博客園的文章,就看到推薦欄漂了起來。
博客園的推薦欄,怎麽漂起來?