想在痞客邦部落格的側欄產生自訂的圖片或文字連結其實不難,

因為痞客邦側邊欄位是支援HTML語法的

側邊欄位產生自訂圖片連結

以上圖為例,我放了兩個自訂圖片連結,作法如下:

(一)到痞客邦部落格後台,開啟側欄管理功能

側邊欄位產生自訂圖片連結
 

(二)在最右邊版位站存區,點新增版位

側邊欄位產生自訂圖片連結

就會跳出新增自訂欄位對話框

側邊欄位產生自訂圖片連結

 

(三)在標題輸入想要顯示的標題,內容則要將HTML語法貼入,

關於語法的說明,請參照最下方

Snap4.png

 

(四)完成以後,將自訂的側邊欄位拖曳到想要放置的位置就完成囉!

側邊欄位產生自訂圖片連結

 


HTML語法教學

1.插入圖片與連結

範例:

<a target="_blank" href="https://play.google.com/store/apps/details?id=com.maggie.flashcard_sql"><img border="0" width="150" height="150" src="https://pic.pimg.tw/muchone/1557887451-1848048953.jpg"></a>

說明:

如果覺得太複雜,直接用下面的方式就可以

<a target="_blank" href="要開啟的網站連結位址"><img src="圖片來源位址"></a>

下面是可自行選擇要不要加入的html語法:

target="_blank":這是要把連結另開新視窗的意思

border="0" :這是設定圖片不要有框

width="150" :設定圖片寬度為150

height="150":設定圖片高度為150

 

2.加入文字的一些小變化:

範例:

<div><FONT SIZE="3" COLOR="#007FFF">OCR文字辨識掃描與翻譯</FONT></div>

如果覺得太複雜,直接用下面的方式就可以

<div>"文字內容"</div>

=>使用<div></div>包住文字,可以讓文字換行

下面是可自行選擇要不要加入的html語法

FONT SIZE="3":設定文字大小

COLOCR="#007FFF":設定文字顏色

 

*如果想要做更多變化可以參考下列HTML語法網址

http://www.w3school.com.cn/html/index.asp

https://www.w3schools.com/html/

*顏色的16進位碼不知道,可以參考下面網站有一些列表

https://www.ebaomonthly.com/window/photo/lesson/colorList.htm

文章標籤

muchone 發表在 痞客邦 留言(0) 人氣()