Premium Blogger Template - Metro Modern Solar V.1 - Học PHP | SEO | Quản Trị Mạng

Metro Modern là một Premium Template được sử dụng khá nhiều hiện nay cho các trang cá nhân hay tạp chí tin tức. Metro Modern Solar sử dụng tông màu xám xanh ngọc sang trọng và tinh tế. Được truyền cảm hứng từ giao diện Metro của Windows 8 và thừa hưởng những đặc điểm của Metro BTK, Metro Simple. Tuy nhiên Metro Modern cũng có nét độc đáo riêng được cải tiến dành riêng cho nó. Thế Giới Blog chia sẻ tới các bạn từ Blog Người áo lam.

Xem Demo | Tải về

1. Tùy chỉnh thanh Menu Bar đa cấp

Metro Modern Solar sở hữu thanh Menu Bar đa cấp với hiệu ứng sổ dọc rất đẹp. Tùy theo nhu cầu sử dụng bạn có thể nâng lên 4 cấp. Để tùy chỉnh Thanh menu này trong Template – Edit HTML – Proceed bạn tìm đến đoạn code sau và tùy ý chỉnh sửa.

<div id='menu-module'>
<div class='mattblackmenu' id='ddtopmenubar'>
...
</div>
...
</div>

Lưu ý: Thanh menu bar thường có cấu trúc lặp lại. Bạn đọc cần chú ý đọc kỹ đoạn code một cách cẩn thận.

2. Featured Posts Widget

Để Feature Post Widget hiển thị bạn cần phải làm những việc sau.

b1) Tìm đến Bloglist widget có tên Feature nhấn Edit nó

b2) Đánh dấu check vào chính xác 2 dòng sau

Title of most recent item
Thumbnail of most recent item

b3) Nhấn Add to list để thêm đường link vào trong Bloglist. Có tất cả 4 bài viết nên bạn cần thêm vào chính xác 4 đường link sau.

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=1
http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=2
http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=3
http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=4

Nhớ thay blog.nguoiaolam.net bằng tên blog của bạn (VD: http://metro-modernsolar.blogspot.com/). Bây giờ muốn bài viết nào lên Feature Post Widget bạn cần gán cho nó nhãn hot (viết thường, không hoa)

Nếu không cẩn thận khi thực hiện bước này Top Stories rất dễ bị lỗi dẫn đến không thể truy cập vào trang chủ của blog được.

3. Carousel Slider Widget

Carousel Slider Widget chỉ hiển thị khi bạn xem một bài viết bất kỳ. Để tùy chỉnh widget này bạn vào Template – Edit HTML – Proceed bạn tìm đến đoạn code sau và tùy ý chỉnh sửa.

<script type='text/javascript'>
...
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "hot";
...
</script>

Ý nghĩa các thông số

- label1 = "hot” – thay “hot” bằng nhãn mà bạn muốn Carousel Silder hiển thị

- numposts1 = 15 – thay 15 bằng con số khác để tùy chỉnh số lượng bài viết được tải. Khuyến cáo nên giữ nguyên 15 bài.

4. Metro Social Widget

Tìm đến đoạn code bên dưới và sửa tên blogthietke thành id mạng xã hội của bạn.

<div class='social'>
<span class='fade'><ul>
        <li><a href='http://facebook.com/blogthietke'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomTv3HmOAOE1sMW82C2nGb6NfGDmjPhuWDE1xm2WCPtyaAhd_6tRVOeP-qfdLAIh5nYKG7JiomwghyWGz0ftqe7vPaUyRXYMSsMAiaXrKZkyHl2BrUjMWphMv3UrNXthdczMTeJ_-WFwe/s57/Facebook%2520alt%25201.png'/></a></li>
        <li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqKhfbWdyXTSrGRR69qS-2RzVk6bqYNFOohGYj_YiyIuurD6-ac5W83ExifEGb4G_oqAdLwKkHdQ6ZJfXJIS6mnhiQtuyRx9ncUBRpqU9wqo-KTSChBELF4LIRF8IMSpEq5bLDu5evg8q/s57/Google%252B%2520alt.png'/></a></li>
        <li><a href='http://pinterest.com/honghoavi'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg958CWi8zhu3gVS0sAQoLyP9Fz3QxQ33DkUiR-EndqC1iD0we-LFmCdwvtRa_ijwCSQx4JDbphBWBsVJwIaNzGkqEZHoV-pKWXyD75NdsZRfz10XiIZdhh9Wb03lFUxaLajnpHq0y-CxPY/s57/Pinterest%2520alt.png'/></a></li>
        <li><a href='http://feeds.feedburner.com/blogthietke'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbx9kpix_LlG_2aOCk4wQmk1RKmhg6ILTsrqS4HZzxTagELAVkEIda-Mv6UAtIOnp77J7UrZdEX9ZiJP5TdBOiD-l2hbJRqlJAn8rxO4ZUBqHBL2F5LR28qXuhskzKmGwogNRw0zid4X2T/s57/RSS%2520Feed.png'/></a></li>
        <li style='padding:0px'><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0skUmurM7hf6vl9e9-w2_UnCJJwtB2NCOWQwc0t34KZoaXpJNtuQEuz7-4toijjzZBSZEKVACb4fy5cZAxjoLB1A-KgSvt1OPAALb0UwF5dUOCUVbmuAJPxQMQpq1nYCTcHUQoTxvtWyH/s57/YouTube%2520alt%25201.png'/></a></li>
</ul></span><div style='clear: both;'/>
</div>

5. Page Navigation tự động

Bạn vào Template – Edit HTML – Proceed - Expand Widget Templates và tìm đoạn code sau:

var pageNaviConf = {
    perPage: 5,
    numPages: 9,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

trong đó:
- perPage: số bài viết hiển thị trong 1 trang
- numPages: số trang hiển thị
- firstText, lastText, nextText, prevText: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev

6. Bottom Navi Bar

Trong Layout bạn tìm đến widget HTML Bottom Navi. Nhấn Edit và chép toàn bộ đoạn code sau, nhớ tùy chỉnh lại đường link của riêng bạn.

<p align="center">
        <a href="http://blog.nguoiaolam.net/search/label/Freebies">Freebies</a>
        <a href="http://blog.nguoiaolam.net/search/label/Blogging">Blogging</a>
        <a href="http://blog.nguoiaolam.net/search/label/Blogger">Blogger</a>
        <a href="http://blog.nguoiaolam.net/search/label/Wordpress">Wordpress</a>
        <a href="http://blog.nguoiaolam.net/search/label/Marketing%20Online">Marketing Online</a>
        <a href="http://blog.nguoiaolam.net/search/label/Make%20Money%20Online">MMO</a>
</p>

7. Một số điểm lưu ý khác

a) Pagelist: Pagelist sẽ tự động hiển thị tất cả các trang tĩnh ở phần trên cùng của blog. Muốn tùy chỉnh hiển thị bạn vào Layout – Page để tùy chỉnh.

b) Label Widget ở Sidebar. Bạn cần tùy chỉnh hiển thị là dạng List.

c) Timestamp Format. Bạn vào Settings - Language and formatting tùy chỉnh lại Timestamp Format tượng tự như trong hình

Hãy trải nghiệm với Metro Modern Blogger Template nhé! Cảm ơn Blog Người áo lam đã chia sẻ mẫu này.

Premium Blogger Template - Metro Modern Solar V.1