Đang tải dữ liệu...

Hướng dẫn làm giao diện dạng 3 cột cho blogs

Ngày 19 tháng 10 năm 2008 0 bình luận Trương Chương Dương
     Có một số người hỏi mình cách thiết kế cái template sao cho blogs trông giống một trang web hoặc giống như blogs của mình hiện nay (từ hiện nay được hiểu là tại thời điểm mình viết entry này). Mình có đưa nguyên mẫu template cho một số người nhưng việc đọc và chỉnh sửa cái mớ hỗn độn với gần 2000 dòng code không phải là điều dễ dàng ngay cả đối với những người có tay nghề. Vì vậy hôm nay để thoả theo yêu cầu của một số bạn và cũng là thực hiện lời hứa với tohiepvn, mình sẽ đề cập một chút về cấu trúc và đặc điểm template của blogger nói chung và cái template của mình nói riêng.

     Đầu tiên là về các đơn vị cơ bản trong template của blogger (sau đây mình gọi tắt là tem, mình lười viết lắm).
  • widget: Là những thành phần cơ bản được hiển thị trên blog, tôi không biết mô tả cái này như thế nào đâu nhé :P, hi vọng là bạn biết cái này rồi. Trong mỗi widget có ba phần quan trọng nhất mà thông thường ta hay quan tâm tới đó là , . title là phần tiêu đề của widget đó, content là phần nội dung, bạn quan tâm đến hai phần này nhất vì bạn luôn muốn hiển thị phần tiêu đề và phần nội dung của mội khối bất kỳ trên web với những màu sắc và cách trang trí khác nhau. Còn cái quickedit không quan trọng lắm, nếu lỡ mà bạn bỏ quên nó cũng chẳng sao, nó là một cái biểu tượng nhỏ ở phía dưới bên phải mỗi widget trong blogs, có chức năng chỉnh sửa nhanh cấu hình của các widget ngay khi bạn đang xem blogs chứ không cần vào mục cài đặt. Trong một thẻ widget có các tham số đáng quan tâm sau: id: tên của nó, không được phép trùng với bất kỳ ai, tên này do hệ thống đặt, đừng có sửa lại; locked: có cho phép di chuyển trong giao diện sắp xếp các thành phần của blogs hay không, nếu bạn đặt là true thì nó sẽ cố định và không sắp xếp lại được, nếu bạn để là false thì có thể dùng chuột kéo đi bất kỳ đâu bạn muốn; title: tiêu đề của widget, thay đổi tuỳ bạn; type: chớ có mày mò đổi thuộc tính này.
  • includable: Đơn vị nhỏ nhất của tem, nó là các định nghĩa những khối lệnh, các tag được phép hiển thị bên trong mỗi widget, mỗi widget phải chứa ít nhất 1 includeable, các đoạn mã mà bạn muốn thay đổi cho mỗi widget bắt buộc phải nằm trong khối includeable này. Một số các widget có những khối lệnh/tag nhiều và phức tạp có thể chứa nhiều thẻ includeable khác nhau, mỗi đoạn include sẽ định nghĩa một phần khối lệnh/tag của riêng nó, sau đó phần includeable chính sẽ gọi lại các include con đã được định nghĩa bên ngoài đó, nếu bạn là dân programer thì hãy tưởng tưởng mỗi include như là một hàm con, chúng có thể gọi lẫn nhau để thực hiện một nhiệm vụ nào đó, còn nếu bạn không hiểu includeable là gì thì cũng không quan trọng lắm, chỉ cần nhớ một nguyên tắc: ngay sau thẻ widget phải là includeable, bên trong includeable muốn thêm thắt gì cũng được.
  • section: là khu vực được định ra để sắp đặt các widget, số section trong tem mặc định là 6, một cái cho banner (mặc định cái này không thêm widget được), cái ở giữa để hiển thị bài viết hoặc danh sách bài viết của bạn, một cái nữa ở bên trái hoặc bên phải hiển thị phần giới thiệu, danh mục bài viết và các thứ linh tinh khác mà bạn cho vào, và hai cái nữa một ở trên và một ở dưới cái section chính hiển thị bài viết. Về cơ bản thì số section như vậy là tạm đủ, tuy nhiên nếu muốn bạn có thể thêm hoặc bớt thoải mái, miễn là các section phải có tên (id) không trùng nhau là được. Nhưng nếu bạn muốn phân chia rõ ràng rành mạch cái blogs của bạn hơn, hoặc bạn chuyển tem từ dạng 2 cột đơn điệu của blogger thành 3 hoặc 4 hay nhiều cột hơn thì bạn phải thêm số section tương ứng với mong muốn của bạn. Bạn cũng có thể thêm section rồi để trống sau đó qua phần sắp xếp các thành phần của trang và kéo các widget vào section mà bạn tạo, hiện nay tem của mình dùng có tổng cộng 8 section. Section chỉ được phép chứa các widget, và đây cũng là chốn dung thân duy nhất của widget.
      Tiếp theo là công cụ phù hợp để soạn thảo tem: Bạn có thể dùng bất kỳ thứ gì đánh được chữ cái để chỉnh sửa tem, tuy nhiên nếu bạn mở notepad ra và chỉnh sửa từ một tem mặc định thành cái tem như blogs của mình thì mình xin bái phục và gọi bạn là sư phụ, ít nhất thì cũng là sư phụ của mình về mặt kiên nhẫn bởi việc đó phải hết sức tỉ mỉ và mất thời gian, mình thì không siêng đến thế.  Lời khuyên của mình là bạn hãy sử dụng một phần mềm soạn thảo XML chuyên nghiệp nào đó, nó sẽ giúp bạn xác định chính xác các khối lệnh XML, các thẻ HTML và thu nhỏ chúng lại để đỡ rối mắt cũng như sai sót khi chỉnh sửa. Nếu bạn là programer chuyên VS.NET thì bạn có thể dùng chính VS.NET để chỉnh sửa tem, còn nếu bạn không có sẵn VS.NET thì không cần cài nó (mất 4 dĩa CD và 2G ổ cứng vô ích), hiện mình đang dùng UntraEdit, gọn nhẹ và rất chuyên nghiệp. Khi bạn mở một file xml bất kỳ, sẽ xuất hiện các dấu - ở đầu mỗi thẻ XML hoặc HTML, chỉ cần click vào nó là đoạn code nằm trong thẻ đó sẽ thu lại, đỡ rối mắt mà copy hoặc chỉnh sửa cũng nhanh hơn do bạn không phải kéo chuột từ dòng này qua dòng khác để tô đen các đoạn code này. Nếu bạn chưa có phần mềm này thì có thể vào trang http://www.4shared.com để tìm phiên bản mới nhất có sẵn crack.

     Sau đây là đoạn tem sạch (không chứa bất kỳ widget nào) và có hướng dẫn đính kèm:










