Hướng dẫn tùy chỉnh chân trang template Median UI v1.6
Hướng dẫn này chỉ dành cho người dùng Median UI v1.6. Vui lòng làm theo tất cả các bước được đề cập trong bài đăng và đọc bài đăng này cho đến cuối.
Xin chào mọi người, trong bài đăng này, tôi sẽ chia sẻ cách thiết kế chân trang tùy chỉnh trong Mẫu giao diện Median UI v1.6. Chúng tôi đã được nhiều người dùng Median UI yêu cầu hướng dẫn này. Đó là lý do tại sao tôi chia sẻ bài đăng này.
|
| Hướng dẫn tùy chỉnh chân trang template Median UI v1.6 |
Thông thường, một chân trang khá đơn giản được cung cấp theo mặc định trong mẫu blogger Giao diện Median UI v1.6. Điều mà nhiều người dùng không thích chút nào. Đó là lý do tại sao chúng tôi chia sẻ hướng dẫn thiết kế footer tùy chỉnh. Nếu bạn chưa tải xuống Median UI v1.6, liên kết được cung cấp bên dưới, bạn có thể tải xuống mẫu này.
Hướng dẫn này chỉ dành cho người dùng Median UI v1.6. Vui lòng làm theo tất cả các bước được đề cập trong bài đăng và đọc bài đăng này cho đến cuối.
Cách thêm chân trang trong giao diện Median UI v1.6: -
Bước 1 :- Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.
Bước 2 :- Trên Trang tổng quan Blogger, nhấp vào Chủ đề .
Bước 3 :- Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy Chỉnh' .
Bước 4 :- Nhấp vào Chỉnh sửa HTML , bạn sẽ được chuyển hướng đến trang chỉnh sửa.
Bước 5 :- Sau đó tìm Mã Css Dưới đây
/* Footer */ footer{font-size:97%;line-height:1.8em; padding:30px 0; border-top:var(--fotL) solid var(--contentL); color:var(--fotT); background:var(--fotB)} .cdtIn{display:flex;align-items:baseline;justify-content:space-between; position:relative;width:calc(100% + 20px);left:-10px;right:-10px} .cdtIn >*{margin:0 10px} .cdtIn .HTML{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .footCdt{display:inline-flex} .footCdt .creator{opacity:0} .tTop svg{width:20px;height:20px;stroke:var(--fotT)} .toTop{display:flex;align-items:center; white-space:nowrap} .toTop::before{content:attr(data-text); opacity:.7;margin:0 5px} .toTopF{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;background:var(--linkB);position:fixed;bottom:20px;right:20px} .toTopF svg{stroke:#fffdfc;stroke-width:2}
Bước 6 :- Sau đó đặt mã Css sau lên trên
/* Footer By iTeam OS */ footer{padding:40px 0 0;background-color:var(--fotB);color:var(--fotT);font-size:95%;line-height:1.8em;box-shadow: 0 0 15px rgb(0 0 0 / 7%);border-radius:10px;margin-left:20px;margin-right:20px;margin-bottom:20px}footer .widget{margin-bottom:35px}footer .widget ul{list-style:none;margin:0;padding:0}footer .footerContent{display:flex;flex-wrap:wrap;padding:0 25px}footer .footerContent>:first-child{width:25%;margin-right:auto}footer .footerContent>:last-child{width:30%;margin-left:auto}footer .footerContent>*{width:18%}footer .footerContent .title{color:inherit;margin-bottom:12px;font-size:15px;font-weight:600}footer .footerContent .title:after{display:none}footer .LinkList a{display:inline-flex;align-items:center;color:inherit;line-height:24px}footer .LinkList a svg.line{width:15px;height:15px;margin-right:15px}footer .aboutUs{margin-right:25px}footer .aboutUs .titleText:before{content:attr(data-text);font-size:13px;opacity:.6;display:block;margin-bottom:5px}footer .aboutUs .aboutDesc{margin:20px 0 0;line-height:1.5em}footer .aboutLinks{display:flex;align-items:flex-start}footer .aboutLinks li:not(:last-child){margin-right:5px}footer .LinkList .aboutLinks a svg.line{width:20px;height:22px;margin-right:0;stroke:var(--iconCa);stroke-width:1.5}.drK footer .LinkList .aboutLinks a svg.line{stroke:var(--darkT)}footer .LinkList .aboutLinks a{display:flex}@media screen and (max-width:896px){footer{padding:40px 0 3rem;margin-bottom:0px;margin-left:0px;margin-right:0px}}@media screen and (max-width:640px){footer .footerContent>*,footer .footerContent>:first-child,footer .footerContent>:last-child{width:50%}}@media screen and (max-width:480px){footer .creditInner{font-size:12px}footer .footerContent>*,footer .footerContent>:first-child,footer .footerContent>:last-child{width:100%}footer .footerContent>:nth-child(1){order:1}footer .footerContent>:nth-child(2){order:2}footer .footerContent>:nth-child(3){order:3}footer .footerContent>:nth-child(4){order:4}}
Bước 6 :- Sau đó đặt mã Html bên dưới ngay bên trên <!--[ Credit ]-->
<!--[ Footer content ]-->
<div class='footerContent'>
<b:section id='footer-widget-1' maxwidgets='2' showaddelement='true'>
<b:widget id='HTML001' locked='true' title='About' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><div class='aboutUs'>
<div class='aboutTitle'>
<div class='titleText' data-text='Made with help by'>
<h3>iTeam OS</h3>
</div>
<!--[ Delete comment tag on section bellow and change data-src='#' attribute with your logo url ]-->
<!-- <img class='lazy' alt='STW' data-src='#' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/> -->
</div>
<p class='aboutDesc'>Do you have any creativity? Its never too early or late to show it!</p>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
<b:widget id='LinkList69' locked='true' title='Social Media Link' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-3'>/</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-4'>/</b:widget-setting>
<b:widget-setting name='text-1'>Instagram</b:widget-setting>
<b:widget-setting name='link-1'>/</b:widget-setting>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='link-2'>/</b:widget-setting>
<b:widget-setting name='text-3'>Youtube</b:widget-setting>
<b:widget-setting name='link-0'>/</b:widget-setting>
<b:widget-setting name='text-2'>Twitter</b:widget-setting>
<b:widget-setting name='text-4'>LinkedIn</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='aboutLinks'>
<b:loop values='data:links' var='link'>
<li>
<a class='link' expr:aria-label='data:link.name' expr:href='data:link.target'>
<b:if cond='data:link.name == "Facebook"'>
<b:include name='facebook-icon'/>
<b:elseif cond='data:link.name == "Instagram"'/>
<b:include name='instagram-icon'/>
<b:elseif cond='data:link.name == "Twitter"'/>
<b:include name='twitter-icon'/>
<b:elseif cond='data:link.name == "Youtube"'/>
<b:include name='youtube-icon'/>
<b:elseif cond='data:link.name == "LinkedIn"'/>
<b:include name='linkedIn-icon'/>
<b:elseif cond='data:link.name == "Pinterest"'/>
<b:include name='pinterest-icon'/>
<b:elseif cond='data:link.name == "Whatsapp"'/>
<b:include name='whatsapp-icon'/>
<b:elseif cond='data:link.name == "Telegram"'/>
<b:include name='telegram-icon'/>
<b:elseif cond='data:link.name == "Tiktok"'/>
<b:include name='tiktok-icon'/>
<b:else/>
<b:include name='circle-icon'/>
</b:if>
</a>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-2' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList02' locked='true' title='Company' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='shownum'>2</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Contact</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='text-0'>About</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<b:include name='arrow-right-icon'/>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-3' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList03' locked='true' title='Product &amp; Service' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Other Product</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='text-0'>Blogger Theme</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<b:include name='arrow-right-icon'/>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section id='footer-widget-4' maxwidgets='2' showaddelement='true'>
<b:widget id='LinkList04' locked='true' title='Support' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Documentation</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='text-0'>Contact</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li>
<a expr:href='data:link.target'>
<b:include name='arrow-right-icon'/>
<span><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Bước 7 :- Cuối cùng, Đừng Quên Click vào Lưu và Xem Kết quả
Vào bố cục để thay đổi link và nội dung chân trang
Xem trước chân trang giao diện Median UI v1.6 :-
Tôi đã kiểm tra thiết kế của chân trang bằng tất cả mã này. Sau đó, chúng tôi đã tạo bản xem trước hình ảnh này. Chúng tôi không thể cung cấp bản xem trước web của nó nên chúng tôi đã cung cấp bản xem trước hình ảnh của nó để cho bạn xem.
 |
| Source : https://iteamos.blogspot.com |
Kết luận :-
Chúng tôi đã chia sẻ cho người dùng mẫu blogger giao diện Median UI v1.6 cách tạo chân trang tùy chỉnh trong mẫu và tất cả mã được sử dụng trong đó. Tôi hy vọng cách này để tạo chân trang tùy chỉnh trong Mẫu blogger giao diện Median UI v1.6 có thể rất hữu ích cho bạn và blog của bạn. Cảm ơn bạn đã ghé thăm trang web của chúng tôi.
Source: iTeam OS
Truy cập Bypass Google Account APK để tải file APK nhé
Tham gia cuộc trò chuyện