Kiến thức cơ bản về Template blogspot

Cấu trúc Template của Blogger cơ bản giống như cấu trúc của website gồm có các thành phần sau :  

- Body : là toàn bộ viền bao outer các khối mẫu blog của bạn (Body giống như là phần bên ngoài mẫu blog bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer. )

- Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog

- Header: block này là phần trên cùng của hầu hết các blog . Bên trong Header còn có thành phần phụ khác
đó  là  Header  Title,  Header  Descripaion  và  các  thành  phần  khác  giống  như  banners quảng cáo, thanh trình đơn menu bar... Do vậy, để chứa toàn bộ các blocks phụ nói trên trong đó thì Header nhất thiết phải được thiết kế đủ rộng để chứa chúng. 
 

- Content: nằm dưới Header là Content-wrapper – đây là phần quan trọng hơn cả, chứa các thành phần quan trọng như Sidebar containers (1,2 hoặc nhiều sidebars) và phần nội dung chính (phần chứa các bài viết, nhận xét hoặc các quảng cáo). 
 

- Footer: là phần nằm ở phía dưới cùng của hầu hết các mẫu. Giống như Header section, bạn cũng cần phải thiết kế Footer-wrapper để chứa các nội dung phụ trong Footer section. 
 

- Main:  Main-wrapper  là  thành  phần  chính  nằm  trong  Content-wrapper.  Bên trong Main-wrapper là phần bài viết, nhận xét, ngày tháng đăng bài và các tiện ích khác được tạo từ lựa chọn “Add Page Element”. 
 

- Sidebar:  là  thành  phần  bao  gồm  các  tiện  ích  -  About  Me,  Labels,  Archive, Text, HTML, Adsense. Trong mẫu cơ bản của Blogger template, bạn thường thấy các mẫu có 1 sidebar - hoặc 2-column (Main and Sidebar). Nhưng bạn cũng có thể dễ dàng thêm các cột Sidebar vào mẫu Blogger. Bạn cần phải hiểu rõ về chúng, trước hết là về cơ cấu tổ chức của các mẫu Blog để có thể quyết định thêm vào bên trái hay bên phải
Main container các Sidebar để tạo thành mẫu 2 sidebars – hoặc mẫu 3-column. 
 

- Blog Post: Đây là phần bài viết của bạn hiển thị bào gồm Tiêu đề bài viết, bài viết, tác giả, Labels, ... 
 

* Một cách khác để hiểu rõ hơn về cấu trúc mẫu blog là xem biểu thị tree bắt đầu từ nội dung lớn cho tới các phần phụ nhìn giống như sau :  

 -Body 
o Outer-wrapper  

- Header-wrapper  

- Blog Title 
- Blog Description 
- Other widgets 
- Content-wrapper 
- Sidebar-wrapper (1,2,3...) 
- Main-wrapper 
- Date Header 
- Posts 
- Post Title 
- Post Content (or called Post Body) 
- Post Footer (Author, Labels, etc) 
- Comments 
- Feed Link 
- Other widgets (mostly ad units) 
- Footer-wrapper 
- Footer text (disclaimer, copyrights, etc) 
- Other widgets 
 

Đó là những thành phần cơ bản nhất có trong Template, bạn có thể dựa vào cấu trúc  này  để  có  thể  biết  được  các  thành  phần  của  template,  dựa  vào  đó  để  tùy  biến chúng.

