Median UI Responsive Blogger Template

Introducing the new template from Jago Design. Median UI is designed with a dashboard UI concept, the template is recommended for use on news blogs, a design that is simpler but has a high level of readability is a plus point for this template.

The menu display is also made different from other templates, we use the concept of 3 columns in this theme, where the first column is devoted to the navigation menu which can minimize the width of the navigation. At first glance, this template looks like a web app that makes your blog look more different from other blogs. This concept is also used by large websites such as Google Adsense, Google Drive and so on.

Not only that, we also maximized the mobile appearance to make it look more modern by moving the navigation menu to float below the screen. This optimization makes the template look like a mobile app, this is so that users can focus more on reading content on the blog.

We are not saying this template is perfect, therefore this template will be updated regularly based on user suggestions and input. Your input means a lot to us, write your assessment of this template or report a bug in the comments column.

Prevew Template

In this template we experimented with applying dashboard elements to the blog which ultimately gave birth to Median UI. This template is recommended for blogs with news themes or mixed themes, but that doesn't mean it's not suitable for other niches.

We got this inspiration from the appearance of several well-known websites such as Google Adsense and Google Drive as well as from several UI elements that we found on Dribbble. Supported by simpler and more harmonious icons, this template feels like the interface of an application, providing a more comfortable and less boring article reading experience.
Features and Advantages

Advantages of Median UI

We applied several of the advantages of the Fletro template to this theme, the difference is that we overhauled the appearance of the theme to produce something new

100% SEO Friendly

This template has passed an SEO audit with satisfactory results as in the screenshot below:

The meta tags in the template are arranged more neatly so they are easy to edit, the addition of several schemas such as Breadcrumbs, Comments and others makes it easier for search engine robots to identify the content structure on blogs, this is very good, especially as it can make blog content appear faster in search results.

All template makers never guarantee that your blog will immediately be on the first page of search results after using their template, problems that arise in the search console such as being indexed even though it is blocked by robot.txt or so on are beyond the control of the template maker, even well-known blog templates also experience this. the same one.

Prioritize content

The framework structure of the template is arranged by prioritizing content or articles rather than other parts of the template. How do we do it? The way search engines work when indexing content on a blog is to render it from top to bottom of the HTML template structure. What we do is adjust the order of elements in the template by moving the content section to the top of the template and moving other elements such as sidebars and navigation to the bottom so that the The first thing rendered by search engines is blog content.

To prove this, try reloading this page and pay attention in detail. You will find that the first part that appears on this page is the main article, followed by the sidebar and navigation menu which are loaded last after the content section is finished.

Easier to customize

Designed to be easier to customize via the Blogger Theme Designer, you can freely change the color, width and font on this template. You can even change the Dark mode/Night mode color on this template at any time without having to bother editing the template HTML

Disadvantages of Median UI

There is only one drawback to most responsive or dynamic templates, namely that you cannot edit the navigation menu in the Blogger Layout, you have to edit the navigation menu in the Edit HTML template.

Adding or changing links will be more difficult for those of you who don't understand HTML, this is because most of the SVG icon code is written longer, making it a little confusing for those who don't understand HTML.

But we will provide as easy as possible directions for you to make it easier to edit the navigation menu in this template.

Main feature

Dark mode/Night mode

One of the characteristics of our template is the night mode feature, we will continue to maintain it in other templates. The main function of this feature is to change the background color of the template to a darker color so that the content is easier for users to read at night.

Adaptive templates

Instead of creating responsive template elements, we prefer to create elements that can adapt to the screen width when the blog is opened. This template will automatically adjust its appearance when the screen size is reduced.

The difference with responsive is that sometimes the layout of the elements in a responsive template looks forced when appearing on mobile. In this template the layout will automatically change on the mobile display, such as the navigation menu moving down and other elements changing automatically.

Adjustable thumbnail width

Different from Fletro, the thumbnail images in this template can adjust to the screen size without changing the image size or making the image disproportionate.

We tried experimenting and managed to find a way to make images fit automatically without changing the height or width in CSS. We use an aspect ratio on images so that the size will not change when the screen is reduced. Another advantage of this feature is that you don't need to worry about the standard size of the image on the template, whatever the width and height of your image, it will automatically match the size of the thumbnail image, especially on the homepage.

SVG Icons

The icon is the lightest and most stable among other types of icons, and it is easier to change the color than third party icon providers such as font awesome and so on.

Although it is a little more difficult to use than the party icon. However, in terms of blog loading, SVG is much better than font awesome. One of the advantages is that the icon style is not monotonous, you can use one icon from an icon pack and then take another icon from another source, especially now that there are lots of SVG icons that are distributed for free.

Modify Blogger's default comments

We modified Blogger's default comments by adding a Comment schema, as well as adding a lazy effect to images. Previously, if you tested the page speed of content with lots of comments, you would find that the images in the comments would also be indexed and slow down the loading of the blog.

Because of that, we added a lazy effect so that comment images are not indexed, not only that, the size of the comments in the comments has also been changed to be larger so that they can match the comment style in this template. Now users will not be able to add active links to comments, all external links in comments including blogger profile links will be deleted automatically

Demos

To see other features and advantages, you can see them directly on the demo blog, provide input regarding the features of this template or suggest additional features that you want to add to this template via the comments column below.

Demo Buy now

Full support

Free support is valid for 1 month from the date of purchase if there are difficulties in using it or there are errors in the template that has been purchased.

Support does not apply if:

• Request to modify the template, such as adding or removing features or changing the appearance of the template
• Illegal template users
• Templates that have been modified by yourself
• It has been more than 1 month since the date of purchase