Hướng dẫn thiết kế mẫu Blogger ~ THIẾT KẾ QUẢNG CÁO BLOG

Chắc chắn các bạn đều hình dung ra được là để thiết kế một mẫu Blogger là tương đối phức tạp và đòi hỏi công sức và trí tuệ nhất định. Trong bài viết này, tôi xin giới thiệu với các bạn phương pháp "Thiết kế" đơn giản, nói đại khái chung là tuỳ biến những mẫu có sẵn thành một mẫu thiết kế của riêng mình.

Về cơ bản đây là một dạng "Cheat", mà đã là "Cheat" thì là không tốt rồi, nhưng mục đích bài viết này được tham khảo từ hướng dẫn của Blog Buster là để các bạn quen với các khái niệm, quen với các mã, tag... trong blogger. Bài viết thực ra là một bài dịch để tự bản thân tìm hiểu nhưng cũng xin được xuất bản lên blog cá nhân để ai có nhu cầu có thể tham khảo.

Như hình trên, bạn sẽ thấy rõ ràng Mẫu blog bên phía tay phải hoàn toàn khác so với bản gốc bên phía trái. Nếu bạn đã thành thạo thì chỉ trong khoảng thời gian khoảng 30 phút bạn có thể thay đổi được diện mạo bất kỳ Blog mẫu nào trở lên hoàn toàn khác biệt.

Để rõ hơn xin giới thiệu với các bạn ví dụ tuỳ biến mẫu mặc định Minima mẫu được cung cấp bởi Blogger. Với ví dụ này như đã nói ở trên, bạn có thể áp dụng phương thức sử dụng ở đây cho bất kỳ mẫu Blog khác.

Để làm như vậy, trong tổng thể mẫu Blog thông thường ta thay đổi cho 3 thành phần chính sau:

Tiêu đề: Tuỳ biến với một Hình ảnh mới
Background: Một mẫu nền mới.
Màu nền của bải viết (nội dung) chính của blog.

Trong hướng dẫn này tôi hướng dẫn các bạn thay đổi chủ yếu về 3 thành phần trên bằng cách so sánh sự thay đổi giữa mẫu ban đầu và mẫu sau khi thay đổi và được minh hoạ bằng các hình ảnh chụp màn hình. Các kỹ thuật can thiệp về kỹ thuật các bạn sẽ dần dần tìm hiểu về sau, ở đây chỉ có những kỹ thuật đơn giản và rất dễ dàng tìm hiểu cho những người mới bắt đầu như tôi chẳng hạn.

Trước khi bạn bắt đầu!

Công việc đầu tiên của bất kỳ các việc thử nghiệm, tuỳ biến, hay thêm một tiện ích nào là bạn phải sao lưu blog để phòng trường hợp gặp lỗi hoặc muốn phục hồi lại mẫu cũ.

Để thực hiện điều này. bạn vào Mẫu "Template" l Chỉnh sửa HTML "Edit HTML" và click vào Tải xuống Mẫu đầy đủ "Download Full Template". Lưu các tệp tin XML vào máy tính của bạn, và đảm bảo bạn có thể truy cập sau này.

1. Thực hiện tạo một tiêu đề mới cho blog của bạn

Cách đơn giản nhất để tuỳ chỉnh mẫu blog là thay đổi diện mạo tiêu đề blog của bạn bằng một hình ảnh. Trong phần hướng dẫn này, tôi sẽ cung cấp cho bạn cách thay đổi tiêu đề thành một hình ảnh của tiêu đề một cách nhanh chóng và dễ dàng.

Tìm chiều rộng của các tiêu đề

Công việc đầu tiên để tạo ra một hình ảnh của tiêu đề, chúng ta cần phải biết chiều rộng của tiêu đề trong mẫu hiện có trước khi tuỳ biến, việc biết được chiều rộng của tiêu đề để giúp bạn tìm hoặc thiết kế được một hình ảnh tiêu đề không bị hụt do ngắn hoặc tràn khỏi mẫu do quá dài trong thiết kế.

Để tìm chiều rộng của tiêu đề bạn vào Bố cục "Layout" l Chỉnh sửa HTML "Edit HTML" trong Bảng điều khiển "Blogger dashboard", và tìm kiếm dòng lệnh sau:

#header-wrapper {

