Tạo chân trang hai cột tích hợp bản quyền cực chất

Xin chào tất cả các bạn đã quay trở lại với Sơn Blogger!
Giá:100.000 vnđ
Hôm nay mình sẽ hướng dẫn các bạn một thủ thuật rất mới lạ và cực chất nhé, đó chính là tạo chân trang tích hợp copyright cực chất, có responsive trên mọi thiết bị.

BƯỚC 1: CHÈN ĐOẠN CODE BÊN DƯỚI VÀO TRÊN THẺ ĐÓNG </BODY>

<div class='footer-pluskienthuc'>
<div class='footer-pluskienthuc-width'>
<div class='footer-pluskienthuc-width-content'>
<div class='content-footer-pluskienthuc'>
<h2>Sơn Blogger</h2>
<p>Chia sẻ kiến thức tổng hợp!</p>
<a href='//m.me/toivietcode' target='blank'>
<i class='fa fa-send' style='margin-right:15px'></i>mail.caubehacker7@gmail.com</a>
<a href='//fb.com/toivietcode' target='blank'><i class='fa fa-facebook' style='margin-right:15px'></i>facebook.com/ToiVietCode</a>
<a href='//m.me/ToiVietCode' target='blank'><i class='fa fa-phone' style='margin-right:15px'></i>0123.9738.097</a>
</div>
<div class='content-footer-pluskienthuc-lienket'>
<h3>Liên kết bạn bè</h3><div class='lien_ket_ban_be'>
<div class='lienketbanbe'>
<li><a href='http://bacsiwindows.com' rel='nofollow' target='_blank' title='Chia sẻ kiến thức thủ thuật'><img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjsYmp_kGNmsmGWL_9wmP5dQMyRSyE2qvChIFvNnuc0q7iKl73BKCZbx9YuVD0rcgr5jibfN9-kDVV3rILLWkYFYlTh1bTugMsT9_VHQQQi0mA4TTUZhDFHlhC8LLCZeAxiW8w=s0-d" />Bác Sĩ Windows</a></li>
<li><a href='http://bacsiwindows.com' rel='nofollow' target='_blank' title='Chia sẻ kiến thức thủ thuật'><img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjsYmp_kGNmsmGWL_9wmP5dQMyRSyE2qvChIFvNnuc0q7iKl73BKCZbx9YuVD0rcgr5jibfN9-kDVV3rILLWkYFYlTh1bTugMsT9_VHQQQi0mA4TTUZhDFHlhC8LLCZeAxiW8w=s0-d" />Bác Sĩ Windows</a></li>
<li><a href='http://bacsiwindows.com' rel='nofollow' target='_blank' title='Chia sẻ kiến thức thủ thuật'><img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjsYmp_kGNmsmGWL_9wmP5dQMyRSyE2qvChIFvNnuc0q7iKl73BKCZbx9YuVD0rcgr5jibfN9-kDVV3rILLWkYFYlTh1bTugMsT9_VHQQQi0mA4TTUZhDFHlhC8LLCZeAxiW8w=s0-d" />Bác Sĩ Windows</a></li>
<li><a href='http://bacsiwindows.com' rel='nofollow' target='_blank' title='Chia sẻ kiến thức thủ thuật'><img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjsYmp_kGNmsmGWL_9wmP5dQMyRSyE2qvChIFvNnuc0q7iKl73BKCZbx9YuVD0rcgr5jibfN9-kDVV3rILLWkYFYlTh1bTugMsT9_VHQQQi0mA4TTUZhDFHlhC8LLCZeAxiW8w=s0-d" />Bác Sĩ Windows</a></li>
<li><a href='http://bacsiwindows.com' rel='nofollow' target='_blank' title='Chia sẻ kiến thức thủ thuật'><img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjsYmp_kGNmsmGWL_9wmP5dQMyRSyE2qvChIFvNnuc0q7iKl73BKCZbx9YuVD0rcgr5jibfN9-kDVV3rILLWkYFYlTh1bTugMsT9_VHQQQi0mA4TTUZhDFHlhC8LLCZeAxiW8w=s0-d" />Bác Sĩ Windows</a></li>
<li><a href='http://bacsiwindows.com' rel='nofollow' target='_blank' title='Chia sẻ kiến thức thủ thuật'><img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjsYmp_kGNmsmGWL_9wmP5dQMyRSyE2qvChIFvNnuc0q7iKl73BKCZbx9YuVD0rcgr5jibfN9-kDVV3rILLWkYFYlTh1bTugMsT9_VHQQQi0mA4TTUZhDFHlhC8LLCZeAxiW8w=s0-d" />Bác Sĩ Windows</a></li>
</div></div>
</div>
</div>
</div>
</div>
<!-- footer begin --> <div id="copyright-lower"> <div class="copyright-lower"> <div class="copyright-lower-left"> <span style="color: #444444; font-family: "arial" , "helvetica" , sans-serif;"><div id='copyright-lower'> <div class='copyright-lower'> <div class='copyright-lower-left'>Bản quyền &#169; 2017 <a href='https://www.sonbloggervn.blogspot.com' title='SonBloggerVN'>SonBloggerVN</a></div> <div class='copyright-lower-right'>Admin <a href='http://www.facebook.com/Toivietcode ' title='SonBloggerVN'>Sơn Blogger</a></div> </div> </div>

