Hướng dẫn tùy chỉnh lại giao diện phần Bố Cục trong Blogger

Nếu bạn đã thử qua việc tự thiết kế cho mình một Blogger template, bạn sẽ thấy đôi khi đối với một số giao diện mà bạn thiết kế ra, lại bị đảo lộn lung tung trong phần "Bố Cục" tại trang "Tổng quan" của blog đó khiến người dùng khó xác định vị trí để chỉnh sửa hoặc thêm tiện ích vào nó. Không những thế, những list-style của ul, li cũng nằm tràn vào khiến phần bố cục trong cực kì hỗn độn.

Hướng dẫn tùy chỉnh lại giao diện phần Bố Cục trong Blogger

Do đó hôm nay tại bài viết này mình xin chia sẻ với các bạn một thủ thuật nhỏ giúp tinh chỉnh lại giao diện phần bố cục của Blogger chỉ với vài bước đơn giản.

Hướng dẫn tùy chỉnh lại giao diện phần Bố Cục trong Blogger

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Bước 2: Tìm đến thẻ <b:skin><![CDATA[ và thêm đoạn CSS này ngay vào sau nó
body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout .container {overflow: hidden;clear: both;} /* Chứa phần chính blog và sidebar */
body#layout .blog-main {width:66%;float:left;} /* Phần chính của blog */
body#layout .blog-sidebar {width:34%;float:right;} /* Phần sidebar */
Lưu ý: đoạn css trên chỉ đúng với blog của mình, còn blog của bạn có cấu trúc khác bạn phải tự làm lại. Đơn giản lý do vì khi vào phần bố cục, đôi khi phần css mặc định tùy chỉnh layout của chúng ta bị mất đi, hoặc kích thước không được hiển thị đúng, đo đó chúng ta phải tùy chỉnh lại toàn bộ bằng css.

Để tùy chỉnh bất cứ phần nào của blog, bạn chỉ cần thêm body#layout và thuộc tính bạn cần tùy chỉnh lại cho giao diện của bạn, thậm chí tô màu, v.v.., và thêm một lưu ý nữa bạn nên sử dụng % thay vì kích thước chính xác vì như đã nói đôi lúc kích thước sẽ không được hiển thị đúng.

Như vậy coi như là mình đã hướng dẫn xong cho các bạn cách để tùy chỉnh phần giao diện bố cục cho blog của bạn, mong rằng thủ thuật này giúp bạn có một phần bố cục ưng ý cho riêng bạn.

43 bình luận

  1. avatar says

    lúc 19:29 28 tháng 9, 2014

    chao bạn, cho mình hỏi. mình dùng template có sẵn, tiêu đề mình viết nó bị rớt thành 2 dòng, mình chỉ muốn một dòng thôi mình phải làm sao?
    Mình muốn tăng độ rộng mình làm sao

    cảm ơn bạn nhiều

  2. avatar says

    lúc 22:02 28 tháng 9, 2014

    Tối mai mình sẽ hướng dẫn bạn, bữa nay buồn ngủ quá đi ngủ sớm :D

  3. avatar says

    lúc 18:46 29 tháng 9, 2014

    Blog của bạn là http://nangcapplc.blogspot.com đúng không, mình thấy tiêu đề nó mà ẩn đi thành một dòng thì không hay lắm và chiều rộng của màn hình tiêu chuẩn trong thiết kế là 1024, nếu mà bạn tăng chiều rộng ra thì nhìn nó sẽ rất xấu.

    Đây là đoạn mã tiêu đề chỉ hiện một dòng, những phần chữ thừa sẽ biến thành dấu "..." bạn chèn nó lên trên thẻ ]]></b:skin> nhé
    .post-title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

  4. avatar says

    lúc 06:41 3 tháng 10, 2014

    Chào anh Lâm Kiều.
    Em có làm cái blog mà bố cục bị lỗi như thế này https://lh5.googleusercontent.com/-uiCtVXALVoA/VC3iLE6QEaI/AAAAAAAAAnU/V3pxE-gT-Oo/w238-h542-no/abc.jpg

    Khi bài viết ở MUC 1 càng nhiều thì MUC 2 sẽ bị đẩy xuống xa, làm trống 1 phần rất khố chịu.
    Anh có thể xem hình và chỉ giúp em cách chỉnh lại đc ko ạ, em cám ơn!

  5. avatar says

    lúc 19:11 3 tháng 10, 2014

    Cái này bạn phải để lại link mình xem mới biết được vấn đề, có mỗi cái hình thì chịu thôi :D

  6. avatar says

    lúc 20:26 5 tháng 10, 2014

    blog cua minh khi thu hep chieu rong con 960px thi xay ra doan trong, minh muons ba cot song song nhau http://ktcaotrang.blogspot.com/ ban xem huong dẫn giúp với. mới lam bạp bỏm khó qua

  7. avatar says

    lúc 20:47 5 tháng 10, 2014

    Cái này là người rành rồi thì cũng mất rất nhiều thời gian nha, đây là một template khá là phức tạp chứ không là đơn giản, việc thay đổi chiều rộng của blog, nó dính đến phải thay đổi đều tất cả mọi thành phần nhỏ trong nó nữa. Chưa kể đến responsive tính toán làm sao cho nó đẹp rất là mất thời gian để căn chỉnh.

    Biện pháp tốt nhất là thay template khác tốt hơn hoặc để lại như cũ thôi. Hiện tại thì mình không có nhiều thời gian lắm để hỗ trợ bạn chỉnh toàn bộ blog được thông cảm nhé :(

  8. avatar says

    lúc 12:05 21 tháng 10, 2014

    bạn có thể gúp mình chỉnh sửa phần tiêu đề rộng ra không và trong trang mình muốn mở rộng nó ra cả trong bài viết nữa đọc nó luôn có cảm giác bị chật hẹp handoitan.blogspot.com

  9. avatar says

    lúc 08:07 22 tháng 10, 2014

    Đúng là ó hơi hẹp, bây giờ có 2 phương án cho bạn:

    Một là làm rộng cả phần website ra một tý rồi lôi rộng thêm phần blog ra theo.

    Hai là làm nhỏ lại font chữ tiêu đề lại một ít, công thêm thay font chữ khác sát hơn vuông vắn hơn nó sẽ có cảm giác rộng hơn.

    Bạn thích cái nào mình sẽ hướng dẫn cho bạn làm.

  10. avatar says

    lúc 16:45 24 tháng 10, 2014

    Mình muốn làm rộng cả trang và nửa phần giao diện trên giống trang này http://xoayvl.blogspot.com/?zx=dc0a73ed947e8e1,bạn sửa giup mình dk không

  11. avatar says

    lúc 10:53 9 tháng 12, 2014

    anh ơi. em muốn sửa như thế này http://s1374.photobucket.com/user/dellov3/media/SUABLOG_zps8d8b2ba3.png.html
    thì phải làm thế nào ạ.
    e mới học thử làm blog nên không rõ mấy cái này lắm
    blog em đây a
    http://tuyenndna.blogspot.com/
    cảm ơn a trước ạ :))

  12. avatar says

    lúc 18:34 9 tháng 12, 2014

    Em vào template tìm #cssmenu{ và chèn ngay sau nó:
    margin-left: -13px;
    Tìm tiếp .main-outer { chèn xuống dưới
    margin-top: -20px;
    rồi lưu lại thử xem sao nhé.

  13. avatar says

    lúc 21:54 9 tháng 12, 2014

    cảm ơn a. e làm được rồi :D

  14. avatar says

    lúc 23:41 17 tháng 2, 2015

    bạn ơi, có cách nào tối ưu temp để chkme.com được 100% ko? trang mình ( www.soanbaionline.com) làm hoài chỉ đc 68% thôi... help me !

  15. avatar says

    lúc 21:39 20 tháng 2, 2015

    Con số đó không quá quan trọng đâu bạn khỏi quan tâm nhiều cho mệt người, mất công chăm chút nhiều thứ lắm :D

  16. avatar Nặc danh says

    lúc 09:49 22 tháng 2, 2015

    Hi thật là không quan trọng mà. Bạn thích con số 100 thì gửi Template qua cho mình vanviet098@gmail.com nhé.

  17. avatar says

    lúc 23:36 21 tháng 3, 2015

    Bạn ơi, giúp mình điều chỉnh lại bố cục Blog với. ( tinxatingan.blogspot.com ) do mình chèn code một số thủ thuật vào giờ sidebar bên phải Blog của mình chuyển xuống chân Blog hết rồi. Bạn chỉ giúp mình cách chỉnh lại Sidebar đúng bên phải gần dòng menu nhé. cảm ơn bạn!

  18. avatar says

    lúc 08:13 22 tháng 3, 2015

    Cái này thực sự rất khó cho mình nếu bạn không cho mình biết bạn đã làm những cái gì =.= Hại tại bạn đang xài template mặc định, mà template mặc đình thì cấu trúc html nó khá phức tạp đủ loại thẻ, nếu mà mần không thì mình chã biết phải làm sao cả :(

  19. avatar says

    lúc 22:16 4 tháng 5, 2015

    bạn ơi mình có thể dùng blogger để tạo một trang web có giao diện như vậy không bạn.
    http://thuthuatbloghd.blogspot.com/
    mình đang tìm hiểu về cái này mong bạn giúp đỡ
    Mong nhận được hồi âm của bạn.
    Cảm ơn bạn nhiều.

  20. avatar says

    lúc 12:52 5 tháng 5, 2015

    Về mảng template bán hàng thì mình chưa có dịp mần qua nên chịu :D

  21. avatar says

    lúc 17:35 28 tháng 5, 2015

    bạn làm ơn chỉ giúp mình cách làm cho kích thước banner của blogspot vd của mình đang làn 720x 150 chẳng thành 800x250, và cũng giúp mình cách tạo thêm một tiện ích mà mặc định nó không có ví dụ nhân đôi cái banner ngang hàng nhau chứ ko phải cái tren cái dưới, mình là dân tay ngang nên ko giỏi về css bạn giúp mình nhé! fb của mình là fb.com/tolian_hoang hoặc mail: tolian.hoang@gmail.com xin cám ơn bạn trước

  22. avatar says

    lúc 23:05 10 tháng 6, 2015

    Bạn ơi, mình mới tập làm blogspot, mình chỉ cần thiết kế đơn giản thôi, nhưng mà phần chính trên trang của mình, mình không biết chỉnh sửa ở đâu, làm thế nào để bố cục của liên kết với các submenu hả bạn

  23. avatar says

    lúc 20:59 11 tháng 6, 2015

    Bạn vào bố cục > chỉnh sửa HTML tất cả đều nằm trong đó. Mình nghĩ trước tiên bạn cần tìm hiểu chút về HTML là có thể chỉnh sửa được.

  24. avatar says

    lúc 15:41 14 tháng 8, 2015

    cho mình hỏi bố cục của phần đăng bài quá nhỏ. Được 4 hình thì đã qua trang 2. H mình muốn nó to lên thì chình phần nào vậy.

  25. avatar says

    lúc 19:07 18 tháng 8, 2015

    Mình không hiểu lắm bạn nói rõ hơn được không.

  26. avatar says

    lúc 10:32 1 tháng 10, 2015

    đây là blog của mình,hiện phần bố cục không hài lòng, và mình muốn thay đổi mày thành tieu đề, mong bạn nào biết và xin chỉ giúp mình, XIN CAM ON!
    http://blogbuonvedem.blogspot.com/

  27. avatar says

    lúc 20:12 2 tháng 10, 2015

    Cụ thể bạn muốn thay đổi cái gì, nếu đơn giản không mất thời gian thì mình sẽ hướng dẫn nhanh cho bạn.

  28. avatar Nặc danh says

    lúc 08:34 8 tháng 10, 2015

    blog mình bị lỗi cấu trúc (image-thiếu và bắt buộc). Ad giúp mình khắc phục với. mình tìm hết google mà k tìm ra cách nào

  29. avatar says

    lúc 12:29 8 tháng 10, 2015

    Bạn để lại địa chỉ blog tại đây cho mình nhé.

  30. avatar says

    lúc 11:51 9 tháng 10, 2015

    tinxatingan.blospot.com ( nó báo lỗi cấu trúc image-thiếu và bắt buộc). bạn hướng dân dùm mình

  31. avatar says

    lúc 19:04 9 tháng 10, 2015

    @tinxatingan mình thấy bạn nên thay cái tem này đi thôi, nó lạc hậu rồi :)

  32. avatar says

    lúc 07:10 10 tháng 10, 2015

    thay nhu the nao ha toiyeublospot. ban goi y giup minh duoc k? minh moi lam cai blog nay. k ranh lam

  33. avatar says

    lúc 08:05 10 tháng 10, 2015

    bạn đọc bài này của mình nhé!
    http://www.toiyeublogspot.com/2015/09/huong-dan-thay-template-cho-blogspot.html

    #########################
    sorry bác lâm vì pr ở đây nhé!

  34. avatar says

    lúc 12:25 2 tháng 12, 2015

    Ad cho mình hỏi , mình mới mua cái template cho blogger này http://www.sportnewseveryday.com/ nhưng sao phần layout nó không xuất hiện các widgets gì cả ?

  35. avatar says

    lúc 10:11 6 tháng 12, 2015

    Cái này thì mình phải dòm qua code thì mới biết được :D

  36. avatar says

    lúc 11:13 14 tháng 12, 2015

    Chào bạn! bạn có thể hướng dẫn giúp mình cach hiện sidebar ngoài trang chủ của trang mình không http://www.2vblog.com/
    Cám ơn bạn

  37. avatar says

    lúc 11:59 17 tháng 12, 2015

    Chào Ad, Ad cho mình hỏi mình có 1 blog mới tạo http://trithucvietblog.blogspot.com/
    Hình đây:
    http://i.imgur.com/MlWapyQ.png
    Cái tiêu đề của Blog nó bị lệch sang phải có cách nào để chỉnh lại không Ad chỉ mình với! Cảm ơn

  38. avatar says

    lúc 13:22 18 tháng 1, 2016

    http://datvanggiatot.blogspot.com mình muốn làm giống http://domag-templateclue.blogspot.com thì phải làm ntn? bạn

  39. avatar says

    lúc 07:14 29 tháng 1, 2016

    Chào bạn cho mình hỏi một chút về template saveda theo như hình bố cục rất ok nhưng khi up template lên blog thì bố cục lại không như ý bạn có thể chỉ được không

  40. avatar says

    lúc 19:23 16 tháng 2, 2016

    Mình chỉnh bài viết liên quan, xong xóa mấy dòng code xong, vô xem bài viết thì không còn thấy nội dung bên trong nữa, không biết có xóa nhầm dòng nào không? bạn giúp mình cho blog hiện thị lại nội dung với!
    Blog mình là: http://stepbystephse.blogspot.com/

  41. avatar says

    lúc 00:18 26 tháng 5, 2016

    Trang www.ngocthanhexpress.com của mình có phần chính .blog-main nhỏ quá, mình muốn cho nó rộng ra mà không biết làm sao. Xin được chỉ giúp, cảm ơn.

  42. avatar says

    lúc 15:47 1 tháng 7, 2016

    Mình đã điều chỉnh cho site này doc bao 24h mà k được. giúp m với ! Tks

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.