Ngay dưới dòng lệnh này , bạn có thể thấy các thông số CSS về độ toàn bộ các định dạng của tiêu đề. Mặc định mẫu Minima như sau:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Từ thông tin này, bạn biết được yêu cầu cần phải làm cho hình ảnh tiêu đê rộng 660 pixel. Với các mẫu khác nhau thì độ rộng của tiêu đề cũng khác nhau, không giống nhau. Việc của bạn là phải kiểm tra chính xác độ rộng của tiêu đề để đảm bảo khi thiết kế hình ảnh tiêu đề có chiều rộng bằng với của mẫu cần tuỳ chỉnh.

Chiều cao của tiêu đề không quan trọng, bạn có thể giữ nguyên chiều cao, hoặc có thể thay đổi tuỳ ý không ảnh hưởng gì. Tuy nhiên theo tôi, bạn nên để chiều cao của hình ảnh tiiêu đề là 300px để có thể chứa được nội dung tiêu đề (Môt tả).

Thực hiện Mẫu hình ảnh của tiêu đề

Việc thực hiện tạo một mẫu hình ảnh của tiêu đề tuỳ thuộc vào "Gu" thiết kế và sáng tạo của bạn để tạo ra được một hình ảnh tiêu đề độc đáo hấp dẫn. Bạn có thể sáng tạo hình ảnh tiêu đề bằng các phần mềm chuyên về đồ hoạ như CorelDraw hoặc Photoshop. Hoặc bạn cũng có thể sử dụng các hình ảnh tiêu đề được cung cấp miễn phí đáp ứng được yêu cầu của bạn.

Trong ví dụ miêu tả về cách tuỳ chỉnh mẫu Minima, hình ảnh tiêu đề được I downloaded hình ảnh "free vector header BitBox a và được chỉnh kích cỡ chiều rộng thành 660px sử dụng GiMP (một chương trình miễn phí có chức năng tương tự Photoshop).

Bằng cách sử dụng GIMP, tôi được thêm vào một số thử nghiệm của tôi về hình ảnh tiêu đề, và đây là kết quả đã hoàn thành với 1 file hình ảnh dạng GIF:

Thêm tiêu đề hình ảnh của bạn vào blog của bạn

Vào Bố cục "Template" l Phần tử trang "Page Elements" trong Bảng điều khiển Blog và click vào Tiêu đề "Header" ở phía gần trên cùng của trang:

Khi đó xuất hiện màn hình popup, bạn sẽ thấy tùy chọn cho tiêu đề của riêng bạn bằng cách sử dụng hình ảnh. Chọn nút radio để tải lên một hình ảnh từ máy tính của bạn bằng cách sử dụng nút "Browse". Sau đó check vào nút chọn Thay cho tiêu đề và mô tả "Use instead of title and description". Cuối cùng lưu lại các cài đặt của bạn.

Sử dụng phương thức trên, hình ảnh của bạn sẽ được lưu trữ bởi Blogger, và nó sẽ xuất hiện thay cho Tiêu đề và miêu tả, như hình dưới:

Chú ý: Trong Minima Template có thể do CSS nên có thể hình ảnh tiêu đề khi xuất hiện có lệch so với tổng thể Blog. Vấn đề này sẽ được giả quyết một cách đơn giản bằng cách thay đổi margin của #header như sau:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Thay thế bằng:

#header {
margin: 0; border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Bây giờ bạn đã có một tiêu đề hình ảnh thay thế cho tiêu đề văn bản mặc định.

2. Sử dụng hình ảnh nền (Background)

Để phù hợp với hình ảnh tiêu đề trên, tôi lựa chọn một hình nền dạng hoa văn bằng cách sử dụng hình nền miễn phí tileable tạiSquidFingers , ngoài ra bạn có thể tìm kiếm Google để lựa chọn một hình nền ưng ý để thử.

Chọn hình ảnh nền

Bước đầu tiên là bạn lựa chọn một hình nền ưng ý và phù hợp để bắt đầu thực hiện tạo nền cho blog của bạn.. Bạn có thể lựa chọn pattern từ Squidfingers, đây là nguồn cung cấp miễn phí và đa dạng cho bạn lựa chọn, bạn có thể tìm ở bất kỳ đâu đó trên mạng bất kỳ hình ảnh bạn thích. Bạn cần phải lưu chúng vào ổ cứng máy tính của bạn để sử dụng chúng lúc cần thiếtdueYou will need to save the background image to your computer as we will be using this very soon. Bạn sẽ cần phải lưu các hình ảnh nền cho máy tính của bạn như chúng tôi sẽ sử dụng này rất sớm.

