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

Deco Mag một blogger template khá tuyệt để các bạn có thể lập một blog tin tức, với hỗ trợ responsive nên nó hiển thị tốt với các thiết bị di động. Phần trước đã hướng dẫn các bạn cài xong page 404.
Tiếp theo là phần hướng dẫn còn lại để có thể sử dụng blogger template này.

4. Sửa thẻ meta Keywords và Discription
Các bạn vào edit HTML

Tìm trong phần header sẽ thấy 2 dòng để chèn meta keyword và description. Các bạn sửa lại theo chủ đề web của các bạn, sau đó Save.

5. Phần tag menu trên sidebar

menu tag trên sidebar

Phần này cài template là nó tự có rồi. Nhưng nếu bị lỗi gì đó mà nó chưa hoạt động thì các bạn làm như sau:

Vào phần layout

Phần popular edit các bạn tìm chọn tiện ích popular posts

Tiện ích popular posts từ blogger

Sau đó vào cài đặt tiện ích này hiển thị tối đa 3 bài post gồm tiêu đề, đoạn trích và hình ảnh thu nhỏ của bài đăng. => Save

6. Phần video ở footer

video trong footer

Các bạn vào layout chỉnh sửa phần video trong footer. Sau đó tìm video bạn muốn đăng trên youtube.
copy mã nhúng rồi copy vào phần chỉnh sửa đó

Nhúng video youtube

Các bạn nhớ chỉnh sửa width 100% height khoảng 250px là đẹp

7. Tạo  page sitemap
 Các bạn tạo một page mới sau đó copy code sau vào phần HTML.

Tạo page sitemap

Code: 

<div id="tabbed-toc">

<span class="loading">Loading...</span></div>

<br />

<script type="text/javascript">

var tabbedTOC = {

    blogUrl: "http://deco-pbtz.blogspot.com/", // Blog URL

    containerId: "tabbed-toc", // Container ID

    activeTab: 1, // The default active tab index (default: the first tab)

    showDates: true, // `true` to show the post date

    showSummaries: false, // `true` to show the posts summaries

    numChars: 200, // Number of summary chars

    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)

    thumbSize: 40, // Thumbnail size

    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL

    monthNames: [ // Array of month names

        "January",

        "February",

        "March",

        "April",

        "May",

        "June",

        "July",

        "August",

        "September",

        "October",

        "November",

        "December"

    ],

    newTabLink: true, // Open link in new window?

    maxResults: 99999, // Maximum post results

    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")

    sortAlphabetically: true, // `false` to sort posts by published date

    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked

    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text

};

</script>

<script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>

Và sửa website  http://deco-pbtz.blogspot.com/ thành url website của các bạn. Sau đó
"Publish" post

8. Chỉnh sừa link cho menu và phần banner quảng cáo header

Các bạn vào edit HTML tìm đoạn code sau trên header chỉnh sửa các dấu # thành link website tương ứng cho menu trên cùng và chỉnh tương tự với đoạn code menu phía dưới.

<nav id='nav2'>

<ul id='menuhlng2'>

<li class='mhome2'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>About Us</a></li>

<li><a href='#'>Theme Forest</a></li>

<li><a href='#'>Contact</a></li>

<li><a href='#'>Sitemap</a></li>

<li><a href='#'>404 Error</a></li>

</ul>

</nav>

Về phần banner quảng cáo.

Các bạn tìm đến box 728x90 AdSpace Widget edit

 Sau đó chèn đoạn code




<a href="#"><img class="" src="Your Adspace Image URL" target:"_blank"; /></a>

dấu # để chèn link còn trong thuộc tính src là đường link của ảnh các bạn có thể copy địa chỉ ảnh từ các website hoặc có thể post ảnh lên một số trang web hay mạng xã hội pinterest để lấy đường link chèn vào website.


9. Phần slider video
Các bạn vào layout chỉnh sửa Video widget, thêm tag video, các bạn post video trong bài đăng thì nhớ điền tag là video thì video đó sẽ được hiển thị trong phần này.

 

10. Phần random post

 Phần này mình mình không thấy có trong hướng dẫn của template.

Nếu muốn có mục này các bạn vào layout chọn box random post trong footer rồi edit.

Chỉnh sửa box random post

 Sau đó thêm đoạn code sau:

<style>
#random-posts img {
    border-radius: 0px;
    float: left;
    margin-right: 5px;
    width: 70px; /*Cái này là chiều rộng của hình minh hoạ*/
    height: 70px; /*Cái này là chiều dài của hình minh hoạ*/
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 12px !important; /*Cái này là kích thước tiêu đề*/
    text-transform: uppercase;
    padding: 0px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 10px !important; /*Cái này là kích thước của đoạn trích giới thiệu*/
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 3; /*Cái này là số lượng bài đăng*/
var randomposts_chars = 80; /*Cái này là số ký tự tối đa của đoạn giới thiệu*/
var randomposts_details = 'yes'; /*Nếu bạn không muốn hiển thị ngày đăng và số lượng comment thì đổi thành 'no'*/
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);

function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};

function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdXTd_cjMWZVZvFuwTVt2qoULQlyg6e9TTHPw_lE4u-4Ulmo5zAePDKQNuNG5TUqr1pOYWtFGWVF3nxE2421o1qr-NwGqkHnaYB4gMmPqz9q9Cd5NfRNOuKU8eCylRQ6VfRenAsGUYc2U/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

Chú ý các phần chú thích trong code để chỉnh sửa cho thích hợp nhé.

Chúc các bạn thành công!

blogger 07:45