If you are looking for how to create a Tool Website Link List Page to blogger website then this post is just for you.
You may know that adding Tool Website Link List Page requires the use of various third-party plugins or code libraries, which slow down the loading speed of the website. So no problem read this post today, even if you don't know coding you can make awesome Tool Website Link List Page to your website. You will work the way I tell you and the result will be beautiful when the work is done.
I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.
We only used then HTML and CSS not JS operation, Are you upset about your website speed? do not worry it doesn't affect your website speed.
Your website has a dark mode function and you fussing about it works impeccably in dark mode?
Also do not worry about it this Code Box also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
So without wasting important time let's check How to make Tool Website Link List Page in Blogger
You can see the demo here:-
How To Make Modern Partner Page in Blogger ?
Important!Before 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 of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click nav-bar.
Step 3: Go to the page/post or place which you want to add Tool Website Link List
Step 4: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view
Step 5: Now paste the following HTML code to that place
<h1 style="text-align:center">Our Tool</h1>
<style>.onPg .blogCont{max-width:1000px}.pBd h1,.pBd h2,.pBd h3,.pBd h4,.pBd h5,.pBd h6{margin:0 0 0}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 .2s}.P-Lnk:hover{opacity:.8;transition:all .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 #fad2b8}.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 #fad2b8}.ProductLine ul li h3{padding:0;margin:0;color:#fad2b8;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:#fff}.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 #fad2b8}.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 #fad2b8}@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(even),.ProductLine ul li:nth-child(odd){width:100%;text-align:left;padding-left:50px;padding-bottom:50px}.ProductLine ul li:nth-child(even):before,.ProductLine ul li:nth-child(odd):before{top:-18px;left:16px}.ProductLine ul li:nth-child(even) .Prct-ctgy,.ProductLine ul li:nth-child(odd) .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.monishtips.com/p/youtube-video-downloader.html">Youtube Video Downloader</a></h3><p>Tired of looking for the perfect Website to download videos or music online? We have a FREE solution for you! The Monishtips video downloader allows you to download videos or music with just one click!<br><a class="extL" href="https://www.monishtips.com/p/youtube-video-downloader.html">click to visite</a></p></div><div class="Prct-ctgy"><h4>Downloader</h4></div></li><li><div class="Product-Ctnt"><h3><a class="P-Lnk" href="https://youtube-thumbnail.monishtips.com/">Youtube Thumbnail Downloader</a></h3><p>Download youtube and vimeo thumbnail images of all quality for free. This application let you download thumbnails of all quality. Just paste the URL of the thumbnail video in the below input and click Get Thumbnail Image<a class="extL" href="https://youtube-thumbnail.monishtips.com/">click to visit</a></p></div><div class="Prct-ctgy"><h4>Downloader</h4></div></li><li><div class="Product-Ctnt"><h3><a class="P-Lnk" href="https://www.monishtips.com/p/html-live-editor.html">HTML Live Editor</a></h3><p>HTML,CSS,JS code editor...<a class="extL" href="https://www.monishtips.com/p/html-live-editor.html">click to visit</a></p></div><div class="Prct-ctgy"><h4>Code Editor</h4></div></li><li><div class="Product-Ctnt"><h3><a class="P-Lnk" href="https://www.monishtips.com/p/qr-code-generator-for-whatsapp.html">WhatsApp QR Code Generator</a></h3><p>WhatsApp App or Website's Any Number's Link and Qr code Generator<a class="extL" href="https://www.monishtips.com/p/qr-code-generator-for-whatsapp.html">click to visit</a></p></div><div class="Prct-ctgy"><h4>Generator</h4></div></li><li><div class="Product-Ctnt"><h3><a class="P-Lnk" href="https://link.monishtips.com/">Safelink Generator</a></h3><p>Link Virus scan to visiting link generator...<a class="extL" href="https://link.monishtips.com/">click to visit</a></p></div><div class="Prct-ctgy"><h4>Generator</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!
Step 6: Then Save or Publish.
Step 7: That's done!
Does it require jQuery library?
No.
Will it work in all templates?
Yes.
Terms of Use
To appreciate our workshop, consider keeping the credits in canons.
We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.
Conclusion
In this article I have made a tutorial on How To Make Tool Website Link List Page In Blogger ? I Hope you have liked this article and please do share with your friends and follow up blog for more.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © The Pro Project | All Rights Reserved
© Copyright:
www.the-pro-project.blogspot.com
Source:
www.techydarshan.in