Danh sách các tiện ích dùng cho blogspot : (Bạn có thể tìm kiếm theo danh sách từ khóa được liệt kê phía dưới để tìm hiểu thêm) :

    Thêm Widget theo nhiều thẻ trong một Tab cho Blogger (style3)
    Tạo một Tab chứa nhiều Widget cho blog ( style 2)
    Tạo một Tab tích hợp nhiều widget cho blog (style 1)
    Tạo dòng văn bản di chuyển trên blog kèm theo siêu liên kết
    Tạo nút theo dõi số lần xem bài viết trên blog
    Thêm hình ảnh lên nút BACK TO TOP ( trở về đầu trang)
    Thêm jQuery nổi bật trượt cuối blog
    Tạo hộp tin nhắn giống như Wordpress với nút close sử dụng jQuery cho blogger
    Tạo hộp thoại thông báo trên blog
    Tạo nút đếm lượt truy cập cho bài viết cá nhân của blog
    Tạo hộp Thông báo dạng hoạt hình trên blog
    Tạo thanh Stickybar với nút Close cho blog
    Tạo StickyBar (thanh thông báo) cho blogger
    Tạo thanh StickyBar ở phía trên cùng của blog
    Nạp chỉ số thời gian tải trang của bạn
    Tạo một thanh Bar nổi vào phía trên blog của bạn
    Tạo dòng tin nhắn cuộn trong thanh trạng thái trên trình duyệt cho blogspot
    22 phong cách cho đoạn trích dẫn trong bài viết của bạn
    Hướng dẫn thay đổi con trỏ chuột sinh động cho blog
    22 mẫu Tiện ích Google dịch cho blogger
    Các mẫu Script đánh số trang cho Blogger
    Cho phép thẻ Meta Tags mô tả tìm kiếm cho Blogspost
    Hiển thị hình ảnh của bạn trong kết quả tìm kiếm của Google
    Tạo khung chứa code cho Blogspot
    Hướng dẫn chèn thẻ meta tag, description cho blogspot
    Tối ưu thẻ Title trong Blogspot
    Hướng dẫn cài đặt tên miền cho blogspot
    Hướng dẫn tạo đánh giá bài viết hình ngôi sao và lượt xem trang
    Đổi màu cho widget Follow by Email của blogger
    Tạo hộp đăng ký (Subscription) trên sidebar cho blogger
    Tạo hộp đăng ký qua email dạng Popup xổ dọc cho blog
    Index label cho blogspot
    Hướng dẫn Kẻ bảng và khắc phục lỗi khi chèn bản cho Blog
    Hướng dẫn tạo bảng có viền bằng HTML với khoảng trắng văn bản
    Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blog
    Mã HTML lấy avatar yahoo
    Hướng dẫn Tạo khung và nền cho bài viết của blog
    Tạo bộ Button đẹp bằng CSS3 (P3)
    Tạo bộ Button đẹp bằng CSS3 (P2)
    Chia cột và kẻ bảng cho Widget và bài đăng trên Blog
    Thủ thuật load ảnh trước
    Tạo Khung ghi chú đẹp cho Blog
    Xóa đường viền của ảnh trên blog
    Tạo Script liệt kê và gọi script cho blog
    Tạo nút button cho blog bằng css
    Tạo khung tre cho bài viết
    Tự động thay đổi hình nền blog theo thời gian
    Tạo Hiệu ứng phóng to ảnh khi dê chuột
    Tìm hiểu về margin và padding trong blogspot
    Tạo hiệu ứng đổ bóng bằng CSS3 cho Blog
    Hướng dẫn trang trí nền cho blog
    Liên kết và tùy biến liên kết trong bài viết trên blog
    Cách upload file Flash lên host Google site và chèn file Flash cho Blog
    Hướng dẫn Tạo thanh cuộn cho blogspot
    Hướng dẫn Tùy chỉnh Page Elements Layout trong blogspot
    Thủ thuật phát hiện & xử lý khi website bị nhiễm Malware
    Hướng dẫn Tạo một trang HTML trống từ Blogger simple template
    Auto readmore không sử dụng javascript cho Blog
    Thủ thuật chỉnh sửa ảnh trên Blogger và Picasa
    Lưu trữ hình ảnh trên blogger không giới hạn băng thông
    Hướng dẫn Nâng cấp khung tìm kiếm của Blog
    Ẩn nhận xét cho một trang nhất định trong blogspot
    Kho icon động tuyệt đẹp cho blog
    Hướng dẫn Chỉnh sửa HTML (Edit HTML) cho Blogger
    Khắc phục lỗi không lưu được feedburner 512K limit trong blogspot
    Hướng dẫn đăng ký và cài đặt Feedburner Atom cho Blogspot
    Hướng dẫn đăng ký và sử dụng FeedBurner cho Blogspot
    CSS căn bản trong thiết kế blogspot
    Hộp thử HTML/Javascript
    Hướng dẫn tạo trang liên hệ cho blogspot
    Tạo phân trang cho bảng trên blog
    Upload file Javarscip (.Js), CSS hên host free.
    Tạo số đếm nhận xét cho bài viết trên 200 nhận xét
    Tạo số đếm cho nhận xét trên Blog
    Chèn biểu tượng cảm xúc vào nhận xét dạng input cho blog
    Chèn biểu tượng mặt cười cho phần Comment của Blog
    Tùy biến khung comment của blog
    Tạo hộp thống kê lưu lượng khách truy cập Blog, web
    Tạo hộp chat trên Blog
    Thủ thuật xem Source của một số trang web dấu Source
    Theo dõi số người đang xem blog của bạn
    Bảo vệ mật khẩu cho blog
    Chèn game flash vào blog
    Chèn đồng hồ kèm lịch flash cho blog
    Hướng dẫn tạo đồng hồ cho Blog
    Chèn Flash vào bài viết
    Tạo hiệu ứng khi rê chuột vào Link ( tuyết rơi, mưa rơi...) cho blog
    Tạo con dấu khi chèn Video vào blog của bạn
    Đưa hộp tìm kiếm tùy chỉnh Google lên blog
    Tạo con trỏ chuột ngộ nghĩnh cho blog
    Thêm Chat bar đẹp cho blog
    Tạo bộ đếm khách truy cập (visitors) cho blog
    Tự động chèn link bài viết khi người khác copy bài từ website của mình
    Tạo thanh cuộn trang cho blog
    TẠO CHỮ CHUYỂN ĐỘNG TRÊN BLOG
    Sử dụng Dropbox dể lưu trữ File Javarscrip cho Web blog
    Cách tải file Javarscript - CSS blogspot và Website
    Sử dụng Google code để chứa các file javascript
    Tạo favicon cho website và blog
    Trao đổi liên kết trong cộng đồng Blogger
    Tạo khung liên kết bạn bè cho Blogger
    Đặt code trong khung trên bài viết của Blogger
    Khung chứa Code đẹp cho Blogspot
    Tạo khung converter code cho blogger
    Chuyển đổi Code cho Blogspot
    Các trang web tạo button, logo, banner cho blog
    Tạo lưu trữ dạng lịch cho blogger
    Tùy chỉnh địa chỉ URL của bài viết trên Blogger
    Heading Tag với hiệu ứng đổ bóng và dê chuột Hover
    Các mẹo giúp tăng bình luận cho blog
    Tìm và thay đổi kích cỡ hình ảnh vào vị trí trên Blog
    Những Code Thông Dụng Cho Blogspot
    Tùy chỉnh Google Custom Search bằng CSS3 cho blogger
    Tạo công cụ tìm kiếm cho Blog - Hiện kết quả tìm kiếm tại Static Page cho Blogspot
    Thủ thuật tùy chỉnh Heading Style cho Blogger & Wordpress - Tùy chỉnh tags heading
    Auto readmorre với thumbnail cho blogspot sử dụng javarscipt - Style 2

