How to Redesign Median UI Blogger Template Sidebar ?

How to Redesign Median UI Blogger Template Sidebar ?  - Median UI is one of the best blogger templates designed by Muhammad Maki, the owner of the Good Design blog.

This template has taken a lot of attention from bloggers. So that many bloggers want to have this cool template.

Many have redesigned this template with a more attractive appearance. One of the blogs that uses the Median UI redesign template is this blog.

I made a few changes to the look of this template even though they weren't too flashy. One of the changes I made was in the sidebar.

I added a background to the sidebar widget so that it looks cooler (in my opinion). Here I will share the method for you.

How to Redesign Median UI Template Sidebar ?

Here are some ways to redesign the sidebar of the blog using the Median UI template to make it look cooler than the original version.

Popular Posts Widget Redesign

Please find the following CSS code in the HTML edit of your blog template.

.PopularPosts{counter-reset:popular-count}

Then replace the code above with the following CSS code.

.PopularPosts{counter-reset:popular-count;background-color: #fefefe;padding: 15px;border-radius: 8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07)}
.dark-mode .PopularPosts{background-color:#252526}

Profile Widget Redesign

Please find the following CSS code in the HTML edit of your blog template.

.Profile .solo{display:flex;align-items:center;flex-direction:row;position:relative;border-radius:4px;overflow:hidden}

Then replace the code above with the following CSS code.

.Profile .solo{background-color:#fefefe;padding: 15px;display:flex;align-items:center;flex-direction:row;position:relative;border-radius:8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07);overflow:hidden}
.dark-mode .Profile .solo{background-color:#252526}

Label Widget Redesign

Please find the following CSS code in the HTML edit of your blog template.

/* Widget Label */

Then replace the code above with the following CSS code.

.Label{background-color:#fefefe;padding:15px;border-radius: 8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07)}
.dark-mode .Label{background-color:#252526}

Until it becomes like this

/* Widget Label */
.Label{background-color:#fefefe;padding:15px;border-radius: 8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07)}
.dark-mode .Label{background-color:#252526}

Once you have done all the steps above, do not forget to Save your blog theme.

Note :  I'm using the Median UI v1.4 template for this guide. If you are using another version, maybe the CSS code will be slightly different.

If you have done the above method correctly, the appearance of your popular post widget, profile widget and your blog label widget will be the same as this blog.

You can also change the appearance of other widgets both in the sidebar and in other sections. The method is the same as above.

If you want to request how to redesign parts of the blog template, please write in the comments column or send a message to the contact page of this blog.

How to Redesign Median UI Blogger Template Sidebar ?

Refrence :
Smart Tech Carry

Go to Link

Rate This Article

Thanks for reading: How to Redesign Median UI Blogger Template Sidebar ?:)

Conclusion

In this article, I have shared How to Redesign Median UI Blogger Template Sidebar ?. I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!