Với thủ thuật này mình chỉ sử dụng css nhưng vẫn đảm bảo tiêu chí đó là đẹp lại rất đơn giản. Mong rằng bạn sẽ thích mẫu này!
Bước 1: Bạn vào phần Bố cục → Thêm Tiện ích Danh sách Nhãn bài đăng và tùy chỉnh như sau
Bước 2: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
- Với LIGHT style
#Label1 h2{font-family:Arial;background:#12a6f3;color:#fff;border-bottom:1px solid #12a6f3;text-shadow:none} #Label1{font:14px Arial;padding:0;margin:0;text-shadow:none} #Label1 li{background:#fff;position:relative;border-bottom:1px solid #12a6f3;border-top:1px solid #fff;padding:0} #Label1 ul{list-style:none;padding:0;margin:0} #Label1 li a{background:url(https://lh3.googleusercontent.com/-gvPSBLnkOkw/UQGAEBvhqrI/AAAAAAAABuc/2U3SEkVeuIs/s10/bullet-icon.png) no-repeat 5px 11px;display:block;min-height:28px;line-height:28px;margin:0;padding:0 5px 0 20px;text-decoration:none;color:#12a6f3;font-size:14px;border-right:4px solid #12a6f3;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #Label1 li a:hover{border-right-color:#fff;text-decoration:none;color:#fff;background:#12a6f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3O3ckVXCZTbT2pDpiOy_p97mgyUXpxiKtIK5JNE67gCg3VP0iIQ3x5oj2GvmYPJ2oBWdDVA3c3trFxdcaj2FVgvkkROzhR2KGxTxRVglzdFOdBJIJNCRyfKl7XaNf8zrlV-K17tzjzwM/s1600/bullet.png) no-repeat 5px 11px;}
- Với DARK style
#Label1 h2{font-family:Arial;background:#222;color:#fff;border-top:1px solid #444;border-bottom:1px solid #000;text-shadow:none} #Label1{font:14px Arial;padding:0;margin:0;text-shadow:none;} #Label1 li{background:#333;position:relative;border-bottom:1px solid #000;border-top:1px solid #444;padding:0} #Label1 ul{list-style:none;padding:0;margin:0} #Label1 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3O3ckVXCZTbT2pDpiOy_p97mgyUXpxiKtIK5JNE67gCg3VP0iIQ3x5oj2GvmYPJ2oBWdDVA3c3trFxdcaj2FVgvkkROzhR2KGxTxRVglzdFOdBJIJNCRyfKl7XaNf8zrlV-K17tzjzwM/s1600/bullet.png) no-repeat 5px 11px;display:block;min-height:28px;line-height:28px;margin:0;padding:0 5px 0 20px;text-decoration:none;color:#fff;font-size:14px;border-right:4px solid #111;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #Label1 li a:hover{border-right-color:#444;text-decoration:none;color:#ddd;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3O3ckVXCZTbT2pDpiOy_p97mgyUXpxiKtIK5JNE67gCg3VP0iIQ3x5oj2GvmYPJ2oBWdDVA3c3trFxdcaj2FVgvkkROzhR2KGxTxRVglzdFOdBJIJNCRyfKl7XaNf8zrlV-K17tzjzwM/s1600/bullet.png) no-repeat 5px 11px;}
Ok saver lại template và tận hưởng!
5 nhận xét
Được đấy cậu ạ ::a
::n cái này là make by me, share cho ae dùng
DxH thân!
Cái theme mình đang dùng: http://anglebean.name.vn
Ở phần Widget của mình cũng giống theme http://www.nguoiaolam.net/ nhưng khi mình cho các Widget vào thì nó chỉ hiện ở bên trái, bên phải không có gì. Nên mình phải cho nó rộng ra bằng phần Post (width:650px).
Mình đã thử ở Widget1 mình cho Float:left và ở Widget2 mình cho Float:right thì widget2 sang phải nhưng nó không ngang bằng với widget1/
thế là mình lại thêm ở widget2 lệnh margin:-362px 0px; thì nó bằng widget1 nhưng nếu áp dụng cách này cho Widget3 , Widget4 lại không ngang hàng cùng Widget3. khó quá mình không sành lắm.
Bạn có thể giúp mình, cảm ơn bạn nhiều nhé !
Chào bạn!
Qua mô tả sơ qua của bạn mình đoán rằng bạn đã thực hiện sai cách để add thêm 1 widget mới nên xảy ra tình trạng không thể căn chỉnh đều 2 cột.
Còn về fix lỗi rất khó để giải đáp cho bạn tại đây. Nếu cần hỗ trợ hãy gửi template của bạn vào mail: dxhbook@gmail.com cho mình để mình fix lỗi hộ bạn nhé.
Thân.
DxH thân!
Vậy làm phiền bạn chỉnh hộ mình nha, thật ngại khi làm mất nhiều thời gian của bạn. mình sẽ gửi qua mail.