ป้ายกำกับ
ทำป้ายกำกับแบบเท่ๆ ให้กับล็อกเราดีกว่า
วิธีทำป้ายกำกับใต้ภาพ หรือ ป้ายกำกับใต้หัวข้อบทความ ในหน้าแรกของเว็บ บล็อก เพื่อแยกหมวดหมู่ [LABEL] ให้กับบทความ ดังภาพตัวอย่าง
โค้ด
.post-labels
#viewers
ส่วนที่1
.post-labels{position:relative;margin:0;padding:0}
.post-labels a{float:left;height:18px;line-height:18px;position:relative;font-size:11px;margin-top:4px;margin-left:15px;background:#eb4938;color:#fff;text-decoration:none;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;padding:0 10px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-9px;width:0;height:0;border-color:transparent #eb4938 transparent transparent;border-style:solid;border-width:9px 9px 9px 0}
.post-labels a:after{content:"";position:absolute;top:7px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #666;-webkit-box-shadow:-1px -1px 2px #666;box-shadow:-1px -1px 2px #666}
.post-labels a:hover{background:#555}
.post-labels a:hover:before{border-color:transparent #555 transparent transparent}
ส่วนที่2
#viewers{float:left;width:100%;font:12px Arial;padding-top:3px;border-top:1px solid #bbb;margin:0;background:#eee}
.readmorecontent{float:right;margin:0;padding:3px 10px;0}
ทั้งสองอยุ่ก่อนหน้า ]]></b:skin>
ส่วนที่3
<div class='post-footer'>
<div id='viewers'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=5"' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</b:if>
</span>
</div>
</div>
.post-labels
#viewers
ส่วนที่1
.post-labels{position:relative;margin:0;padding:0}
.post-labels a{float:left;height:18px;line-height:18px;position:relative;font-size:11px;margin-top:4px;margin-left:15px;background:#eb4938;color:#fff;text-decoration:none;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;padding:0 10px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-9px;width:0;height:0;border-color:transparent #eb4938 transparent transparent;border-style:solid;border-width:9px 9px 9px 0}
.post-labels a:after{content:"";position:absolute;top:7px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #666;-webkit-box-shadow:-1px -1px 2px #666;box-shadow:-1px -1px 2px #666}
.post-labels a:hover{background:#555}
.post-labels a:hover:before{border-color:transparent #555 transparent transparent}
ส่วนที่2
#viewers{float:left;width:100%;font:12px Arial;padding-top:3px;border-top:1px solid #bbb;margin:0;background:#eee}
.readmorecontent{float:right;margin:0;padding:3px 10px;0}
ทั้งสองอยุ่ก่อนหน้า ]]></b:skin>
ส่วนที่3
<div class='post-footer'>
<div id='viewers'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=5"' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</b:if>
</span>
</div>
</div>
บทความ
แสดงความคิดเห็น
0 ความคิดเห็น