Hướng dẫn thiết kế Bố cục các tiện ích (widget) trong Blogspot

Đầu tiên bạn phải có ý tưởng thiết kế bằng cách vẽ ra bản phác họa bố cục nháp trên giấy trong đó tôi sẽ đặt những tiện ích gì? Tôi phải thiết kế như thế nào để khi cài đặt tiện ích không phải can thiệp quá nhiều vào mẫu chủ đề. Các tiện ích phải được sắp xếp gọn gàng thân thiện với người dùng..., cũng giống xây một căn nhà cần phải có ý tưởng, bản vẽ và thi công hoàn thiện.

Hình minh họa khi thiết kế bố cục tiện ích

Về căn bản giao diện của Blog bạn cứ phân ra làm 3 phần: Đầu trang (Header), Thân trang (Page Body) và Chân trang (Footer) Chẳng hạn tôi sẽ thiết kế bố cục tiện ích bào gồm các tiện ích như sau:

+ Đầu trang (Header): Tôi tạo 3 section

- 1 section để thêm 2 tiện ích header logo bên trái và 1 tiện ích HTML bên phải chèn mã quảng cáo.
- 1 section thêm 1 tiện ích Liên kết để tạo menu
- 1 section thêm 1 tiện ích HTML đặt mã quảng cáo

+ Thân trang (Page Body) tôi tạo 3 section:

- 1 Section bên trái đặt tên Main Wrapper lưu tiện ích Blog1 và các tiện ích khác
- 1 Section bên phải đặt tên Sidebar lưu các tiện ích PopularPost, HTML đặt mã quảng cáo
- 1 section dưới chân thêm tiện ích HTML đặt mã quảng cáo chân trang

+ Chân trang (Footer) tôi chia đều ra làm 3 cột với 3 section và với với mỗi section tôi sẽ thêm các tiện ích.

Như vậy tôi đã viết nháp ra ý tưởng, tiêp theo tôi cần đặt tên các id và class cho các vùng để lưu trữ các section, tôi sẽ viết nháp như sau:

Lưu ý quan trọng: Các b:section hay b:widget có thể hoặc không thêm class bên trong nhưng bắt buộc phải đăng ký cho mỗi b:section và b:widget một id khác tên nhau

+ Đầu tiên tôi sẽ sử dụng 1 class chung lấy đồ rộng đều nhau cho cả 3 phần với thuộc tính max-width ví dụ tôi lấy class .container {max-width:1128px;margin:auto}

+ Tiếp theo tôi sẽ đặt HTML theo ý tưởng thiết kế như sau:

- Phần đầu trang (Header)

Copy

<header id='header-wrapper'>

<div class='container'>

<!-- section 1 đặt tiện ích logo và tiện ích HTML1 đặt quảng cáo bên phải -->

<b:section class='header' id='header' name='Header' showaddelement='fasle'>

<b:widget id='Header1' title='' lock='true' title='' type='Header'>...</b:widget>

<b:widget id='HTML1' locked='true' title='' type='HTML' >...</b:widget>

</b:section>

</div>

</header>

Copy

<section class='container'>

<!-- section 2 đặt tiện ích Danh sách liên kết tạo menu -->

<b:section id='menu' name='Menu' showaddelement='fasle'>

<b:widget id='LinkList1' locked='true' title='Menu' type='LinkList' >...</b:widget>

</b:section>

</section>

Copy

<section class='container'>

<!-- section 3 đặt tiện ích HTML2 chèn  mã quảng cáo đầu trang ngay trên bài viết -->

<b:section id='top-banner' name='Quảng cáo đầu trang' showaddelement='fasle'>

<b:widget id='HTML2' locked='true' title='' type='HTML' >...</b:widget>

</b:section>

</section>

- Phần thân trang

Copy

<section class='container'>

<!-- section 1 lưu tiện ích Blog1 và các tiện ích khác bên trái --> 

<b:section class='main-wrapper' id='main' name='Page Body' showaddelement='true'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='1'>...</b:widget>

