Cách thêm footer vào cuối blog siêu đẹp.
Hello anh em! Hôm nay trong quá trình "ngược dòng thời gian" đi tìm ký ức cảm giác năm xưa của blog mình ngày trước nhưng h thì bị xóa rồi. Và tất nhiên hồi đó mình quên sao lưu lại dữ liệu nên là mất hết luôn. Hồi đó mình viết blog tâm huyết lắm. Nay mình sex share lại code cổ nhưng mới không phải cổ. Đó là code chân trang cho blogspot siêu đẹp. Ngày trước năm 2022 ở blog cá nhân cũ của mĩnh lên bài này rồi. Giờ mình reup lại. Hy vọng anh em sẽ thích. Tiếc gì mà không để lại comment và 1 lượt share để mình có động lực lên các bài share tiếp
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%}}
<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>
Nếu bạn muốn chia sẻ lại lên blog bạn thì vui lòng nhớ ghi nguồn.
Copyright © Trick Pro
6 nhận xét