Hello everyone, during this post i will be able to share that how to design custom footer in Blogger Template. We've been asked for this tutorial by many Median UI users. That's why I'm sharing this post.
Usually, a reasonably simple footer is provided by default in the Median UI and Plus Ui blogger template. Which many users don't like at all. That's why we are sharing a tutorial on designing a custom footer.
This tutorial is merely for Median UI v1.6 user and fletro pro. Please follow all the steps mentioned within the post and read this post till the end.
How to Add Custom Footer :-
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you'll be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the subsequent CSS Codes just above to it.
/* Footer */ footer{font-size:13px;line-height:1.8em;color:var(--fotT);padding:40px 0 20px} .footer{padding:20px;background:var(--fotB);box-shadow: 0 5px 35px rgba(0,0,0,.1);border-radius:10px} footer ul{list-style:none;margin:0;padding:0} footer a{color:var(--fotT)} .drK footer a{color:var(--darkT)} footer .credit a{overflow:hidden;text-overflow:ellipsis} footer .credit a svg{width:13px;height:13px;padding-top:3px} .cdtIn{display:flex;align-items:center;justify-content:space-between; position:relative;width:calc(100%);left:0;right:0} .cdtIn >*{margin:0 0} .cdtIn .HTML{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .cdtIn .PageList{flex-shrink:0;position:relative} .cdtIn .mSoc{display:flex;justify-content:flex-end} .fotCd{position:relative; display:inline} .fotCd .creator{opacity:0;position:absolute;left:0;bottom:-22px} .ftL{display:flex;align-items:center;justify-content:flex-end; position:relative;width:calc(100% + 8px);left:-4px;right:-4px} .ftL >*{margin-right:8px} .ftL svg{width:20px;height:20px;stroke:var(--fotT)} .ftL svg.u{width:14px;height:14px} @media screen and (min-width:641px){.ftL{display:none} .ftMn, .ftMn li{display:inline-flex;align-items:baseline} .ftMn >*:not(:last-child)::after{content:'\00B7';opacity:.7;margin:0 10px} .ftMn span{opacity:.6} .ftMn a{opacity:.8} .ftMn a:hover{color:var(--linkC)}} @media screen and (max-width:640px){.cdtIn{align-items:center} .cdtIn .PageList{margin-left:auto} .cdtIn .mSoc >*:nth-child(4){display:none} .ftMn{position:absolute;bottom:0;right:4px;width:180px;background:var(--contentB);box-shadow:0 5px 25px -3px rgba(0,0,0,.1);font-size:14px;transition:var(--trans-1);border-radius:16px 16px 5px 16px;z-index:2;opacity:0;visibility:hidden} .ftMn li >*{display:block;padding:8px 15px; overflow:hidden;text-overflow:ellipsis; opacity:.8; line-height:normal} .ftMn li:first-child >*{padding-top:15px} .ftMn li:last-child >*{padding-bottom:15px} .ftI:checked ~ .ftMn, .ftI:checked ~ .fCls{opacity:1;visibility:visible;z-index:12} .ftI:checked ~ .fCls{z-index:11}}
Conclusion :-
We have shared for blogger template user how to create custom footer in template and all the code used in it. I hope this manner to create custom footer in blogger template can be very useful for you and your blog. Many Thank you for visiting our website.
Thanks for reading: How To Add Plus Ui Like Footer Credit On Blogger!, Sorry, my English is bad:)