2022/08/16

Tumblr like愛心按鈕

為了在Tumblr貼文加上可愛的愛心跟轉貼鈕
參考別人的程式碼,弄了一整晚
弄到很晚還是弄不出來,心情超差!!後來只好怒睡

結果今天到公司繼續
反正都是程式碼,就當是認真上班了XD

而且也是吸收新知識嘛!! 上進!(自己講

昨天其實愛心是有成功顯示出來了
可是按愛心卻不會變色
活死不變色啊!!!!!

一定是有什麼鬼遮眼CSS在搞鬼
今天總算揭開它的真面目

其實就是<i>這個標籤啦
我原本的Theme有用到一些預設顏色變數
主要是這一段
<META name="color:Italic font" content="#C7C2B6">

斜體是<i>
然後用的icon也是<i>,所以就被影響了

在外面包一層div,多加這行css上去,就解了
.action_button i
{
    color: #6b6b6b;
}

我是參考這個網站的

大致說明下
要怎麼在Tumblr加入自訂愛心轉貼按鈕
實際程式碼可以參考上面那個網站~~

1. 加入icon套件css Font Awesome

2. body使用{LikeButton}及{ReblogURL}
再加上 i 標籤,變成自訂符號 ex: <i class="fa fa-heart"></i>

3. CSS加入自訂按鈕樣式
參考網站裡寫like-b的部分
其中 .like-b .liked + .b 是愛心變色的樣式
因為他是寫預設顏色變數,所以這邊要直接改成色碼

這樣就大功告成!!
除非愛心被鬼遮眼無法變色XD
那就參考上上面提到的做法,直接設定 i 的樣式

加入自訂愛心轉貼鈕之後好療癒~~~~

是說以前都沒有注意到貼文有沒有按鈕耶
每個貼文都有按鈕比較方便按讚轉貼說!!