Twist Blogger - Premium Blogger Tutorials

Optimize FontAwesome Icons To Improve Web Performance - Blogger

cons are an integral part of web designing. They make designing process a lot easier and quicker. Long gone are those days where individual icons were represented via an image. Now, its time for web fonts.

One such web font is Font Awesome, which was initially released back in 2012 by Dave Gandy. Font awesome icons gained a huge popularity in short span of time because they are easy to use and are infinitely scalable, so you do not need to worry about device size. Also, all kinds of icons are readily available for use.

How do you add Font Awesome Icons in your website? It is super easy. Add a css file and call them on demand. You can check here for the process. However, this is not the subject of our article. We are trying to optimize font awesome icons to a very small size.

Why you need to optimize font awesome icons?

A straightforward answer: Web Performance. With the addition of font awesome icons set, we have the flexibility to use more than 1500 icons. However, most of us never use more than 20 to 30 icons. There is no benefit in loading all icons when we need only 1 or 2 percent of them.

Moreover, Font Awesome is a huge file (>120KB). It includes web fonts (90KB) and minimized CSS version (30KB). That is sure to hurt web performance during pageload.

Though font awesome icons are cached by web browsers since many website use it, we need to think of new first-time visitors who do not have font awesome cached in their browsers.

How to Defer Offscreen images: Lazy load images in blogger

ecently I was trying to optimize my blogger’s pagespeed by implementing the recommendations from Pagespeed Insight, and I noticed the term “Defer OffScreen Images” or lazy-loading of images. This article will highlight this section.

Offscreen images are those which are present below the fond or those images that do not lie in the screen when a page loads. Since users can't see offscreen images when they load a page, a good mechanism to improvise pagespeed can be to load those images after a page is loaded. Do browsers follow this mechanism by default? Sadly No!

Browsers download and load all image files at once, causing a huge usage of bandwidth and slow page performance. So, how to overcome this? A single solution: Lazy loading of Images.

Lazy loading of images means to load image files on demands dynamically. In this tutorial, I will explain on how to lazy load images in blogger and how these impacts page speed.

Responsive Floating Social Share Widget For Blogger | Light-Weight Plugin

One of the best way to increase traffic is to promote contents on social medias and what can be better than adding a responsive floating social share widget that floats on the same position when scrolled, does not require API calls, is light-weight and perfectly customized to meet the template design.

Floating social share plugin makes the task easier for readers to share your contents on different social platforms.

In this tutorial, we are going to share light-weight floating social buttons for blogger that stays at the bottom of screen on mobile devices.

It is easy to install floating social share plugins in Wordpress, however same task takes little more effort in blogger platform. Panic? Relax, remember divide and conquer. Let's check out some features of this share widget for blogger.

Features Of Responsive Floating Share Buttons

Clean and Elegant Design.
Super light-weight JQuery plugin.
Responsive Design -- plugin moves to the bottom of screen on mobile.
Floats on the same position when scrolled.
No external API calls.
No tracking and bloats.
Supports 9 social channels.
Super easy to install in blogger.
Beautiful animation on hover.
Appears on scroll & Disappears on reaching the end of post.
Two versions available - Circle and Square.

Supported social media services

This floating share widget supports 9 different social networks. Choice is yours !

Facebook
Twitter
Linkedin
Reddit
Tumblr
Mix (Stumbleupon)
Email
Pinterest
Whatsapp

How to Add Attractive Custom Error Page (404) in Blogger?

When an user visits a page in your domain that is no longer available, either because the page no longer exists or the address mismatched, then he/she is redirected to a page named an Error Page or simply a 404 page.

For bloggers' default templates, there is a generic message "Sorry, the page you were looking for in this blog does not exist" for error pages. The error page design is lame, a grey box with above message, that definitely do not encourage users to navigate other areas of your site or help them to find what they are looking for.

In this tutorial, I'll be guiding you on how to customize bloggers' error pages or 404 pages and make them attractive. Let's check some cool features of our customized error pages.

Features of attractive custom error page for blogger

Highly animated.
Stylish Design.
Surprised Animated Cartoon with Pure CSS.
404 animated counter with javascript.
A button that redirects users to homepage.
Full-width Error page.
Catchy Page Title

Add Professional Multi-Author Box With Social Icons In Blogger

Are you an author of a blog? Do you want to show credentials at the end of blogger posts for articles you publish? If yes, I have shared this professional multi-author box with social icons for you.

An author box widget is a descriptive box that displays information about the content owner. Nowadays, many premium blogger templates have in-built responsive multi-author box because it is a feature that most bloggers want to have.

So, why bloggers want to display author box below blogger posts? Two simple reasons:

To get exposed: Readers who enjoy reading articles are keen to know about the writer. And adding author box helps them to learn more about you.

To attract content writers: Guest bloggers are seeking for getting exposed and building backlinks, and having an author box makes the job done.

Blogger.com has an embedded feature that shows author name. However, it only displays the name, no extra information or social links. Therefore, it is necessary to add external multi-author box in blogger.

Features of Multi-author box with social icons for blogger

Clean Layout.
Social Icons Included.
Font Awesome 5.8.2 Icons used.
Responsive Design.
Multi-authors supported.
Easy to customize.
Super-light weight.