How To Add Plus Ui Like Footer Credit On Blogger!

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.

First Of All  remove Your Recent Footer Credit Css. Than Past This Css

/* 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}}

Step 6: Now search the code Footer section and paste the subsequent Html Codes just to it.

Please First of all remove your recent Footer Section code. Than Past This Footer Section Code

Copy Footer section code Here

Step 7: Finally, Do not Forget To Click on Save and See The Result.

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.