Phần giao diện web/blog đóng vai trò rất quan trọng khi thiết kế một website hay blog. Thời gian qua mình có test một thủ thuật liên quan đến giao diện của blogger, thủ thuật này sẽ giúp bạn thêm một công cụ để người dùng có thể tự lựa chọn giao diện cho blog của bạn. Thủ thuật thay giao diện (style switch) sẽ giúp người dùng có thể chọn giao diện mà họ thích bằng cách click vào màu sắc mà bạn thiết lập sẵn. Và việc thực hiện thủ thuật này đòi hỏi bạn có chút kiến thức về cách chèn file vào web/blog. Bạn có thể xem demo bằng cách click vào các màu sắc bên dưới.Click vào màu bên dưới để xem demo
Ở đây mình chỉ hướng dẫn bạn thay đổi màu nền của phần BODY trong blogspot, các phần khác (sidebar, header, outer...) bạn tự mình thiết lập nhe. Và ở đây mình chỉ hướng dẫn bạn tạo 3 màu tương ứng với 3 file css cho blogspot.
Lưu ý: bạn phải bỏ phần "background" trong BODY thì mới có thể áp dụng tiện ích này.
I. Thiết lập màu nền
1. Đầu tiên bạn hãy mở chương trình Noepad và soạn thảo nội dung như bên dưới và save lại với tên styledefault.css.
body { background:#fff; /*màu nền mặc định của body*/}
Đây là file sẽ hiển thị màu nền mặc định cho phần body của blog bạn, màu nền (ở đây là màu trắng) này sẽ xuất hiện đầu tiên khi người dùng truy cập vào blog của bạn.
2. Sau đó bạn chọn File/new để soạn thảo file mới. Bạn tiếp tục thiết lập màu thứ 2 (ở đây mình cho là màu xanh dương) và save lại với tên styleblue.css.
body { background:#000099; /*màu nền thứ 2 của body*/}
3. Tương tự bạn mở file mới và soạn thảo nội dung như bên dưới, thiết lập màu sắc thứ 3 (ở đây là màu vàng), sau đó save lại với tên styleyellow.css.
body { background:#fcb201; /*màu nền thứ 3 của body*/}
4. Như vậy bạn đã thiết lập 3 màu sắc cho nền phần BODY trong blospot, bây giờ bạn hãy upload 3 file mà bạn vừa thiết lập ở trên lên một hosting để lấy link.
II. Thêm tiện ích vào blogspot
1. Đăng nhập vào tài khoản Blogger
2. Vào thiết kế, chọn chỉnh sửa HTML (Edit HTML)
3. Chèn code bên dưới vào sau thẻ <head>
<link href='styledefault.css' rel='stylesheet' type='text/css'/>
<link href='styleblue.css' media='screen' rel='alternate stylesheet' title='blue-theme' type='text/css'/>
<link href='styleyellow.css' media='screen' rel='alternate stylesheet' title='yellow-theme' type='text/css'/>
<script src="http://traidatmui-tips.googlecode.com/files/styleswitch.js" type="text/javascript"/></script>
<link href='styleblue.css' media='screen' rel='alternate stylesheet' title='blue-theme' type='text/css'/>
<link href='styleyellow.css' media='screen' rel='alternate stylesheet' title='yellow-theme' type='text/css'/>
<script src="http://traidatmui-tips.googlecode.com/files/styleswitch.js" type="text/javascript"/></script>
Bạn hãy thay 3 tên file css ở trên (màu đen đậm) thành link tương ứng với 3 file mà bạn đã upload lên host ở phần I.
4. Sau khi chỉnh sửa xong bạn save template lại (nếu save có lỗi bạn bỏ thẻ </script> và save lại).
5. Bây giờ bạn về phần tử trang và thêm 1 HTML/Javascript và thêm vào nó code bên dưới.
<a href="javascript:chooseStyle('none', 60)" checked="checked"><img style="border:1px solid #051cfe;" title="Default-theme" alt="Default-theme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKH7abc8Np3BEGzbhSB0leZHkWHK-IQbFYO6KhTU4RF_6FVm6ks-XmuMR8B32UrSiw06-x2GCJKr2NgY65wBGpdxr2V9w25lrqVPrhyphenhyphenDvuna_FzVUAZ7iptpKOL5Ox_1jmSkJo5VMv76zP/"/></a>
<a href="javascript:chooseStyle('blue-theme', 60)"><img style="border:1px solid #051cfe;" title="Blue theme" alt="Blue theme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji20_BJfoarjobi1PGdRogHmn9gstBtN8xeDUodMZ_KyfdOgsg3iluXoV6-Yzqo8H5fJXbTZXLQW4c_jtCyoIn3cBVRQBAy72orZGOPpQRFdVc6G1hr9TLqVNO3cw0fix94Fg3VD3A_uSd/"/></a>
<a href="javascript:chooseStyle('yellow-theme', 60)"><img style="border:1px solid #051cfe;" title="Yellow theme" alt="Yellow theme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvuJD0BQnaV6cE0QFVOgtWJIHebYgIVU_pJREa4Huj7ZS9CisutEHNIMOxvpLk9RY4zMcRViYxk0PP1IosSgEx1NwW8FuqThCIL5D5OOd07Q1Xj5nY-0_WuHbOZeVMP5y_pHjJ-CFc3TV/"/></a>
<a href="javascript:chooseStyle('blue-theme', 60)"><img style="border:1px solid #051cfe;" title="Blue theme" alt="Blue theme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji20_BJfoarjobi1PGdRogHmn9gstBtN8xeDUodMZ_KyfdOgsg3iluXoV6-Yzqo8H5fJXbTZXLQW4c_jtCyoIn3cBVRQBAy72orZGOPpQRFdVc6G1hr9TLqVNO3cw0fix94Fg3VD3A_uSd/"/></a>
<a href="javascript:chooseStyle('yellow-theme', 60)"><img style="border:1px solid #051cfe;" title="Yellow theme" alt="Yellow theme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvuJD0BQnaV6cE0QFVOgtWJIHebYgIVU_pJREa4Huj7ZS9CisutEHNIMOxvpLk9RY4zMcRViYxk0PP1IosSgEx1NwW8FuqThCIL5D5OOd07Q1Xj5nY-0_WuHbOZeVMP5y_pHjJ-CFc3TV/"/></a>
Bạn thay link ảnh ở trên (link màu tím) thành link ảnh màu tương ứng. Lưu ý 2 từ khóa ở trong code bước 3 và bước 5 này phải giống nhau, tức là dòng màu đỏ đậm trong code (blue-theme, yellow-theme), nếu bạn thiết lập không giống nhau thi nó sẽ không hoạt động được.
6. Cuối cùng bạn save lại.
Chúc bạn thành công.
0 nhận xét:
Đăng nhận xét