<b:widget  id='HTML3' locked='true' title='' type='HTML' >...</b:widget>

...

</b:section>

<!--section 2 bên phải lấy tên Sidebar lưu các tiện ích -->

<b:section class='sidebar-wrapper'  id='sidebar' name='Sidebar' showaddelement='true'>

<b:widget id='PopularPosts1' locked='true' title='Phổ biến' type='PopularPosts' version='1'>...</b:widget>

<b:widget  id='HTML4' locked='true' title='' type='HTML' >...</b:widget>

....

</b:section>

<!-- section 3 lưu tiện ích HTML đặt mã quảng cáo chân trang -->

<b:section  id='qc_bottom' name='Quảng cáo chân trang' showaddelement='false'>

<b:widget  id='HTML5' locked='true' title='' type='HTML' >...</b:widget>

</b:section>

</section>

- Chân trang tạo 3 section lưu tiện ích

Copy

<footer id='footer'>

<div class="container">

<!-- section 1 -->

<b:section class='footer' id='footer1' name='Footer 1' showaddelement='true'>

<b:widget  id='HTML6' locked='true' title='' type='HTML' >...</b:widget>

</b:section>

<!-- section 2 -->

<b:section class='footer' id='footer2' name='Footer 2' showaddelement='true'>

<b:widget  id='HTML7' locked='true' title='' type='HTML' >...</b:widget>

</b:section>

<!-- section 3 -->

<b:section class='footer' id='footer2' name='Footer 3' showaddelement='true'>

<b:widget  id='HTML8' locked='true' title='' type='HTML' >...</b:widget>

</b:section>

</div>

</footer>

Khi đặt bố cục tiện ích xong khi tải trang cho ra HTML khi kiềm tra phần tử như sau:

Copy

<!-- Đầu trang -->

<header id="header-wrapper">

<div class="container">

<div class="header" id="header" name="Tiêu đề">

<div class="widget Header" id="Header1">...</div>

<div class="widget HTML" id="HTML1">...</div>

</div>

</header>

<!-- Menu -->

<section class="container">

<div class="section" id="menu" name="Menu">

<div class="widget LinkList" id="LinkList1">...</div>

</div>

</section>

<!-- Quảng cáo đầu trang -->

<section class="container">

<div class="section" id="top-banner" name="Quảng cáo đầu trang">

<div class="widget HTML" id="HTML2">...</div>

</div>

</section>

<!-- Thân trang -->

<section class="container">

<div class="main-wrapper section" id="main" name="Phần chính của trang">

<div class="widget Blog" data-version="1" id="Blog1">...</div>

<div class="widget HTML" id="HTML3">...</div>

</div>

<div class="sidebar-wrapper section" id="sidebar" name="Thanh bên">

<div class="widget PopularPosts" data-version="1" id="PopularPosts1">...</div>

<div class="widget HTML" id="HTML4">...</div>

</div>

<div class="section" id="qc_bottom" name="Quảng cáo chân trang">

<div class="widget HTML" id="HTML5">...</div>

</div>

</section>

<!-- Chân trang -->

<footer id='footer'>

<div class="container">

<div class="footer section" id="footer1" name="Footer 1">

<div class="widget HTML" id="HTML6">...</div>

</div>

<div class="footer section" id="footer2" name="Footer 2">

<div class="widget HTML" id="HTML7">...</div>

</div>

<div class="footer section" id="footer3" name="Footer 3">

<div class="widget HTML" id="HTML8">...</div>

</div>

</div>

</footer>

+ Thiết kế css cho các id và class

Đặt các id và class này trong <b:skin> ví dụ:

Copy

<b:skin><![CDATA[

#header-wrapper {}

...

]]></b:skin>

và đặt bốc cục ngoài trong <b:template-skin>

Copy

<b:template-skin><![CDATA[

body#layout #header-wrapper {}

...

]]></b:template-skin>

Nội dung chính