Hello, Bloggers! Welcome to Raghavendra Technic.
Will it work in all templates?
Yes, As it is only javascript no more coding knowledge required.
How To Make Tool Scripts Page in Blogger ?
Creating a Tool Scripts Page will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.
Before we start let's take a look at its Demo.
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 Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* Tool Scripts by (T_MK) */ .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 #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:#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 #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(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;}}Step 6: Paste the following HTML codes in your Tool Scripts Page in your Blogger.
<!--[ Tool Script .html code by (T_MK) ]-->
<div class="ProductLine"><ul>
<!--[ Start ]-->
<li><div class="Product-Ctnt"> <h3><a class="P-Lnk" href="https://raghavendratechnic.blogspot.com/p/word-counter.html?m=1">Word Counter</a></h3>
<p><a class="P-Lnk" href="https://raghavendratechnic.blogspot.com/p/word-counter.html?m=1">WordCounter will help to make sure its word count reaches a specific requirement or stays within a certain limit..</a></p></div>
<div class="Prct-ctgy"><h4>Counter</h4> </div></li>
<!--[ End ]-->
<!--[ Here your next codes ]-->
<div style="clear: both;"></div>
</ul></div><i class="separate"></i>Step 7: Now click on Save by clicking this icon
Step 8: That's done!
Downoad All Codes
Conclusion
In this article I have made a tutorial on How to make Tool Scripts. I hope you have liked it and Please do share with your friends and follow our blog for more
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.
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. © Raghavendra Technic | All Rights Reserved
© Copyright:
raghavendratechnic.blogspot.com