Chia sẻ Code chân trang cho Median UI 1.7

Các bạn đã biết cách tạo chân trang cho blog/blogspot của mình sử dụng template Median UI v1.7 chưa??

Xin chào tất cả các bạn đã quay trở lại với Blogger Của Chỉnh. Mấy ngày off vừa rồi mình đã rip được chân trang trông cực kì ra gì và này nọ. Mình tính để dùng một mình nhưng mình thấy bây giờ khá ít tài liệu cho Median UI 1.7 nên mình chia sẻ cho mọi người:)).

Code mình rip được bên Thành Trương Blog nên nó conf lỗi ở cái form liên hệ chỗ chân trang, mình không biết thông tin nhập vào nó sẽ đi về đâu. Nên để khi nào rảnh mình decor nó lại nhé.

Xàm lìn chém gió

Như mình đã nói ở trên thì chân trang này được mình rip code, code này sử dụng cho template Median UI 1.7 và cái form ở chân trang này chắc chỉ làm màu mình cũng không biết thông tin mà bạn nhập vào nó đi đâu về đâu.

Hướng dẫn

Đăng nhập vào trang blog mà bạn muốn cài đặt (phải sử dụng theme Median UI 1.7 còn các theme khác thì mình không biết)
Chân trang còn sử dụng font awesome v5 nếu bạn nào cài rồi thì thôi còn nếu bạn nào chưa cài thì hãy làm theo mình. Copy link thư viện awesome vào thẻ <html> hoặc thẻ <head>
```
<link href='https://cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css' rel='stylesheet' type='text/css'/>
```
Bạn chọn vào mục Chủ đề, sau đó chọn vào nút mũi tên và nhấn vào Chỉnh sửa HTML

Sau khi vào trang Chỉnh sửa HTML các bạn tìm mã </b:skin> và sao chép mã bên dưới vào bên trên thẻ đó

/* chân trang by Chỉnh rip*/
.cdtIn .HTML{overflow:hidden;text-overflow:ellipsis;width:100%}.footCdt{display:inline-flex;flex-direction:column;width:100%;font-size:95%}.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:#c3c3c3;border-radius:0 4px 4px 0}.nB[theme-dark] .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{margin-top:5px}.col-sm li:before{content:"\f0da";font-family:"Font Awesome 5 Pro";margin-right:6px; opacity: .3}.col-sm a{color:inherit;font-weight: 500}.col-sm a:hover{color:var(--linkC)}.nB[theme-dark] .col-sm a{color:inherit}.nB[theme-dark] .col-sm a:hover{color:var(--darkU)}.footer-col-3{width:25%}.footer-input{border-radius:6px!important;padding:8px 16px!important;margin-bottom:10px}.footer-text{resize:none;padding:8px 16px!important;border-radius:8px!important}.footer-btn{padding:8px 16px!important;font-size:12px;margin:10px 0 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%};}footer.mainF .widget .title::before {background: none !important;width: 0 !important;height: 0 !important;opacity: 0 !important;}

Sau khi xong bạn tìm tới thẻ  và dán code sau dưới thẻ <b:includable id='main'>

    <div class='footer-content'>
<div class='footer-col-1'>
<h3 class='title'>Thành lập và phát triển bởi:</h3>
<div class='footer-logo'>
<img alt='blog-logo' class='blog-logo' src='https://i.imgur.com/rBxno66.png'/>
<h2>Your Name</h2>
</div>
<div class='dmca'>
<p>
                                                        Tất cả bài đăng được bảo vệ bằng <b>DMCA</b>.<br/>
                                                        Nghiêm cấm sao chép dưới mọi hình thức!
                                                      </p>
