Refresh
Đối tác của ANewPlus ANewTips Xem Ngay!

Two thousand a sour orange

Cách thêm footer vào cuối blog.

 Xin chào lại là Ngô Vi Minh Hiếu đây, hôm nay mình sẽ share cho mọi người cách thêm footer cuối blog cực đẹp lun.




Ok bắt đầu thui!

Bước 1: Mọi người truy cập blogger và vào phần chủ đề để chỉnh sửa và thêm code css sau (nếu có rồi xóa code cũ đi)



/* CSS Footer */ .cdtIn .HTML{overflow:hidden;text-overflow:ellipsis;width:100%}.footCdt{display:inline-flex;flex-direction:column;width:100%}.footerContent{display:flex;margin-bottom:10px}.footer-content{display:flex;flex-direction:row}.footer-col-1{width:35%;padding-right:20px}.footer-logo{display:flex;align-items:center}.blog-logo{width:60px;height:60px;margin-right:15px;border-radius:100rem}.dmca p{opacity:.8}.dmca-sample{font-size:9px;color:rgba(254,254,254,0.6);border-radius:3px;overflow:hidden;line-height:30px}.dmca-sample:before{content:"DMCA";padding:6px 10px;background-color:#2a2a2a;border-radius:4px 0 0 4px}.dmca-sample:after{content:"Protected";color:#202442;padding:6px 10px;background-color:var(--linkC);border-radius:0 4px 4px 0}.drK .dmca-sample:after{background-color:var(--darkU)}.dmca-sample:hover{opacity:0.8}.footer-link{display:flex;list-style:none;padding-left:6px}.footer-col-2{width:40%;display:flex;flex-wrap:wrap;align-content:flex-start}.col-sm{width:50%}.col-sm ul{list-style:none;padding:0;opacity:.8}.col-sm li:before{content:"\f356";font-family:"Font Awesome 5 Pro";margin-right:5px}.col-sm a{color:inherit}.col-sm a:hover{color:var(--linkC)}.drK .col-sm a{color:inherit}.drK .col-sm a:hover{color:var(--darkU)}.footer-col-3{width:25%}.footer-input{border:0!important;border-radius:6px!important;padding:8px 16px!important;margin-bottom:10px}.footer-text{border:0!important;resize:none;padding:8px 16px!important;border-radius:8px!important}.footer-btn{padding:8px 16px!important;font-size:12px;margin-bottom:0!important;border-radius:6px}.notif-area img{display:inline-block;border-radius:100rem;margin-left:5px;cursor:pointer}.Rtl .footer-col-1{padding-left:20px;padding-right:0}.Rtl .blog-logo{margin-left:15px;margin-right:0}.Rtl .col-sm li:before{content:""}.Rtl .footer-link{padding-left:0;padding-right:6px}.Rtl .col-sm li:after{content:"\f355";font-family:"Font Awesome 5 Pro";margin-left:5px}@media screen and (max-width:768px){.blog-logo{width:50px;height:50px}.footer-logo h2{font-size:1.5rem}}@media screen and (max-width:640px){.footer-content{flex-direction:column}.footer-col-1,.footer-col-2,.footer-col-3{width:100%}.footer-col-3 .ContactForm{max-width:100%}}
Bước 2: Chúng ta sẽ thêm code html trước thẻ <span class='credit'> 
<div class='footer-content'>
<div class='footer-col-1'>
<h3 class='title'>Created By</h3>
<div class='footer-logo'>
<img alt='blog-logo' class='blog-logo' src='https://lh3.googleusercontent.com/-2fLA-xLX5zk/YdE-3vAFT9I/AAAAAAAABnA/28aGE_VSPeIANmChXEXSuJwk9ldbN3znACNcBGAsYHQ/s0/apple-touch-icon.png'/>
<h2>Văn Linh</h2>
</div>
<div class='dmca'>
<p>
All posts are protected by <b>DMCA</b>.<br/>
Reproduction in any form is strictly prohibited!
</p>
<a class='dmca-badge' href='https://www.dmca.com/Protection/Status.aspx?ID=93381690-b4e5-4bf7-ba40-730847344649&refurl=https://www.phamvanlinh.xyz/' target='_blank' title='DMCA.com Protection Status'>
<span class='dmca-sample'></span>
</a>
<script src='https://images.dmca.com/Badges/DMCABadgeHelper.min.js'></script>
</div>
<ul class='footer-link mSoc'>
<li>
<a class='tIc bIc' href='https://www.facebook.com/hnilnavmahp.ku/' target='_blank' title='Facebook'>
<svg viewBox='0 0 32 32'>
<path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H17V18h4a1,1,0,0,0,0-2H17V14a2,2,0,0,1,2-2h2a1,1,0,0,0,0-2H19a4,4,0,0,0-4,4v2H12a1,1,0,0,0,0,2h3v9H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'></path>
</svg>
</a>
</li>
<li>
<a class='tIc bIc' href='https://www.instagram.com/vanlinh.11/' target='_blank' title='Instagram'>
<svg viewBox='0 0 32 32'>
<path d='M22,3H10a7,7,0,0,0-7,7V22a7,7,0,0,0,7,7H22a7,7,0,0,0,7-7V10A7,7,0,0,0,22,3Zm5,19a5,5,0,0,1-5,5H10a5,5,0,0,1-5-5V10a5,5,0,0,1,5-5H22a5,5,0,0,1,5,5Z'></path>
<path d='M16,9.5A6.5,6.5,0,1,0,22.5,16,6.51,6.51,0,0,0,16,9.5Zm0,11A4.5,4.5,0,1,1,20.5,16,4.51,4.51,0,0,1,16,20.5Z'></path>
<circle cx='23' cy='9' r='1'></circle>
</svg>
</a>
</li>
<li>
<a class='tIc bIc' href='https://twitter.com/Linh1151' target='_blank' title='Twitter'>
<svg viewBox='0 0 32 32'>
<path d='M13.35,28A13.66,13.66,0,0,1,2.18,22.16a1,1,0,0,1,.69-1.56l2.84-.39A12,12,0,0,1,5.44,4.35a1,1,0,0,1,1.7.31,9.87,9.87,0,0,0,5.33,5.68,7.39,7.39,0,0,1,7.24-6.15,7.29,7.29,0,0,1,5.88,3H29a1,1,0,0,1,.9.56,1,1,0,0,1-.11,1.06L27,12.27c0,.14,0,.28-.05.41a12.46,12.46,0,0,1,.09,1.43A13.82,13.82,0,0,1,13.35,28ZM4.9,22.34A11.63,11.63,0,0,0,13.35,26,11.82,11.82,0,0,0,25.07,14.11,11.42,11.42,0,0,0,25,12.77a1.11,1.11,0,0,1,0-.26c0-.22.05-.43.06-.65a1,1,0,0,1,.22-.58l1.67-2.11H25.06a1,1,0,0,1-.85-.47,5.3,5.3,0,0,0-4.5-2.51,5.41,5.41,0,0,0-5.36,5.45,1.07,1.07,0,0,1-.4.83,1,1,0,0,1-.87.2A11.83,11.83,0,0,1,6,7,10,10,0,0,0,8.57,20.12a1,1,0,0,1,.37,1.05,1,1,0,0,1-.83.74Z'></path>
</svg>
</a>
</li>
<li>
<a class='tIc bIc' href='https://www.tiktok.com/@2imvanl1nh' target='_blank' title='Tiktok'>
<svg viewBox='0 0 32 32'>
<path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'></path>
<path d='M22,12a3,3,0,0,1-3-3,1,1,0,0,0-2,0V19a3,3,0,1,1-3-3,1,1,0,0,0,0-2,5,5,0,1,0,5,5V13a4.92,4.92,0,0,0,3,1,1,1,0,0,0,0-2Z'></path>
</svg>
</a>
</li>
<li>
<a class='tIc bIc' href='https://www.phamvanlinh.xyz/' target='_blank' title='Whatsapp'>
<svg viewBox='0 0 32 32'>
<path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'></path>
<path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'></path>
</svg>
</a>
</li>
<li>
<a class='tIc bIc' href='https://www.phamvanlinh.xyz/' target='_blank' title='Telegram'>
<svg viewBox='0 0 32 32'>
<path d='M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z'></path>
</svg>
</a>
</li>
</ul>
</div>
<div class='footer-col-2'>
<div class='col-sm'>
<h3 class='title'>Partner</h3>
<ul>
<li><a href='https://www.code.pro.vn/?ref=phamvanlinh.xyz' target='_blank'>Code Pro</a></li>
<li><a href='https://www.winta.xyz/?ref=phamvanlinh.xyz' target='_blank'>Winta</a></li>
<li><a href='https://geeksbox.net/?ref=phamvanlinh.xyz' target='_blank'>Geeks Box</a></li>
</ul>
</div>
<div class='col-sm'>
<h3 class='title'>Tools</h3>
<ul>
<li><a href='/p/tao-chu-hinh-trai-tim.html' target='_blank'>Heart Letter</a></li>
<li><a href='/p/ma-hoa-code.html' target='_blank'>Encode code</a></li>
<li><a href='/p/encoding-svg.html' target='_blank'>SVG Encoding</a></li>
</ul>
</div>
<div class='col-sm'>
<h3 class='title'>Code</h3>
<ul>
<li><a href='/search/label/Cpp' target='_blank'>C/C++</a></li>
<li><a href='/search/label/Java' target='_blank'>Java</a></li>
<li><a href='/search/label/Python' target='_blank'>Python</a></li>
<li><a href='/search/label/Javascript' target='_blank'>JavaScript</a></li>
</ul>
</div>
<div class='col-sm'>
<h3 class='title'>Company</h3>
<ul>
<li><a href='/' target='_blank'>Blog</a></li>
<li><a href='/p/my-info.html' target='_blank'>About</a></li>
<li><a href='/p/sitemap.html' target='_blank'>Sitemap</a></li>
<li><a href='/p/privacy.html' target='_blank'>Privacy</a></li>
</ul>
</div>
</div>
<div class='footer-col-3'>
<h3 class='title'>Contact</h3>
<div class='ContactForm' id='ContactForm1'>
<form name='contact-form'>
<input class='footer-input contact-form-name' id='ContactForm1_contact-form-name' name='name' type='hidden' value=''/>
<input class='footer-input contact-form-email' id='ContactForm1_contact-form-email' name='email' placeholder='Enter email!' type='text' value=''/>
<textarea class='footer-text contact-form-email-message' cols='30' id='ContactForm1_contact-form-email-message' name='email-message' placeholder='Enter message!' rows='5'></textarea>
<input class='button footer-btn contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gửi'/>
<div class='notif-area'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7523394680288139917';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7523394680288139917','//www.phamvanlinh.xyz/','7523394680288139917');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent!', 'contactFormMessageNotSentMsg': 'Fail! Please try again later.', 'contactFormInvalidEmailMsg': 'Email is required!', 'contactFormEmptyMessageMsg': 'Message is required!', 'title': 'Contact Form', 'blogId': '7523394680288139917', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
</div>
</div>
Bước 3: Chúng ta sẽ lưu lại và quay lại trang blog rồi load lại blog và sẽ có thành quả.


Nếu bạn muốn chia sẻ lại lên blog bạn thì vui lòng nhớ ghi nguồn.

Copyright © Ngô Vi Minh Hiếu




Bài viết liên quan:

Rate Articles:

3 comments

  1. ad ơi sao của em hiện lỗi nó kêu là ghi đúng cú pháp và refurl phải có dấu ";" ngay sau nhưng mà vẫn lỗi ạ :((
  2. sau & thêm amp;
  3. b ơi b có thể cho mình xin code khung chứa code của b được ko