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!
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/AVvXsEix-8BWEf-JLdaFnjw7ywgfqxLO7vtNQnAFEIjTSmwPzUsH-w1q4gHKDg2QmI5vsxFkwmY0VtxiZQjlI0Rop61fEmcKI6Vf6dx652ttWHxg6XFUZBRhtSdvd0JyLS_dPjdi7aQ=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/AVvXsEix-8BWEf-JLdaFnjw7ywgfqxLO7vtNQnAFEIjTSmwPzUsH-w1q4gHKDg2QmI5vsxFkwmY0VtxiZQjlI0Rop61fEmcKI6Vf6dx652ttWHxg6XFUZBRhtSdvd0JyLS_dPjdi7aQ=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/AVvXsEix-8BWEf-JLdaFnjw7ywgfqxLO7vtNQnAFEIjTSmwPzUsH-w1q4gHKDg2QmI5vsxFkwmY0VtxiZQjlI0Rop61fEmcKI6Vf6dx652ttWHxg6XFUZBRhtSdvd0JyLS_dPjdi7aQ=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/AVvXsEix-8BWEf-JLdaFnjw7ywgfqxLO7vtNQnAFEIjTSmwPzUsH-w1q4gHKDg2QmI5vsxFkwmY0VtxiZQjlI0Rop61fEmcKI6Vf6dx652ttWHxg6XFUZBRhtSdvd0JyLS_dPjdi7aQ=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/AVvXsEix-8BWEf-JLdaFnjw7ywgfqxLO7vtNQnAFEIjTSmwPzUsH-w1q4gHKDg2QmI5vsxFkwmY0VtxiZQjlI0Rop61fEmcKI6Vf6dx652ttWHxg6XFUZBRhtSdvd0JyLS_dPjdi7aQ=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/AVvXsEix-8BWEf-JLdaFnjw7ywgfqxLO7vtNQnAFEIjTSmwPzUsH-w1q4gHKDg2QmI5vsxFkwmY0VtxiZQjlI0Rop61fEmcKI6Vf6dx652ttWHxg6XFUZBRhtSdvd0JyLS_dPjdi7aQ=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é!