Tools in Frame Customization Blogger Website

Adjust SEO Tools in Frame

Many people think that they want to create a website of their own and want that you don't have to make any kind of investment in it and how to create that website for free.  In this tutorial, I will explain how you can create a website with tools for free and how you can set these tools inside a frame.

You will find many websites on Google which provide you free html scripts, you just have to copy this script and after putting it in Blogger you can submit it in pages or posts.

After copying the HTML script from the different websites pasting it into your pages or post and then submitting the post, the next step is to use all the tools that we have Added to your website and the next step is to set all tools in one frame.

You can clearly see in this picture how we set the tools in the frame and see how they are all optimized. So we're going to create a very similar frame within this tutorial where you'll adjust all the objects and all the tools.

So in this tutorial, we will see step by step how we can add these tools inside our website where all the tools can be found in one place.

Tools In Frame Script Blogger SEO Tools 4KB 1920×1080 .txt

How to set Tools in Frame

Step 1

In the first step, we write the first title or heading inside the pages in Blogger which is shown on the top of your page.

Step 2

Our second step is to add a short paragraph below the title we wrote earlier.

Step 3

In the third step, we will write titles for whatever category tools we are creating.

Step 4

In step four we will do some things in which we will add a comment type some things so that if the developer edits this code he will not face any difficulty because it is easy to comment.  If we add a comment, it will be easy to find the code.

Step 5

In step five we have to copy the URL of the tools we have published in our blog post or page and we have to paste the tool URL in the step 5 section.

Step 6

In step six we have to get an SVG icon from where and after getting it you have to paste it inside step six so that it shows up with our tools.

Step 7

Within step seven we will set the name of the tools that we want to have and also if we want to set its version, easily in this step we can set its version exactly.

Step 8

In it, the tools we are adding will have a description shown in the i-button so that if a user uses the tool, the description will give him an idea of what the tool does.

These were our eight steps by which we can easily set the codes that are website tools in a frame.

Important Note

If you want to create more tools in one category then you use the same pattern for tools. This Pattern Used to Add Complete Multiple Tools and the Main Category

<div>

<h2> .................. </h2>

<div>

All work related to set tools Here...

*

*

*

*

*

*

*

*

</div>

Hope you have understood all these steps on how to set up the tool and how to customize its format if you still have any problems.  If you have doubts, there is a link to the video below, just click and this video is uploaded on my YouTube channel @aitech97, so you can go there and get all the concepts for free.

How to Add Tools in the Sidebar Widget 

Now we will see if we want to show our tools in the sidebar of our blogger site so that if people click on these tools or icons or widgets then that will be our page where all the results are. Here is the Preview of this sidebar widget in the red box.

Sidebar Widget Code 

Blogger Sidebar widget Script Blogger SEO Tools 3KB 1920×1080 .txt

How to set Sidebar Widget

• Open Blogger Layout
• Find Side-Widget 
• Click on " + Add a Widget" and Select HTML/JavaScript
• Configure HTML/JavaScript ( Write Title and paste code in Content Field and Hit Save )
• In the above provided sidebar script just put your SEO tool URL and then save
• Congratulation Your Sidebar Added

See the Preview of setting

Step 1

Step 2

Step 3

Best of Luck

Go to Link