Upload hình ảnh của bạn với web

Để sử dụng hình ảnh nền background cho blog của bạn, bạn sẽ cần phải tải lên này lên một host trực tuyến nào đó. Thông dụng nhất là upload lên Photobucket.

Hoặc bạn có thể Click chuột phải vào hình ảnh ở một bài viết nào đó mà có hình nền bạn ưng ý và xem properties. Từ đây bạn có thể biết được vị trí (địa chỉ) lưu trữ URL của hình ảnh. Sao chép URL này để tạm của bạn hay Notepad để bạn có thể sử dụng này để tham khảo nền hình ảnh của bạn trong mẫu của mã HTML.

Thêm các hình nền và code của mẫu blog

Bây giờ chúng tôi sẽ cần phải sửa đổi một phần nhỏ mã HTML mẫu blog của bạn của để thêm hình ảnh vào nền background.

Bạn vào Bố cục "Layout" l Chỉnh sửa HTML "Edit HTML" trong Bảng điều khiển "Blogger dashboard", và tìm dòng mã:

body {
background:$bgcolor;

Chúng ta cần thêm URL của hình nền background image vào dòng định nghĩa "background" bằng cách sử dụng định dạng sau:

url(the_url_of_your_image)

Trong hướng dẫn này có dạng như sau:

body { background:$bgcolor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQMS2ijVhhSoLWUIfew6h0lWfEdg7Qt45trmFHmNtGXil15xMD0V5hJu57-Cew8G6wsdQzmAhO_cb7YhjgaPIHb7i_AuTI4nd3RhiYj_BaehifAOwneZLFp7g-XxGNdyqGKuKKomIKJh8/s1600-h/pattern_140.gif);

Hãy chắc chắn sẽ làm theo cùng một định dạng, và đảm bảo rằng dấu (;) xuất hiện ở cuối của các định nghĩa.

Bây giờ qua blog của bạn để xem các thay đổi. Nó có thể trông như thế này:

Nếu bạn hài lòng với các nền, bạn có thể lưu mẫu của bạn và chuyển sang bước tiếp theo, để chúng tôi đi trên để bước tiếp theo. Tuy nhiên, nếu bạn không muốn sử dụng này, bạn có thể chỉ cần bấm vào "clear edits" và thực hiện với một nền mẫu khác.

Giờ đây bạn đã thay đổi background cho blog, tuy nhiên bạn sẽ dễ dàng nhận thấy các đoạn văn bản của blog rất khó nhìn, do vậy bạn cần phải thực hiện một bước nữa là thay đổi hình nền của phần nội dung chính của blog.

Thêm một màu nền cho các phần chính của blog

Một trong những cách tốt nhất để thu hút sự chú ý đến nội dung của blog của bạn là làm cho chúng nổi bật bằng màu sắc khác biệt. Vì vậy, ngoài hình ảnh nền đã thêm vào blog, chúng ta cần phải đặt các nội dung chính của blog vào một màu bổ sung làm cho nó dễ dàng hơn để đọc.

Để thêm màu cho nội dung blog của bạn, đơn giản tìm dòng này trong code HTML mẫu blog của bạn :

#outer-wrapper {

Thêm ngay dưới dòng này dòng mã sau:

background: #ffffff;

Dòng mã này để định nghĩa cho màu của phần nội dung chính blog là màu (bao gồm cả phần bài đăng và các sidebar. Bạn cũng có thể thay đổi màu trắng (#ffffff) như định nghĩa trên thành các màu khác mà bạn ưng ý theo giá trị hex cho màu trắng (# ffffff), bạn có thể sử dụng lựa chọn màu bằng công cụ "the web color calculator in the Tools section of this site".

Trong ví dụ trên tôi sử dụngnền màu xanh (# E3F2FB) để bổ sung cho các hình ảnh nền. Đây là cách toàn bộ mã :

#outer-wrapper {
background: #E3F2FB;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

To make the foreground stand out even more from the background image, I also added a border to the left and right hand sides of the outer wrapper, which can be achieved by adding the line in red to the outer-wrapper style statement: Để làm cho các foreground được nhìn thấy riêng biệt ra thậm chí nhiều hơn từ các hình ảnh, tôi thêm vào phía bên trái và bên tay phải khoảng cách các border như sau:

#outer-wrapper {
background: #E3F2FB;
border-left: 2px solid #cccccc;
border-right: 2px solid #cccccc; width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Và đây là kết quả sau khi đã hoàn thành: