TwistBlogg

Image demo:

How to add a Kanban page in blogger?

The steps involve simple copy pasting the HTML, CSS and Javascript code to your blogger page. Please follow this guide on how to create a page in blogger.

HTML Code

<!-- Kanban Code by www.TwistBlogg.com -->
<div class="kanban-board">
    <div class="kanban-board-header">
      <h2>Welcome to my Kanban Board 📋</h2>
      <p>In this space, I share my progress, plans, accomplishments, and random ideas. While it doesn't capture everything I'm doing, it offers a glimpse into key parts of my journey. This keeps me alert and focused! <i>The design is inspired from <a href='https://amanbhattarai.com.np/board' target='_blank'>Aman's portfolio.</a></i></p>
      <p><i>Last updated on: Sept 25, 2024</i></p>
    </div>
    <div class="kanban-board-columns">
      <div class="kanban-column">
        <div class="kanban-column-header">
          <span class="column-title">🪵 Backlogs</span>
          <span class="column-count">(6)</span>
        </div>
        <div class="kanban-column-items">
          <div class="kanban-item" draggable="true">
            <span class="item-type project">Project</span>
            <h4 class="item-title">Do a combined SQL and Tableau Project.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type goal">Goal</span>
            <h4 class="item-title">Give IELTS and French Exam.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type goal">Goal</span>
            <h4 class="item-title">Finish reading at least a book by the end of year.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type learning">Learning</span>
            <h4 class="item-title">Learn Tableau concepts.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type task">Task</span>
            <h4 class="item-title">Utilize Apple Keynote for creative presentations.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type goal">Goal</span>
            <h4 class="item-title">Join Gym by the end of year.</h4>
          </div>
        </div>
      </div>
      <div class="kanban-column">
        <div class="kanban-column-header">
          <span class="column-title">💡 Ideas</span>
          <span class="column-count">(4)</span>
        </div>
        <div class="kanban-column-items">
          <div class="kanban-item" draggable="true">
            <span class="item-type project">Project</span>
            <h4 class="item-title">Implement available Regression model on a Kaggle dataset.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type task">Task</span>
            <h4 class="item-title">Detailed article on creating blog theme from scratch.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type project">Project</span>
            <h4 class="item-title">Build a Python program for activating theme licenses in blogger.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type task">Task</span>
            <h4 class="item-title">Create and share Dashboards on Tableau Public.</h4>
          </div>
        </div>
      </div>
      <div class="kanban-column">
        <div class="kanban-column-header">
          <span class="column-title">👷 In Progress</span>
          <span class="column-count">(5)</span>
        </div>
        <div class="kanban-column-items">
          <div class="kanban-item" draggable="true">
            <span class="item-type goal">Goal</span>
            <h4 class="item-title">Get active on LinkedIn.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type learning">Learning</span>
            <h4 class="item-title">Learning advanced SQL concepts.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type learning">Learning</span>
            <h4 class="item-title">Reading French language.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type dev">Dev</span>
            <h4 class="item-title">Leveraging Quarto for Notebook reports.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type learning">Learning</span>
            <h4 class="item-title">Enrolled with NPower for junior data analyst program.</h4>
          </div>
        </div>
      </div>
      <div class="kanban-column">
        <div class="kanban-column-header">
          <span class="column-title">💪 Completed</span>
          <span class="column-count">(3)</span>
        </div>
        <div class="kanban-column-items">
          <div class="kanban-item" draggable="true">
            <span class="item-type task">Task</span>
            <h4 class="item-title">Building my personal Portfolio!</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type project">Project</span>
            <h4 class="item-title">Complete IBM Capstone project.</h4>
          </div>
          <div class="kanban-item" draggable="true">
            <span class="item-type goal">Goal</span>
            <h4 class="item-title">Get IBM data analyst certificate from coursera.</h4>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS Code

.kanban-board {
	margin: 40px auto;
	overflow-x: auto;
}

.kanban-board-header {
	max-width: 550px;
	margin: 0 auto 40px;
}

.kanban-board-header h2 {
	font-size: 32px;
	font-weight: 800;
	margin-top: 12px;
	margin-bottom: 24px;
}

.kanban-board-header p {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 40px;
}

.kanban-board-columns {
	display: flex;
	flex-grow: 1;
	gap: 24px;
}

.kanban-column {
	flex-shrink: 0;
	width: 384px;
}

.kanban-column-header {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 8px;
	margin-bottom: 8px;
}

.column-title {
	font-weight: 600;
}

.column-count {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	font-weight: 600;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
}

.kanban-column-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 8px;
}

.kanban-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px;
	background-color: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	cursor: move;
	transition: transform 0.2s, box-shadow 0.2s;
}

.kanban-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 8px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
}

.kanban-item.dragging {
	opacity: 0.5;
	transform: scale(1.05);
	box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.06);
}

.item-type {
	display: inline-block;
	padding: 2px 8px;
	font-size: 14px;
	font-weight: 300;
	border-radius: 16px;
}

.item-type.project {
	background-color: #fef3c7;
	color: #92400e;
}

.item-type.goal {
	background-color: #e9d5ff;
	color: #6b21a8;
}

.item-type.task {
	background-color: #cffafe;
	color: #155e75;
}

.item-type.dev {
	background-color: #d1fae5;
	color: #065f46;
}

.item-type.learning {
	background-color: #ffe4e6;
	color: #9f1239;
}

.item-title {
	margin-top: 12px;
	font-weight: 400;
	font-size: 16px;
}

JavaScript Code

<script>
        document.addEventListener('DOMContentLoaded', function() {
            const items = document.querySelectorAll('.kanban-item');

            items.forEach(item => {
                item.addEventListener('dragstart', function() {
                    this.classList.add('dragging');
                });

                item.addEventListener('dragend', function() {
                    this.classList.remove('dragging');
                });
            });
        });
    </script>

Now, you should have a good looking kanban page on blogger. Modify and make changes accordingly. Happy blogging. 🙋

Introducing Prime - Elegant and Bold Blogger Theme

2023-12-17T22:34:00.002-05:00

Blogger community has been growing with new rise in content creators and bloggers. Focus has been shifted towards improving user experience and building a better blog and key to that is a premium and optimized blogger theme.

I mean, who do not want a good looking theme, right?

Because the very first thing a user notices is how a page looks and loads. An aesthetically pleasing and fast loading website is what most prefer.

Being said that, it is easier to find such Wordpress and Ghost themes. However, blogger is still lacking in bold and minimal themes. There are lots of premium blogger templates, however, either they are lacking some features, or they are over packed with features.

Solution to that -- A minimal and bold theme focused on content delivery and loaded with optimal features.

Well, I have a good news 😛 for you all. We recently launched a blogger theme and named it "Prime". It is built with latest trends and supports high pagespeed and optimization. I am sure you will love using the template as much we love designing it.

What is Prime Blogger theme?

Prime is a bold, elegant and premium blogger theme that delivers professional design with new seo optimizations, ads slots and market trending features.

Demos and screenshots of Prime theme

Below I have listed some screenshots of premium prime blogger template. Click on the images to view in full size. Also, I have linked a demo link to test the site live.

Live Demo

Key Features of Prime Template for Blogger

Below I will list couple of features available in our theme.

Mobile friendly and highly Responsive Design

Prime template is built with modern css properties and mobile friendly approach. All components are highly responsive and fit perfectly on different device sizes either tablets, ipads, laptops, iphones or android devices.

Better Performance, SEO optimized and Ads ready

We packed all features without compromising much on performance. Performance is a key to better user experience and we promise to deliver. Here's a snippet of how prime template performs on mobile and desktop devices.

Pagespeed captured without enabling popular post thumbnails

Not only performance, but we focused on building a website that is accessible to all people. We score a whopping 100 score on that. Moreover, the theme is highly seo optimized. We passed google valid structured test and support rich result too.

Prime is also packed with 10+ ads positions. You can easily add and remove your ads from layout and template.You can learn more about ads positioning in our documentation website.

Please note: Maintaining SEO score depends on how you maintain on page optimization

Clean layout and Premium Looks

We kept our layout clean meaning you can adjust most of the theme elements directly from Layout tab present in blogger dashboard. (If you are unfamiliar to blogger dashboard, please check this guide) We tend to design bold and big blogger themes.

Advanced Blogger commenting system

Lets be honest, default blogger commenting system looks dull. We modified most of the components and built a rich commenting system. Enable Anonymous comments for taking advantage of built in auto thumbnail generation.

Also, we gave our users option to insert images, blockquotes, codes and links. More options will be added in future updates. Commenting system is lazy loaded by default, and are organized beautifully. Here's a glimpse from one of our posts.

Clean Documentation

We built a complete new website for the sole purpose of helping you easy access to documentation. You can easily search and find required queries in our documentation. Also, we will update new issues and fixes very quickly. The documentation is built with the power of NextJS and Nextra theme. You can check the docs live.

Documentation

Custom Pages [ Premium designs ]

With the purchase of Prime theme, we provide eight different and uniquely designed custom pages. Showcase your website and build a modern web app. You can start using them by embedding them directly. Happy Blogging ✊

Contact Us
About Us
Authors
Individual Author
Tags
Disclaimer
Privacy Policy
Write for Us

Auto Filter posts by Authors [ A real multi author blogger blog]

We thrived to build a real multi author blogger website. For that, we built custom Authors page where you display your blog authors. And each author will have their own author page where we sort articles by respective authors in the order of published date. Cool, hah?

And we added a button on each posts which auto generates link for that author and forwards users to that author page on click. You can scroll down to the end of this post and find the button "Explore more articles by my_name" and when you click, it will open my author page.

All the articles on author pages are auto generated. You need to add 2 lines of code and the plugin will do the work and display posts. I am sure you gonna love it.

Advanced Anti-Ads Blocker and many more plugins

Ads-blockers can be real issues if you are focused on earning. We created anti adblocker that beautifully crafts adblock detected message. Unlike other websites, we display a portion of our article and display cool effect like medium.

Moreover, you will be getting reading time, cookies consent, syntax highlighter, sticky header and many other plugins.

And some other features include:

Layout v3 & Widget v2
Lazy Load Images, Videos and Scripts
Infinite Scroll Navigation
Automatic Table of Contents
PrismJS Highlighter
Post Reading Time
Notification Bar
Cookie Banner
Powerful Anti Adblocker
Sticky Header
Featured Post Widget
Popular Posts Widget
Label Widget
Blog Archive Widget
Related Posts Widget
Email Subscription Widget
Social Media Sharing Button

How to download Prime - Elegant and Bold Blogger theme?

At the moment, it is only available for purchased users. Sorry, but we spent lot of time designing and adding features, and we hope you will respect it.

Buy theme

Files included on Download

Theme File.xml
A Blank Template.xml
Documentation.txt
License.txt
Custom Pages

We do not provide contents and images available on demo website.

Support from us

With the purchase of theme, we provide 3 months of support for purchased users regarding installation and theme issues. Support does not include:

Illegal theme users
Modified theme
Adding/Changing inbuilt features

Changelog

Version 1.0.2 - September 04, 2024

Changed Animation on hover

Fixed Homepage performance

Version 1.0.1 - December 17, 2023

Changed Improved documentation for responsive image gallery

Fixed Lightbox images background issue

Version 1.0 - December 16, 2023

Release Published first version of Prime 🎉

Best Blogger Templates of 2024 - Premium Edition

2023-11-07T18:28:00.004-05:00

Blogger offers many free and premium themes online. However, getting a well balanced, minimalist and ads ready template is daunting. Let me help you find one.

Top 5 best and seo optimized blogger themes

Presenting you my list of highly responsive, ads ready, premium and seo optimized blogger themes of 2024.

5) Writer - Minimal Personal Blogger theme

Writer

Writer is a minimalist personal blog theme for blogger. It is responsive and loads very fast. The theme is designed in a way that it doesn’t require posts to have images in them. It works perfectly well without images.

Features of Writer Blog Template

Infinite Scroll
Powerful Admin Panel
Multiple Sidebar Panels
Clean and elegant design
Social Share Buttons
Well Documented with Screenshots
Customized Comment Section
Translation Ready
Well Documented with Screenshots
Minimal Secondary Menu
Related Posts Widget

4) Vulia Theme - Best Premium Magazine Blogger Template

Vulia

Vulia is a modern medium like blogger theme. It is fast and very responsive in design. The theme is designed in a way that it makes customizing easy and all services are inbuilt.

Features of Vulia Blogspot Template

Layout v3 & Widget v2
Valid Structured Data
SEO & Mobile Friendly
Super Fast Loading
Responsive
Minimalist, Clean, Elegant
Pre-installed Ads Position
Infinite Scroll Post Navigation Button
Custom Widget Post (Grid/Carousel)
Label Widget
Header (Logo and Title, Navigation Menu, Search Bar, Bookmark, Appearance)
Hero Section
Profile Widget
Pricing Section
Featured Post Widget
Blog Archives Widget
Popular Posts Widget

3) Webium Pro - Medium.com Like Premium Blogger Theme

Webium Pro

Webium Pro is a clone of medium website. It is responsive and comes with many plugins and widgets. It loads fast and is a lightweight theme. It is best suited for all types of niche primarily tech, news and blog.

Best Modern Premium Themes of 2023 for Download #Themes #Premium #Blogger

Features of Webium Pro Blogspot Template

Layout v3 & Widget v2
Valid Structured Data
SEO & Mobile Friendly
Super Fast Loading
Responsive
Minimalist, Clean, Elegant
Pre-installed Ads Position
Infinite Scroll Post Navigation Button
Lazy Load Image
Profile Widget
Pricing Section
Featured Post Widget
Blog Archives Widget
Popular Posts Widget

2) Gila Material Pro (GMP) - Best Ecommerce Blogger Template

GMP Ecommerce

GMP Ecommerce is a premium ecommerce template for blogspot. It comes with built in bookmarking feature and cart system. Provides best possible modern features.

Features of GMP-Ecommerce Blogger Theme

Layout v3 & Widget v2
Super Fast Loading
Responsive
Valid Structured Data
SEO & Mobile Friendly
Minimalist, Clean, Elegant
E-commerce Concept Design
Infinite Scroll Navigation
Lazy Load Image
Grid Layout 6 Column
Pre-installed Ads Position
Integrated with WhatsApp
Product Page
Banner Image Slider Homepage
Cart Page
Product Post Generator
Checkout Page
Product Categories

1) GMP Blog - Best Premium Blogger Template

GMP Blog

GMP Blog is a modern wordpress like blogger theme. It is responsive and comes with many plugins and widgets. This is another variant of GMP Ecommerce theme, best suited for blog and tech niche.

Best Premium Blogger Templates Of 2020 (SEO Optimized) - TwistBlogg - Premium Blogger Tutorials and Widgets

Features of GMP-Blog Blogspot Template

Layout v3 & Widget v2
SEO & Mobile Friendly
Custom Widget Posts
Valid Structured Data
Custom Widget Recent Posts
Automatic Table of Contents
Custom Widget Social Media
Custom Comment Input
Custom Image Lightbox
Navigation System Load More Posts Button & Numbered Page Navigation
Layout Switch Full & With Sidebar
Sidebar Switch Left & Right
Live Search
Right to Left Language Direction (RTL)
More Menu
Slider Product Posts
Contact Page
Translate Page
Notifications
Bookmark Page
Safelink Page
Sitemap Page

That's all. You now have best blogger templates of 2024. Let me know which one you liked the most. I vote for GMP Blog theme. Happy Blogging 💪😀💣

What's next?

There are a lot of blogger themes available to choose from. Below is my favourite list of best premium and seo optimized blogger templates of 2022.

How To Customize Comments Avatar Image In Blogger - TwistBlogg - Premium Blogger Tutorials and Widgets

Reverse the order of Comments in Blogger - Display Newest to Oldest

2023-10-17T21:18:00.002-04:00

Good evening my fellow readers,

From past couple of months, I have been trying to make Blogger commenting system look cool 😎 and beautiful. I have also shared different tricks to customize blogger comment system.

Today, I want to reverse the order of comments in blogger as I realized by default blogger displays oldest comments first and newest ones at the bottom.

I had couple of questions:

Can I change the order of comments in blogger? Can I display newer comments first and move old comments at the bottom? Do I need to write extra code of Javascript or manipulate with DOM?

Answer - Yes, it is possible 💪 to sort blogger comments from latest to oldest without writing a single line of Javascript.

Let me show you how.

Sorting Blogger comments from New to Old

Blogger provides some lines of code to display comments. If you open your theme HTML code, you can find this piece of code:

<b:loop values='data:post.comments' var='comment'>

Or,

<b:loop values='data:post.comments where (c =&gt; not c.inReplyTo or c.inReplyTo == 0)' var='comment'>

This line 👆simply loops through each comment for this post. To reverse the order of these comments you'll need a way to indicate you want to loop starting at the most recent comment and work your way through the older comments. But how? There is a way to do it natively in Blogger using reverse HTML tag.

Add reverse='1' to above code.

Reverse='1' reverses the default order of comments in blogger and displays latest to oldest.

<b:loop reverse='1' values='data:post.comments' var='comment'>

Or,

<b:loop reverse='1' values='data:post.comments where (c =&gt; not c.inReplyTo or c.inReplyTo == 0)' var='comment'>

That is all. Now your comments are sorted from new to old. Happy Blogging! ✊

Any Questions? Leave a comment below. And do you want me to write more guides on customizing blogger commenting system? If yes, let me know.

Some cool articles to check next -

Blogger allows you to customize default comment avatar image with simple css. This article will guide you through that.

Change "0 Comment" or "Post a Comment" Message in Blogger - TwistBlogg - Premium Blogger Tutorials and Widgets

Change those boring "0 Comment" or "Post a Comment" messages in blogger above the comment box with attractive ones using HTML & CSS Style.

How to Defer Offscreen images: Lazy load images in blogger - TwistBlogg - Premium Blogger Tutorials and Widgets

How to Lazy load images in blogger - No Script [New Method]

2023-10-06T20:50:00.007-04:00

Media files such as images are important to any article. They make contents more engaging and interesting. Also, an article with multiple images performs better on image search results.

However, adding different images increase your page size resulting in slow loading. Search engines do not like slow loading pages.😔 So, what is the solution?

Answer - Lazy Loading Images or Deferring Offscreen Images. 😀

What is lazy loading?

Lazy loading of images is a simple technique to delay downloading of off-screen images. What exactly are offscreen images? Those images which do not lie in the screen when a page loads.

Since users can't see offscreen images when they load a page, a good technqiue to boost pagespeed can be to load those blogger images once they are visible in users viewport. That is what lazy loading does.

Here is a video guide explaining what lazy load is.

Pros of lazy loading images in blogger

Since images are only downloaded and loaded when they fall in users viewport, it improves page loading time.
Helps in better search results.
Enables readers to save data and bandwidth 🙏 .

Cons of deferring Offscreen images

Since off screen images are not downloaded when a page loads, it might cause bad user experience 😨 .
It also needs active internet connection throughout reading process.

When to use lazy loading?

If your website contains a lot of media files, it is advisable to implement loading of images on scroll.

Lazy loading is one of the method to improve page loading time. Find out more ways to do so.

In this article, I will share 2 methods to achieve lazy loading of images in blogger. One without script and other with script.

How to lazy Load images in blogger - New method

Recently, blogger provided a feature to auto lazy load images without any scripts. Isn't that cool? 😮

To enable this feature, go to your Settings > Look for Posts tab > Enable Lazy Load images. That is all.

It is good to know blogger is working on to improve its platform and provide more features by default. 😊

How lazy loading images in blogger works 🤔?

Blogger implements a browser-level image lazy loading, so no scripts are required. If you enable this, Blogger will add the loading='lazy' attribute to all <img> tags inside the post/page.

Here is how it looks:

<img alt="Sample Image" width="200" height="300" src="image.jpeg"  loading="lazy" />

When not to use Bloggers default lazy loading ❌?

It is important to note enabling lazy loading images on blogger setting works only for post images. For any other images, you need to manually add loading="lazy" attribute or use some third party scripts.

Also, not all browsers support loading="lazy" attribute. Check here to find out more info on support.

It is advised to install a script if your website uses many images.

Method 2 : Lazy Load blogger images with script

Since adding a script guarantees lazy loading of all images, start by adding this script. This is a pure javascript solution.

In case, your website uses Jquery, use this tutorial :

Lazy loading of images is a technique preventing off-fold images from loading initially. Learn how you can defer offscreen images in blogger.

Creating Perfect Night or Dark Mode in Blogger with Pure Javascript - TwistBlogg - Premium Blogger Tutorials and Widgets

Place this javascript before closing head tag.

<script type="text/javascript">/*<![CDATA[*/ /*@shinsenter/defer.js*/ !function(c,i,t){var f,o=/^data-(.+)/,u='IntersectionObserver',r=/p/.test(i.readyState),s=[],a=s.slice,d='lazied',n='load',e='pageshow',l='forEach',m='hasAttribute',h='shift';function p(e){i.head.appendChild(e)}function v(e,n){a.call(e.attributes)[l](n)}function y(e,n,t,o){return o=(o=n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function b(e,n){return a.call((n||i).querySelectorAll(e))}function g(t,e){b('source',t)[l](g),v(t,function(e,n){(n=o.exec(e.name))&&(t[n[1]]=e.value)}),e&&(t.className+=' '+e),n in t&&t[n]()}function I(e){f(function(o){o=b(e||'[type=deferjs]'),function e(n,t){(n=o[h]())&&(n.parentNode.removeChild(n),(t=y(n.nodeName)).text=n.text,v(n,function(e){'type'!=e.name&&(t[e.name]=e.value)}),t.src&&!t[m]('async')?(t.onload=t.onerror=e,p(t)):(p(t),e()))}()})}(f=function(e,n){r?t(e,n):s.push(e,n)}).all=I,f.js=function(n,t,e,o){f(function(e){(e=y('SCRIPT',t,o)).src=n,p(e)},e)},f.css=function(n,t,e,o){f(function(e){(e=y('LINK',t,o)).rel='stylesheet',e.href=n,p(e)},e)},f.dom=function(e,n,t,o,i){function r(e){o&&!1===o(e)||g(e,t)}f(function(t){t=u in c&&new c[u](function(e){e[l](function(e,n){e.isIntersecting&&(n=e.target)&&(t.unobserve(n),r(n))})},i),b(e||'[data-src]')[l](function(e){e[m](d)||(e.setAttribute(d,''),t?t.observe(e):r(e))})},n)},f.reveal=g,c.Defer=f,c.addEventListener('on'+e in c?e:n,function(){for(I();s[0];t(s[h](),s[h]()))r=1})}(this,document,setTimeout),function(e,n){e.defer=n=e.Defer,e.deferscript=n.js,e.deferstyle=n.css,e.deferimg=e.deferiframe=n.dom}(this); /*]]>*/</script>
<!-- Add the Intersection Observer Polyfill for legacy browsers -->
    <script id='polyfill-js'>&#39;IntersectionObserver&#39;in window||document.write(&#39;&lt;script src=&quot;https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver&quot;&gt;&lt;\/script&gt;&#39;);</script>

Now, to use it pass the original image link to data-src and add class="lazy" to image tag. Sample example:

<img alt="A lazy image with a low-resolution placeholder"
       width="200" height="300" class="lazy"
       src="placeholder.jpeg"
       data-src="actual_image.jpeg" />

Do not forget to activate lazy loading by placing following code before closing body tag.

<script>Defer.dom('.lazy', 100, 'loaded', null, {rootMargin:'1px'})</script>

With this script, you can basically lazy load anything, check this github page for more guides.

To conclude, lazy loading of images defer downloading of images which are not visible in users viewport. Recently, blogger provided a feature that allows for auto lazy loading of post images. Enable the option and make use of its service. Happy Blogging ✊

A Look at Some of the Most Popular Web Design Trends in 2023

2023-09-21T13:09:00.003-04:00

Web design is an essential component of any marketer's strategy in 2023. How can you ensure a good website design with so many different web design trends?

Web design trends for 2022 focused on developing some of the most engaging site designs. On the other hand, the web design trends of 2023, are all about experimenting and discovering.

We've compiled a comprehensive list of the top web design trends for 2023 right here.

List of Top Web Design Trends in 2023

It is tough to predict the top web design trends for 2023 because the sector is continually growing and new technology and design approaches emerge.

Knowing about these trends as a designer will always help you stay current in this fast-paced period and develop a stronger brand identity for your clients.

Here are a few prospective trends that could affect web design in 2023.

3D visual effects

Website designers are going above and beyond this year to deliver an interesting user experience. As a result, the use of 3D visual effects is becoming more common.

3D graphics are design strategies that may instantly capture the attention of customers and be easily visible and understood.

Furthermore, introducing new dimensions to web design helps designers create the most challenging and engaging user experience (UX) for their users, guide people to the information they need, and distinguish a webpage from other online pages.

Typographical page layouts

Typographic web page layouts show how typography may be used on a page in many ways, such as font, size, and colour.

Typography in web design has increased in importance as web designers' attention to detail has improved.

Typography, as a vital design element, catches users' attention sooner and keeps them engaged on the site longer.

Furthermore, typographic page layout in design functions as minimalism. This layout expresses what the entire page needs to say without lengthening it or wasting site users' time.

Scrapbook Aesthetic

Scrapbook aesthetic is a modern and widely utilized web design method on the websites of creative people in recent years. This design method benefits from handwriting, ripped sheets, stickers, doodles, and other decorative elements seen in physical scrapbooks.

Scrapbook aesthetic web designs are commonly used by vocal artists, designers, and authors to create artist websites that display their originality and eccentricity through their online presence.

Furthermore, this method is a fun and user-friendly way to build a website. Scrapbook aesthetic design contributes to the creation of a memorable and distinct user experience by utilizing various patterns and textures, animations, color variations, and images.

AR and VR

One thing that is absent in a digital-first world is a sense of reality. However, AR and VR technology have enabled a near-real experience to be delivered. As a result, the most recent web design trends are all about altering how customers engage with digital products.

Augmented reality and virtual reality are an e-commerce website's closest companions. They address the most difficult obstacle for an e-commerce site: establishing user trust. Utilizing VR enables users to view how the product appears and determine whether it suits their needs. Because of this, it plays a big role in what people decide to buy.

Parallax scrolling

Parallax scrolling is a popular web design method in which the foreground parts of a website move more quickly than the ones in its backdrop. This design strategy can be used to accentuate a website's visual appeal and provide a more immersive user experience.

Dark Mode

Dark mode site designs serve several purposes. On the practical side, they help reduce eye strain, which is a growing concern as we spend more and more time looking at screens.

Dark mode quickly creates an ultra-modern look for your website while allowing you to highlight other design aspects simply by dimming the items that surround it.

Creating perfect dark mode for your blogger includes setting system mode by default and also creating toggle button that enable users to switch mode.

6 Must Do SEO Guides For Any Blog To Rank Higher In Google - TwistBlogg - Premium Blogger Tutorials and Widgets

Minimalistic Design

Minimalist web design is a psychological tactic as well as a web design trend! By deleting unneeded and inelegant design features, this method streamlines the design structure.

Congested web design was chosen by web designers as a bad technique for interactive websites.

As a result, the more precise your design, the better your website's performance. Most people nowadays like minimalist design since it gives a professional appearance and boosts a user's decision-making capacity. When there are fewer options to pick from, this design style tends to help users make faster decisions.

Claymorphism

Claymorphism is a trendy graphic and online design trend. Colours, gradient effects, bold text, and, most importantly, 2D and 3D artwork abound.

Notably, claymorphism works best when combined with animations and interactions. This design trend is a little hard, so be mindful of the colour palette you select. You will also need to polish the visual hierarchy and contrast for accessibility.

Micro Animations

Micro animations significantly improve the user experience of modern websites. Micro-animations help users navigate through their interaction on the web page and add playfulness to website performance.

Micro animation has been cutting-edge for a few years, but in 2023, its usage will be a natural trend for a fully functioning and well-developed website. Also, micro animations are one of the latest e-commerce site design trends to give website visitors a clear and more dynamic vision of the products.

White space

With so many technological advancements in the web design industry, there is so much to incorporate into a design! However, white space refers to allowing your online content to breathe! The more accurate and relaxing the design you can create by deleting extraneous elements, the better the outcomes will be.

Though the term 'white space' does not imply using only white in your design structure, It indicates you should leave some space between the elements you want to use in the overall design layout.

Product reveal animation

In 2023, online or product designers will be more daring with motion animations, transforming an average web page into an appealing and memorable website.

Product reveal animations allow customers to visualize the product and its features in more detail. Allows shoppers to progressively sway website users' minds and assist them in making speedier buy selections.

Glassmorphism

The frosted glass look combined with the rich substance leaves a lasting impression. The background is made up of frosted glass, which adds texture and depth to the web design. Furthermore, the blurred element of glassmorphism adds a splash of colour and makes the material more readable.

This website design trend has gained traction since last year's web design trends and is expected to continue this year.

Conclusion

Overall, the 2023 design trends indicate that you should cease depending on straightforward and minimal web design styles and instead branch out and experiment. Of course, you don't have to use all of these trends to create one of the finest website designs in 2023.

However, even a few major components or subtler features can greatly improve your site's UX, leading to more engagement, more CTA clicks, and a better end for your online business. The latest web design trends for 2023 can help you accomplish this.

Understanding Posts Section in Blogger - Write SEO Rich Contents

2023-08-24T21:30:00.001-04:00

I've already discussed basic functionality of Posts section in Understanding Blogger Dashboard article.

Let us dive into more details -

What options are there when you start writing a post, how to use headings, bold, italics and other operations, how to label your posts and how to optimize them to rank higher in search results.

Some informations on Blogger Posts -

There is no limit on the number of posts (comments included) one can have in one blog. However, a maximum of 100 posts can be created or published per day. Size of webpages – Individual pages (the main page of a blog or archive pages) are limited to 1 MB.

Creating a Post

Click on + New Posts from your Blogger Dashboard. You will be prompt with a WYSIWYG (What You See Is What You Get) editor.

Let us divide post section into 2 categories -

SEO Category - Title, Content and Post Settings.
Content Category - Different Options to customize contents

SEO Category for Posts Section

Title

It is the heading title of your article. It is important for title to be a H1 tag for SEO reasons. The ideal blog post title length is 60 characters. Make sure you insert your keyword in Title.

Content

Your article content goes here. Make sure to follow SEO guides while writing contents. Some handpicked SEO guides for you -

Search Engine Optimization helps a website appear on search results. Here are must Know SEO Guides For Blogger Users To Rank Higher In Google SERP.

How to Get Google To Index Your New Blog Quickly - TwistBlogg - Premium Blogger Tutorials and Widgets

Google takes some time to crawl and index your new website. Learn how you can make your blog appear on google quickly.

Top 5 Must Do SEO Things Before Publishing Your Articles - TwistBlogg - Premium Blogger Tutorials and Widgets

SEO helps content reach to more readers. There are some SEO settings and guidances to follow before publishing your article.

6 Must Do SEO Guides For Any Blog To Rank Higher In Google - TwistBlogg - Premium Blogger Tutorials and Widgets

Post Settings

These settings are available for individual article. Let us understand each available options.

Labels

Label is a category or tag for your post. You can have multiple labels for each post. You can have a total of 5,000 unique labels per blog and 20 unique labels per post (with at most 200 characters).

Labelling a post means organizing post based on category. It is a good practice to proper name and label posts.

Click on Labels option and insert your text. That is all.

You can view different posts under same label at - www.yourwebsite.com/search/label/YourLabelName

Published on

This setting determines the date and time to publish your articles. Use 'Set date and time' to add custom date and time for your articles.

Link

Link is URL for your blog post. By default, blogger generates link based on title or you can use custom permalink option to set different link address.

It is recommended to use keyword in your link.

There are 2 options in link -

Title link - Set this to redirect users to different address when they click your post title.
Enclosure link - Helps to make podcasts, MP3s, and other content in your posts playable in feeds like RSS and Atom.

Location

If you are displaying Location for your post, set this field.

Search Description

This is where you insert search description for your blogger post. It is recommended to set high quality description for SEO purposes. You are limited to 120 characters.

If your post settings is not showing this option, make sure to enable it from Settings > Meta tags.

Options

You can enable/disable comments for specific posts using this setting. You will get 3 options -

Allow comments
Do not allow, show existing comments
Do not allow, hide existing comments

Custom Robot Tags

Robot tags tells search engine crawlers what to index and what not from your blog. It is important to properly set Custom Robot tags or else it will harm your site SEO.

Search Engine Optimization helps a website appear on search results. Here are must Know SEO Guides For Blogger Users To Rank Higher In Google SERP.

Understanding Posts Section in Blogger - Write SEO Rich Contents - TwistBlogg - Premium Blogger Tutorials and Widgets

Using this setting, you can set post specific robot tags.

If your Post settings is not showing this option, enable it from Setting > Crawlers and Indexing > Enable custom robots header tags.

Content Category for Posts Section

When you start writing content, you will get following options -

1 - Switch to HTML or Compact View.

2 - Undo or Redo last action.

3 - Changing font family, headings and size.

4 - Writing bold, italics, underlines, strike through, changing text and background colors.

5 - Insert links, images, videos and emojis.

6 - Text align and Indent.

7 - Listing, blockquote and jump break.

More options - LTR - RTL Layout, language selection and resetting formatting of post.

That was all about Posts Section in Blogger.

Hit share and leave a comment if you find it helpful.

Reference:
https://en.wikipedia.org/wiki/Blogger_(service)

Understanding Blogger Dashboard - Everything you need to know

2023-08-15T21:08:00.001-04:00

After you create a blogger blog, you will be provided with different options under your blog. Those options are labelled as components of Blogger Dashboard.

We call dashboard - the Control Panel of blogger where you get different sections and settings to smoothly run and manage your blog.

In this article, we will explain each options and how you should be handling them.

This guide is for beginner as well as advanced users.

You can have multiple blogs, select the one using down arrow button located above "+ New Posts". View Blog opens your blogspot website in new tab.

Different Sections of Blogger Dashboard

1) Posts

This section is where you can create new posts, edit existing posts, add/remove labels in posts, schedule posts and even delete them.

This is your content hub - all articles published or drafted are available here. Here is a snapshot of Posts section from one of my dummy blog.

From Posts Dashboard, you can perform following operations to individual posts:

Revert to Draft or Publish Post
Apply Labels to Post
Move Post to Trash
View the Post
Find the author of Post

Hover to individual post to find different icons to the right of each posts. These icons represent above options. Explore them in your Posts Dashboard.

You can even click on Manage option and perform above operations to multiple posts at once.

This article guides more on this section:

Blogger provides an editor that enables you to write and publish contents. Understand more about how to write a SEO friendly content and use features.

Create an automatic Table of Content (TOC) in Blogger Blog

2) Stats

This is where you can view details about your blog traffics. This is a mini version of Google Analytics. Here's what information you can get from Stats Section.

How many people visited your website today, yesterday, this month, last month and all time.
Option to display traffic based on - Now, Last 24 hours, Last 7 days, Last 30 days, Last 3 months, Last 6 months, Last 12 months and All time
Analytics for Latest Published Post.
Your Blog traffic in graphical representation.
Which posts are performing best.
Pages analytics.
And many more.

If you click on the option, "More About this Blog", you will find information such as,

Top Referrers to your Website.
Information about your audiences - countries they are from, operating system used, browsers used
Keywords your website is ranking on Google.
And many more.

You need to explore all these options live to get a better understanding.

If you are serious about analyzing your blog traffics and need further information, we recommend to install Google Analytics.

3) Comments

This is where you can view, moderate, mark as spam and delete comments in your blog. Here's a quick guide:

If you have enabled moderation from Settings option, unapproved comments are listed under Moderation tab.
Comments which are approved are displayed under Published tab.
You can mark comments as Spam and they will be displayed under Spam tab.

When you hover to individual comment, you will have following options:

If comment is under moderation, option to Publish or Discard it.
Approved comments can be either deleted, marked as spam or remove the comment content.
When you choose remove content of this comment, it is displayed as "This comment has been removed by a blog administration" on respective post.

Alike Posts Section, you can click on "Manage" option to perform above operations on multiple comments at a same time.

4) Earnings

Google Adsense work closely with Blogger.com. Earnings tab enables you to connect your Adsense account to that blog.

Once you connect your Adsense, you will be provided with following options:

5) Pages

Pages are static piece of contents that you can use to add extra information about your blog. Unlike posts, Pages pathname follow yourblogspot.blogspot.com/p/page_name.html URL.

You can even customize a page to display as homepage for your blogger blog. That part is beyond the scope of this article. Normally, we create following types of pages in blogger - not limited to these:

About Us
Contact Us
Disclaimer
Privacy Policy
Write for Us
Sitemap
And many more...

Alike Posts section, you can

Revert to Draft or Publish Page
Move Page to Trash
View the Page
Find the author of Page

Or, Click Manage option to perform same operation for multiple Pages.

6) Layout

This is where you can add, edit and delete gadgets in your blog. Gadgets are widgets that perform certain task.

For instance, in Blogger, we have a Popular Post Gadget which displays list of popular posts from your blog.

A professional theme will have properly structured layout that enables customizing elements without need of opening HTML code.

Different templates have different layouts but a basic layout might look something like this -

You can press on any gadgets and re-arrange them. Do not forget to hit save icon to save changes.

When an eye 👁 icon is displayed for a gadget/widget, it means that gadget is visible. You can click on Pencil Icon to customize any Gadgets.

For every widgets, you have option to show/hide the widget and add a title to it. Other options depend on widget types.

7) Theme

This is where you can change, add or customize your blogger template. You can browse through the available themes, and you can preview how each theme will look on your blog before you activate it.

You can also add custom themes, backup your existing theme, upload new ones and edit your blogger template file.

8) Settings

This is where you can control all of your blogger settings.

You have a lot of options in here -

Changing Blog Title, Adding Description, Uploading Favicon, Inserting Google Analytics code
Option to show/hide your website on search results
Inserting custom domain and adding HTTPS SSL certificates.
Adding and Removing authors and granting/revoking permission to them.
And many more...

We will share a dedicated article for Settings tab.

9) Reading List

This is where you can follow other websites and their news feeds will be visible here. You are not limited to follow only blogger.com websites, you can follow any websites.

If you have not added any website to your list, it will prompt notification with an option to Add websites, click on it, Click Add and enter the address and hit Next. Click Follow. You are done.

You can also add or delete websites from your existing list. Click on Manage option to get this option.

Those were 9 different sections of blogger dashboard. We hope the article was helpful.

To summarize,

Posts - All contents of your blog
Stats -Traffics of your blog
Comments - Comments of your blog
Earnings - Adsense setting for your blog
Pages - Static pages for your blog
Layout - Structure of your blog
Theme - Template for your blog
Settings - Different options for your blog
Reading List - Blogs you follow

3 Best Paraphrasing Tools For Blogger

2023-08-02T13:14:00.000-04:00

As a blogger, the constant need to deliver fresh, engaging, and high-quality content can sometimes be daunting. From crafting content for your personal blog to writing for businesses, the task of maintaining originality while also retaining your readers' interest can often seem overwhelming.

However, we live in an era where technology has eased many such burdens, and one of the most effective solutions in the writing sphere is the paraphrasing tool.

Paraphrasing tools are innovative online solutions that take an existing piece of text and rephrase it, ensuring uniqueness while preserving the original meaning. These tools are a game-changer for bloggers, enabling them to breathe new life into existing content, creating something refreshing and captivating for their audience.

In this article, we will introduce you to the best three paraphrasing tools for creating high-quality content that hooks your readers and keeps them coming back for more.

So, without further ado, let's dive in!

The Power of Paraphrasing Tools for Bloggers

For bloggers looking to churn out high-quality, original content efficiently and regularly, paraphrasing tools are an indispensable asset. Here's why every blogger should consider using a paraphrasing tool:

Boost Productivity: Regular content production becomes a breeze with paraphrasing tools, allowing bloggers to meet their content schedules without stress.
Avoid Plagiarism: These tools ensure the originality of content, keeping plagiarism issues at bay.
Break Through Writer's Block: With a paraphrasing tool, bloggers can overcome the dreaded writer's block, turning existing content into a fresh piece.
Assist Non-native English Speakers: Paraphrasing tools can aid non-native English speakers in improving their content's fluency and readability.
Enhance Writing Quality: Using these tools can lead to overall improvements in writing quality, making blog posts more engaging and attractive to readers.

Top 3 Paraphrasing Tools for Bloggers

1) Paraphrasingtool.ai

Paraphrasingtool.ai brings a suite of highly advanced features that caters to a wide array of writing needs. Below is a quick snapshot of the eight paraphrasing modes and their respective benefits:

Free Rewriter: Basic paraphrasing at no cost.
Text Improver: Enhances readability for free.
Near Human: Delivers a near-human touch to your content for free.
Plagiarism Remover: Ensures content originality and integrity (Premium).
Creative: Inspires fresh ideas and unique writing (Premium).
Academic: Enhances academic writing for research purposes (Premium).
Quill Text: Offers clear and concise language (Premium).
Sentence Rephraser: Rephrases each sentence, offering alternate versions (Premium).

Key Features of Paraphrasingtool.ai Tailored for Bloggers

Diverse Paraphrasing Modes: Offering eight different modes, this tool allows you to customize your content in a way that best suits your specific needs.
Tone Customization: The tool lets you adjust the tone of your content to resonate with your particular audience. You can switch between casual, formal, professional, and witty tones to give your blog a unique voice.
Audio, Image, and Speech-to-Text Paraphrasing: It is the only tool currently providing audio and image paraphrasing, as well as speech-to-text capabilities. These features allow bloggers to create a diverse range of content, potentially attracting a wider audience.
Built-In Plagiarism Checker: The plagiarism checker ensures your rephrased content is unique, enhancing your blog's integrity and potentially improving its ranking on search engine results pages.
Powerful Web Browsing Feature: This feature allows you to search and insert text directly into the editor for paraphrasing. By reducing the need for switching between tabs or applications, it makes the research process more efficient.
Synonym-Changing Feature: By clicking on any paraphrased word, you can choose from a list of alternate words to further customize your content. This feature also provides definitions of difficult words, enhancing your vocabulary over time.
Advanced AI Text Editor: With the advanced AI text editor, you can edit your paraphrased content to perfection. It allows translation, summarization, and the addition of bullet points or examples, all within a single click.

Pricing

Its first three modes are available to everyone at no cost. However, Paraphrasingtool.ai provides excellent value with affordable pricing at just $7 per month, or opt for the annual plan at $5 per month.

2) Word AI

Word AI shines as a reliable ally for creating high-quality, engaging content at a pace that's ten times faster than the usual writing process, and it's all free from plagiarism. It can spin multiple versions of your ideas, making it a great tool for combating writer's block.

Key Features of Word AI Tailored for Bloggers

Intelligent Paraphrasing: Word AI is designed to understand the meaning of the context, providing intelligently spun versions that could pass as manually rewritten copies. This capability to rewrite entire sentences and paragraphs while ensuring the relevance of each synonym is a significant plus for writers, journalists, and marketers.
Tool Integration: Word AI can be integrated with various other tools using API, making it convenient for you to work in a cohesive ecosystem of your favorite digital tools.
Grammar and Spelling Checks: This tool refines your content by detecting and correcting spelling and grammatical errors, so your final piece is flawless and professional.
Protection of Elements: Word AI has a unique feature that allows you to protect quotations, titles, and URLs from being altered during the paraphrasing process.

Word AI Pricing

Priced at $49.95 per month, this plan allows you to create unlimited nested spinning and offers bulk spinning of up to 10,000 articles. The annual subscription comes in at $347, saving you over 48% compared to the monthly plan.

3) AIArticleSpinner.co

When it comes to AIarticleSpinner.co for re-purposing existing blog posts for more quality, high readability, and engaging copies, AI Article Spinner stands tall. The content created by this article rewriter maintains the appropriate sentence structure, giving you high-quality content that appears hand-crafted.

Key Features of AI Article Spinner for Bloggers

Different Working Modes: This article spinner offers six different rewriting modes to paraphrase your blog content in ways you want. These modes are:
Standard: This mode restructures and rewords your sentences to ensure meaning is preserved.
Formal: The formal mode revamps your input, adjusting the language to align with formal writing standards.
Sentence Rephraser: This mode focuses on restructuring your entire post sentence by sentence.
Human: Designed to emulate human-like paraphrasing, this mode tends to use more natural language and idioms.
AI Robot: The AI Robot mode utilizes advanced artificial intelligence to construct highly technical and structured sentences.
Plagiarism Remover: This mode transforms your text substantially to ensure it is distinct from the original source to avoid plagiarism.
Effortless Paraphrasing: With this AI text spinner, you don't even need to sign up to start using it. Simply paste your text, click to paraphrase, and voila - you have fresh, engaging content.
Multiple Language Support: This tool offers rewriting in 40+ languages, making it a go-to choice for bloggers around the globe.
Free Usage Limit: This AI article spinner allows free usage for rewriting content up to 5,000 characters. This feature is great for bloggers who are just getting started or those working on shorter posts.
100% Accuracy: AIarticlespinner.co’s spinner spins content with unparalleled accuracy. It ensures the context and sentiment of the original text are accurately maintained, thereby enhancing the overall quality and readability of the spun content.

AI Article Spinner Pricing

Its first two paraphrasing modes are available to everyone at no cost. However, it provides highly affordable pricing at just $10 per month, or opt for the annual plan at $69 per year.

Conclusion

Whether you're looking to refresh your blog, remove plagiarism, beat writer's block, or create engaging content faster, these paraphrasing tools have got you covered.

Paraphrasingtool.ai, Word AI, and AI Article Spinner each have their unique strengths, and choosing the right one depends on your specific needs as a blogger.

So, give these tools a try and see which one works best for you!

How to Create a Blogger Blog - Step by Step Guide

2023-07-23T20:20:00.001-04:00

Blogger.com is probably one of the best platform provided by Google to create free websites. You do not need to pay anything, you get a free subdomain (blogspot.com), you do not need to handle servers, and it provides 100% uptime. Isn't that cool?

If you are stepping in web development, blogger is the best option. It is so simple to create a website (which I will show in a bit) and make it live. However, you might need basic HTML, CSS skills to customize your blogger blog.

Did you know? You can create 100 blogs per account.

First thing first, you need a Gmail account to create a blogspot website. If you do not have one, follow this guide.

Login to your Gmail and type blogger.com in your web browser. You will be redirected to this page. Click on Create Blog.

Next you will be asked to Write a title for your blog. You are allowed to enter 100 characters for title. Write anything, you can change it later. In my case, I am writing: TwistBlogg Test Blog. Click Next.

Now, you will be asked to enter subdomain. You can change that address later. You can even redirect it to some custom domain. Click Next once it says "This blog address is available".

Congratulations. You have successfully created your first blog. Your website will be live at above address. You can click 'View Blog' to check it live though it will be a default blogger theme page with no content.

Next Step: Understanding Blogger.com dashboard - Coming Soon

4 Ways to speed up a slow internet connection

2023-07-05T15:46:00.002-04:00

Hello guys,today I am showing you cool techniques to speed up the internet connection. Nobody admires slow internet connection. Everyone wishes to have high speed internet connection but can't afford for that. So, many of the users are forced to run slow internet connection. But now the slow internet connection problem is solved guys. I've done some research and came here with some tricks to boost up slow internet connection . Yes,you have heard right working tricks to boost up slow internet connections . I've used this 4 ways to increase the speed of my internet connection. So, lets see 4 ways to speed up slow internet connection.

How to Speed up slow internet connection?

1] Optimize your Browser

First of all this simple tip to boost up internet connection. If you're using some old version of browsers or internet explorer then go and optimize that browser to latest version of optimized browser. I would suggest to use Brave or Firefox or Chrome. They uses less memory and bandwidth, protect from third party websites and perform better.

2] Speed up Internet with Top Public DNS Servers

DNS server is also playing an important role in the increasing the speed of your internet connection.Using this trick you can boost up your internet speed on windows easily. Now let's see how to boost the internet connection's speed by using public DNS server addresses.

List of top 10 high speed internet DNS server addresses

Google:
Preferred DNS server - 8.8.8.8 
Alternate DNS server - 8.8.4.4 

Comodo DNS: 
Preferred DNS server - 8.26.56.26 
Alternate DNS server - 8.20.247.20 

Norton DNS: 
Preferred DNS server - 198.153.192.1 
Alternate DNS server - 198.153.194.1 

OpenDNS: 
Preferred DNS server - 208.67.222.222 
Alternate DNS server - 208.67.220.220

Level3: 
Preferred DNS server - 209.244.0.3
Alternate DNS server - 209.244.0.4 

ScrubIT3: 
Preferred DNS server - 67.138.54.120 
Alternate DNS server - 207.225.209.77 

OpenNIC4: 
Preferred DNS server - 69.164.208.50 
Alternate DNS server - 216.87.84.211 

Public-Root5: 
Preferred DNS server - 199.5.157.131 
Alternate DNS server - 208.71.35.137 

DNS Advantage: 
Preferred DNS server - 156.154.70.1 
Alternate DNS server - 156.154.71.1

SmartViper: 
Preferred DNS server - 208.76.50.50 
Alternate DNS server - 208.76.51.51

Steps to perform to speed up internet connection using Public DNS server

Go to Control Panel
Open Network and Sharing Center
Then Open Local Area Connection and select IPV4 and properties

Now Click on Use the following DNS Server addresses and change it with any of above given top public DNS Address and click on OK.

You've now boost up your internet connection using Public high speed DNS Server.

3] Using Command Prompt ( CMD ) to speed up slow internet connection

Yes,you can also boost up internet speed connection using cmd trick. This trick is simple and I would like to say this trick won't increase speed internet connection dramatically but definitely it will boost the existing connection to better performance. So,lets see how to do this.

Steps to perform to boost internet connection using command prompt

Click on Start and Select all programs
Click on accessories and select command prompt
Now,run cmd as administrator
Type following lines in command prompt and hit enter

netsh int tcp show global
netsh int tcp set global chimney=enabled
netsh int tcp set global autotuninglevel=normal
netsch int tcp set global congestionprovider=ctcp

That's all setting to boost up internet connection using command prompt.

4] Speed Internet Connection Using Microsoft by 20%

Most of the Windows computer users don't know that the Microsoft has reserved 20% of our internet bandwidth for some of their own purposes like Windows update. By doing some changes on Local group policy of Windows computers, we can use the internet connection's maximum bandwidth.

Steps to perform to boost internet connection using microsoft by 20%

Click on Start Menu and type run and hit enter. ( Use Windows key + R )
Type gpedit.msc on run command and hit enter.
Now go to Local Group Policy --> Computer Configuration --> Administrative Templates --> Network.
Now double click on QoS Packet Scheduler
Then double click on Limit reservable bandwidth

Now a window will appear. In that window, select Enabled and then make bandwidth limit to 0 (zero). Finally click on OK.

That's all about how to increase speed up a slow internet connection . Hope you enjoyed a lot and if you've got any new tricks then feel free to share here.Thanks for reading this article and don't forget to share your response on 4 ways to speed up slow internet connection. Have a Good bay and enjoy new internet speed.

Reading Progress Bar For Blogger - Displays for Only Post Content

2023-07-05T15:28:00.000-04:00

Last week, we shared how you can show estimated reading time on blogger homepage and posts. Today, we will share a reading progress bar plugin for blogger that displays on top and opens up only for post body content and closes when content is over.

Why you need a reading bar? The answer is simple - It adds relevance/timeliness of an article (just as we list author/date of publication) and strives to display a transparent experience to potential readers.

Let's get started:

Add a Reading Progress Bar in Blogger

Lets start by taking a backup of your content.

Adding Javascript for Reading Bar Widget

Search for /body and paste the following code above it.

<b:if cond='data:view.isPost'>
    <script>/*<![CDATA[*/ 
/* Reading Progress bar by TwistBlogg.com */
const readingProgress = (e, t) =>
{
  const o = document.querySelector(e),
    n = document.querySelector(t),
    a = () =>
    {
      const e = o.getBoundingClientRect(),
        t = window.innerHeight / 2;
      Math.round(n.max - n.value);
      e.top > t && (n.value = 0), e.top < t && (n.value = n.max), e
        .top <= t && e.bottom >= t && (n.value = n.max * Math.abs(e
          .top - t) / e.height), window.addEventListener("scroll",
          a)
    };
  window.addEventListener("scroll", a)
};
/* Custom settings for progress bar */
! function()
{
  const a = document.querySelector(".post-progress");
  a && readingProgress(".post-body", ".post-progress")
}();
/*]]>*/</script> 
  </b:if>

Calling Reading Progress Bar for Blogger

Now, look for position to set reading progress widget. Search where post body starts and paste following code above it.

<b:if cond='data:view.isPost'><progress class='post-progress'/></b:if>

Styling our Progress Bar Plugin

Last step is styling our progress bar. Add following CSS code to your stylesheet. Change background colors to match your theme.

/* Post Progress Bar by TwistBlogg.com */
progress {
  vertical-align: baseline;
}
.post-progress {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 8px;
  transition: opacity 0.15s ease-out 0.3s;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.post-progress:not([value]) {
  display: none;
}
.post-progress,
.post-progress[value]::-webkit-progress-bar {
  background-color: transparent;
}
.post-progress[value]::-webkit-progress-value {
  background-color: #d14984;
}
.post-progress[value]::-moz-progress-bar {
  background-color: #d14984;
}
.post-progress[value="1"] {
  opacity: 0;
}

Understanding the Widget

We select .post-body contents to increase/decrease the value of progress bar. The value is set based on scroll event and varies from 0 to 1. Value is 1 when post body content is over.

Since our progress bar carries a value on scroll, we use that value to show/hide our bar. By default, value=0 we set progress bar to display:none and for value not equal to zero or one, we set some styling and if value=1, we set opacity=0.

That is all. Simple, right? You have a functioning reading progress bar for blogger that only shows up for post body content and hides when content is finished. Feel free to share and leave a comment. Happy Blogging ✊💪

What to read next? Here's a handpicked article for you 😀

Add Responsive Labels or Tags Custom Page in Blogger

2023-07-03T17:06:00.001-04:00

Do you have multiple labels 🏷?

And, are you tired of cloud ⛅ and listing options available in blogger?

Want to do something creative 💥?

Why not show all categories in one page?

Today, we are going to build a custom page and add category or tags available in your blog. Though adding different tags or labels a manual process, it should not take much time to create such pages. You can even limit number of labels you want to visualize. Full control.

So, what is a category or tags page?

Category or Tags page displays different labels in one place with some information about that particular topic. It helps readers easily navigate through your blogger blog. Here's a demo on how it looks:

In case, you still want to stick with cloud or list method, follow this tutorials:

Customize Default Label Cloud Gadget in Blogger - TwistBlogg - Premium Blogger Tutorials and Widgets

Blogger allows you to add a label cloud widget from layout. However, the design is obsolete. Lets customize and make default label cloud stylish.

Customize Default Label List Gadget in Blogger [100% Stylish] - TwistBlogg - Premium Blogger Tutorials and Widgets

Hello bloggers,customize your blogger default label gadget into a stylish and attractive label.Original Blogger label list view isn't that cool and the design is very simple. I've modified the design and gave it a pro look that you will love for sure.

Adding label page in blogger

First we create a simple page from Page section and title it Tags. Later we add codes to that page.

Step 1: Creating a Tags Page in Blogger

Go to Blogger > Pages > New Page and Enter the title "Tags" . Click on Page Settings, modify the page settings as shown below.

Step 2: Adding HTML and CSS Codes for Category Page

Switch to HTML Editor and Press CTRL + A, remove existing code and paste the following code. Hit Publish and you're done.

Make sure to change your custom images and labels addresses respectively.

This is CSS code.

<style>/* Custom Label Page for Blogger by TwistBlogg.com */
.label-page-header {
  padding: 11vh 0 11vh;
  text-align: center;
  margin-top: -40px;
  width: 100vw;
  margin-left: calc(50% - 100vw / 2);
  margin-right: calc(50% - 100vw / 2);
}

.header-title {
  font-size: 6.6rem;
  line-height: 1.25;
  margin: 0;
}
.header-text {
  max-width: 880px;
  padding: 0 5vw;
  margin: 3vh auto 0;
  line-height: 1.5;
  display: block;
  font-size: 2rem;
}

.subtitle {
  display: flex;
  margin-bottom: 4vh;
  padding-top: 1.8vh;
  margin-top: 5px;
}
.subtitle-text {
  font-size: 2rem;
  line-height: 1.1;
  flex: 1 0 50%;
  max-width: 800px;
  margin: 0;
}
.label-wrapper {
  display: grid;
  width: 100%;
  gap: 16px;
  grid-auto-columns: 1fr;
  grid-gap: 16px;
  will-change: transform;
  margin-bottom: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.item.is-loop {
  margin-bottom: 5.2vh;
  will-change: transform;
}
.item-image {
  margin-bottom: 2vh;
  transition: transform 0.3s ease;
  aspect-ratio: 1/1;
}
.item-image:hover {
  transform: translateY(-3px);
}
.item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 26px;
}
.item-content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-right: 2.5vw;
}
.item-title {
  font-family: "Inter", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 1vh 0 0;
  margin-top: 1vh;
  max-width: 490px;
}

.item-title a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 1481px) {
  .label-wrapper {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1480px) and (min-width: 1281px) {
  .label-wrapper {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .label-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1280px) {
  .item.is-loop {
    margin-bottom: 3vh;
  }
  .header-title {
    font-size: 5.5rem;
  }
  .item-title {
    font-size: 2.4rem;
  }
}

@media (min-width: 1025px) {
  .label-wrapper .item-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .label-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1024px) {
  .label-page-header {
    padding-top: 3vh;
  }
  .header-text {
    max-width: 720px;
    font-size: 1.8rem;
  }
  .label-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .label-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .header-title {
    font-size: 4.8rem;
  }
  .item-content {
    padding-right: 3vw;
  }
  .item-title {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 500px) {
  .label-page-header {
    padding-bottom: 8vh;
  }
  .header-title {
    font-size: 3.4rem;
  }
  .subtitle-text {
    font-size: 1.6rem;
  }
  .label-wrapper {
    margin-bottom: 6vh;
  }
  .item-title {
    font-size: 2rem;
  }
}
</style>

This is HTML Code:

<div class="label-page-header">
	<h1 class="header-title">Tags</h1>
	<p class="header-text">Following are some top topics we have written plenty of articles on. Explore them!!</p>
</div>
<p><div class="subtitle">
		<small class="subtitle-text">
		<span>TOP CATEGORIES</span>
  </small>
</div>
</p>

<div class="label-wrapper">
		<div class="item is-loop">
			<div class="item-image">
				<a href="/search/label/Blog%20Themes" aria-label="Blogger Themes">
				<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQ0J1Bx12qLKiw4GYBSpJCdUu5kNclt-3iDTQjZYdewwc9VQj1g6P84uYIOVdxkkhAnPuTQ3XJqSoJ17w5lDtlqe1X0VOxjrNpU6EbEy5teLIz7caBzLmFKvlPn1B-XD2T-zYn6e-lRYz32jeFRs_ACZa_oZKwBOnfqqSjf8EKf9wP7KC0XXPxEIRyQ/s640/Bloggerthemes.jpg" alt='Blogger Themes'/></a>			</div>
			<div class="item-content">
				<h2 class="item-title"><a href="/search/label/blog%20Themes">Themes</a></h2>
			</div>
		</div>
<div class="item is-loop">
			<div class="item-image">
				<a href="/search/label/Blogging%20Tips" aria-label="Blogger Tips">
				<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg40GR-h0jTIWjCHvPz4tga4xd5nOEu_eSZCBsqYzBnbK_2VZOuMnLifxBgay5vK4pVTvY9CmL-T0uPM_5qUH0m04fhDOdyAv1roL6lxI9W0dU-iPHUZQQ0ysQO8ptLQPkxuxxDajFZLFqIEnYSg_7DEWV0xluloqpAmY42DuwOfX_bXYPnJb7Fsb2kdw/s6000/pexels-ann-h-2789779.jpg" alt='Blogger Tips'/></a>			</div>
			<div class="item-content">
				<h2 class="item-title"><a href="/search/label/Blogging%20Tips">Blogging Tips</a></h2>
			</div>
		</div>
  <div class="item is-loop">
			<div class="item-image">
				<a href="/search/label/Blog%20Customize" aria-label="Blogger Customize">
				<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLD_Dd4CZuUv0D0swI9H2De71zVKmxuHG2xbe79Cf1IrHIIMUt6Giub8KMPfbmrpNEtYQ3Ch2CtzLPxZr0prJqryo3nS0Q4JtaNj4gYAhr7lgi4gVnE4GnFq-rUq6bjPv557ARReCJzMzlBHFhKUgs2JMVRThnwLKUYyF0M8ksmiXmGtUwNXk_R_n3nA/s6720/pexels-thirdman-7180819.jpg" alt='Blogger Customize'/></a>			</div>
			<div class="item-content">
				<h2 class="item-title"><a href="/search/label/Blog%20Customize">Customization</a></h2>
			</div>
		</div>
  <div class="item is-loop">
			<div class="item-image">
				<a href="/search/label/SEO" aria-label="SEO">
				<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQomC1y-x8-33u1zfq-HKWCQXDAzDyd2DzgoeuZi7XOdYd3GAPGrjir8SxiejTiWb0R8wVdi7cbVmMjsP6rcNukNlPdTMMMl9Hmozf5AIJls8xfY_0_506UDSJCDwLG6cOf53h9LvFHJYJX7f5ax22jxvsFJ6rBZr4aE9YYhWkrWRETsw2MJlyfJkhLg/s1920/search-engine-optimization-4111000_1920.jpg" alt='SEO'/></a>			</div>
			<div class="item-content">
				<h2 class="item-title"><a href="/search/label/SEO">SEO</a></h2>
			</div>
		</div>
  <div class="item is-loop">
			<div class="item-image">
				<a href="/search/label/Blog%20Widgets" aria-label="Blogger Widgets">
				<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT1FzDrmSCcPY9Tckxt39PiJHpcHpy_ujfvB1XzZ8bpuptKomfLArowsSvXd4-C7YSvU_gVSk62IZsjw1msnZMwBRBhz37Xy3HLnXKHMncv4Tzz6qY8Og70Fsum8zM89Wi9c3Ug6Priy-Z3YNJXsjAMcsmJqGpe6FvGEZtgsY2r_FA_E-pC8pVj-5XcA/s6016/pexels-miguel-a%CC%81-padrin%CC%83a%CC%81n-3930091.jpg" alt='Blogger Widgets'/></a>			</div>
			<div class="item-content">
				<h2 class="item-title"><a href="/search/label/Blog%20Widgets">Widgets</a></h2>
			</div>
		</div>
  <div class="item is-loop">
			<div class="item-image">
				<a href="/search/label/Tips%20and%20Tricks" aria-label="Tips And Tricks">
				<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVigEMB0CRsOozCO2aXjBbMkGLP0nNAzzDjY3-99eGeTqNHKyyl8mp83ADpWkruLb_Fj600LDzLySzs-W1e7iX4R7NMcFNrkxGdIH-ckVkl76TScROclgzoOFHfBW9_n8h_22DyQoy_jpMrYBRUBoe-MKQ6SEv4L8ltX0lBAcy1JijCZtZVdeIkenFrg/s2400/pexels-pixabay-355948.jpg" alt='Tips And Tricks'/></a>			</div>
			<div class="item-content">
				<h2 class="item-title"><a href="/search/label/Tips%20and%20Tricks">Tips &amp; Tricks</a></h2>
			</div>
		</div>
	</div>

That is all. You have a responsive fully functioning Category page in your blog. Now, add a navigation in your blog and link it to label page. Happy Blogging 💣💪

Add Estimated Reading Time To Blogger Homepage and Posts

2023-06-28T19:19:00.003-04:00

Reading time ⏱️ widget displays how long it takes readers to complete an article. For instance, a 10 minutes reading time indicates it takes in average of 10 minutes time for readers to finish reading that content.

This widget came in light since the launch of medium.com back in 2013.

The idea is simple, we create a function that calculate number of words in an article and divide that by 200 which is a count of words what an average person read in a minute. It gives our estimated reading time. You can definitely set that standard value. Medium uses 275 wpm.

Still confused? 🤔

Lets take an example: We have a 1200 words article. We assume a reading time of 200 words per minute that gives us 6 minutes of reading time (1200/200). Of course, you don’t have to manually calculate the read time of all your articles.

Now, you have an idea of what reading time is and how it is calculated. Lets check,

Why you need to add one and
How the estimated reading time widget provided by us for blogger homepage and posts different from other available articles online?

Why you need to show Reading time on blogger posts and homepage?

It adds relevance/timeliness (just as we list author/date of publication...)
It strives to display a transparent experience to potential readers (people may be commuting to work and have 10 minutes left on their trip),
When readers are viewing the article page itself, they may look at the size of the scroll bar for an indication of article length. This is often erroneous as there may be a bunch of non-article content below the article itself (related posts, comments, footers etc).

How is this reading time widget different?

There are many plugins and widgets that display reading time on posts and homepage of Wordpress, Ghost and other platforms. What they do is calculate reading time on server and display on client's machine.

However, for blogger.com, there is no widget that can display reading time on homepage since blogger do not provide server-side support.

So, we are going to perform client side calculations and display reading times for every posts. This enables showing read time not only on blogger posts, but on homepage too.

We use AJAX requests to fetch contents of all articles and calculate reading time. This is the only solution for now. Please note, this will cause additional requests from your page and causes performance issues.

And this widget is not limited to Blogger, it works for Wordpress, Ghost and other platforms too.

Cool, hah?

Lets find out how you can add one to your blog. Here's a demo from one of my blogs:

How to add estimated reading time to blogger homepage and posts?

Take a backup of your blog and add this script above closing body tag.

You have my permission to share this widget in your blog, however, a backlink to this article is must. Also, keep credits intact.

There are two versions of code. Use one that fits your blog.

1) If your blog do not have load more button or Infinite Scroll

<script>  /*<![CDATA[*/
// Estimated Reading Post Widget for Blogger Homepage and posts
// Code by : TwistBlogg.com

// Function to calculate Reading Time 
// By default, reading speed is set to 200
function calcTime(content) {
	const words = content.trim().split(/\s+/).length;
	const time = Math.ceil(words / 200); // Adjust the value 200 to your desired reading speed
	const label = time === 1 ? 'min' : 'mins';
	return time + ' ' + label + ' read';
}

// Remote File Access 
// Returns reading time of individual posts
function fetchContent(url, timeEl) {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			const responseText = xhr.responseText;
			const parser = new DOMParser();
			const postDOM = parser.parseFromString(responseText, 'text/html');
			const postContent = postDOM.querySelector('.post-body');
			if (postContent) {
				const readingTime = calcTime(postContent.textContent);
				const childTimeEl = timeEl.querySelector('.reading-time');
				if (childTimeEl) {
					childTimeEl.textContent = readingTime;
					childTimeEl.setAttribute('title', 'It takes ' + readingTime + 'ing time');
					childTimeEl.setAttribute('aria-label', 'It takes ' + readingTime + 'ing time');
				}
			}
		}
	};
	xhr.send();
}

// Grab attribute value of data-remote-path
function displayTime() {
	const elemsWithDataPath = document.querySelectorAll('[data-remote-path]');

	elemsWithDataPath.forEach(function(elem) {
		const url = elem.dataset.remotePath;
		fetchContent(url, elem);
	});
}

document.addEventListener('DOMContentLoaded', displayTime);
 /*]]>*/
</script>

2) If your blogger homepage has AJAX Load more or infinite scroll enabled, use this code instead of above. We added an active listener that reads dynamic changes in blogger HTML.

<script>  /*<![CDATA[*/
// Estimated Reading Post Widget for Blogger Homepage and posts
// Code by : TwistBlogg.com

// Function to calculate Reading Time 
// By default, reading speed is set to 200
function calcTime(content) {
	const words = content.trim().split(/\s+/).length;
	const time = Math.ceil(words / 200); // Adjust the value 200 to your desired reading speed
	const label = time === 1 ? 'min' : 'mins';
	return time + ' ' + label + ' read';
}

// Remote File Access 
// Returns reading time of individual posts
function fetchContent(url, timeEl) {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			const responseText = xhr.responseText;
			const parser = new DOMParser();
			const postDOM = parser.parseFromString(responseText, 'text/html');
			const postContent = postDOM.querySelector('.post-body');
			if (postContent) {
				const readingTime = calcTime(postContent.textContent);
				const childTimeEl = timeEl.querySelector('.reading-time');
				if (childTimeEl) {
					childTimeEl.textContent = readingTime;
					childTimeEl.setAttribute('title', 'It takes ' + readingTime + 'ing time');
					childTimeEl.setAttribute('aria-label', 'It takes ' + readingTime + 'ing time');
				}
			}
		}
	};
	xhr.send();
}

// Grab attribute value of data-remote-path
function displayTime() {
	const elemsWithDataPath = document.querySelectorAll('[data-remote-path]');

	elemsWithDataPath.forEach(function(elem) {
		const url = elem.dataset.remotePath;
		fetchContent(url, elem);
	});
}

document.addEventListener('DOMContentLoaded', displayTime);

// Catch changes in HTML Structure
// Add this for Infinite Scroll Homepage
if (window.location.pathname === '/' || window.location.pathname === '/search') {
	const targetNode = document.body;

	const observer = new MutationObserver(function(mutationsList) {
		mutationsList.forEach(function(mutation) {
			if (mutation.type === 'childList') {
				mutation.addedNodes.forEach(function(node) {
					if (node.nodeType === Node.ELEMENT_NODE && node.matches('[data-remote-path]')) {
						fetchContent(node.dataset.remotePath, node);
					}
				});
			}
		});
	});

	observer.observe(targetNode, {
		childList: true,
		subtree: true
	});
}
 /*]]>*/