BƯỚC 2: CHÈN ĐOẠN CSS BÊN DƯỚI VÀO TRÊN ]]></B:SKIN>

.lien_ket_ban_be{padding:0;margin:0;list-style:none} .lienketbanbe{margin:0;padding:0} .lienketbanbe li{margin:0 0 5px 0;padding:0;line-height:normal;display:block;width:50%;float:left} .lienketbanbe a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300!important; font-size: 18px; display: block; padding: 2px 10px 2px 0; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; color: #eee!important} .lienketbanbe a:focus,.lienketbanbe a:hover{color:#fff!important} .lienketbanbe img{position:relative;top:2px;width:18px;height:18px;margin:0 5px 0 0;border-radius:50%} .footer-pluskienthuc{width:100%;background:#34495e no-repeat center fixed;background-size:cover;height:320px;margin:0;overflow:hidden} .footer-pluskienthuc-width{max-width:1100px;width:100%;margin:auto;font-family:'Roboto Slab',sans-serif} .footer-pluskienthuc-width .content-footer-pluskienthuc h2{font-weight:300;font-size:42px;color:#fff;margin:0 0 20px 0;letter-spacing:.5px} .footer-pluskienthuc-width .content-footer-pluskienthuc-lienket h3{font-weight:300;font-size:42px;color:#fff;margin:0 0 20px 0;letter-spacing:.5px} .footer-pluskienthuc-width .content-footer-pluskienthuc{border-top:none;float:left;width:50%;padding:45px 0 0 0;overflow:hidden} .footer-pluskienthuc-width .content-footer-pluskienthuc p{margin:15px 0 30px 0;font-weight:300;font-size:22px;color:#eee} .footer-pluskienthuc-width .content-footer-pluskienthuc a{float:left;font:300 20px Roboto Slab;color:#fff;letter-spacing:0;margin:0 0 20px 0;display:block;width:90%} .footer-pluskienthuc-width .content-footer-pluskienthuc-lienket{border-top:none;float:right;width:50%;padding:45px 0 0 0} .footer-pluskienthuc-width .content-footer-pluskienthuc-lienket p{margin:15px 0 50px 0;font-weight:300;font-size:22px;color:#eee} .footer-pluskienthuc-width .content-footer-pluskienthuc-lienket a{float:left;font:300 20px Roboto Slab;color:#fff;letter-spacing:0;margin:0} .footer-pluskienthuc-width a:hover{color:#fff!important} #copyright-lower{background:#2c3e50} .copyright-lower{margin:auto;width:1120px;padding:14px 0;color:#fff} .copyright-lower a{color:#fff;border-bottom:1px dotted transparent} .copyright-lower a:hover{border-bottom:1px dotted #777;color:#fff!important} .copyright-lower,.copyright-lower a{font-family:"Roboto Slab",sans-serif!important;font-weight:400;font-size:20px!important} .copyright-lower-left{display:inline} .copyright-lower-right{display:inline;float:right} @media screen and (max-width:768px){ .footer-pluskienthuc{padding:30px 0!important;width:100%!important;height:100%!important} .footer-pluskienthuc-width .content-footer-pluskienthuc-lienket,.footer-pluskienthuc-width .content-footer-pluskienthuc {width:90%!important;float:none!important;display;block!important;margin:auto!important;padding:0!important} .footer-pluskienthuc pluskienthuc-width h2,.footer-pluskienthuc-width h3{font-size:34px!important} .lienketbanbe li{width:100%!important} .copyright-lower{width:100%!important} .copyright-lower-right,.copyright-lower-left{float:none!important;display:block!important;text-align:center!important} }

Nhìn có vẻ khá dài đúng không, nhưng thực chất nó rất nhẹ và đẹp, chứ không hề gây nặng nề gì cho template cả.
Nếu hay hãy để lại một bình luận dưới bài viết để mình có động lực nhé!

Cách viết css hover cho phần tử khi rê chuột vào

Xin chào tất cả các bạn đã quay trở lại với Sơn Blogger!
Nếu như các bạn có qua một số blog hay sử dụng hover như blog Code Đây Rồi của anh Trần Thanh Bình thì có lẽ các bạn đã biết, anh Bình rất thường xuyên sử dụng hover cho blog mình để tặng độ sống động và chuyên nghiệp cho blog.

Demo

Vậy thì làm thế nào để viết được css hover giống như vậy? Mình sẽ hướng dẫn các bạn ở trong bài viết ngày hôm nay.

BƯỚC 1: VIẾT CSS TÙY CHỈNH BAN ĐẦU.

Ví dụ mình có một cặp thẻ <div>...</div> có class là "box":

<div class="box"></div> 

Tiếp theo chúng ta sẽ biết css tùy chỉnh ban đầu như sau:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

Và cuối cùng chúng ta sẽ viết css hover như sau:

.box:hover {
  background: green;
}

 Khi ta sử dụng ":hover" nghĩa là ta chọn các liên kết sẽ được di chuyển. Nếu ta sử dụng một thuộc tính khác định dạng trong vùng được chọn liên kết thì khi rê chuột (hover) thì ta sẽ được định dạng của thuộc tính sử dụng ở vùng chọn được liên kết.
Nếu như sử dụng thêm một số hiệu ứng chuyển động, đơn giản nhất là hiệu ứng transtion thì hiệu ứng hover sẽ trở nên hoàn hảo. Ở bài sau mình sẽ hướng dẫn thêm cho các bạn cách sử dụng hover với hiệu ứng transtion.
Nếu hay hãy để lại một bình luận dưới bài viết để mình có động lực nhé!

[Hướng dẫn] Sử dụng css để tùy chỉnh giao diện qua các kích thước

Xin chào tất cả các bạn đã đến với Sơn Blogger!
Như mình biết hiện nay thì trừ một số nhỏ những bạn làm blog về chủ đề tin tức báo chí ra thì đa số tất cả các bạn sử dụng blogger đều muốn blog mình vừa nhẹ, đẹp mà không cần sử dụng nhiều đoạn code hay javascript.

Thì hôm nay, mình sẽ hướng dẫn các bạn sử dụng CSS @media để tùy chỉnh một số thuộc tính của giao diện cho phù hợp nhé.

BẮT ĐẦU NÀO:

Cũng khá đơn giản thôi nên mình không viết quá dài dòng tránh tình trạng bị nhàm chán khi đọc. Các bạn chèn đoạn css dưới vào trong template của mình:

@media screen and (max-width: số phần trăm độ rộng)
{
vùng chọn{thuộc tính; thuộc tính}
}

Phần trên là phần chính của css, các bạn đem về tự tùy biến theo ý thích của các bạn nhé, ví dụ các bạn muốn thumbnail bài viết ngoài trang chủ ẩn hiển thị trên đt các bạn chỉ cần tùy chỉnh lại CSS như sau:

@media screen and (max-width: 500px)
{
.block-image{display:none!important;}
}

Vì class của thumbnail bài viết ngoài trang chủ trong template của mình đang xài là block-image nên khi viết vùng chọn vào css sẽ là .block-image, nếu như các bạn sử dụng class khác thì có thể thay vào, hoặc các bạn sử dụng id thay cho class thì thay dấu "." trước tên vùng chọn thành dấu "#" .
Hãy tùy chỉnh CSS phù hợp để giúp cho giao diện của bạn trở nên hoàn hảo nhé, chúc các bạn thành công!