<a class='dmca-badge' href='https://www.dmca.com/r/jwd5p46' target='_blank' title='Trạng thái bảo vệ DMCA.com'>
<span class='dmca-sample'/>
</a>
<script src='https://images.dmca.com/Badges/DMCABadgeHelper.min.js'/>
</div>
<ul class='footer-link mSoc'>
<li>
<a class='ic op i20' href='https://www.facebook.com/nbchinh.official/' 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'/></svg>
</a>
</li>
<li>
<a class='ic op i20' href='https://www.instagram.com/_ng.bachnh_/' 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 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'/>
<circle cx='23' cy='9' r='1'/>
</svg>
</a>
</li>
<li>
<a class='ic op i20' href='https://twitter.com/chinhnguyendz' 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'/>
</svg>
</a>
</li>
<li>
<a class='ic op i20' href='https://www.youtube.com/@chinhnguyendz' target='_blank' title='Youtube'>
<svg viewBox='0 0 32 32'><g><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z'/><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z'/></g></svg>
</a>
</li>
<li>
<a class='ic op i20' href='https://www.blogger.com/follow.g?blogID=1687042985594357377' target='_blank' title='Blogger'>
<svg viewBox='0 0 32 32'><g><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 d='M22,15H20.44A3.91,3.91,0,0,0,21,13a4,4,0,0,0-4-4H13a4,4,0,0,0-4,4v6a4,4,0,0,0,4,4h6a4,4,0,0,0,4-4V16A1,1,0,0,0,22,15ZM11,13a2,2,0,0,1,2-2h4a2,2,0,0,1,0,4H11Zm10,6a2,2,0,0,1-2,2H13a2,2,0,0,1-2-2V17H21Z'/></g></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.blogger.com/' target='_blank'>Blogger</a></li> <!-- thay đổi liên kết nếu bạn muốn -->
<li><a href='https://median-ui.jagodesain.com/' target='_blank'>Jago Desain</a></li> <!-- thay đổi liên kết nếu bạn muốn -->
<li><a href='https://prismjs.com/' target='_blank'>Prismjs</a></li> <!-- thay đổi liên kết nếu bạn muốn -->
<li><a href='https://search.google.com/search-console/' target='_blank'>Google Fonts</a></li> <!-- thay đổi liên kết nếu bạn muốn -->
<li><a href='https://analytics.google.com/' target='_blank'>Google Analytics</a></li> <!-- thay đổi liên kết nếu bạn muốn -->
<li><a href='https://search.google.com/search-console/' target='_blank'>Google Search Console</a></li> <!-- thay đổi liên kết nếu bạn muốn -->
<li><a href='https://www.cloudflare.com/' target='_blank'>Cloudflare</a></li> <!-- thay đổi liên kết nếu bạn muốn -->
</ul>
</div>
<div class='col-sm'>
<h3 class='title'>Tools</h3>
<ul>
<li itemprop='name'><a href='/p/ma-hoa-code.html' itemprop='url'>Mã hóa code</a></li>
<li itemprop='name'><a href='/p/up-anh-lay-link.html' itemprop='url'>Up ảnh lấy link</a></li>
<li itemprop='name'><a href='/p/tao-url-tu-tieu-de-bai-viet-chuan-seo.html' itemprop='url'>Tạo URL chuẩn SEO</a></li>
<li itemprop='name'><a href='/p/cong-cu-nen-css.html' itemprop='url'>Nén CSS</a></li>
<li itemprop='name'><a href='/p/tao-tep-robot-txt.html' itemprop='url'>Tạo tệp robot.txt</a></li>
<li itemprop='name'><a href='/p/1001-ki-tu-dac-biet-tao-ten-dep.html' itemprop='url'>Kí tự đặc biệt</a></li>
<li itemprop='name'><a href='/p/cong-cu-tao-bang-table-reponsive-html.html' itemprop='url'>Tạo bảng online</a></li>
</ul>
</div>
<div class='col-sm'>
<h3 class='title'>Main category</h3>
<ul>
<li><a href='/search/label/blogger' target='_blank'>Blogger</a></li>
<li><a href='/search/label/programming' target='_blank'>Programming</a></li>
<li><a href='/search/label/seo' target='_blank'>SEO</a></li>
<li><a href='/search/label/study' target='_blank'>Study</a></li>
<li><a href='/search/label/review' target='_blank'>Review</a></li>
<li><a href='/search/label/tutorial' target='_blank'>Tutorial</a></li>
</ul>
</div>
<div class='col-sm'>
<h3 class='title'>Sub category</h3>
<ul>
<li><a href='/' target='_blank'>Blog</a></li>
<li><a href='/p/about.html' target='_blank'>About</a></li>
<li><a href='/p/contact.html' target='_blank'>Contact</a></li>
<li><a href='/p/sitemap.html' target='_blank'>Sitemap</a></li>
<li><a href='/p/privacy.html' target='_blank'>Privacy</a></li>
<li><a href='/p/disclaimer.html' target='_blank'>Disclaimer</a></li>
<li><a href='/p/donate.html' target='_blank'>Donate</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='Email của bạn' type='text' value=''/>
<textarea class='footer-text contact-form-email-message' cols='30' id='ContactForm1_contact-form-email-message' name='email-message' placeholder='Nhập nội dung' rows='5'/>
<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 class='contact-form-success-message' id='ContactForm1_contact-form-success-message'/>
</div>
</form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'/>
<script>//<![CDATA[
                                                    if (typeof(BLOG_attachCsiOnload) != 'undefined' &amp;&amp; BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1687042985594357377';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1687042985594357377','//https://bloggercuachinhbeta.blogspot.com//','1687042985594357377');
                                                    _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': '1687042985594357377', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
                                                    //]]></script>
</div>
</div>

Thay đổi các mã mà mình đánh dấu thành các liên kết, nội dung của Blog của bạn hoặc các nội dung mà bạn thích

Code chân trang không có logo và contact form

Mở để xem nội dung

Tập lệnh này cũng ít người dùng do nó không hiển thị logo của blog để ấn tượng cho khách hàng