</script>

Now, you need to do two things:

1) Add link to data-remote-path

This step is important, you must pass links through data-remote-path attribute in parent element for this widget to work. This enables you to not rely on any classes and set reading time for any posts. So, it works for:

Homepage posts
Related posts
Pager Navigation posts - Hey, just a reminder we have shared cool pager navigation widget.
Popular posts
Anything...

Since we are focusing on blogger homepage, I will show you how to set data-remote-path in homepage articles and posts.

Search for <article> tag and add this tag:

<article expr:data-remote-path='data:post.url'>

If you want to display reading time on other posts then you can directly pass link value to data-remote-path. Example:

 <li data-remote-path="https://www.twistblogg.com/2015/10/killer-seo-guides-for-newbie-blogger.html">
...
...
...
<!-- Location where you wish to display reading time-->
<span class="reading-time"/>
...
...
...
        </li>

2) Add this piece of code where you want to display reading time.

In order to display reading time on blogger homepage, you need to add this class .reading-time to positions you want to display.

<span class="reading-time"/>

That is all. You have a functioning estimated reading time widget for blogger that displays article on homepage and posts. Feel free to share and leave a comment. Happy Blogging 🙋💪

Top 5 Modern and Creative Premium Blogger Template

2023-06-14T21:27:00.001-04:00

Blogger is a popular platform for creating blogs and sharing articles. It is simple to get started with blogger, however, getting a perfect modern theme is not so easy.

There are lots of developers and designers publishing blogger templates. Choosing a creative premium one is something most users struggle with. Do not worry, I get you covered 💪.

Today, I will share my top 5 modern creative blogger themes list along with download links. Explore them and share which one is your favourite in comment sections.

*Disclaimer: This article is not generated by ChatGPT.*

How to choose modern premium blogger designs?

You might be thinking how to know if a theme is premium or not. Well, here are couple of reasons to question for every themes whether it is ...

Ads Ready.
Responsive.
Has dark and Light Mode.
Has in-built plugins and components.
Comes with Different blog variations.
Retina Ready.
Provides easy customization.
Comes with Clean Layout.

Themes listed below pass above questions. Let's get started.

List of Best 5 Modern Blogger Themes - 2023

Below are top five creative and premium themes for blogger. Choose one that fits your niche.

5) Mauro - Multipurpose Blogger Template

Do you like bold and modern designed blogger theme? Mauro is best for you. Powered by Bootstrap framework, it is best suited for content based blogs.

Mauro

Mauro is a modern Blogger Theme that looks and works great on mobile devices, based on Bootstrap framework. It’s fully responsive. Suitable for Blog, for everyone who wants to share their stories about business, design, lifestyle, food, recipes, travel, news etc.

When to choose Mauro?

This theme resembles modern ghost themes with bold headings and sleek designs. If you are into ghost themes, choose Mauro.

Also, it is getting frequent updates. At the time of writing, it got eight updates within span of three months. Great, ehh?

Features of Mauro Blog Template

Built with Bootstrap
4 Blog Post Styles
RTL Support
Uses Google Fonts & FontAwesome Icons
Light – Dark Switcher Button
Clear & Validate Code
Header Ads Banner
Featured post
Easy Customizable
Dynamic Bootstrap Menu
Load More Posts
Older and Newer post navigation
Unlimited Color Combination
Font Awesome Icons
and more…

4) Simpl: Responsive Grid-layout Theme for Blogspot

Simpl is a clean, sleek and elegant template. It is best suited for content and personal blogs. The font and color combination provide ease to readers.

Simpl

Simpl is a Blogspot theme with a sleek and modern design. Personal or professional, lifestyle, culinary, design or even traveling blog — Simpl will easily fit it all.

When to choose Simpl?

If you love simple yet modern and creative layout design, Simpl is the go to theme.

Features of Simpl blogger theme

Responsive and mobile optimized layout
RTL & Localization support
Built-in related posts
Extensive theme customization
Advanced image width options
Retina ready
Easily share blockquote to Twitter
Contact form ready
Custom error page
Clean, well organised layout with show/hide gadget option
New comment form UI – completely redesigned
This theme is based on the 3rd generation framework and layout
Perfectly calibrated typography
Custom sharing button
Extensive documentation
Enhanced YouTube video support
No-image post support

3) Davidews - Video Blogger Theme

Want a youtube clone for blogger? Davidews got you covered. This theme is best for video blogs. It comes with views, like and dislike counter.

Davidews

Davidews is the newest Responsive Video Blogger theme developed specifically for video websites. Davidews brings you the latest trending video website design with beautiful full width and fixed page templates that exude elegance and charm, you will have an innovative and fully functional video website.

Best Modern Premium Themes for Download #Themes #Premium #Blogger

When to choose Davidews?

If you share video contents more frequently, go for it.

Features of Davidews Template

2+ Homepage layouts.
100% Responsive.
Optimized for mobile
Built using Bootstrap v5.2.3
Using Bootstrap Icons v1.9.1
Using FontAwesome Icons v6.2.1
Using Bootstrap Flexbox Grid.
Powerfull Admin Panel 1.0
Easy to Customize.
Live Customizer : Colors, Fonts, Advanced.
Clean & Elegant Design.
Clean Typography.
Embed video by URLs.
Embed Videos from Youtube, Vimeo, Dailymotion,Twitch, Facebook, Google Drive, Any embed.
Like and dislike buttons.
Visitor counter
The theme automatically recognizes the embed.
You can embed any video embed.
And many more…

Loving our list? Share it with fellow twitters.

2) Okays! - Blogger Personal Theme Responsive

Want a wordpress like blogger theme? Okays is the one. This theme comes with different modules and allows easy customization and editing. This is my favourite blogger design.

Okays!

Okays! is a blogger theme with a sleek and modern design. The features of Okays! it will help you easily create a beautiful post. The theme allows you to add modular widgets of different types so that readers find it easier to discover the most interesting articles in the area of Food, Fashion, lifestyle and design, etc.

When to choose Okays?

If your blog focuses on food and fashion contents, Okays fits best for you.

Features of Okays Template for Blogger

2+ Homepage layouts.
100% Responsive.
Built using Bootstrap 4.6.0
Bootstrap Flexbox Grid.
Powerful Admin Panel.
Well Documented.
Easy to Customize.
Unlimited Colors.
Clean & Elegant Design.
Content Search
Header/Navbar Layouts.
Header Topbar.
Theme Option, General, Page Articles, Page Filter, Error 404
Sections Main Page Content
Sections Layouts + Components: Announcement Banner, Gadges, Iconsbox, Buttons, Progress Bar, countdown, Social Media Icons, Tabs, Preloaders (Spinners), Scroll Indicatos, Grid, Go Top, Pagination, Modal Windows, Button Video Modal, Floating Video. Among other!

1) Unnao - Modern Blog & Magazine Blogger Theme

Unnao is a modern magazine theme designed with latest blogger tactics. It loads insanely fast and provides modular components. You can easily customize and add sections.

Unnao

Unnao is a modern blog and magazine theme for blogger blogs. It is made from scratch with latest best practices. It has multiple unique and advanced features like live search box and infinite prev/next buttons.

CodePen - ADD PERFECT DARK MODE FOR BLOGGER

When to choose Unnao?

If you run a tech or magazine blog, Unnao can be utilized at best.

Features of Unnao Modern Blog Theme

Responsive – works well on mobile devices
4 Post Layout types
3 Header Layout types
2 Related Posts types
Advanced ajax Search Box
Supports RTL
Show/Hide sidebar on homepage
Multi Level menu with tabbed posts section
Spot Loading of Categories
Ajax powered Mega Menu
Unique post block section inside post
Post Page scroll indicator
Fast Loading even on mobile devices
Unlimited prev/next for category sections
Customized Popular and Featured Post widgets
Supports youtube thumbnail on all sections
Automatic Table of Contents on post pages
Subscribe to Email widget
Related Posts with video thumbnail support
Supports all social media icons
Supports Unlimited colors
Static/Sticky sidebar and header
Well Documented with screenshots
Clean and elegant design
Translation Ready
No coding knowledge required

That's all. You now have top 5 modern premium blogger template. Let me know which one you liked the most. I vote for Okays theme. Happy Blogging 💪😀💣

Creating Perfect Night or Dark Mode in Blogger with Pure Javascript

2023-06-09T01:07:00.000-04:00

Want to add dark mode 🌙 in your website blog?

Tired 😫 of Jquery dependent methods?

Some use @media (prefers-color-scheme: dark) method that switches mode based on your system mode preference. But should not we give users chance to switch mode?

Well, here's the solution: A complete dark mode for blogger with pure javascript that changes mode based on system preference by default and upon user selection on dark/light mode, it overrides on next reload.

Confused 😕?

This image will guide you how our dark/night mode widget for blogger functions. This method works for all type of websites.

A quick note,

If your website is using Jquery, follow this guide "How to Add Night Mode or Dark Mode in Blogger Blog Easily - Jquery Edition".

Here's live demo of perfect dark mode:

Creating perfect dark mode for your blogger includes setting system mode by default and also creating toggle button that enable users to switch mode.

Add Eye or Read Mode Feature in your Blogger Blog - TwistBlogg - Premium Blogger Tutorials and Widgets

How to add Dark mode in blogger blog?

Follow these steps for a perfect night mode in your blog. Do not forget to take a full backup of your theme before proceeding.

Setting Global Variables

First thing first, you need to set root variables, that way its easier to change colors based on dark/light mode.

In blogger, go to Edit HTML and look for <b:skin and paste your root variables within :root pseudo class.

Your dark mode CSS code should follow this pattern:

/* Light Color Scheme (Default + Override) */
:root,
:root[data-force-color-mode="light"] {
	color-scheme: light dark;
	--text-color: #1B1B1B;
	--background-color: #F7F7F5;
	--link-color: #d14984;
    ...
}

/* Dark Color Scheme (System Preference) */
@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #EDEDED;
		--background-color: #27292D;
		--link-color: #5BBEF5;
        ...
	}
}

/* Dark Color Scheme (Override) */
:root[data-force-color-mode="dark"] {
	--text-color: #EDEDED;
	--background-color: #27292D;
	--link-color: #5BBEF5;
    ...
}

Then, we can reference these variables in our stylesheets like so-

body {
    background-color: var(--background-color);
    color: var(--text-color);

    /*other styles*/
    .....
}

a {
    color: var(--link-color);

    /*other styles*/
    .....
}

We are using data-force-color-mode attribute to force color mode on HTML level.

It is important to duplicate dark mode CSS properties since we are setting options for both user selection and system preference.

Setting mode on HTML tag - Optional

This step is optional. You can set color mode in html tag using data-force-color-mode attribute.

<!-- No Override (e.g. follow System Preferences) -->
<html>

<!-- Force Light Mode -->
<html data-force-color-mode="light">

<!-- Force Dark Mode -->
<html data-force-color-mode="dark">

Checking if there is an override on HTML tag

Sometimes because of FOUC(Flash of Unstyled Content) issue, the mode set at HTML tag does not function. We fix it by adding this code in header. Learn mode about FOUC here.

<head>
...
    <script>
        // Check for override in HTML tag. If yes, let the markup know by setting an attribute on the <html> element
        const colorModeOverride = window.localStorage.getItem('color-mode');
        const hasColorModeOverride = typeof colorModeOverride === 'string';
        if (hasColorModeOverride) {
            document.documentElement.setAttribute('data-force-color-mode', colorModeOverride);
        }
    </script>
 ...   
</head>

Setting Light/Dark Toggle Button

We use input HTML element to create our toggle button. Also, add below script right next to your toggle button in order to make sure the Dark Mode Checkbox shows the correct value on page load.

<input id='toggle-darkmode' type='checkbox'/>
<label aria-label='auto' aria-live='polite' class='iconmode' for='toggle-darkmode'>

<!-- Moon Icon -->
<svg aria-hidden='true' class='moonmode' height='24' viewBox='0 0 240 226' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M154.458 209.12c-40.112-15.475-66.03-53.191-66.03-96.085s25.918-80.604 66.03-96.079a4.99 4.99 0 0 0 .001-9.311C141.317 2.572 127.648 0 113.831 0 51.501 0 .791 50.707.791 113.034c0 62.334 50.709 113.047 113.039 113.047 13.803 0 27.473-2.574 40.629-7.65a4.99 4.99 0 0 0 3.193-4.656c.001-2.063-1.269-3.913-3.194-4.655zm-40.627 6.981c-56.827 0-103.059-46.236-103.059-103.067C10.771 56.21 57.004 9.98 113.831 9.98c8.419 0 16.784 1.05 24.99 3.132-15.911 8.372-29.592 20.405-40.03 35.307-13.308 18.998-20.342 41.342-20.342 64.615s7.034 45.616 20.341 64.617c10.44 14.905 24.12 26.939 40.033 35.312a101.39 101.39 0 0 1-24.992 3.138zm109.646-66.181l-19.347-15.972 2.179-24.988a4.99 4.99 0 0 0-7.649-4.644l-21.161 13.456-23.11-9.799a4.99 4.99 0 0 0-6.78 5.842l6.277 24.299-16.459 18.928a4.99 4.99 0 0 0 3.459 8.255l25.034 1.542 12.932 21.518a4.99 4.99 0 0 0 4.276 2.42l.414-.017a4.99 4.99 0 0 0 4.23-3.142l9.206-23.346 24.443-5.641c1.852-.427 3.299-1.868 3.734-3.717s-.214-3.785-1.678-4.994zm-31.301 5.217a4.99 4.99 0 0 0-3.521 3.032l-6.458 16.379-9.074-15.098c-.845-1.408-2.33-2.309-3.97-2.41l-17.557-1.082 11.544-13.276a4.99 4.99 0 0 0 1.066-4.522l-4.405-17.052 16.216 6.875c1.511.64 3.24.498 4.625-.384l14.846-9.44-1.528 17.533a4.99 4.99 0 0 0 1.794 4.282l13.573 11.205-17.151 3.958zm-30.269-86.734l11.856.729 6.123 10.197a4.16 4.16 0 0 0 3.564 2.018l.344-.014a4.16 4.16 0 0 0 3.526-2.618l4.363-11.06 11.579-2.674a4.16 4.16 0 0 0 1.711-7.259l-9.167-7.569 1.038-11.833a4.16 4.16 0 0 0-6.372-3.873l-10.036 6.375-10.945-4.641a4.16 4.16 0 0 0-4.338.678c-1.199 1.034-1.708 2.658-1.311 4.191l2.977 11.511-7.793 8.962a4.16 4.16 0 0 0-.698 4.336c.611 1.461 1.999 2.447 3.579 2.544zm13.511-15.805l-1.415-5.469 5.196 2.203c1.258.533 2.699.414 3.853-.318l4.771-3.031-.494 5.623c-.12 1.364.44 2.699 1.496 3.57l4.358 3.597-5.502 1.271a4.16 4.16 0 0 0-2.933 2.525l-2.071 5.251-2.909-4.846a4.16 4.16 0 0 0-3.31-2.01l-5.625-.346 3.697-4.252c.898-1.031 1.23-2.441.888-3.768z'></path></svg>

<!-- Sun Icon -->
<svg aria-hidden='true' class='sunmode' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.069 13h-4.069v-2h4.069c-.041.328-.069.661-.069 1s.028.672.069 1zm3.034-7.312l-2.881-2.881-1.414 1.414 2.881 2.881c.411-.529.885-1.003 1.414-1.414zm11.209 1.414l2.881-2.881-1.414-1.414-2.881 2.881c.528.411 1.002.886 1.414 1.414zm-6.312-3.102c.339 0 .672.028 1 .069v-4.069h-2v4.069c.328-.041.661-.069 1-.069zm0 16c-.339 0-.672-.028-1-.069v4.069h2v-4.069c-.328.041-.661.069-1 .069zm7.931-9c.041.328.069.661.069 1s-.028.672-.069 1h4.069v-2h-4.069zm-3.033 7.312l2.88 2.88 1.415-1.414-2.88-2.88c-.412.528-.886 1.002-1.415 1.414zm-11.21-1.415l-2.88 2.88 1.414 1.414 2.88-2.88c-.528-.411-1.003-.885-1.414-1.414zm2.312-4.897c0 2.206 1.794 4 4 4s4-1.794 4-4-1.794-4-4-4-4 1.794-4 4zm10 0c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6 6 2.686 6 6z'></path></svg>
</label>
<script>
    // Check the input if
    // - Override is set to dark or,
    // - There is no override but the system prefers dark mode, 
    // - Enable Dark mode
    if ((colorModeOverride == 'dark') || (!hasColorModeOverride && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.querySelector('#toggle-darkmode').checked = true;
    }
</script>

Adding CSS to Show/Hide Icons

We have used 2 svg icons for sun and moon. One needs to be hidden when other is toggled. Paste this CSS code in your blogger template.

/* Mode Switch Toggle */
#toggle-darkmode,
#toggle-darkmode:checked ~ .iconmode .moonmode,
.iconmode .sunmode {
  display: none;
}
.iconmode {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;
}
.iconmode .moonmode {
  display: block;
  stroke-width: 2px;
  stroke: currentColor;
}
.iconmode .sunmode{
  fill: currentColor;
}
#toggle-darkmode:checked ~ .iconmode .sunmode {
  display: block;
}

Adding Javascript for Blogger Dark/Light Mode Feature

Upon clicking toggle button, this javascript function will kick into action.

