Update Template Fletro Pro v5.4

Update Fletro Pro v5.4

After being delayed previously, the update to the fletro template has been completely completed. Since a lot has been changed in this latest version (v5.4) we are working harder to change this template along with 4 other versions, in general this change focuses more on the appearance of the template and removing some unnecessary widgets to make the template lighter.

One of the most prominent is to restore the mobile navigation display like the previous version (v5.2) because in version 5.3 the empty mobile navigation display without social media buttons is considered less attractive.

What are the latest updates in version 5.4?

Below is a list of changes applied to the latest version of the Fletro Pro template

Returns the mobile navigation menu to the previous version

The first thing we change in this update is that the mobile navigation menu is what it was, in version 5.3 the mobile navigation display looks empty coupled with the removal of social media buttons making it look not at all attractive.

For this reason, in this update we added social media buttons on desktop and mobile displays so that the navigation menu looks more lively, not only that the dark mode icon that was previously in the show / hide box has been moved next to the search button to make it easier to access.

Added the text ‘Grid mode’ to the grid button, to confirm that it is a clickable button

There are still many who do not know or do not understand that the icon to the right of the sentence ‘Latest Post’ is an icon to change the appearance of the post to a grid, maybe because it is small so it seems that the icon is only an accessory and cannot be clicked.

The text ‘Grid mode’ was added to emphasize that the icon is clickable and has an important function to change the appearance of the article, we also changed the css in the previous grid mode:

column-count: 2;column-gap: 20px;// Menjadidisplay: grid;grid-template-columns: 1fr 1fr;column-gap: 20px;

This serves to change the order in which the articles were placed that were previously descending(vertical) become sideways(horizontal)

Change the image size format on thumbnails that automatically adjusts the aspect ratio

In the previous version we used min-height or the minimum height size in the thumbnail image box, but when the image height size does not reach the specified minimum height there will be empty space and it is less comfortable to see.

Now we resize the image according to the aspect ratio so the image size will always fit even if the size is not the same. We also apply this to the Median UI template

Change the table of contents format to pure CSS and HTML

Most of the ‘Table for content’ or what is known as the table of contents uses javascript to activate the show / hide feature, almost all tutorials circulating on Google use the same concept. This is not wrong, it’s just that it makes this feature unusable on AMP templates as it is known that javascript is invalid on AMP

In addition, writing long javascript is also confusing, especially for people who are not new to coding. In this version we experiment with making use of tags and CSS as a substitute for javascript, the result is now the writing of the ‘table of contents’ code is simpler and of course it can be used in AMP templates

Change the script code in the related post / related article

Lots of feedback comes in which says that the picture on the related post doesn’t appear. We also don’t know where the problem lies because on the fletro demo blog there are no problems at all related to this.

We do not guarantee this helps or not, but we have changed the related post script to use a standard script that is obtained in tutorials spread on Google and after testing there are no problems with the related post on the demo blog.

Because the script has been changed, the style automation can be used only 1, in other words This article is no longer relevant to this template. If there are still problems with the image related to your blog post, we are sorry we can’t help more.

Deletion of multiple widgets

Because it is considered not useful whatsapp chat widget is removed in this update, this widget is more suitable for use on blogs or websites that provide services, services or products sold. Another reason is privacy, not a few blog writers prefer to hide their identity or contact information to maintain their privacy. Blogger has provided a Contact widget that helps users contact the admin / blog author.

Other widgets that were removed were ‘BlogArchive’ and ‘Label’ on the horizontal menu. On this tutorial You can choose to display the horizontal menu manually or automatically by using the ‘Label’ widget. In this update, some of the tutorials are no longer relevant, now you can only display the horizontal menu manually or edit the links one by one.

Remove color gradations in the header and navigation menu

This bug is only visible when the blog is opened on the Safari browser or iPhone, and there is no problem with Android smartphones or most other browsers. When the blog is opened via the iPhone, a black line will appear on the mobile navigation menu as shown

Fletro template bugs

This is most likely because the safari browser (which is used on the iPhone) does not support CSS code background-image: linear-gradient (…);To fix this we removed all the gradient colors on the included template this tutorial which became irrelevant

Fixed the bug that the page was not responsive over the width of the content

This bug only occurs in the Fletro 3 Column version and has never happened in the standard version, to be precise on the Recent Post widget. In the mobile view the list of articles on this widget is displayed horizontally with scrolling, for webmasters this is considered unresponsive because the element exceeds the width of the template.

Fixed the bug that the header logo image was not showing on the AMP version

In the AMP version we have replaced the tag on the header becomes but somehow the image didn’t appear in the header, and apparently the problem was with the artibut layout = “responsive” in the image, if you are still using an old version and want to fix this problem please replace it layout = “responsive” Becomes layout = “intrinsic” on your blog.

Separate scripts for ad middle, top and bottom of the article

In the previous version the script for the ad widget was combined into one so that when one ad slot / widget was removed it would affect other widgets. In this update, we separate the script one by one so that when the ad widget is removed it will not affect other ad widgets.

Problem installing templates

In this update, we changed some widget IDs such as ‘Blog1’ which was changed to ‘Blog00’ and others, the goal is to make it easier for the user to identify which widget is the default template and which are the additional widgets.

Because of these changes, when you install the normal way, upload the .xml file directly, it is likely that there will be a duplicate widget or an error in the ‘FeaturedPost0’ widget.

To fix this, install the widget by copying all the code and pasting it on your blog, the details are as follows:

  • In the template .xml file Right Click> Open with> Notepad
  • Press ctrl + a then copy all the code in the .xml file
  • On Blogger select Themes> Edit HTML
  • Press ctrl + a then paste all the code from the .xml file before it, just press it ctrl + v

Problems with disqus comments that disappear after updating

For users of disqus comments, after updating the template, existing disqus comments will disappear. Precisely on the mobile view (on the desktop there is no problem), the main cause is the url ? m = 1 on the template.

To fix this, please add the script below before the tag :

<script> var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1")); window.history.replaceState({}, document.title, clean_uri);} </script>

Give feedback

Only this is for this update, hopefully it will be useful, if you have suggestions or input, please add them in the comments column