<div class="footerContent">
  <div class="footerCol-1">
    <div class="createBy"><i class="far fa-edit"></i> Create By</div>
    <h3 class="footerName">
      Yourname
      <span> .domain</span>
    </h3>
    <p>
      All posts are protected by <b>DMCA</b>.<br/>
      Reproduction in any form is strictly prohibited!
    </p>
    <a href="link-dmca" title="DMCA.com Protection Status" class="dmca-badge" target="_blank">
    <span class="dmcaSample"></span></a>  
    <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"></script>
  </div>
  <div class="footerCol-2">
    <div class="colSm-1">
      <h3 class="title">Partner</h3>
      <ul>
        <li><a href="link-partner-1" target="blank"><i class="fal fa-angle-double-right"></i> Partner 1</a></li>
        <li><a href="link-partner-2" target="blank"><i class="fal fa-angle-double-right"></i> Partner 2</a></li>
        <li><a href="link-partner-3" target="blank"><i class="fal fa-angle-double-right"></i> Partner 3</a></li>
      </ul>
    </div>
    <div class="colSm-2">
      <h3 class="title">Contact</h3>
      <ul>
        <li><a href="link-contact-1" target="blank"><i class="fal fa-angle-double-right"></i> Contact 1</a></li>
        <li><a href="link-contact-2" target="blank"><i class="fal fa-angle-double-right"></i> Contact 2</a></li>
        <li><a href="link-contact-3" target="blank"><i class="fal fa-angle-double-right"></i> Contact 3</a></li>
      </ul>
    </div>
    <div class="colSm-3">
      <h3 class="title">Powered</h3>
      <ul>
        <li><a href="link-powered-1" target="blank"><i class="fal fa-angle-double-right"></i> Powered 1</a></li>
        <li><a href="link-powered-2" target="blank"><i class="fal fa-angle-double-right"></i> Powered 2</a></li>
        <li><a href="link-powered-3" target="blank"><i class="fal fa-angle-double-right"></i> Powered 3</a></li>
      </ul>
    </div>
  </div>
</div>

.cdtIn .HTML{overflow:hidden;text-overflow:ellipsis;width:91%} 
.footCdt{display:inline-flex;flex-direction:column;width:100%}
.footerContent{display:flex;margin-bottom:10px}
.footerCol-1{width:40%;margin-right:10px}
.footerCol-1 p {opacity:.8;font-size:12px}
.footerCol-1 .createBy{opacity:.8}
.footerCol-1 .footerName{font-size:23px;font-weight:700} 
.footerCol-1 .footerName span{font-size:15px;font-weight:400;opacity:0.8}
.footerCol-1 .dmcaSample{font-size:9px;color:rgba(254,254,254,.6);border-radius:3px;overflow:hidden;line-height: 30px} 
.footerCol-1 .dmcaSample:before{content:'DMCA';padding:6px 10px;background-color:#2a2a2a;border-radius:4px 0 0 4px} 
.footerCol-1 .dmcaSample:after{content:'Protected';color:#202442;padding:6px 10px;background-color:var(--linkC);border-radius:0 4px 4px 0} 
.footerCol-1 .dmcaSample:hover{opacity:0.8}
.footerCol-2{width:60%;display:flex}
.footerCol-2 > *{width: 33.333%}
.footerCol-2 ul{list-style:none;padding:0}
.footerCol-2 li{margin-bottom:10px;border-radius:3px}
.footerCol-2 li a{color:inherit}
.footerCol-2 li a:hover{color:var(--linkC)}

.drK .footerCol-1 .dmcaSample:after{background:var(--darkU)}
.drK .footerCol-2 li a{color:inherit}
.drK .footerCol-2 li a:hover{color:var(--darkU)}

@media screen and (max-width:640px){
  .footerContent{flex-direction: column}
  .footerCol-1{width:100%; margin-bottom:10px; margin-right:0}
  .footerCol-2{width:100%}
  .cdtIn{flex-direction:column;align-items:flex-end;}
}

Source code:
https://www.phamvanlinh.xyz/2021/11/huong-dan-cach-them-chan-trang-cho.html

Lời kết

Như vậy mình đã hướng dẫn xong các bạn cách tạo chân trang cho Median UI 1.7 rồi. Chúc các bạn thành công

Source code mình rip:
https://www.thanhtruongblog.com/

Tham khảo thêm :

Life is not fair - get used to it!

Blogger Của Chỉnh

Bình luận

Thông báo

Chia sẻ Code chân trang cho Median UI 1.7

Xàm lìn chém gió

Hướng dẫn

Code chân trang không có logo và contact form

Lời kết

Nhúng video từ Youtube

Chia sẻ Code Widget Thông Báo cho Median UI 1.7

Đặt liên kết bạn bè phát triển blog

Share code widget bạn bè cho blogspot

Template Median UI v1.7 (Edit)

CH1NHBX CO.

Partner

Tools

Main category

Sub category

Bình luận

Thông báo

Chia sẻ Code chân trang cho Median UI 1.7

Xàm lìn chém gió

Hướng dẫn

Code chân trang không có logo và contact form

Lời kết

3 nhận xét