First it checks if local storage is set. If so, use mode set on localStorage else, check if any mode is forced on html tag, if yes, use that mode else use system preference.

We are also adding active listener to keep an eye for change in system dark/light mode.

Add following code above closing body tag.

<script type='text/javascript'> /*<![CDATA[*/
const setColorMode = (mode) => {
	// If mode is given
	if (mode) {
		// Update data-force-color-mode attribute on html
		document.documentElement.setAttribute('data-force-color-mode', mode);
		// Set in local storage
		window.localStorage.setItem('color-mode', mode);
		// Make sure the toggle is set to dark
		document.querySelector('#toggle-darkmode').checked = (mode === 'dark');
	}
	
	// If no mode is given
	else {
		// Remove data-force-color-mode attribute from html
		document.documentElement.removeAttribute('data-force-color-mode');
		// Remove entry from local storage
		window.localStorage.removeItem('color-mode');
		// Make sure the toggle input is checked, matching the system preferences
		document.querySelector('#toggle-darkmode').checked = window.matchMedia('(prefers-color-scheme: dark)').matches;
	}
}

document.querySelector('#toggle-darkmode').addEventListener('click', (e) => {
	setColorMode(e.target.checked ? 'dark' : 'light');
});

document.querySelector('#reset-darkmode').addEventListener('click', (e) => {
	e.preventDefault();
	setColorMode(false);
});

// Adding listener to keep an eye out for System Mode Changes
// Activates when no local Storage is set
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addListener(() => {
	// Ignore change if there's an override set
	if (document.documentElement.getAttribute('data-force-color-mode')) {
		return;
	}

	// Make sure the input toggle is checked
 	document.querySelector('#toggle-darkmode').checked = mediaQuery.matches;
});
/*]]>*/</script>

That is all. You have successfully installed dark mode or night mode in your blogger blog. Hope you liked it. Don't forget to leave a comment and share. Happy blogging :)

So, what's next?

What about eye or read mode for your blog? Seems like a good idea right?

We got you covered. Here's next article for you to read in our blog.

Follow this simple guide to add Read mode or eye mode widget in your blogger blog. It allows users ease while reading without hurting their eyes.

Create A Dark/Light Mode Switch with CSS Variables - DEV Community

Resources:

Step by step guide on how to create a dark-light mode switch with CSS variables in your website. Tagged with webdev, css, showdev.

dev.to

The Complete Guide to the Dark Mode Toggle

This complete guide to the dark mode toggle includes best practices for implementing a color mode switcher on your website, all with a very pretty demo!

ryanfeigenbaum.com

Dark Mode Toggles Should be a Browser Feature – Bram.us

www.bram.us

How to design delightful dark themes

When done well, dark themes have many benefits. But it's difficult to create them. Here's how we did it at Superhuman, the fastest email experience on earth.

blog.superhuman.com

Create an automatic Table of Content (TOC) in Blogger Blog

2023-05-12T23:57:00.000-04:00

Ever went through long articles and wished 🤔 there was an option to jump through?

Or return to previous sections?

Want to provide that experience 🧪 to your readers?

I will show you a trick that automatically displays table of content in your blogger blog.

Yes, you heard it right, automatic generation of TOC. 🤩

You do not need to add any code while writing your content. This script will auto add IDs (if not present) in your heading tags and displays TOC at the top of article.

What is Table of Content (TOC)?

TOC is a simple jump link that enables users to jump within the article. It displays all heading tags and readers can navigate to sections they want to read.

Why automatic table of Contents for your blogger?

The reason is simple - no manual coding. Manually adding ids in heading and inserting table of contents code in every article is exhausting and time consuming.

Anyways, I will mention some extra benefits of using this auto toc script for blogger.

SEO friendly - Google loves when article is divided into sections.
Auto insert table of content at the top of every article.
No headache of adding IDs to heading tags - this script auto adds IDs if not present.
Does not show up for small articles with less than 2 headings. Lets be honest, it makes no sense to display table of content in small articles.
No external dependencies.
Very easy to install.
And many more...

Adding TOC in Blogger blog

I told you earlier, its very simple to install. Add this javascript code before closing body tag and it automatically appends TOC at the top of article. No need to do anything. Yes, of course, you can style your TOC with CSS.

<script>/*<![CDATA[*/
// Automatic TOC code shared by TwistBlogg.com
// Do not share without permission and keep credit intact.
const tocContainer = document.querySelector(".post-body");
const headings = tocContainer.querySelectorAll("h2, h3, h4, h5, h6");

// Checking if there are more than 2 headings
if (headings.length > 2) {
	const details = document.createElement("details");
	details.setAttribute("class", "toc-content");
	const summary = document.createElement("summary");
	summary.innerHTML = "<strong>Table of Contents</strong>";
	details.append(summary);

	headings.forEach((el) => {
  // Generate IDs if they don't exist - optional
		el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g, "-");
		const p = document.createElement("p");
  // Add a class to the p tag with the heading like "toc-h2"
		p.setAttribute("class", "toc-" + el.tagName.toLocaleLowerCase());
		const a = document.createElement("a");
  // Add a link to the section in the text
		a.setAttribute("class", "toc-link");
		a.textContent = el.textContent;
		a.href = "#" + el.id;
		p.append(a);
		details.append(p);
	});
 // Add TOC to the beginning of the article
	tocContainer.prepend(details);
}
/*]]>*/</script>

If you want to know how this code works, check further in this article.

Styling Automatic Table of Content for Blogger blog

This is very plain CSS code that does the work. Customize the classes accordingly.

And please let me know if you want a more sophisticated design, I can create something amazing.

/* Reduce the size and line-height of the TOC */
.toc-content {
  font-size: 1em;
  line-height: 1.1;
  cursor: pointer;
}

.toc-content a {
  text-decoration: none;
}

.toc-content a:hover{
  text-decoration: none;
}

/* Indent headings based on their level */
.toc-h3 {
  padding-left: 1em;
}
.toc-h4 {
  padding-left: 2em;
}
.toc-h5 {
  padding-left: 3em;
}
.toc-h5 {
  padding-left: 4em;
}

Understanding how our auto Table of Content works

If you are a geek and wants to know how the code works, here it is.

This code selects .post-body class and finds all heading tags.

const tocContainer = document.querySelector(".post-body");
const headings = tocContainer.querySelectorAll("h2, h3, h4, h5, h6");

Our headings variable now holds all heading tags. Checking if there are more than 2 headings, if yes, run the script.

if (headings.length > 2) {
    // Create table of contents
}

Let's create a toggle button. We create a <details> tag element and insert classes. That way we can use browser native support for dropdown toggle button. The <details> element includes a <summary> tag where you can insert the text that displays even when the toggle is closed. In our case, it is 'Table of Contents'. We are doing so as to hide TOC until it's wanted.

const details = document.createElement('details');
details.setAttribute('class', 'toc-content'); 
const summary = document.createElement('summary');
summary.innerHTML = '<strong>Table of Contents</strong>';
details.append(summary);

Generate IDs if they don't exist. IDs are important for table of content to navigate through so we check if your heading tags have IDs, if not we use regex to auto generate ids and append them to our heading tags.

headings.forEach((el) => {
	// Generate IDs if they don't exist
    el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g,"-");
    
    // Rest of the loop
}

Settings classes and links in p and a tags.

const p = document.createElement("p");

    // Add a class to the p tag with the heading like "toc-h2"
    p.setAttribute("class", "toc-" + el.tagName.toLocaleLowerCase());
    const a = document.createElement("a");
    a.setAttribute("class", "toc-link");
    a.textContent = el.textContent;

    // Add a link to the section in the text
    a.href = "#" + el.id;
    p.append(a);
    details.append(p);

Insert TOC at the beginning of the article.

articleContainer.prepend(details);

That is all. We successfully created auto generating table of contents(TOC) for our blogger blog. I hope you were able to install it in your site. Do leave a comment if you want customized TOC. Happy Blogging. 😀💪

Hey, got a minute?

Here are some handpicked articles for your to read next.

Add Link/Blog Cards in Blogger using Bookmarklet

2023-01-23T23:03:00.001-05:00

Links in blogger are simple anchor tags <a> which forward readers to new URLs. They play important role in a blog not only for exposure but also interlinking different articles within a post can help in page ranking.

Normally, links are displayed by using text (eg: This is a link.) Or, imagine they can be displayed as following:

Add Next/Previous Pager Navigation with Image - Blogger - TwistBlogg - Premium Blogger Tutorials and Widgets

A simple guide on how to add older previous pager or next prev blog pager in new blogger layout. We also shared stylish version that displays image.

7 Tips to Improve Your Writing Skills Quickly - TwistBlogg - Premium Blogger Tutorials and Widgets

Which one you prefer?

Let's be honest. I prefer the later way of displaying links. We call them -- blog cards or link cards.

A 'Blog Card' is an embedded format that displays the title, summary, featured image, etc. of the article you want to post on your blog in an easy-to-read manner.

Dissecting a blog card shows following elements:

We will be using blog tags and social media information present in a link to display our blog card. For instance, og:image to display thumbnail image and <title> tag to display link title. Following table should make you clear.

Elements	How they are achieved?
Post title	`<title>`
Meta Description	`<meta name ="description" content="">`
Favicon	Acquired using Google's API
URL shortform	JavaScript `location` object
Thumbnail	`<meta property="og:image" content="">`

Let's get started. Before that, check out how our blog card looks without image.

Writing is an art which everyone is not blessed with but over the time, it can be developed depending on efforts you put into learning it.

7 Out of Box Blogger Template Designs To Use for your Blog - TwistBlogg - Premium Blogger Tutorials and Widgets

Stunning, right?

Creating JS Bookmark tab

Depending upon your browser, add below JavaScript as a bookmark.

Open Bookmark tab in your browser, and add new bookmark. Enter any text in 'Name' field and below javascript in 'URL' field. Hit Save button and you are good to go.

Javascript Code

javascript: (function () { (function (d, f, s) { s = d.createElement("script"); s.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"; s.onload = function () { f(jQuery.noConflict(!0)) }; d.body.appendChild(s) })(document, function ($) { var obj = []; obj.title = document.title; obj.img = $('meta[property="og:image"]') .attr('content'); obj.desc = $('meta[name="description"]') .attr('content'); obj.url = $('link[rel=canonical]') .attr('href') || document.URL; var m = obj.url.match(/^https?:\/\/([^/]+)/); obj.domain = m[1];         var cardFooter = '<div class="bk-metadata"><img class="bk-icon" src="//www.google.com/s2/favicons?domain=' + obj.url + '" alt="'+ obj.domain +'"/><span class="bk-link">'+ obj.domain + '</span></div>'; var cardTxt = '<div class="bk-content"><div class="bk-title">' + obj.title + '</div><div class="bk-description">' + (obj.desc || '') + '</div>' + cardFooter +'</div>'; if (obj.img == undefined) { var card = '<div class="tb-card bk-card"><a rel="nofollow noopener noreferrer external" class="bk-container" href="' + obj.url + '">' + cardTxt + '</a></div>'; } else { var cardImg = '<div class="bk-thumbnail"><img src="' + obj.img + '" alt="'+ obj.title +'"></div>'; var card = '<div class="tb-card bk-card"><a rel="nofollow noopener noreferrer external" class="bk-container" href="' + obj.url + '">' + cardTxt + cardImg + '</a></div>'; } prompt('%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AEHTML%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82', card); }) })();

In case your website supports lazyload of images, add following Javascript code with class='lazy' and data-src as image source.

javascript: (function () { (function (d, f, s) { s = d.createElement("script"); s.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"; s.onload = function () { f(jQuery.noConflict(!0)) }; d.body.appendChild(s) })(document, function ($) { var obj = []; obj.title = document.title; obj.img = $('meta[property="og:image"]') .attr('content'); obj.desc = $('meta[name="description"]') .attr('content'); obj.url = $('link[rel=canonical]') .attr('href') || document.URL; var m = obj.url.match(/^https?:\/\/([^/]+)/); obj.domain = m[1];         var cardFooter = '<div class="bk-metadata"><img class="lazy bk-icon" data-src="//www.google.com/s2/favicons?domain=' + obj.url + '" alt="'+ obj.domain +'"/><span class="bk-link">'+ obj.domain + '</span></div>'; var cardTxt = '<div class="bk-content"><div class="bk-title">' + obj.title + '</div><div class="bk-description">' + (obj.desc || '') + '</div>' + cardFooter +'</div>'; if (obj.img == undefined) { var card = '<div class="tb-card bk-card"><a rel="nofollow noopener noreferrer external" class="bk-container" href="' + obj.url + '">' + cardTxt + '</a></div>'; } else { var cardImg = '<div class="bk-thumbnail"><img class="lazy" data-src="' + obj.img + '" alt="'+ obj.title +'"></div>'; var card = '<div class="tb-card bk-card"><a rel="nofollow noopener noreferrer external" class="bk-container" href="' + obj.url + '">' + cardTxt + cardImg + '</a></div>'; } prompt('%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AEHTML%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82', card); }) })();

Here's a sample in firefox browser.

Beautifying blog card with CSS

Search for ]]></b:skin> in your template and paste following CSS code to give styling to your link cards.

/*------------------------------------------------------------
Beautiful Blog Cards for Blogger
Designed by:: https://www.TwistBlogg.com
******** Do Not Remove These Credits ********
------------------------------------------------------------*/
.tb-card {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-right: 0;
  margin-left: 0;
}
.bk-card {
  position: relative;
  width: 100%;
}
.bk-card a.bk-container,
.bk-card a.bk-container:hover {
  display: flex;
  text-decoration: none;
  overflow: hidden;
  color: inherit;
}
.bk-card .bk-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}
.bk-card .bk-description {
  display: -webkit-box;
  line-height: 1.5em;
  max-height: 44px;
  overflow-y: hidden;
  opacity: 0.7;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bk-card .bk-metadata {
  display: flex;
  align-items: center;
  margin-top: 22px;
  width: 100%;
  font-size: 14px;
  white-space: nowrap;
}
.bk-card .bk-icon {
  width: 20px;
  height: 20px !important;
  margin-right: 6px;
  border-radius: 0;
}
.bk-card .bk-link {
  display: inline;
}
.bk-card .bk-thumbnail {
  position: relative;
  flex-grow: 1;
  min-width: 24%;
  margin: 10px;
}
.bk-card .bk-thumbnail img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
bk-card .bk-metadata > :not(img) {
  opacity: 1;
}
.bk-card .bk-description,
.bk-card .bk-metadata > :not(img) {
  font-family: inherit;
  font-weight: 400;
}
.bk-card .bk-title {
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
}
.bk-card .bk-description {
  font-size: 14px;
  margin-top: 8px;
}
.bk-card .bk-content {
  padding: 16px;
}
.bk-card .bk-container,
.bk-card .bk-container:hover {
  transition: border-color 0.15s ease;
}
.bk-card .bk-container,
.bk-card .bk-container:hover {
  border: 1px solid #d9d9d8;
  box-shadow: none;
}
.bk-card .bk-container:hover {
  border-color: #797c82;
}
.bk-card .bk-container,
.bk-card .bk-container:hover {
  border-radius: 17px;
}
.bk-card .bk-thumbnail img {
  border-radius: 8px;
}
@media screen and (max-width: 500px) {
  .bk-card .bk-container,
  .bk-card .bk-container:hover {
    border-radius: 13px;
  }
  .bk-card .bk-thumbnail img {
    border-radius: 7px;
  }
}

@media screen and (max-width: 320px) {
  .bk-card .bk-container {
    flex-direction: column;
  }
  .bk-card .bk-content {
    order: 2;
  }
  .bk-card .bk-thumbnail {
    order: 1;
    min-height: 140px;
    margin-bottom: 0;
  }
}

How to use Blog Cards/Link Cards in Blogger posts?

It is simple.

Open any address for which you want to create blog card. Click on the bookmark name you created earlier. You will be prompted with some HTML code. Paste that code in your post. Done!!!

Check below image for more information.

That is all. We have successfully created link cards or blog cards for blogger posts using JS Bookmarklet. In case, your blog cards look out of form, adjust font size. Hope you enjoyed the article. Do leave a comment and share it with other fellow bloggers. Happy Blogging 😀💣💥

5 Tips To Become a successful blogger

2023-01-06T21:40:00.002-05:00

Blogger is one of the best platform to start your blog and spread your knowledge. The terms 'blog' and 'website' are different (refer to this page for more info). Here we will refer to blogs. Do you know, more than 175K+ Blogs are created daily on internet but all bloggers don't get success. Only few blogs get reached to people & are listed on Google Search. Still many other blogs remain back on Google.

Do you know why all blogs don't get reached to people and remain back on Google Search .That's because they don't know how to start blogging and how to become a successful blogger. So,today I'm going to show you some guidelines to become a pro and successful blogger.

Creating a blog is not a difficult task.You only need to have a Google account and sign up for blogger and just create a blog and start posting. Isn't that sounds easy? But only posting on blogs can you become a successful blogger.

If yes then many newbie bloggers will definitely become successful over a night. To be a successful blogger isn't an easy task. You need patience and dedication to blogger. There are many things that take you to become a successful and good blogger. Follow this simple steps and you can get success within a month.

How to Become a Successful and Good Blogger?

As I already told you becoming a successful blogger isn't an easy task.You need lots of dedication and smart work. Here I'm going to tell you some key points to become a successful blogger.

[1] Patience is a key

It is the most have quality for every blogger. You can't get success starting a blog and writing articles over a night. You need lots of dedication and smart work. You must have patience while blogging. Many newbie bloggers start blogging thinking they can become successful within a night or a week. But they can't so most of them quit blogging.

That's the main reason why you can't become a successful blogger. You need to wait till your time comes. You must have proper and positive attitude towards your blog. You must try to work smart and keep working with your blog. You have to update your blog at least twice a week and keep in touch with your blogs and its traffics. So, always keep in mind if you want to be a good blogger then keep patience while blogging.

[2] Content is King

It is another key point to be a successful blogger. Your blog must contain original contents. Your blog shouldn't have copied articles and it shouldn't violate Google policy. Yeah,it may take a lot of research and patience to write your own original and unique content but I'm damn sure it will help you a lot in future. Your blog can get good position on search engine.

Of course,proper use of keywords is another important factor for SEO but only using keywords on copied articles is not worthy. You must have good and unique content. Try to develop your writing skills and post regularly unique articles on your blog.

[3] Do not 🙅 do SEO for couple of months

You might be in surprise reading this key point and you should be thinking the admin has got mad. But this time,I'm right and not a mad. Yeah,you shouldn't do Search Engine Optimization ( SEO ) for first few months of your blogging carrier. Try to think like a newbie blogger,first time creating a blog feels great but ask one question to yourself Do you really know what was SEO in the beginning. I'm sure you don't. I was too unknown about SEO for few months of my blogging carrier.

So,for first three months don't care about SEO as it takes a lot of time and hard work to know SEO. If you try to do SEO by the time you created your blog then you can't get success. You won't understand any thing about it. So, only focus on Unique content of your blog for first few months and learn SEO from Google and some experts slowly after few months.

[4] Professional Blog Designs

Do you love to visit any blogs that don't have good blog design,have random posts and a lot of advertisement.I'm sure you won't. I also do not like that kind of blog. I simply close the blog instantly without observing the blog contents. If anyone visits your blog and feels difficulty to read articles then he/she will close it without reading and your blog can never get success.

So,it is necessary for your blog to have proper design and layout. It should be user friendly and it shouldn't bother your visitors. You should make proper space for your social media links, Subscribe button and make it perfect so everyone can enjoy your post without any hindrance.

Below are some highly SEO optimized, responsive, premium and adsense Friendly blogger templates.

Do you need wordpress inspired, highly creative and out of box blogger template designs? Here's my top 7 list of such themes.

BlogLog Premium and SEO Optimized Blogger Template - TwistBlogg v2.0 - TwistBlogg - Premium Blogger Tutorials and Widgets

Recently, we launched our premium and seo optimized template for blogger and named it BlogLog. Feel free to explore our theme.

Best Premium Blogger Templates Of 2020 (SEO Optimized) - TwistBlogg - Premium Blogger Tutorials and Widgets

There are a lot of blogger themes available to choose from. Below is my favourite list of best premium and seo optimized blogger templates of 2022.

Custom Contact Form Page for Blogger - Premium Design - TwistBlogg - Premium Blogger Tutorials and Widgets

[5] Maintain Proper Communication with your readers

If you are serious about your blogging carrier then you must have good understanding and communication 📡 among your blogger users. You must develop your ability to transfer your visitors into your blog subscribers. You should properly use RSS Feeds and Email Subscription. You should keep Subscription widget in that place where every one can see it and would click on that.

You must create proper About Us and Contact Us page so your blog users can easily know you and can contact you. You should also try to solve your blog users problem and keep updating them with proper and quality contents and knowledge. So,try to develop good communication with your blog users.

Contact page creates a place for users to send you a message. Use this premium ready-made contact form page in your blogger blog for FREE.

Display Post Titles in Blogger Page Navigation

Conclusion: I'm sure you loved the article and you must have known some guidelines to become a successful blogger. Follow above simple steps and get yourself in a good place on blogging field. Keep working with your blogs. You can simply spend about 2 to 3 hours daily on your blogger.

Work Smart and Happy Blogging 😀 Please do share this article among your friends and leave a comment. Happy New Year 2023 👌💣

Add Next/Previous Pager Navigation with Image - Blogger

2022-10-27T20:00:00.001-04:00

By default, Blogger allows you to add newer/older links in posts, simply known as next and previous pager navigation. Older link and Newer link texts are visible and help visitors navigate through posts. However, because of modifications in code by designers, for some templates, the post titles are even missing in blog pager.

I faced the same issue while adding this feature to my fletro pro theme. Only the Older post/ Newer post texts were shown. I tried adding <data:newerPageTitle/> and <data:olderPageTitle/> to display newer post title and older respectively. But no success. I looked up on ways to show post title and came up with a solution. Later, I felt adding images by their side will make my page more vibrant.

So, today I am going to share step by step guide on how you can also add post title along with image in newer older post widget and as a bonus, I will share my redesigned previous/next navigation style. Objectives are:

1) Adding Post Title

2) Retrieving image for next and previous blogger articles

Before that, add following code to your theme. This code displays blog pager navigation in your website. Add in to the location you want to display next/previous widget.

<div class='navigation-wrap'>
      <b:if cond='data:newerPageUrl'>
         <a class='blog-pager-newer-link navigation-next' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'/>
      </b:if>
      <b:if cond='data:olderPageUrl'>
         <a class='blog-pager-older-link navigation-prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/>
      </b:if>
   </div>

As you can notice there is no text whatsoever. Lets customize:

1) Adding Post Title in Next/Previous Pager Navigation without Image

After looking upon on why post titles are missing, I landed on Nkuri's blog and found a quick fix using Pure JS.

nkurilog.blogspot.com

Below is pure JavaScript that extract post title and append it to next and previous links.

This is the code that displays only blog pager post title but no image. Go to another section if you want to display image in older/newer pager.

Search for </body> and paste the following code above it.

<b:if cond='data:view.isPost'>
<script> /*<![CDATA[*/
// Code Shared by TwistBlogg.com
// except root, labels and search pages
   if (/.+\.html(\?m=1)?$/.test(location.href)) {
      var olderLink = document.getElementById('Blog1_blog-pager-older-link');
      if (olderLink) {
         getPageTitle(olderLink, setOlderPageTitle);

         function setOlderPageTitle(data) {
            setPageTitle(data, olderLink, '')
         };
      }
      var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
      if (newerLink) {
         getPageTitle(newerLink, setNewerPageTitle);

         function setNewerPageTitle(data) {
            setPageTitle2(data, newerLink, '')
         };
      }

      function setPageTitle(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-content'><small>Older post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div>";
         }
      }

      function setPageTitle2(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-content'><small>Newer post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div>";
         }
      }

      function getPageTitle(pageLink, callback) {
         var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
         var script = document.createElement('script');
         script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=' + pathname + '&callback=' + callback.name + '';
         document.body.appendChild(script);
      }
   } /*]]>*/ </script>
</b:if>

The above code should display you the post titles on next/prev pagination.

If you want to learn how the code is working, refer to this Japanese blog:

Build your own BloggerTheme: Implement pagination in Blogger with JavaScript

Bloggerのページネーションは、次の記事、前の記事だけで、記事タイトルを取得してくれない。javaScriptで記事タイトルを取得して表示するコードを記載

thmertial.blogspot.com

2) Adding Post Title in Next/Previous Pager Navigation with Image

