CSDN博客界面自定義之右側博客欄目修改

最近本人迷戀上了沒事寫寫博客,感覺寫博客挺好玩的。不僅可以記錄自己學習的知識,而且在幫助到別人同時自己也會十分開心。

那麼就從CSDN入手吧,因爲之前經常搜資料CSDN的博客文章,幫助我解決了很多實際問題,所以感覺是時候回報一下的時候了。

那麼對於絕大多數CSDN博客來說,你看到的界面,可能是這樣。

或者這樣

 

又或者這樣

上面三種是CSDN比較簡潔的界面,但是對於一個90後的小夥來說,我希望能別人一打開我的博客,給別人一種夠炫酷的界面。

爲什麼要一個好點的美觀點的界面?如果要我來說1:因爲寫博客是一件長期以往的事情,2:別人看到你的博客覺得眼前一亮,印象也會好點。

那麼最近我就看到一個新的博客界面。那我直接放圖,給大家看下。

大家覺得這個界面如何?

如何覺得好的,可以繼續往下看,不好的尼,可能你不是本文服務對象。那麼請點擊左上角的C博客。

上述界面如何做到的尼?當然不是我寫的。

各位小夥伴打開你的CSDN點擊寫博客,看到如下界面

點擊博客配置,選中這款最新的極客世界的博客皮膚就可以了。

可能有些人覺得我很嘍,這麼屁點東西也寫博客,當然不止這些,我對新皮膚也做了一些修改。

下面給大家展示修改效果。

 

我在右側欄目中增加了自己個人信息以及關注我的還有圖片。

我的CSDN博客地址:http://blog.csdn.net/qq_36305327。大家可以去感受下。

下面我將教大家如何做出這樣的效果。

那麼我以博主信息製作爲例,選中博客欄目,然後翻到頁面下面添加欄目

 

直接填寫以下信息

那麼我把我的填寫信息寫出來:

標題:博主信息

內容:

<p><span style="font-size:13px; font-weight:bold">Name:</span> 邵傑子龍</p>

<br>

<p><span style="font-size:13px; font-weight:bold">Email:</span> [email protected]

</p>

<br>

<p><span style="font-size:13px; font-weight:bold">個人網站:</span> <a title="跳轉到我的個人網站" href="http://www.shaofee.com/" target="_blank" style="color:gray; font-size:13px">

http://www.shaofee.com/</a></p>

直接添加就可以了。但是記得修改成屬於自己的內容。

 

關注博主內容代碼:

<div class="blog_medal"><a href="http://blog.csdn.net/experts/rule.html"><img src=" https://img-blog.csdn.net/20170502104108516?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYzMDUzMjc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center " alt="img" class="medal_img"></a>

<br>

<br>

<div class="medal_c"><a href=""><img src=" https://img-blog.csdn.net/20170502104148439?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYzMDUzMjc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center " alt="img"></a> &nbsp;

<a href=""><img src=" https://img-blog.csdn.net/20170502104207971?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYzMDUzMjc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center " alt="img"></a></div>

<br>

<div class="attention"><a href="" id="span_add_follow"><i class="fa fa-plus"></i><span>加關注</span></a>

<a href=""><i class="fa fa-envelope-o"></i><span>發私信</span></a> </div>

<div class="contact"></div>

</div>

上述代碼圖片直接粘貼會顯示圖片空間出錯,爲什麼尼?因爲圖片要求是你自己博客裏面的圖片。本身CSDN沒有圖片空間這個功能,那麼我們可以通過創建一個空的博客上傳很多照片,然後保存於自己的草稿箱,最後獲得圖片地址就可以了。

本博客於我的多個博客網站均有轉載:

本人個人網站:http://www.shaofee.com/

知乎:https://www.zhihu.com/people/shao-fei-12-43/pins/posts

新浪微博:http://i.blog.sina.com.cn/blogprofile/index.php?com=1

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章