Hello Guys! How are you? I hope you are all good. Welcome Freemium Tech Website. If you are looking for a beautiful showcase page script or you want to create a Tool link list page so this post is just for you. Because today I will share with you how to create a Tool Link list page or how to create a beautiful showcase page. So without wasting anytime let's get start.
What is showcase page?
Showcase page is a webpage where we display different types of link which is very useful for our visitor and us. It make by simple html and css code because of this, it not affect your website speed. JavaScrip reduce your website speed for that we don't use any JavaScrip program in this script.
Why use Showcase page?
It gives your website attractive and professional look. If you site provide some useful Tools or important link for your visitors then it is must need for you. Your visitors will easyly find out necessary thing in this page.
If your website have dark mode features so don't worry because our script also support dark mode feature you just need change your dark mode class name according to your theme class.
Before Create This Page let's see a Preview
How to create Tool link list page in your blogger website?
For create this page you don't need any coding Knowledge because I have already make a script for you. You just copy and put it on your page. Follow below steps for create this page.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Manu bar.
Step 3: Go to the page or post or place which you want to add Showcase 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 empty 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://freemiumtech.blogspot.com/p/video.html?m=1">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 FreemiumTech video downloader allows you to download videos or music with just one click!<br><a class="extL" href="https://freemiumtech.blogspot.com/p/video.html?m=1">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://freemiumtech.blogspot.com/p/youtube-thumbnail-downloader_12.html?m=1">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://freemiumtech.blogspot.com/p/youtube-thumbnail-downloader_12.html?m=1">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://freemiumtech.blogspot.com/p/html-parser-tool.html?m=1">HTML Live Editor</a></h3><p>HTML,CSS,JS code editor...<a class="extL" href="https://freemiumtech.blogspot.com/p/html-parser-tool.html?m=1">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://freemiumtech.blogspot.com/p/whatsapp-chat-link-generator.html?m=1">WhatsApp Chat Link Generator</a></h3><p>WhatsApp App or Website's Any Number's Link and Chat Link Generator<a class="extL" href="https://freemiumtech.blogspot.com/p/whatsapp-chat-link-generator.html?m=1">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://freemiumtech.blogspot.com/p/safelink-generator.html?m=1">Safelink Generator</a></h3><p>Link Virus scan to visiting link generator...<a class="extL" href="https://freemiumtech.blogspot.com/p/safelink-generator.html?m=1">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>
Step 6: Then Save it and Publish.
Step 7: That's done! You are Successfuly create a Showcase Page.
CONCLUSION
In this article, I shared with you How to Create a Beautiful Showcase or Link List Page in Blogger. I hope you have liked It. Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily.
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.
©Copyright: FreemiumIdeas™