[WORDPRESS] Tạo Highlight Pre Text cho WordPress, Blogger sử dụng CSS

Cái này gặp ở nhiều trang báo thường có cái tên website của nó ở đầu được Highlight như thế này nhìn khá là chất.

Tạo cái Highlight Pre-Text này cũng rất đơn giản chỉ có một đoạn CSS là xong áp dụng cho cá WordPress, Blogger… hoặc tất cả các mã nguồn khác đều được.
CSS đây các bạn nhé, chú ý đến 2 cái bôi đỏ
  1. Thứ nhất là chỉ định dòng đầu tiên ở đây mình dùng first-child để xác định dòng đầu tiên của box entry nếu không có  thì dòng nào nó cũng hiện đấy.
  2. Thứ 2 là nội dung của đoạn fre-text đấy nhé thay nội dung theo website
.entry p:first-child:before{content: ‘Vanchuyenkienvang.vn‘;
    display: inline-block;
    font-family: ‘Roboto Condensed’, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFF;
    text-transform: uppercase;
    line-height: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #00A6DD;
    padding: 2px 5px 1px;
    position: relative;
    top: -2px;
    margin-right: 3px;}

Coppy + Pate là được nhé thật EZ phải không nào, em là Sơn Nguyễn fb: https://www.facebook.com/nguyenducson.haui hiện đang làm SEO tại chuyển nhà trọn gói Kiến Vàng chăm như Kiến, chất lượng như Vàng bác nào cần chuyển cái gì cứ hú em nhé, giá căng đét luôn.

Add Comment