Hướng dẫn Tùy chỉnh Page Elements Layout trong blogspot

Đăng bởi Admin | 2/8/13 | 0 nhận xét

Page Elements "Layout" là trang bố cục của blogger/ blogspot. Đây là trang mà chỉ admin của blog mới có thể thấy, bao gồm: tổng quan về các widget trong blog của bạn, đồng thời bạn có thể tùy chỉnh tất cả tại đây.

Phần bố cuc đẹp đẽ mà bạn nhìn thấy cũng phải ùy chỉnh như template tuy nhiên ít ai chú ý tới nó vì phần này chỉ có Admin của blog mới tháy do vậy sấu đẹp cũng không quan trọng. Tuy nhiên với blog có nhiều quản trị viên (Admin) thì nó lại là vấn đề lớn vì lúc này có nhiều người xem được trang đó rùi.

Thông thường khi chư tùy chỉnh nó sẽ như sau:

 

Bài viết này mình sẽ hướng dẫn các bạn cách để có một trang bố cục (Page Elements "Layout") đẹp đẽ, và tiện dụng)

☼ Cách tùy chỉnh Page Elements "Layout":

1- Đăng nhập vào Blog

2- Vào Mẫu (Template)

3- Vào chỉnh sửa HTML (Edit HTML).

4- Đặt đoạn code sau đây vào trước thẻ ]]></b:skin> .

body#layout div_id_class{thuộc tính CSS}

Trong đó:

• body#layout là tham số của phàn layout phần này bắt buộc giống nhay với tất cả các blog.
• div_id_class là id hoặc class của phần muốn điều chỉnh.thuộc tính CSS là phần quy định cho id hoặc class

Ví dụ trong blog mình:

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout #outer-wrapper{overflow:visible;width:1000px}
body#layout #header{float:left;width:240px}
body#layout #header2{float:right;width:240px}
body#layout .add_widget{width:240px}
body#layout div.widget{width:240px}
body#layout #sidebar-wrapper{overflow:visible;width:240px}
body#layout #lsidebar-wrapper{overflow:visible;float:left;width:240px;margin-right:50px;}
body#layout #main-wrapper{overflow:visible;float:left;width:240px}
body#layout #rsidebar-wrapper{overflow:visible;float:right;width:240px}
body#layout #myGallery{display:none}
body#layout .featuredposts{display:none}
body#layout .fp-slider{display:none}
body#layout .another{display:none}
body#layout #skiplinks{display:none}
body#layout div.section{font-family:sans-serif;margin:0 auto 2px;padding:0 0 10px 0;position:relative;overflow:visible}
body#layout .section-columns{margin:0}
.section{width:100%}

Trong đó:

• #header là id phần header bên trái trên blog của bạn.
• #header2 là id phần header bên phải trên blog của bạn.
• .add_widget là khung thêm tiện ích mới.
• #main-wrapper là id phần div chúa bài viết của bạn.
• #rsidebar-wrapper và #lsidebar-wrapper lần lượt là id phần div chứa thanh sidebar bên phải và bên trái trên blog của bạn. nếu blog bạn chỉ có 2 cột thì thông thường nó là#sidebar-wrapper.
• .fp-slider là class của thẻ div chứa silder trình diễn nếu blog bạn có. (hãy xóa dòng đó đi nếu trong blog bạn không có)
• .another có thể là một class hoặc id bạn muốn ẩn trong phần bố cục ví dụ : #menu hay .menu
• Phần màu xanh để xóa bỏ cá dấu chấm như hình ảnh trên nếu có.

                                                                                                    Namkna -  Thu thuat vi tinh