Thủ thuật blogger (Bạn có thể tìm kiếm theo danh sách từ khóa được liệt kê phía dưới để tìm hiểu thêm) :

[01]  Sữa lỗi không hiện Avatar comment
[02]  Tạo Read More (Đọc tiếp) một cách tự động V4
[03]  Tạo nút nhấn cho phép ẩn hiển các widget (tiện ích) khi click vào nó
[05]  Chèn thêm khung Add a gadget (Thêm tiện ích) cho phần Header và Main
[06]  Tùy chỉnh số bài viết hiển thị ở trang Label (Nhãn)
[07]  Ẩn ngày đăng bài viết
[08]  Tạo cửa sổ Popup khi rê chuột vào ảnh
[09]  Bỏ đường viền ảnh khi chèn hình vào blog
[10]  Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive (Lưu trữ) và Label (Nhãn)
[11]  Loại bỏ Read more ở trang tĩnh (static page)
[12]  Tạo màu nền riêng biệt cho các comment
[13]  Thêm tiện ích "Recent comments" cho Blogspot
[14]  Kích hoạt Feed cho Blogspot với Feedburner
[15]  Sửa lỗi ảnh tràn ra ngoài khung bài viết
[16]  Cấm click chuột phải trên Web, Blog
[17]  Không cho quét khối và copy văn bản
[18]  Vô hiệu hóa chức năng Copy, Paste
[19]  Không cho click chuột phải lên hình ảnh
[20]  Button lên, xuống, vào giữa trang blog
[21]  Tạo bài viết liên quan (Related Posts)
[22]  Điều chỉnh bề rộng khung comment, thu hẹp khoảng cách dưới khung
[23]  Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng
[24]  Chèn ảnh luôn hiện ở phía trước mặt Blog
[25]  Chỉ hiển thị widget (tiện ích) khi xem các bài viết của một nhãn nhất định
[26]  Ẩn widget tại trang chủ hay trang riêng biệt
[27]  Tạo số đếm thứ tự cho các comment
[28]  Lazyload Jquery làm mượt ảnh và ảnh sẽ load nhanh hơn
[29]  Tiện ích hiển thị tổng số bài viết và comment
[30]  Chèn code vào bài viết hoặc comment
[31]  Chèn nền Flash (hoa rơi, tuyết rơi,…) cho blog
[32]  Hiệu ứng hoa, lá, tuyết rơi,... trên nền blog
[51]  Hiệu ứng tuyết rơi cho blog
[33]  Khung thông báo cho blog
[34]  Chèn Emoticons vào comment
[35]  Click chuột vào button, một hộp thoại hiển thị
[36]  Tạo dáng cho trỏ chuột với hình ảnh bất kỳ
[37]  Sao rơi theo trỏ chuột
[38]  Form comment đẹp cho Blogspot
[39]  Tự động Refresh blog, website sau thời gian chỉ định
[40]  Tự động chuyển Domain khi vào blog, website
[41]  Tạo bảng "Admin Control Panel"
[42]  Chèn Box Google Search vào blog
[43]  Hiệu chỉnh tiêu đề cho blog
[44]  Tạo màu chữ, nền comment riêng cho chủ blog
[45]  Tiện ích phân trang PageNavi và một số style
[46]  Thêm chú thích cho nhận xét của chủ blog
[47]  Kwicks Slider for Blogger – Tạo slide trình diễn bài viết
[48]  Xóa số đếm sau mỗi nhãn (label)
[49]  Xóa thông báo: Hiển thị các bài đăng có nhãn…
[50]  Khắc phục lỗi không hiện đủ bài viết trên blog
[52] Hướng dẫn sửa Lỗi: Missing required field "updated" hCard "author" "entry-title"
[53] Cách thêm comment facebook vào Blogspot và hướng dẫn quản lý comment
[54] Tạo nút like Facebook, Google+, Tweet,…
[55] Tạo site map cho Blogspot
[56] Tổng hợp một số code thông dụng dùng trong bài viết
[57] Cách chèn tiện ích chia sẻ Addthis social sharing toolbox vào blog, website
  

Nguồn : Blogger Toàn Tập A-Z  Trang - 24 -   Từ cơ bản đến nâng cao. + Sưu tầm.