It took me a good amount of time figuring ways to display image on newer/older pager. But it was simple. Blogger stores media thumbnail in media$thumbnail.url . All I need to do was fetch the correct URL. So, I passed separate links and retrieve the thumbnails.

However, media$thumbnail.url outputs image of resolution 72x72 pixels. So, it was blurry. I fixed that by replacing s72 to s300. However, with new blogger image domains https://blogger.googleusercontent.com, some images were not visible when replacing those numbers. A quick fix was replacing new and old image links.

.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") did the work for me.

To see it live, paste the following code just above </body> tag.

<b:if cond='data:view.isPost'>
<script> /*<![CDATA[*/
// Code Shared by TwistBlogg.com
// except root, labels and search pages
   if (/.+\.html(\?m=1)?$/.test(location.href)) {
      var olderLink = document.getElementById('Blog1_blog-pager-older-link');
      if (olderLink) {
         getPageTitle(olderLink, setOlderPageTitle);

         function setOlderPageTitle(data) {
            setPageTitle(data, olderLink, '')
         };
      }
      var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
      if (newerLink) {
         getPageTitle(newerLink, setNewerPageTitle);

         function setNewerPageTitle(data) {
            setPageTitle2(data, newerLink, '')
         };
      }

      function setPageTitle(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-content'><small>Older post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div><div class='navigation-image'><img alt='" + olderLink + "' src='" + data.feed.entry[0].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") + "'/></div>";
         }
      }

      function setPageTitle2(data, pageLink, prefix, suffix) {
         if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
               var title = data.feed.entry[0].title.$t;
            }
         }
         if (title) {
            pageLink.innerHTML = "<div class='navigation-image'><img alt='" + newerLink + "' src='" + data.feed.entry[0].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+(\-c)?/, "/s300").replace(/\=s[0-9]+(\-c)?/, "=s300") + "'/></div><div class='navigation-content'><small>Newer post</small><br/><h3>" + data.feed.entry[0].title.$t + "</h3></div>";
         }
      }

      function getPageTitle(pageLink, callback) {
         var pathname = pageLink.getAttribute('href').replace(location.protocol + '//' + location.hostname, '');
         var script = document.createElement('script');
         script.src = '/feeds/posts/summary?alt=json-in-script&max-results=1&redirect=false&path=' + pathname + '&callback=' + callback.name + '';
         document.body.appendChild(script);
      }
   } /*]]>*/ </script>
</b:if>

The above code should display you the post titles with images on next/prev pagination.

BONUS - Customizing Blog Newer/Older Pager

As promised earlier, I am going to share the CSS code to customize next/prev blog navigation pager and make it creative and beautiful.

Add following code before </head> tag in your theme.

<b:if cond='data:view.isPost'>
<style>
.navigation-wrap {
	flex-wrap: wrap;
	padding: 4vh 0;
	border-top: 1px solid #d9d9d8;
	border-bottom: 1px solid #d9d9d8;
	margin-top: 100px;
}

.navigation-wrap,
.navigation-wrap a {
	display: flex
}

.navigation-content {
	line-height: 0;
	display: inline-block;
	width: 100%;
	padding: 1vh 0
}

.navigation-wrap a {
	flex: 0 0 50%;
	box-sizing: border-box;
	max-width: 640px;
	min-height: 160px;
	pointer-events: none;
	color: inherit;
}

.navigation-wrap a:first-child:last-child {
	flex-grow: 1
}

.navigation-next {
	padding-right: 2vw;
}

.navigation-prev {
	margin-left: auto;
	padding-left: 2vh;
	text-align: right
}

.navigation-wrap small {
	font-family: 'Inter', sans-serif;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	display: inline-block;
	margin: 2vh 0 1vh
}

.navigation-next small {
	padding-right: .6vw
}

.navigation-prev small {
	padding-left: .6vw
}

.navigation-wrap h3 {
	font-family: 'Inter', sans-serif;
	font-size: 2.8rem;
	font-weight: 700;
	display: inline;
	margin: 5px 0;
	pointer-events: auto;
	line-height: 1.3;
}

.navigation-wrap h3:hover {
	text-decoration: underline
}

.navigation-image {
	line-height: 0;
	position: relative;
	flex: 0 0 auto;
	width: 160px;
	height: 160px;
	pointer-events: auto
}

.navigation-image img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    border-radius:26px;
}

.navigation-next .navigation-image {
	margin-right: 1.8vw
}

.navigation-prev .navigation-image {
	margin-left: 1.8vw
}

@media (max-width:1280px) {
	.navigation-wrap small {
		margin-top: 1.5vh
	}

	.navigation-wrap h3 {
		font-size: 2.4rem
	}

	.navigation-image {
		width: 140px;
		height: 140px
	}
}

@media (max-width:1024px) {
	.navigation-wrap a {
		min-height: 100px
	}

	.navigation-wrap small {
		margin-top: 0
	}

	.navigation-wrap h3 {
		font-size: 2.2rem
	}

	.navigation-image {
		width: 100px;
		height: 100px
	}

	.navigation-next .navigation-image {
		margin-right: 2.4vw
	}

	.navigation-prev .navigation-image {
		margin-left: 2.4vw
	}
}

@media (max-width:768px) {
	.navigation-wrap a {
		flex-basis: 100%
	}

	.navigation-wrap a+a {
		margin-top: 4vh
	}
}

@media (max-width:480px) {
	.navigation-wrap a {
		min-height: 80px
	}

	.navigation-wrap small {
		font-size: 1.2rem
	}

	.navigation-wrap h3 {
		font-size: 1.8rem
	}

	.navigation-image {
		width: 80px;
		height: 80px
	}
}
</style>
</b:if>

That is all. You have successfully added creative next/previous pager navigation with image in blogger. Feel free to share and leave a comment below. Happy Blogging 🤝🎉🤩

Increasing employee productivity in the workplace

2022-10-06T14:01:00.003-04:00

The productivity of a company is determined by the productivity of its employees. It is important to boost their morale in order to increase their productivity.

It can be increased by providing them with a comfortable and inspiring workplace environment, improving their skills, developing motivational and engaging workplace culture, and rewarding them for good work. We have gathered a few tips from experts in order to help you boost your employees’ morale.

1. Throw an Office Party

An office party is a great way to boost morale and productivity. It can be a fun and creative way to get people together outside of the office.

Office parties can be a great team-building exercise, as well as an opportunity for employees to get more comfortable with each other get more comfortable with each other outside of work. They are also a chance for employees to socialize with their colleagues in ways that they don't normally have the opportunity to do during work hours. Improving their morale can cause a significant spike in productivity. Remember, it is essential to keep your employees happy.

2. Provide Employees with Technology

A company's success is largely dependent on the skills and efficiency of its workforce. As such, it is a wise decision to provide employees with the right tools for their job. One way to do this is by giving employees new technology that they can use in their everyday work. Tons of companies give their employees Macbooks to work with since their features are user-friendly and quite productive.

You should also teach them certain tips and tricks that will improve their speed while working on their Mac. For instance, you can share useful online “How-to” guides like https://setapp.com/how-to/bookmark-on-mac to improve their Mac skills and save time.

The benefits of providing employees with good and new technology are numerous. Firstly, it ensures that they have the right tools for their jobs. Secondly, it makes them happier as they will be able to work more efficiently and be more satisfied with their jobs. Thirdly, it gives them a sense of accomplishment when they complete tasks successfully due to having the right tools for the job.

3. Create a Company Social Media Policy

A social media policy can help you articulate your company’s values and enforce a set of social media guidelines.

It can be used to establish guidelines for company employees, including when they should use social media, how they should use it, and what to say.

A well-crafted social media policy will also provide guidance on how employees should interact with customers on social media channels. Moreover, this should also include a certain time limit on using social media in the workplace as it can cause your employees to procrastinate. Less use of social media can increase productivity in the workplace.

4. Offer High-Quality Food in the Workplace

Eating lunch at work is a common practice that many people engage in every day.

Offering good food at work can be beneficial because it provides an opportunity for employees to take a break and recharge. It also allows them to socialize with their coworkers and take care of any business that needs to be done during the day. Providing them with good incentives will help boost efficiency in the workplace.

It is crucial to keep your employees happy and motivated. Without productive workers, your company will never reach its true potential. Use this article to help you in making your workplace better for everyone.

Add Beautiful "Our Services" Layout to your Blogger Blog

2022-09-28T14:15:00.001-04:00

Want to showcase your services in a creative and beautiful way?

Let me share this beautiful our services widget that can be easily implemented in your blogger blog.

The widget comes with 6 service boxes and each box contains svg icon, title and description. I have not made service box clickable because it is just for displaying your services. You can simply enclose each box with anchor <a>..</a> tag in case you want to make them clickable.

Just a reminder to my readers, I recently shared this beautiful hero header that comes with design and buttons. Do check that out as well.

Alright. Let's get started.

Here is the demo of how our services layout will look. It is best to show this element in homepage.

You can also check this codepen link to test it live.

CodePen - Beautiful Our Services Layout for Blogger by Twistblogg.com

Showcase your blog services in a creative way with this "Our services" layout. Its easy to add in your blog.

CodePen - Hero Header For Blogger

You have the permission to share this code but it is mandatory to link this page. Lets play fair. 🤝

(I) Adding CSS for Our Services Widget

CSS styles the structure of your theme. Search for </head> or </head> and add following CSS code above it.

<style>
/* Our Services Layout for Blogger By TwistBlogg.com */
/* Keep Credit Intact */
.hero-services {
	margin: 80px auto;
	padding: 90px 0;
	max-width: 1200px;
	font-family: 'Inter,sans-serif';
	background: #f5f5f5;
}

.main-title {
	font-weight: 700;
	font-size: 48px;
	line-height: 1.25;
	text-align: center;
	color: #000;
}

.main-box {
	grid-auto-flow: dense;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 48px;
	grid-gap: 32px;
}

.inner-box {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
	border: 1px solid #DADADA;
	border-radius: 6px;
	padding: 32px;
}

.inner-icon {
	align-items: center;
	display: flex;
	background-color: #0066ff;
	color: white;
	border-radius: 9999px;
	width: 64px;
	height: 64px;
	margin-bottom: 15px;
}

.inner-icon svg {
	width: 36px;
	height: 36px;
	fill: none !important;
	margin: 0 auto;
}

.inner-heading {
	font-size: 24px;
	line-height: 1.25;
	color: #000;
}

.text-small {
	font-size: 18px;
	letter-spacing: normal;
	line-height: 1.5
}


@media screen and (max-width: 832px) {
	.main-box {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 40px;
		grid-gap: 24px;
	}
}

