公告版位
歡迎光臨小君的友情世界!小君最近有事!無法上痞客邦與好友哈啦~暫時告別痞客邦一段時間!後會有期~珍重再見請不要忘了小君喔~~歡迎光臨小君的友情世界,最溫暖的不是春天,而是朋友的笑; 最愜意的不是陽光,而是朋友的祝福; 最浪漫的不是桃花滿天飛舞的季節, 而是我們彼此的牽掛和溫馨的問候! 祝福好友安康吉祥幸福!謝謝大家的支持和鼓勵本格文章侵權請告知會立即刪除,謝謝大家的支持!

 

 

將繼續閱讀文字改成圖片

more01

more02

我準備ㄌ兩張圖片如下:

 

  

請先進入CSS自訂式樣編輯框中找出下方語法中


有紅色字標示標籤對應每一個標籤

將花刮號 { ... }裡面語法

改成下方每個對應標的花括號 {...} 內語法

進CSS自訂式樣步驟請參考

 

/*繼續閱讀文字改成小圖*/
 

/*繼續閱讀區塊設定*/

.more {
float: right;
font-style: italic;
display: block;
width: 圖寬度px;     ←圖片要呈現的寬度請自行修改
height: 圖高度px;    ←圖片要呈現的高度請自行修改
padding-top: 10px;  ←距離上方高度請自行修改
margin-right: 20px ;   ←距離右邊間距請自行修改
}

/*繼續閱讀區塊文字消失呈現圖片設定*/
.more a{
text-indent: -5000px;  ←這裡一定要設讓文字偏移5000px; 將文字隱藏
font-size:0px;             ←這裡文字size一定要設成 0
display: block;
width: 圖寬度px;         ←圖片的寬度請自行修改
height: 圖高度px;        ←圖片的高度請自行修改
padding-top: 10px;         ←距離上方高度請自行修改
background: url(圖片網址) right no-repeat;  ←圖片靠右不重覆
margin-right: 20px ;  ←距離右邊間距請自行修改

}

/*繼續閱讀區塊文字消失超連結時呈現圖片設定*/

.more a:hover{
text-indent: -5000px;   ←這裡一定要設讓文字偏移5000px;將文字隱藏
font-size:0px;         ←這裡文字size一定要設成 0
display: block;
width: 圖寬度px;   ←圖片的寬度請自行修改
height: 圖高度px;   ←圖片的高度請自行修改
padding-top: 10px;  ←距離上方高度請自行修改
background: url(超連結時的圖片網址) right no-repeat;  ←圖片靠右不重覆
margin-right: 20px ;  ←距離右邊間距請自行修改

}
 

本文引用自hopopo923 - 文章右下的繼續閱讀文字改成小圖

arrow
arrow
    全站熱搜

    小君的友情世界 發表在 痞客邦 留言(0) 人氣()


    留言列表 留言列表

    發表留言