Cách cài đặt và sử dụng Deco Mag - Responsive Magazine Blogger Template (Phần 1)

Deco Mag - Responsive Magazine Blogger Template là một blogger theme đẹp, hiện đại. Nó được thiết kế responsive và giúp thân thiện người dùng blogger template. Blogger template hoàn hảo cho các tin tức, tạp chí và các trang web cá nhân. Hướng dẫn sau sẽ giúp các bạn có thể cài đặt sử dụng tốt blogger template này.

Deco Mag - Responsive Magazine Blogger Template

 Demo:
 http://themeforest.net/item/deco-mag-responsive-magazine-blogger-template/full_screen_preview/8926014

Đầu tiên các bạn có thể download template này tại địa chỉ sau:
http://tinyurl.com/keo82uc

Sau khi download, các bạn giải nén. Thực ra trong gói các bạn tải về đã có sẵn documentation của theme khá chi tiết, trong đó đã có hướng dẫn cài đặt từng layout và setup từng page trong blogger template này bằng hình ảnh minh họa. Tuy nhiên hướng dẫn này có một vài hạn chế vì nó chưa hoàn thiện làm cho một số người mới sẽ khó khăn trong việc sử dụng.

Những bước như sau:

1. Cài đặt

Login vào Blogger Account của bạn.

Click "Template" như menu trên hình

Tiếp theo click trên "Backup / Restore" Button.

Tìm  XML Template File từ trên thư mục giải nén của blogger template

Chọn XML Template File and upload

Sau khi cài đặt trong phần layout sẽ được bố cục như sau:

2. Sắp xếp layout
Hãy chia website của các bạn thành các category để phân loại các bài viết, sau đó điền tên vào các layout, lấy ví dụ phần đầu tiên.

Đầu tiên vào Blogger > Layout

Tiếp theo chọn "Edit" trong Game Widget

Tiếp theo các bạn điền tags mà sau các bạn sẽ chọn khi viết bài, ở phần này theo demo là game. Sau đó save.

 Kể cả phần Latest News các bạn cũng làm tương tự, muốn các bài viết trong tags nào hiển thị trong phần đó thì điền tên tags đó vào.

3. Setup page

Page 404.
Click on Custom Page Not Found

Copy code này và paste vào như hình vẽ => Save

Code:

<style type="text/css">

#slider-wrapper,#sidebar-wrapper,#sidebar-wrapper2,#carousel,#slide-widget2,#flex-slider,#slide-widget,#x-slide,#x-slide2,#x-slide3, #top-tab, #switch-left,#news-wrapper,#tagpost-wrapper,#tagpost-wrapper2,#tagpost-wrapper3,#sidebar-wrapper3,#sidebar-wrapper4,#tag-wid,#tag-wid2,#tag-wid3,#slide-widgetfix,.social-clear {

display:none;

}

#main-wrapper {

overflow:hidden;

width:100%;

margin-left:0;

float:none;

margin-right:0;

}

#error-404 {

margin:50px 20px 40px 320px;

autotext-align:center;

transition:all .8s ease 0;

width:380px;

font-family:oswald, Arial, Verdana, sans-serif;

}

#error-404 span {

color:#f24024;

font-size:160px;

font-weight:bold;

}

.large-heading {

font-size:60px;

line-height:1.2em;

}

.light-heading {

font-weight:400;

}

.status-msg-bg {

background-color:transparent;

}

#outer-wrapper {

min-height:0;

}

.status-msg-border {

border:0 none;

background-image:none;

height:100%;

}

#sidebar-wrapper,#sidebar-wrapper2 {

width:100%;

float:none;

margin-left:0;

}

.status-msg-wrap,.status-msg-body {

height:100%;

}

</style>

 <div id="error-404"> <span>404</span>

</div>

<h1 class="large-heading" style="text-align: center;">Page Not Found. :/</h1>

<h2 class="light-heading" style="text-align: center;">Sorry, the page you were looking for in this blog does not exist..</h2>

}

 <div id="error-404"> <span>404</span>

</div>

<h1 class="large-heading" style="text-align: center;">Page Not Found. :/</h1>

<h2 class="light-heading" style="text-align: center;">Sorry, the page you were looking for in this blog does not exist..</h2>

blogger 03:20