Thêm icon mũ ông già noel vào tiêu đề blogger

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn thêm icon mũ ông già noel vào tiêu đề blogger

HƯỚNG DẪN CÁCH LÀM:

Đề thêm icon mũ ông già noel các bạn tìm đoạn <div id='header-inner'> rồi thêm đoạn code này vào trong nó

<img border='0' class='noel' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkRJCV9UHHsLEmIEmRCTnP8CjMK1uSUPfNhuwr_2SwNSG0d0ASRlAboWZbm1C8C06mbymx-JxlbsOo2asl3cjs_GImZLsXWGOalp_uwAhxosGL4X89HTrO2fQB3dWmHhfBkRKwCOGzigo/s36/mu-noel.png' style='position:absolute;z-index: 99999999;top:-3px;left:-10px;opacity:1'/>

Chúc các bạn thành công!
. Như vậy là xong rồi vậy là có một tí trang trí cho dịp lễ noel rồi phải không nào!

Tùy chỉnh Bài đăng phổ biến cực đẹp cho blogger/blogspot

Xin chào tất cả các bạn, hôm nay mình sẽ hướng dẫn các bạn tùy chỉnh Bài đăng phổ biến (PopularPosts) nhìn cực đẹp cho blogger/blogspot nhé.

HƯỚNG DẪN CÁCH LÀM:

Để tùy chỉnh Bài đăng phổ biến các bạn tìm thẻ ]]></b:skin> và thêm đoạn Css bên dưới lên trên nó

