Stay Connected With Us Follow Us Google News!

How to make a stylish tools link list page in blogger

This tutorial is help you if you're trying to figure out how to make a stylish Tool Link List Page in Blogger website.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

This tutorial is help you if you're trying to figure out how to make a stylish Tool Link List Page in Blogger website.

Whenever we add tools to our blog, most of us create separate pages for each of the tools, which is also good, but when it comes to showing those tools to the users together, then a blogger has very few options. Either you have to resort to any third party website for those tools or it is necessary to have knowledge of coding.

Tools link page img

You may be aware that adding Tool Link List Page necessitates using a number of third-party plugins or code libraries, which slows down the website's loading time. So there's no need to worry; even if you don't know how to code, you can still create a fantastic Tool Website Link List Page for your website. As long as you follow my instructions, the work will be completed with stunning results.

This is NK. For a very long period, I have been working with coding. From my extensive knowledge, I will provide you with sound adviced, so let's get started.

Are you concerned about the speed of your website? We just utilised HTML and CSS here. So don't worry it won't slow down your website.
You whine about how perfectly your website functions in dark mode even if it has a dark mode feature.
Do not be concerned if you only want to alter the dark mode class that we provided with your theme's dark mode class; you can easily change it by carefully following this instruction.

Therefore, let's check How to Create a Tool Link List Page on Blogger without wasting any valuable time.

How to make a stylish tools link list page in blogger

ImportantBefore we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First Sign in to your Blogger dashboard.

Step 2: Click the nav-bar on the Blogger Dashboard.

Step 3: Navigate to the page/post/location where the Tool Link List should be added.

Step 4: Don't forget to switch the Compose view to the HTML view if you are doing this in a page or post.

Step 5: Paste the next block of HTML code there.
  .Header .headerSubtitle{max-width:none}
  .Header .headerSubtitle:before{content:"Our Product"}
.onPg .blogCont{max-width:1000px;}
  .pBd h1, .pBd h2, .pBd h3, .pBd h4, .pBd h5, 
  .pBd h6{margin:0em 0 0px} h1{font-size:60px;text-align:center;}
  .ProductLine{position:relative;margin:50px auto;padding:40px 0;width:100%;box-sizing:border-box;}
  .ProductLine ul{padding:0;margin:0;}
  .ProductLine ul li{list-style:none;position:relative;width:50%;padding:20px 40px;box-sizing:border-box;}
  .ProductLine ul li:nth-child(odd){float:left;text-align:right;clear:both;}
  .ProductLine ul li:nth-child(even){float:right;text-align:left;clear:both;}
  .Product-Ctnt{padding-bottom:20px;}.P-Lnk{text-decoration:none;color:#08102b;transition:all 0.2s;}
  .P-Lnk:hover{opacity:0.8;transition:all 0.2s;}
  .ProductLine ul li:nth-child(odd):before{content:'';position:absolute;width:10px;height:10px;top:24px;right:-6px;background:var(--linkC);border-radius:50%;box-shadow:0 0 0 3px #9c96ff;}
  .ProductLine ul li:nth-child(even):before{content:'';position:absolute;width:10px;height:10px;top:24px;left:-4px;background:var(--linkC);border-radius:50%;box-shadow:0 0 0 3px #9c96ff;}
  .ProductLine ul li h3{padding:0;margin:0;color:#08102b;font-weight:600;}
  .ProductLine ul li p{margin:20px 0 0;padding:0;font-size:15px;line-height:1.7em;}.ProductLine ul li
  .Prct-ctgy h4{margin:0;padding:0;font-size:14px;color:#ffffff}
  .ProductLine ul li:nth-child(odd) .Prct-ctgy{position:absolute;top:12px;right:-165px;margin:0;padding:8px 16px;background:var(--linkC);color:#fff;border-radius:18px;box-shadow:0 0 0 3px #9c96ff;}.ProductLine ul li:nth-child(even) 
  .Prct-ctgy{position:absolute;top:12px;left:-165px;margin:0;padding:8px 16px;background:var(--linkC);color:#fff;border-radius:18px;box-shadow:0 0 0 3px #9c96ff;}@media(max-width:1000px){
      .ProductLine ul li:nth-child(odd),
      .ProductLine ul li:nth-child(even){width:100%;text-align:left;padding-left:50px;padding-bottom:50px;}
      .ProductLine ul li:nth-child(odd):before,
      .ProductLine ul li:nth-child(even):before{top:-18px;left:16px;}
      .ProductLine ul li:nth-child(odd) .Prct-ctgy,
      .ProductLine ul li:nth-child(even) .Prct-ctgy{top:-30px;left:50px;right:inherit;}}

<div class="ProductLine">
        <div class="Product-Ctnt">
          <h3><a class="P-Lnk" href="">G-Drive Direct Link</a></h3>
          <p><a class="P-Lnk" href=""><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">This tool generates a direct download link for the files you have stored in Google Drive. </span><span style="vertical-align: inherit;">Instead of opening a preview of the file in Google Drive, a direct link will start downloading the file right away..</span></span></a></p>
        <div class="Prct-ctgy">
        <div class="Product-Ctnt">
          <h3><a class="P-Lnk" href="">Canva Pro Link</a></h3>
          <p><a class="P-Lnk" href=""><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">This Tool Will Generate Canva Pro Link And That Too Free</span></span></a></p>
        <div class="Prct-ctgy">
          <h4><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Generator</span></span></h4>
      <div style="clear: both;"></div>
<i class="separate"></i>

You can change html texts as you want in the code box!

Step 6: Then Save or Publish. That's done!

Terms of use

Think of preserving the credits in canons so that you can enjoy our workshop.
This content may not be modified in any way. It is strictly forbidden to copy this post, the canons, or any other component of the composition without permission. However, if you do, legal action will be taken against you.


How To Make A stylish Tool Link List Page In Blogger is covered in this article's guide. Please spread the word about this article to your friends and check back for more, if you liked it.
I appreciate your visit. Enjoy your day!


Does it require jQuery library?


Will it work in all templates?


© Copyright:

About the Author

Hi, I’m Narayan Kir Known as Mack the founder of Gamingsalt. I dropped out in 2012 to pursue my passion in blogging, digital marketing and training. I help people like you to learn blogging …

Post a Comment

Please don't share any sensitive or personal details here.

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.