<br /> <data:blog.pageTitle/><br />






#navbar-iframe { height: 0px; visibility: hidden; display: none;}



]]>


































































































Chat với mình

























Truyện cười














Powered by








BLOGGER



Bộ đếm miễn phí













. Giao diện được thiết kế bởi Trương Chương Dương.






Bây giờ mình giải thích sơ qua về cái template đó, sau khi giải thích xong mình sẽ hướng dẫn cách chuyển các widget của bạn hiện nay vào tem này.

Đầu tiên bạn chú ý từ dòng 163 đến dòng 217 trong tem, đó là phần hiển thị banner. Widget header được đặt ở dòng 170, về cơ bản không cần sửa nhiều ngoại trừ việc nhớ thay cái title lại cho phù hợp với bạn.
Dòng 209 là đường link đến profile và chân dung của mình, nếu bạn không muốn đổi lại cũng không sao cả, he he!

Dòng 224 đến 244 là phần chứa các widget sẽ được hiển thị ở cột bên trái, mặc định cột này rộng tối thiểu 311px, nếu muốn thay đổi độ rộng của cột này bạn sửa lại tham số width ở dòng 224. Phần bên trái này được chia làm 3 section khác nhau.
Section đầu tiên từ dòng 226 đến 228 hiện mình đang để trống cho bạn, hãy đặt bất kỳ widget nào bạn muốn ở đây. Chú ý là section này không có sẵn tiêu đề vì mình định dùng nó để chứa các widget mà bản thân các widget này có tiêu đề riêng.
Section thứ hai từ dòng 231 đến 242, các widget nằm trong này sẽ có một tiêu đề chung, tiêu đề này có thể thay đổi được tại dòng 233. Các widget trong section này phải được đặt trong phần giới hạn của section từ dòng 237 đến 239. Bạn có thể lặp lại nhiều lần đoạn code từ dòng 231 đến dòng 242 nếu muốn tạo nhiều cái giống như thế, tuy nhiên nhớ đổi tên của section để không bị trùng lắp, tên của section là giá trị của thuộc tính id (tại dòng 237). Nếu bạn muốn tạo một section không có tiêu đề thì đơn giản là hãy bỏ đoạn code từ dòng 232 đến dòng 234 là xong.

Section tiếp theo là phần chính của blogs, nơi hiển thị các bài viết cũng như comment của bạn, section này bắt đầu từ dòng 246 đến dòng 250. Ở đây mình đặt sẵn cho bạn widget Blog1, hãy xoá nó để thay bằng đoạn code của bạn.