@media screen and (max-width: 640px) {
	.main-box {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		margin-top: 32px;
		grid-gap: 16px;
	}

	.main-title {
		font-size: 36px !important;
	}
}
</style>

(II) Adding HTML for Our Services Plugin

This is where we call our services layout classes and tags. Add the following code to desired location for widget to appear or append in 'Add a Gadget' from layout.

<section class='hero-services'>
   <h2 class='main-title'>Our Services</h2>
   <p class ='text' style='text-align:center'>We can help you with anything related to Blogging.</p>
   <div class='main-box'>
      <div class='inner-box'>
         <div class='inner-icon'>
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap">
               <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
            </svg>
         </div>
         <h3 class="inner-heading">Page Optimization</h3>
         <p class="text-small">Page Speed is one of the key to rank. Learn how you can achieve a 100 Page Score.</p>
      </div>
      <div class='inner-box'>
         <div class='inner-icon'>
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
               <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
               <polyline points="2 17 12 22 22 17"></polyline>
               <polyline points="2 12 12 17 22 12"></polyline>
            </svg>
         </div>
         <h3 class="inner-heading">Premium Themes</h3>
         <p class="text-small">Free + Paid highly customized, SEO optimized and ads ready Blogger themes.</p>
      </div>
      <div class='inner-box'>
         <div class='inner-icon'>
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up">
               <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
               <polyline points="17 6 23 6 23 12"></polyline>
            </svg>
         </div>
         <h3 class="inner-heading">SEO Guides</h3>
         <p class="text-small">Master Search Engine Algorithms and how they rank pages in search results.</p>
      </div>
      <div class='inner-box'>
         <div class='inner-icon'>
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck">
               <rect x="1" y="3" width="15" height="13"></rect>
               <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
               <circle cx="5.5" cy="18.5" r="2.5"></circle>
               <circle cx="18.5" cy="18.5" r="2.5"></circle>
            </svg>
         </div>
         <h3 class="inner-heading">Social Tricks</h3>
         <p class="text-small">Get ready to impress your friends with latest released social tricks series.</p>
      </div>
      <div class='inner-box'>
         <div class='inner-icon'>
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code">
               <polyline points="16 18 22 12 16 6"></polyline>
               <polyline points="8 6 2 12 8 18"></polyline>
            </svg>
         </div>
         <h3 class="inner-heading">Pro Plugins</h3>
         <p class="text-small">Unique social sharing plugins, custom designs and contact page builds.</p>
      </div>
      <div class='inner-box'>
         <div class='inner-icon'>
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database">
               <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
               <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
               <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
            </svg>
         </div>
         <h3 class="inner-heading">Blogging Tools</h3>
         <p class="text-small">Learn what it takes to become a smart blogger and how you can generate revenues. </p>
      </div>
   </div>
</section>

That is all folks. Hope you enjoyed adding this widget as much I loved coding. Do not forget to share and leave a comment for more creative and amazing our services layout widget for blogger blog. 🎖️💓

Add Responsive Big Hero Header in Blogger Blog Homepage

2022-09-18T22:52:00.005-04:00

When you land on a page, what's the first thing you notice?

Of course, the design and easiness in navigating through. When it comes to UX/UI design, hero header is vital for delivering your message and informing users what your site is about.

Today, I will share the code and walk you through the process of installing creative and responsive big hero text header in your blogger blog. Moreover, I also got a lot of requests to share 'Hero header design' of our homepage.

A gentle reminder to new comers -- couple of months ago, I had shared animated hero header and creative hero footer design for blogger. 😊

Let's start by taking a 💾 full backup of current design.

And here is the demo of our creative hero header design for blogger. It is responsive as well.

If you want to view the live responsive demo, here's the link to our codepen.

Many blogger templates lack professional and creative header designs. In this article, we are going to design a beautiful and animated hero header.

cdpn.io

You have the permission to share this code but it is mandatory to link this page. Lets play fair. 🤝

(I) Adding CSS Code for Hero Header

CSS styles the structure for your theme. Search for </head> or </head> and add following CSS code above it.

<style>
/* Responsive Big Hero Header By TwistBlogg.com */
/* Keep Credit Intact */
.hero-header {
  margin: 50px auto 200px auto;
	padding: 50px 20px;
	max-width: 1200px;
	font-family: 'Inter,sans-serif';
	background: #f5f5f5;
}

.hero-header .main-text {
	font-size: 96px;
	line-height: 1.25;
	font-weight: 800;
	color: #000;
}

.spancolor {
	color: #0066ff
}

.text {
	margin-top: 1.5rem;
	font-size: 24px;
	line-height: 1.5
}

.two_buttons {
	grid-auto-flow: dense;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 1rem;
	margin-top: 0.90rem;
	width: 48%
}

.default_button {
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 20px;
	text-decoration: none;
	border: 1px solid #DADADA;
	border-radius: 0.5rem;
	padding: 1rem 0.75rem;
	cursor: pointer;
	transition: all .15s ease-in;
	background-color: #0066ff;
	color: white;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.default_button svg {
	width: 22px;
	height: 22px;
}

@media screen and (max-width: 1024px) {
	.hero-header .main-text {
		font-size: 80px !important;
	}
}

@media screen and (max-width: 832px) {
	.hero-header .main-text {
		font-size: 64px !important;
	}

	.two_buttons {
		width: 55%
	}

	.default_button {
		font-size: 16px !important;
	}
}

@media screen and (max-width: 640px) {
	.hero-header .main-text {
		font-size: 48px !important;
		text-align: center;
		margin-top: -15px !important;
	}

	.text {
		font-size: 20px !important;
		text-align: center;
	}

	.two_buttons {
		width: 90%;
		margin: 30px auto;
	}

	.default_button {
		font-size: 14px !important
	}
}
</style>

(II) Adding HTML Code for Hero Header

This is where we call our hero header classes and tags. Add the following code to desired location for widget to appear or append in 'Add a Gadget' from layout.

<div class='hero-header'>
   <h1 class='main-text'><span class='spancolor'>Supercharge</span> your blogger blog</h1>
   <p class='text'>Build a blazing fast, optimized and premium blog, everything for <b><strong>FREE</strong></b> with us.</p>
   <div class='two_buttons'>
      <a href="/search" class="default_button">
         Get Started
         <svg style="margin-left: 1rem;">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
               <path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/>
               </path>
            </svg>
         </svg>
      </a>
      <a href="/p/contact.html" class="default_button" style="background-color: #07070A;">
         Contact Us
         <svg style="margin-left: 1rem;">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-incoming">
               <polyline points="16 2 16 8 22 8"></polyline>
               <line x1="23" y1="1" x2="16" y2="8"></line>
               <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
            </svg>
         </svg>
      </a>
   </div>
</div>

That's all. You have now beautiful and responsive big hero header in blogger blog homepage. Do not forget to share and leave a comment. 🤓

Add Eye or Read Mode Feature in your Blogger Blog

2022-09-05T18:45:00.001-04:00

Don't you think dark/night mode is so yesterday? 🙃 Now, its time for read mode feature.

So, what is read mode?

In simple terms, read mode, or simply known as eye mode, enables users to read page contents with ease. It decreases the brightness of that page that comforts human eyes and comforting users when reading is what designers and bloggers should focus on.

Please do not expect to change whole layout as we find in kindle or PDF readers when you enable read mode. This feature will be simple, yet very efficient💰.

Let's start by taking a 💾 full backup of current design.

Check it live on codepen.

CodePen - Add Read/Eye mode in Blogger

Dark mode is so yesterday. Start upgrading by adding eye mode or read mode in your blogger blog with this simple trick. Pure CSS and JS.

Add Blogger Contact Form to Any Static Page - TwistBlogg - Premium Blogger Tutorials and Widgets

You have my permission to share this code elsewhere, however, it is mandatory to link this page.

(I) Adding HTML for Read/Eye mode Feature

First of all, we will add eye button in header and activate a function with onclick event.

<span aria-label="Readmode" class="style-button" onclick="readMode()" role="button">
   <svg class="line" viewBox="0 0 492 492" xmlns="http://www.w3.org/2000/svg">
      <title>Read mode</title>
      <path d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></path>
      <circle cx="256" cy="256" fill="none" r="80" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"></circle>
   </svg>
</span>

In case you are using Jagodesain themes (fletro pro), search for <b:loop index='icon' values='data:items' var='item'> and remove the whole section and add the following code to display Read mode feature in header section.

<b:loop index='icon' values='data:items' var='item'>
   <b:if cond='data:icon &lt;= 3'>
      <b:if cond='data:item == &quot;Search&quot;'>
         <li>
            <b:class cond='data:item == &quot;Search&quot;' name='isSrh'/>
            <!--[ Search button ]-->
            <label class='tSrch tIc bIc' expr:aria-label='data:item' for='offSrh'>
               <b:include name='search-icon'/>
            </label>
         </li>
         <b:elseif cond='data:item == &quot;Dark&quot;'/>
         <b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>
            <li>
               <b:class cond='data:item == &quot;Dark&quot;' name='isDrk'/>
               <!--[ Dark mode button ]-->
               <span class='tDark tIc tDL bIc' expr:aria-label='data:item' onclick='darkMode()' role='button'>
                  <b:include name='moon-sun-icon'/>
               </span>
            </li>
         </b:if>
         <b:elseif cond='data:item == &quot;Readmode&quot;'/>
         <!--[ Read mode button ]-->
         <b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>
            <li>
               <span class='tDark tIc tDL bIc' expr:aria-label='data:item' onclick='readMode()' role='button'>
                  <svg class="line" viewBox="0 0 492 492" xmlns="http://www.w3.org/2000/svg">
                     <title>Read mode</title>
                     <path d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></path>
                     <circle cx="256" cy="256" fill="none" r="80" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"></circle>
                  </svg>
               </span>
            </li>
         </b:if>
      </b:if>
   </b:if>
</b:loop>

(II) Adding CSS for Read mode Feature

Lets style our eye icon. Add the following CSS code before </head> tag.

</style>
/* Read Mode by TwistBlogg.com*/
.readMode:before {
	content: '';
	z-index: 99999 !important;
	background: #222222 !important;
	pointer-events: none;
	position: fixed;
	top: -30%;
	right: -30%;
	width: 150%;
	height: 150%;
	opacity: 0.5;
	mix-blend-mode: multiply;
	display: block
}
/* Skip .style-button svg code if you are using Jagodesain - Fletro theme*/
.style-button svg {
	width: 22px;
	height: 22px;
	stroke: #000;
	fill: none !important;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1;
}
</style>

(III) Adding Javascript for Eye mode Feature

We have added read mode icon and styled it. Now, we need to activate and deactivate read mode on click. To create this toggling feature, we will use simple javascript.

Our JS stores the user value locally, so it won't change on refresh.

Look for </body> and paste this code above it.

<script type="text/javascript"> /*<![CDATA[*/
/* Read Mode by TwistBlogg.com*/
function readMode() { 
localStorage.setItem("read", "readmode" === localStorage.getItem("read") ? "unread" : "readmode"), "readmode" === localStorage.getItem("read") ? document.querySelector("body").classList.add("readMode") : document.querySelector("body").classList.remove("readMode")
};
(localStorage.getItem('read')) === 'readmode' ? document.querySelector('body').classList.add('readMode'): document.querySelector('body').classList.remove('readMode')
   /*]]>*/
   </script>

Thats all. I hope you enjoyed adding read mode or eye mode in your blogger blog. Leave a comment below in case you are not following through. Happy Blogging 🔥

Custom Contact Form Page for Blogger - Premium Design

2022-09-01T21:08:00.002-04:00

Blogger officially launched contact form widget 🤗, back in 2013, which could be added from layout. You need to click Add a Gadget and select form and voila, you have a working contact form in sidebar or a footer depending on where you added the gadget.

Soon, bloggers realized they needed a separate page dedicated to contact form where users could send them messages and communicate. That is how the trend of contact page for blogger came.

One of our authors, Satbir has written a detailed post on how you can also add Blogger Contact Form to Separate Page on Blogger.😺 You'll find it a complete step by step guide if it is the first time you're using this contact form widget on a separate page of your blog and all other major questions are answered in this article regarding blogger contact form not working.

Blogger allows to add a simple contact form to sidebar or footer via layout settings. We can use that code to create a professional contact form page.

Design A Professional Contact Page For Blogger [Stylish] - TwistBlogg - Premium Blogger Tutorials and Widgets

If you noticed adding simple contact form looks so yesterday. You need to make it beautiful, creative and attracting. That is why we are launching our own custom made contact form page for blogger and it is a premium design 💣, I swear.

We had shared a beautiful contact page design in the past, you may want to check if it fits your blog.

Back in 2013, blogger.com added a feature that allowed users to add contact widget in sidebar and footer section. After that, many developers have been striving to add it on static pages by amending the codes. And today I am doing the same: attempting to redesign and create a fully responsive and professional contact page widget for blogger

CodePen - Creative Contact Page for Blogger

Now, lets find out how our premium contact form page looks like?

You can view it live at Codepen:

Keeping everyone's concern and my own satisfaction, I endeavored to re-modify already existing contact form, and somehow I managed to complete it in such a short span of time, and present among you guys a full-width contact page.

Best Way to fix Blogger Contact form not Sending Messages - TwistBlogg - Premium Blogger Tutorials and Widgets

Quick note: You can share this design in your blog, but it is mandatory to link this article.

Adding Custom Contact Form Page - CSS Code

Below is the CSS code for our pro contact form page design. You might need to change font-size, font-family and some values here and there.

If you need any help in customizing, leave a comment or hit me a message.

<style>
/* Custom Contact Page for Blogger by TwistBlogg.com */
.contact-container {
	margin-bottom: 20px;
}

.contact-breadcrumb {
	font-weight: 600;
}

.contact-boxes,
.grid-box {
	grid-auto-flow: dense;
	display: grid;
	grid-template-columns: repeat(1, minmax(0px, 1fr))
}

.grid-box {
	gap: 2rem;
	-moz-box-align: center;
	align-items: center
}

.contact-boxes {
	gap: 1rem;
	margin-top: 100px
}

.grid-buttons {
	grid-auto-flow: dense;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 1rem;
	margin-top: .9rem;
	width: 100%
}

.cArea:not(:last-child) {
	margin-bottom: 25px
}

.cArea textarea {
	height: 150px
}

.cArea textarea:focus,
.cArea textarea[data-text=fl] {
	height: 200px
}

input[type="text"],
input[type="email"],
textarea{
	display: block;
	width: 100%;
	outline: 0;
	background: #fff;
	padding: 20px 16px;
	transition: all .1s ease;
	border-style: solid;
	border-width: 1px;
	border-image: none 100% / 1 / 0 stretch;
	border-color: #DADADA;
	border-radius: 10px;
	font-size: 1.8rem;
}

input::placeholder,
textarea::placeholder {
	color: rgba(8, 16, 43, .5);
	font-size: 1.8rem
}

.cBtn {
	background: 0 0;
	border: 1px solid #dadadc;
	cursor: pointer;
	transition: all .15s ease-in 0s !important;
	padding: 10px;
	font-size: 2rem;
	border-radius: 26px;
}

.global-button.cBtn.submit {
	background: #0066ff;
	border: 1px solid #0066ff;
	color: #fff;
}

.global-button.cBtn.reset {
	color: #000;
}

.global-title {
	font-size: 6rem
}

.section-2 {
	margin: 100px 0;
}


.cBox-individual {
	box-sizing: border-box;
	min-width: 0;
	-moz-box-align: center;
	align-items: center;
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	text-align: center;
	border-radius: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: #dadada;
	padding: 2rem;
	color: #191924;
	transition: all .15s ease-in 0s !important
}

.cBox-individual:hover {
	color: #191924);
	transform: translateY(-10px);
	box-shadow: rgba(0, 0, 0, .25) 0 25px 50px -12px !important
}

.cBox-individual svg {
	fill: none;
	width: 30px;
	height: 30px
}

.chat-here {
	background: none !important;
}

.cBox-text-below {
	display: flex;
	font-size: 1.8rem;
}

.cBox-text-below svg {
	width: 20px;
	height: 20px;
	fill: none;
	margin-left: .5rem
}

.cBox-text {
	font-weight: 600;
	font-size: 1.8rem;
	flex: 1 1 0%
}

@media screen and (min-width:1024px) {
	.grid-box {
		gap: 4rem !important
	}

	.contact-boxes {
		gap: 2rem !important
	}
}

@media screen and (min-width:768px) {
	.grid-box {
		grid-template-columns: repeat(2, minmax(0px, 1fr));
		gap: 3rem
	}

	.contact-boxes {
		grid-template-columns: repeat(3, minmax(0px, 1fr));
		gap: 1.5rem
	}

	.telegram-icon {
		fill: #000 !important
	}
}

@media screen and (max-width: 1280px) {
	.global-title {
		font-size: 5.5rem;
	}
}

@media screen and (max-width: 768px) {
	.global-title {
		font-size: 4.8rem;
	}
}

@media screen and (max-width:500px) {
	.fix-grid {
		grid-template-columns: repeat(1, minmax(0px, 1fr));
	}

	.cArea.name-field {
		margin-bottom: 0
	}

	.cArea.email-field {
		margin-bottom: 10px
	}

	.global-title {
		font-size: 3.4rem;
	}
}
</style>

Adding Professional Contact Form Page - HTML

Paste following HTML code in your static page and get started with this premium design of contact form page. Change the texts and link values. Also, you need to change form input fields values.

Follow this guide on how you can make contact form working:

Blogger contact form is not sending messages. Fix that and use advanced google form to create customized contact form and set auto-reply to messages.