Thứ Năm, 18 tháng 12, 2014

[Blogger template] Chia sẽ, hướng dẫn Blogger video template

Đây là mẫu Johny Tubeprett dành cho blog đa phương tiện như hình ảnh, video, game. Nó được thiết kế chuyên nghiệp và hoàn hảo với các tiện ích bài mới đăng theo nhãn ở trang chủ mượt mà gồm bài đăng slider, bố trí ngang,... Hiển thị bài viết mới 3 cột trong mainpage, trình đơn thả xuống (dropdown menu), có tính năng hiện các bài mới đăng theo nhãn dạng tab. Mẫu này có hổ trợ giao diện xem trên smartphone.

Một số tính năng:

- Tự động thay đổi kích thước ảnh đại diện bài đăng.
- Tối ưu hóa SEO.
- Tự động thêm ảnh tác giả (ảnh đại diện của tài khoản blogger).
- Đăng ký RSS.
- Đăng ký nhận bản tin.
- Tùy biến lỗi 404.
- Tương thích hầu hết các trình duyệt.

Xem minh họa | Xem HTML | Tải xuống - Download

Tải xuống xong, giải nén (bấm phải chuột -> Extract file) được tệp johny tubeprett.txt. Sau đó tải lên blog của của bạn bằng cách vào Dashboard -> Mẫu -> Sao lưu/ khôi phục.

Hướng dẫn:

Lưu ý: Bạn phải xóa hết các tiện ích (widget) có sẵn trước đây ở ngăn bên - sidebar (chỉ ở sidebar thôi nhé) trước khi tùy chỉnh template. Xong rồi mới thêm tiện ích trở lại.

1. Tiện ích HTML79 (chỗ chữ Type Your Label Here) bên phải tiện ích slider ở trang chủ đang bỏ trống, bạn chỉ việc thêm tên nhãn vào thì nó sẽ hiện thị bài đăng theo nhãn đó:


2. Đổi kiểu chử: Tìm đến các mã font qui định kiểu chử đổi sang Arial hoặc Verdana sẽ dễ xem hơn.

3. Tùy chỉnh tiện ích slider ở trang chủ:
Tìm đến đoạn code /* Slider */ của tiện ích này để tùy chỉnh:

- background (màu nền của tiện ích);

- màu tiêu đề tại .crott a{color: #f4eaa6;font: 20px Verdana },

- màu nút di chuyễn dưới tiện ích tại .crott p{color: #fff;font: 0px Verdana;},

- màu nền tiêu đề tại .crott { width:586px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUdtscBYvX9cc5pq4gK6aViL3Mk9F95JjDuwmBvPjoNy0Rb57BZFfgIS__D-3F_koVa6QVEwDF0ljfEOaEmfrT6UYnqDXrBXLuWtTwQ6_uPZdE4BJQwI2KAZVi-bK9_ooV7YAqQp78lMjP/s640/timvn-main-trans.png);padding:5px 10px; }

- tìm đến đoạn <div id='bot1-wrapper'> , ta sẽ thấy đoạn:

<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='description'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts0&quot;&gt;&lt;/script&gt;&quot;);
</script>

Viết lại đoạn trên thành:

<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/Headlines?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
</script></div>
<div class='description'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/Headlines?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts0&quot;&gt;&lt;/script&gt;&quot;);
</script>

thay chữ Headlines bằng tên nhãn mà bạn hiển thị

4. Tùy chỉnh tiện ích hiển thị bài mới đăng theo nhãn dạng tab ở trang chủ:

Tìm đến đoạn:

<script type='text/javascript'>
//<![CDATA[

cuộn xuống bạn sẽ thấy Title1="Adventure", Title2="Action",... Đặt tên nhãn mà bạn muốn các bài mới đăng của nhãn này sẽ hiển thị dạng tab trong dấu " " (thay Adventure, Action,... bằng tên nhãn trên blog của bạn)

Nếu bạn có thêm thắc mắc, vui lòng viết phản hồi dưới bài này.

Không có nhận xét nào:

Đăng nhận xét