Code của cột bên phải được đặt từ dòng 252 đến dòng 295, độ rộng mặc định của phần này là 300, bạn có thể thay đổi kích thước này ở dòng 252. Cột bên phải này hiện mình chia thành 3 section khác nhau trong đó có một section dưới dạng HTML nên không thêm widget mới vào được.
Section đầu tiên của cột bên phải được đặt từ dòng 253 đến dòng 255, section này cũng không có tiêu đề chung mà nó sẽ chứa các widget có tiêu đề riêng biệt nhau (tương tự cột bên trái).
Section thứ hai được đặt từ dòng 258 đến dòng 269, đoạn này hoàn toàn giống như section thứ hai của cột bên trái.
Phần trang trí bổ sung bằng HTML được mình đặt từ dòng 272 đến dòng 294, đây là phần Powered by và cũng là các link để chuyển nhanh đến các công cụ của mình trên mạng, vừa có tác dụng quảng cáo và vừa tiện để đến những trang mình hay chuyển tới.

Cuối cùng là phần bottom của trang, code của nó nằm từ dòng 302 đến dòng 311, bạn thay đổi phần này tuỳ ý, nếu hứng lên thì thêm một section ở đây cũng được, nhưng mình chưa thấy ai làm như vậy cả.

Bây giờ là phần quan trọng nhất, chuyển các widget của bạn vào cái tem của mình.
Cách đơn giản nhất là mở cái tem ở dạng rút gọn của bạn (trong trang chỉnh sửa HTML của blogger bạn đừng chọn phần Mở rộng mẫu tiện ích. Lúc này mỗi widget chỉ là một dòng lệnh nên việc tìm kiếm chúng khá đơn giản. Bạn hãy copy từng đoạn widget của bạn rồi đặt vào một trong số các section mà mình đã xây dựng sẵn ở trên hoặc bất kỳ section nào mà bạn tạo thêm. Làm xong thì copy toàn bộ code đó bỏ vào khung chỉnh sửa nội dung và lưu lại. Lúc này bạn đã có một cái giao diện gần như ý muốn. Trong trường hợp cần thay đổi vị trí các widget bạn không cần phải chỉnh sửa lại code, hãy qua mở chức năng sắp xếp các phần tử trang của blogger và kéo thả bằng chuột cho lẹ.

Tiếp theo là tuỳ chỉnh các widget, nếu bạn muốn mỗi widget đều có một tiêu đề riêng, định dạng riêng thì bạn phải thay đổi code mặc định của nó, nói chung thì các widget đều có chung kiểu code bao gồm 3 phần như mình đã nói từ đầu, để thay đổi kiểu hiển thị tiêu đề cho các widget bạn sửa đoạn hiển thị của widget thành dạng như sau:
Đoạn mã ban đầu của widget:
















Được chuyển thành:

 























Bạn chú ý các thay đổi sau:
  1. Chỉ thay đổi include có id là main, nếu widget có nhiều inclide thì các include khác để nguyên không thay đổi.
  2. Phần bên trong class title mặc định được đặt vào giữa hai thẻ td có class là judul
  3. Toàn bộ phần code nằm giữa thẻ div class='widget-content' được chuyển vào giữa thẻ td có class là isi.
  4. Riêng widget blog1 dùng để hiển thị các bài viết thì bạn tìm phần title và content trong includeable có id là post, phần title của include này thường phức tạp do phải hiển thị các cách khác nhau tuỳ vào vị trí của trang mà người dùng đang xem, tuy nhiên nói chung nó thường nằm trong đoạn lệnh b:if cond='data:post.title' và b:if cond='data:post.dateHeader'. Còn phần content thì ngắn gọn hơn và thẻ của nó có tên là data:post.body. Nhưng chú ý một điểm, thẻ td chứa title của bài viết có class là judulpost, còn thẻ td chứa content của bài viết có class là isipost chứ không phải judul và isi như trong mô tả ở trên, phải phân biệt như vậy vì lỡ bạn nổi hứng muốn đổi riêng phần này thì sao :P. Do phần này là tuỳ biến và rất khác nhau trên mỗi blogs nên mình không thể mô tả kỹ lưỡng ở đây được, bạn có thể tự mày mò và tìm hiểu thêm.
  5. Các trường hợp đặc biệt khác làm tương tự, nếu có trục trặc vui lòng liên hệ với mình bằng cách comment ngay dưới bài viết này.


Sau khi làm tất cả các bước trên thì bạn đã có một cái blogs y chang của mình :P. Bây giờ nếu muốn đổi màu sắc của blogs thì đơn giản là hãy chỉnh sửa các thuộc tính của phần css từ dòng 26 đến dòng 151. Mình không nói sâu về phần này vì đơn giản là "hãy tự thử để trải nghiệm những cảm giác tuyệt vời". Tuy nhiên chú ý dòng 28 là chỉ định con trỏ chuột khi người dùng vào blogs của bạn, chỉ định này chỉ có tác dụng trên IE. Dòng 4 là chỉ định biểu tượng trang blogs của bạn, nó sẽ hiển thị trong bookmark và thanh địa chỉ, chỉ định này không có tác dụng trên IE. Dòng 20 là giấu thanh tiêu đề của blogger cho đỡ ngứa mắt.

Cuối cùng: Chúc bạn thành công.
Chủ đề: Thủ thuật blogs,
Đang tải dữ liệu...