Tạo trang trắng như Ngọc Trinh để tự design trên Blogger

Khi làm website thì chắc rằng một vài người sẽ nghĩ tối việc làm ra một trang đặc biệt riêng (có thể là Landing page hoặc Intro gì đó) tại website của mình. Bữa tuần trước được một bác nhờ hướng dẫn về cách thức làm cái này nên Blogger, hứa hẹn lâu rồi bây giờ mới "siêng năng" viết bài :D. Thì hôm nay mình sẽ hướng dẫn các bạn thực hiện tạo một trang đặc biệt riêng không bao gồm bất cứ thành phần nào để bạn có thể design theo ý thích ngay tại blog của mình.

Tạo trang trắng như Ngọc Trinh để tự design trên Blogger
Tạo trang trắng cho Blogger
Thủ thuật này nếu mà bạn để ý thì mình đã áp dụng cho "Tạo trang 404 hiển thị đầy đủ cho Blogger" và "Tạo trang demo và download cho Blogger". Lợi ích của nó là không phải dùng CSS ẩn đi toàn bộ thành phần của blog, mà nó sẽ không phát sinh bất cứ đoạn mã nào trong cặp thẻ "body", nó sẽ giúp trang xử lý cũng hư tải nhanh hơn và tốt hơn trong quá trình sử dụng.

Tạo trang trắng tại Blogger để tự design

Ok bây giờ mình sẽ hướng dẫn lại và nó có phần tương tự với bài viết mà mình nhắc đến ở trên. Đầu tiên tìm đến thẻ <body> và chèn xuống dưới nó:
<b:if cond='data:blog.url != &quot;http://kslzone.blogspot.com/search/label/trang-design-rieng&quot;'>
đoạn mà trên bạn sẽ thay http://kslzone.blogspot.com/search/label/trang-design-rieng bằng http://tên-miền/search/label/tên-trang-của-bạn. Mình sử dụng địa chỉ "search label" là vì 100% nó hoạt động và tiết kiệm không phải tạo một trang tĩnh trong Dashboard, nhưng bạn vẫn có thể làm thế nếu thích.

Tiếp tục tìm đến thẻ </body> và chèn lên trên đoạn mã này
<b:else/>
<style type="text/css">
NỘI DUNG CSS CỦA BẠN
</style>
NỘI DỤNG HTML CỦA BẠN
</b:if>
sau khi chèn và chỉnh sửa xong những nội dung html và css của bạn thì lưu lại và mọi thứ đã quá ok. Bạn có thể truy cập vào linh ở trên để kiểm tra lại.

Lời kết

Thủ thuật này tuy nhỏ nhưng khá hay vì không như đại đa số chỉ dùng CSS để ẩn đi làm cho blog/website trở nên ỳ ạch khó chịu.

