Blogger強調文字加上各種顏色底線

語法Blogger強調文字加上各種顏色底線

本功能參考網頁：http://wayne-fu.blogspot.com/2012/07/colorful-underline.html

１、到Blogger後台「設計」→「修改HTML」，
尋找</head> ，在 </head> 之前
插入下面的程式碼

<style type='text/css'>
o1{
background: url(http://static.flickr.com/8172/7886803482_29b2a8bcdb_b.jpg) repeat bottom;
line-height: 22px;
}

o2{
background: url(http://static.flickr.com/8179/7886805154_3dd7db6652_b.jpg) repeat bottom;
line-height: 22px;
}

p1{
background: url(http://static.flickr.com/8036/7886803638_115310eaea_b.jpg) repeat bottom;
line-height: 22px;
}

p2{
background: url(http://static.flickr.com/8304/7886803774_7fe11ace3c_b.jpg) repeat bottom;
line-height: 22px;
}

r1{
background: url(http://static.flickr.com/8321/7886803276_e8d0ee00aa_b.jpg) repeat bottom;
line-height: 22px;
}

r2{
background: url(http://static.flickr.com/8171/7886803922_a8cb5eb458_b.jpg) repeat bottom;
line-height: 22px;
}

y1{
background: url(http://static.flickr.com/8316/7886804086_b357aec65f_b.jpg) repeat bottom;
line-height: 22px;
}

y2{
background: url(http://static.flickr.com/8438/7886804562_95813552fd_b.jpg) repeat bottom;
line-height: 22px;
}

b1{
background: url(http://static.flickr.com/8312/7886804432_d1bdbfee25_b.jpg) repeat bottom;
line-height: 22px;
}

b2{
background: url(http://static.flickr.com/8316/7886804992_bbd52a0948_b.jpg) repeat bottom;
line-height: 22px;
}

d1{
background: url(http://static.flickr.com/8170/7886804830_6b1f3da93b_b.jpg) repeat bottom;
line-height: 22px;
}

d2{
background: url(http://static.flickr.com/8299/7886805302_29076e764d_b.jpg) repeat bottom;
line-height: 22px;
}

g1{
background: url(http://static.flickr.com/8181/7886804246_aa76af6e97_b.jpg) repeat bottom;
line-height: 22px;
}

c1{
background: url(http://static.flickr.com/8440/7886804694_eaa7183158_b.jpg) repeat bottom;
line-height: 22px;
}

</style>

<script type='text/javascript'>
document.createElement("o1")
document.createElement("o2")
document.createElement("p1")
document.createElement("p2")
document.createElement("r1")
document.createElement("r2")
document.createElement("y1")
document.createElement("y2")
document.createElement("b1")
document.createElement("b2")
document.createElement("d1")
document.createElement("d2")
document.createElement("g1")
document.createElement("c1")
</script>



２、測試效果：
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。
強調文字、文章、段落，顯示效果。



３、如果遇到要加底線的強調文字，使用方法：
可修改文字
<o1>可修改文字</o1>

可修改文字
<o2>可修改文字</o2>

可修改文字
<p1>可修改文字</p1>

可修改文字
<p2>可修改文字</p2>

可修改文字
<r1>可修改文字</r1>

可修改文字
<r2>可修改文字</r2>

可修改文字
<y1>可修改文字</y1>

可修改文字
<y2>可修改文字</y2>

可修改文字
<b1>可修改文字</b1>

可修改文字
<b2>可修改文字</b2>

可修改文字
<d1>可修改文字</d1>

可修改文字
<d2>可修改文字</d2>

可修改文字
<g1>可修改文字</g1>

可修改文字
<c1>可修改文字</c1>




※圖片的原始路徑：
o1

http://static.flickr.com/8172/7886803482_29b2a8bcdb_b.jpg

o2

http://static.flickr.com/8179/7886805154_3dd7db6652_b.jpg

p1

http://static.flickr.com/8036/7886803638_115310eaea_b.jpg

p2

http://static.flickr.com/8304/7886803774_7fe11ace3c_b.jpg

r1

http://static.flickr.com/8321/7886803276_e8d0ee00aa_b.jpg

r2

http://static.flickr.com/8171/7886803922_a8cb5eb458_b.jpg

y1

http://static.flickr.com/8316/7886804086_b357aec65f_b.jpg

y2

http://static.flickr.com/8438/7886804562_95813552fd_b.jpg

b1

http://static.flickr.com/8312/7886804432_d1bdbfee25_b.jpg

b2

http://static.flickr.com/8316/7886804992_bbd52a0948_b.jpg

d1

http://static.flickr.com/8170/7886804830_6b1f3da93b_b.jpg

d2

http://static.flickr.com/8299/7886805302_29076e764d_b.jpg

g1

http://static.flickr.com/8181/7886804246_aa76af6e97_b.jpg

c1

http://static.flickr.com/8440/7886804694_eaa7183158_b.jpg







參考：
網頁：部落格文字加上各種底線圖案的完整解決方案 ↗