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.
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.
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. <style>
.Header .headerSubtitle{max-width:none}
.Header .headerSubtitle:before{content:"Our Product"}
</style>
<style>
.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:before{content:'';position:absolute;left:50%;width:2px;height:100%;background:var(--linkC);}
.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{width:100%;}}@media(max-width:767px){
.ProductLine{width:100%;padding-bottom:0;}h1{font-size:40px;text-align:center;}
.ProductLine:before{left:20px;height:100%;}
.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;}}
</style>
<div class="ProductLine">
<ul>
<li>
<div class="Product-Ctnt">
<h3><a class="P-Lnk" href="https://www.gamingsalt.com/p/g-drive-direct-link.html">G-Drive Direct Link</a></h3>
<p><a class="P-Lnk" href="https://www.gamingsalt.com/p/g-drive-direct-link.html"><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>
<div class="Prct-ctgy">
<h4>Generator</h4>
</div>
</li>
<li>
<div class="Product-Ctnt">
<h3><a class="P-Lnk" href="https://www.gamingsalt.com/p/whatsapp-chat-link-generator-tool.html">Canva Pro Link</a></h3>
<p><a class="P-Lnk" href="https://www.gamingsalt.com/p/whatsapp-chat-link-generator-tool.html"><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>
<div class="Prct-ctgy">
<h4><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Generator</span></span></h4>
</div>
</li>
<div style="clear: both;"></div>
</ul>
</div>
<i class="separate"></i>
You can change html texts as you want in the code box!
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.
Concussion
FAQ
Does it require jQuery library?
No.
Will it work in all templates?
yes.
© Copyright:
www.gamingsalt.com