42 bình luận

  1. avatar says

    lúc 14:32 14 tháng 12, 2014

    Không được admin ơi, làm y như trên những không lưu được mẫu :(

  2. avatar says

    lúc 14:33 14 tháng 12, 2014

    Nó báo lỗi gì vậy bác.

  3. avatar says

    lúc 15:26 14 tháng 12, 2014

    Lỗi khi phân tích cú pháp XML, dòng 3552, cột 3: The element type "body" must be terminated by the matching end-tag "</body>".

    :(

  4. avatar says

    lúc 16:48 14 tháng 12, 2014

    Nếu chèn đúng dưới "body" và trên "/body" thì đảm bảo không có cái này đâu lạ thật.

  5. avatar says

    lúc 18:26 14 tháng 12, 2014

    Thật mà làm y nguyên luôn, mà có thể làm để chèn vào trang tĩnh được không, chứ nếu thêm code css với html cùng vào template thì nặng lắm :(

  6. avatar says

    lúc 18:32 14 tháng 12, 2014

    Chắc chắn có bước nào đó sai:
    http://kslgenes.blogspot.com/search/label/trang-design-rieng
    Cái này là một trang trắng tinh, loại bỏ toàn bộ thành phần trong body rồi, muốn cả thẻ head nữa thì làm tương tự thôi.

    Bác mà chèn vào trang tĩnh mới gọi là nặng đấy.

  7. avatar Nặc danh says

    lúc 19:52 14 tháng 12, 2014

    Em chưa biết thủ thuật này có chức năng gì anh ạ và em cũng không tìm hiểu nhiều về cái tên Ngọc Trinh, tuy nhiên em thấy tiêu đề không liên quan lắm tới nội dung. :)
    Anh hài hước thật đấy, em thấy link DEMO thì trang đó body có mã màu là #f5f5f5
    Như vậy theo tính chất bắc cầu: Tiêu đề của anh "trắng như Ngọc Trinh" -> Chị ấy có làn da trắng đạt chuẩn #F5F5F5 (Điều phải chứng minh) :)

  8. avatar says

    lúc 09:29 15 tháng 12, 2014

    Trắng như Ngọc Trinh thì bg phải là #ffffff chứ :3

  9. avatar says

    lúc 09:30 15 tháng 12, 2014

    "Tạo trang 404 hiển thị đầy đủ cho Blogger" dẫn link j vậy giời :v

  10. avatar says

    lúc 09:32 15 tháng 12, 2014

    Ngọc trinh màu đâu có FFF được =]], như vậy là chết đuối rồi. Bác với Đồng Việt cứ chọc mình :D.

    P/S: Mình đặt tiêu đề theo yêu cầu thôi kaka http://www.kslzone.net/2014/11/ma-hoa-ky-tu-html-bang-javascript.html?showComment=1418528504829#c709254743467486889

  11. avatar says

    lúc 09:34 15 tháng 12, 2014

    Qua đang xem cái trang Laptop After Shock copy nhầm bao giờ không biết :)))

  12. avatar says

    lúc 08:11 17 tháng 12, 2014

    Tiêu đề hiệu quả nhiều người click :D

  13. avatar Nặc danh says

    lúc 16:09 17 tháng 12, 2014

    Anh Lâm có thể giúp em đánh Schema cho thanh Search trên Blog không ạ? :)

  14. avatar says

    lúc 17:06 17 tháng 12, 2014

    Lâm có biết cách làm tối background để cho chữ nổi bật lên như ở đây ko :)

    http://www.google.com/trends/2014/story/flappy-bird.html

  15. avatar says

    lúc 20:44 17 tháng 12, 2014

    Nếu em xài khung search giống anh thì anh send lại code của anh đánh dấu sẵn cho em luôn :D

  16. avatar says

    lúc 20:46 17 tháng 12, 2014

    Phối màu thì tôi thua rồi ông ơi, tôi cũng bó tay cái vụ này lắm :)

  17. avatar Nặc danh says

    lúc 21:04 17 tháng 12, 2014

    Em đang dùng khung Search giống như của anh mà. Anh giúp em nhé :D, cảm ơn anh!

  18. avatar says

    lúc 16:14 20 tháng 12, 2014

    Cách này không áp dụng được với template đang dùng. KSL hướng dẫn cách là trên một trang trống đi.

    Vì tớ chỉ dùng thủ thuât này để thiết kế trang About thôi nên nếu phải chèn thẳng vào template thì rất bất cập! Cố gắng giúp tớ với nhé!

  19. avatar says

    lúc 16:44 20 tháng 12, 2014

    Nếu mà làm trang trồng thì cũng phải tương tự thôi =.=. Không còn cách nào khả thi được.

    Nếu mà muốn chơi bằng css thì trừ khi trang about đó bác tính sao nó nằm vẹn trong một khuôn chiều cao nhất định, còn không biện pháp mạnh thì địa chỉ link để mình tính thử :D.

    Demo chiều cao nhất định: http://ksltest92.blogspot.com/p/error-not-found-background-ff0000.html

  20. avatar says

    lúc 18:30 20 tháng 12, 2014

    Đây bác: http://logictrochoi.blogspot.com/p/tu-gioi-thieu.html

    Bác hướng dẫn để làm thế nào cho nó trắng bóc là được :->

  21. avatar Nặc danh says

    lúc 05:13 25 tháng 12, 2014

    ....

  22. avatar says

    lúc 10:19 25 tháng 12, 2014

    Hình như template có chút thay đổi, trông sáng hơn :D

  23. avatar says

    lúc 08:19 26 tháng 12, 2014

    Thu nhỏ template lại thay màu background đậm hơn với vài cái bóng ^^

  24. avatar says

    lúc 21:22 27 tháng 12, 2014

    Lâm biết cách khắc phục tình trạng text bị thừa ra một khoảng trống phía sau mặc dù ko có space ko :(

    https://www.upsieutoc.com/images/2014/12/27/Untitledabd59.png

  25. avatar says

    lúc 21:23 27 tháng 12, 2014

    Ôi troa, Lâm cũng dùng comment media từ hồi nào vậy :D

  26. avatar says

    lúc 14:26 28 tháng 12, 2014

    Bác kiếm .home-intronbt h1 chỉnh letter-spacing thành 0 nha. Tự lụm ảnh cho tiện khỏi phải xem link ^^

  27. avatar says

    lúc 15:52 28 tháng 12, 2014

    Thank Lâm, tớ tưởng hôm q thử test cái đấy về 0 xem phải ko rồi mà hoá ra chưa :d

  28. avatar says

    lúc 16:21 31 tháng 12, 2014

    mất Adsend hay là lâm tháo adsend ra thế ?

  29. avatar says

    lúc 16:22 31 tháng 12, 2014

    Vẫn hiện bình thường mà bạn :D

  30. avatar says

    lúc 16:22 31 tháng 12, 2014

    chắc tại mạng nhà mình

  31. avatar Nặc danh says

    lúc 17:27 31 tháng 12, 2014

    Có lẽ tại trình duyệt của anh có gắn Adblock Plus.

  32. avatar says

    lúc 18:47 5 tháng 1, 2015

    Tiện ích này hay nhĩ. kiểu như làm trang một trang riêng biệt tự design để tạo phong cách riêng cho từng bài viết đây ^^

  33. avatar says

    lúc 19:07 5 tháng 1, 2015

    Đúng rồi, có thể áp dụng nó làm nhiều thứ khác nhau lắm tiện lắm :D

  34. avatar says

    lúc 21:06 24 tháng 6, 2015

    Hi Em. Anh mới vọc thử và rất Ok. Cám ơn em. Mình có thể tùy biến thành nhiều trang như vậy không vậy em. Demo cái:
    Demo Upanh

  35. avatar says

    lúc 08:06 25 tháng 6, 2015

    Bao nhiêu trang cũng được mà anh :D Cái đó có vẻ hay đó :D

  36. avatar says

    lúc 09:08 25 tháng 6, 2015

    Cám ơn em nhé. Tại up ảnh lên blogger hồi này không thực sự tốt cho trải nghiệm người dùng nên anh kiếm cái đó về up lên cho nhanh rồi đưa vào bài viết :)

  37. avatar says

    lúc 16:39 21 tháng 7, 2015

    A ơi cho e hỏi làm sao tạo nhiều trang trống tương tự khác được ạ :)

  38. avatar says

    lúc 16:47 21 tháng 7, 2015

    Nếu bạn có thêm trang thứ 2 thì lại lồng 1 cặp điều kiện nữa vào điều kiện else thứ nhất. Mình ví dụ, bạn thay thế cái đoạn code cuối cừng ở bài viết trên bằng thế này
    <b:else/>
    <b:if cond='data:blog.url == &quot;http://www.kslzone.net/search/label/trang-thu-2&quot;'>
    Nội dung trang thứ 2
    <b:else/>
    Nội dung trang thứ nhất
    </b:if>
    </b:if>

  39. avatar says

    lúc 16:49 21 tháng 7, 2015

    Bạn cũng có thể sử dụng như vầy đơn giản hơn
    <b:elseif cond='data:blog.url == &quot;http://www.kslzone.net/search/label/trang-thu-2&quot;'>
    Nội dung trang thứ 2
    <b:else/>
    Nội dung trang thứ nhất
    </b:if>

  40. avatar says

    lúc 16:50 21 tháng 7, 2015

    Cứ nhân bản else if lên nếu số lượng trang gia tăng nhé.

  41. avatar says

    lúc 22:46 13 tháng 8, 2016

    Khổ có cái là template blog của em là của thằng http://www.templateism.com/ bác ạ.
    Hễ mà tạo trang trắng thì chuyển trang sang http://www.templateism.com/ ngay(nếu vào trang trắng đó).

    Bữa tìm hiểu sơ qua về giải mã js. mà tìm hiểu chưa sâu nên chưa giải quyết được cái thằng http://www.templateism.com/ bác ạ.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.