/* Popular post */
.PopularPosts .widget-content ul li{padding:8px 0px 8px 5px}
.PopularPosts .widget-content ul li a{color:#222}
.popular-posts li:before{content:"\f006";display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;transform:translate(0,0);margin-right:3px;color:#444;font-size:16px;margin-left:1px}
.popular-posts li:hover:before{content:"\f005";display:inline-block;font:normal normal normal 14px/1 FontAwesome;transform:translate(0,0);margin-right:3px;color:#3b5998;font-size:16px}
.PopularPosts .widget-content ul li{list-style-type:none;color:#222;font-size:16px;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.PopularPosts .widget-content ul li a:hover{color:#3b5998}
.popular-posts li:nth-child(2n+2){background:#F2F2F2}
.widget.PopularPosts{box-shadow:none!important;padding:0!important}

* Lưu ý : Nhớ xóa css cũ, trước để tránh hiển thị không được đẹp nhé.
Chúc bạn thành công!

Thêm BVLQ & CTBT cực đẹp và chuyên nghệp cho blogger

Chào các bạn, hôm nay blog mình sẽ chia sẻ tới các bạn mẫu Bài viết liên quan và Có thể bạn thích cực đẹp và chuyên nghiệp cho blogger nhé.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Bạn dán đoạn CSS sau lên phía trên thẻ ]]></b:skin> trong mẫu

/* Related post */
#related-posts1{float:left;width:49.5%;margin:0}
#related-posts1 ul li{list-style-type:none;color:#222;font-size:16px;line-height:30px;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#related-posts1 ul li a{color:#222}
#related-posts1 ul li a:hover{color:#ed2e2e}
#related-posts1 ul li a:before{content:"\f006";font-family:'FontAwesome';color:#ed2e2e;margin-left:1px;padding-right:5px}
#related-posts1 ul li a:hover:before{content:"\f005"}
#related-posts1 h4{color:#222;border-bottom:2px solid #3b5998;padding:10px 10px 7px;font-size:18px;margin:0 0 10px;font-weight:400;background:#f2f2f2}
#related-posts1 ul{margin-left:0;padding:0}
#related-posts1 .fa{margin-right:5px}
#related-posts2{float:right;width:49.5%;margin:0}
#related-posts2 ul li{list-style-type:none;color:#222;font-size:16px;line-height:30px;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#related-posts2 ul li a{color:#222}
#related-posts2 ul li a:hover{color:#ed2e2e}
#related-posts2 ul li a:before{content:"\f08a";font-family:'FontAwesome';color:#ed2e2e;margin-left:1px;padding-right:5px}
#related-posts2 ul li a:hover:before{content:"\f004"}
#related-posts2 h4{color:#222;border-bottom:2px solid #3b5998;padding:10px 10px 7px;font-size:18px;margin:0 0 10px;font-weight:400;background:#f2f2f2}
#related-posts2 ul{margin-left:0;padding:0}
#related-posts2 .fa{margin-right:5px}

Bước 2: Thêm Javascript này lên trên thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var titles = new Array();
var titlesNum = 0;
var urls = new Array();
var time = new Array();

function related_results_labels(c) {
    for (var b = 0; b < c.feed.entry.length; b++) {
        var d = c.feed.entry[b];
        titles[titlesNum] = d.title.$t;
        for (var a = 0; a < d.link.length; a++) {
            if (d.link[a].rel == "alternate") {
                urls[titlesNum] = d.link[a].href;
                time[titlesNum] = d.published.$t;
                titlesNum++;
                break
            }
        }
    }
}

function removeRelatedDuplicates() {
    var b = new Array(0);
    var c = new Array(0);
    e = new Array(0);
    for (var a = 0; a < urls.length; a++) {
        if (!contains(b, urls[a])) {
            b.length += 1;
            b[b.length - 1] = urls[a];
            c.length += 1;
            c[c.length - 1] = titles[a];
            e.length += 1;
            e[e.length - 1] = time[a]
        }
    }
    titles = c;
    urls = b;
    time = e
}

function contains(b, d) {
    for (var c = 0; c < b.length; c++) {
        if (b[c] == d) {
            return true
        }
    }
    return false
}

function printRelatedLabels(a) {
    var y = a.indexOf('?m=0');
    if (y != -1) {
        a = a.replace(/\?m=0/g, '')
    }
    for (var b = 0; b < urls.length; b++) {
        if (urls[b] == a) {
            urls.splice(b, 1);
            titles.splice(b, 1);
            time.splice(b, 1)
        }
    }
    var c = Math.floor((titles.length - 1) * Math.random());
    var b = 0;
    document.write("<ul>");
    if (titles.length == 0) {
        document.write("<li>Không có bài viết liên quan → </li>")
    } else {
        while (b < titles.length && b < 20 && b < maxresults) {
            if (y != -1) {
                urls[c] = urls[c] + '?m=0'
            }
            document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8, 10) + "/" + time[c].substring(5, 7) + "/" + time[c].substring(0, 4) + '">' + titles[c] + "</a></li>");
            if (c < titles.length - 1) {
                c++
            } else {
                c = 0
            }
            b++
        }
    }
    document.write("</ul>");
    urls.splice(0, urls.length);
    titles.splice(0, titles.length)
};
//]]>
</script>
</b:if>

Bước 3: Trong bước này bạn cần chú ý hơn, bạn tìm đến thẻ <data:post.body/> và dán đoạn code sau xuống phía dưới (lưu ý nếu không hiển thị bạn tìm và kiểm tra từng thẻ, trong mẫu thường có ít nhất 3 thẻ này nhé)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts1'>
        <h4>
            Bài viết liên quan:
        </h4>
        <b:loop values='data:post.labels' var='label'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
        </b:loop>
        <script type='text/javascript'>
            var maxresults=5;
            removeRelatedDuplicates();
            printRelatedLabels(&quot;<data:post.url/>&quot;);
        </script>
    </div>
<div id='related-posts2'>
<h4 style='border-bottom: 2px solid #28b992;'>
Có thể bạn thích:
        </h4>
        <b:loop values='data:post.labels' var='label'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
        </b:loop>
        <script type='text/javascript'>
            var maxresults=5;
            removeRelatedDuplicates();
            printRelatedLabels(&quot;<data:post.url/>&quot;);
        </script>
    </div>
</b:if>

Chia sẻ template blogger dọa ma cực chất

Chào các bạn, cũng đã lâu rồi mình chưa chia sẻ template blogger nên vì thế hôm nay mình sẽ chia template dọa ma cực chất do mình rip từ trang shafou.com.
Bên dưới là Demo với Download nhé: