Thứ Năm, 21 tháng 3, 2013

Share mẫu template Blogspot làm trang lưu trữ, chia sẻ ảnh chuyên nghiệp v1

http://giaitricongdong.blogspot.com/ xin chia sẻ một template blogspot đẹp và chuyên nghiệp dùng làm trang chia sẻ ảnh hoặc lưu trữ ảnh cá nhân của bạn trên mạng,
Simple Photo Gellary là mẫu template lưu trữ hình ảnh do mình thiết kế với mục đích share cho các bạn có nhu cầu làm site chia sẻ ảnh, hay đơn giản hơn là lưu trữ lại nhữung hình ảnh cá nhân của mình... Tông màu chủ đạo của mẫu template này là đen - xám trên nền gỗ. Giao diện ở mức độ đơn giản (Simple) tốc độ load tốt...
Một số ưu điểm:
- Giao diện thân thiện, đẹp, tông màu chủ đạo là màu gỗ
- Thiết kế chuyên nghiệp, load ổn đinh, nhanh.

Download

Demo


Cài đặt template.
Cách 1: 
Sau khi down file ở trên về giải nén bạn sẽ được 3 file. 1 file hướng dẫn, 1 file word và 1 file xml.
Vào template, chọn vào mục "Mở rộng mẫu tiện ích", xóa toàn bộ đoạn code trong đó và paste nội dung của file word vào đây.
Cách 2:
Vào mục "Mẫu" → chọn "Sao lưu/Khôi phục" rồi up file XML lên đây.
Lưu ý:
Trong file word có 1 số dòng mình đánh dấu màu đỏ, bạn cần thay đổi lại cho phù hợp với nội dung blog của bạn.
Nếu up bằng file xml thì bạn đọc file word để điều chỉnh lại cho phù hợp với blog
Vấn đề size ảnh
Do ảnh có nhiều kích thước khác nhau nên để tránh tình trạng ảnh hiện lên với kích thước tùy ý gây mất thẩm mỹ mình đã qui định kích thước chiều rộng, chiều cao của ảnh lại.
Mặc định tất cả các bức ảnh sẽ có chiều rộng là 240px. (Kích thước này là có tính toán nếu thay đổi sẽ dẫn đến nhiều thay đổi của blog)
Ở trang index mặc định ảnh cao 240px
Ở trang bài viết có 2 loại size. Ảnh ngang (size1) có chiều cao là 160px. Ảnh đứng (size2) có chiều cao là 320px.
Để thay đổi các kích thước này bạn tìm các đoạn code bên dưới trong template.
Chiều ngang toàn bộ ảnh trong template
.post-body img{margin:5px; float:left; box-shadow: 0px 0px 7px #000; border-radius:15px 0; width:240px;}
Chiều cao ảnh ở trang index.
.post-body img {height:240px}
Chiều cao ảnh ở trang bài viết:
.post-body .size1 img{height:160px}
.post-body .size2 img{height:320px}
Mẫu bài viết để đăng ảnh:
<div class='size1'><div class="separator">
<a href="Link ảnh 1" imageanchor="1"><img src="Link ảnh 1" /></a></div>
<!--more--><div class="separator">
<a href="Link ảnh 2" imageanchor="1"><img src="Link ảnh 2" /></a></div>
<div class="separator">
<a href="Link ảnh 3" imageanchor="1"><img src="Link ảnh 3" /></a></div>
<div class="separator">
<a href="Link ảnh 4" imageanchor="1"><img src="Link ảnh 4" /></a></div>
</div>
Thay size1 thành size2 nếu là ảnh đứng.

0 nhận xét:

Đăng nhận xét

 
-------------------------------------- linhtuty