Add Responsive Table & Stylish Button in your Blogger or WordPress site.
Basically when we make a website on any platform then we thought that How to make our website stylish & attractive? well, no need to fear when You Themidom is here. In this blog, I am going to give you a complete explanation with all materials that how can you make a stylish button 🔳 and a responsive table on your site! no matter if you are in blogger or WordPress or any other platform, you can do it. Now the question is do you want to make your site professional by adding extra features, if your answer is 'yes' then nothing to do just stick with us.
Introduction:-
So Guys if you are going to add a stylish button and responsive table then go for it but keep in mind that your site may slow down if your theme is not responsive and mobile-friendly, Make sure that your site is capable of that if you are capable then go for the stylish slider button & if your site is already slow or loading slowing then also you can add this stylish button but your site may slow down more, I repeat "maybe". If you do not want to add a stylish button to your site then also I have a button for you but this button is not a sliding button, this button is a simple and responsive button.
Now a question may arise in your mind that why our site may slow down if you add a stylish slider 🎚 button? well your question is right but I have its answer, the answer is:
We all know that style means CSS, and if you add CSS in your theme section then your theme response may be slow down, it only happens when your theme is an older 🧓 version. I prefer you to buy or chose a responsive free theme first as site response must be quick if you want unique and more traffic in your blog. So the result is Stylish Slider buttons is for those who have a responsive theme and the basic responsive button is you those whose site is already slow and they don't want to add some code in the theme section, Table is for all as you don't need to touch your theme section.
How to add a Table in your Blogger, WordPress, or any other site?
For adding a table no need to add code in your theme section just paste the following code where you want to make a table.
<div class="table">
<table>
<tbody>
<tr>
<td><b>Site Name</b></td>
<td>Themidom</td>
</tr>
<tr>
<td><b>Publisher</b></td>
<td>Themidom</td>
</tr>
<tr>
<td><b>Mod info</b></td>
<td>VIP/Premium </td>
</tr>
<tr>
<td><b>Author Name</b></td>
<td>S.H.Laskar</td>
</tr>
<tr>
<td><b>Admin Name</b></td>
<td>Arpan Chakraborty</td>
</tr>
<tr>
<td><b>You can Add link </b></td>
<td><a href="Just add link here"></a></td>
</tr>
<tr>
<td><b>Update on </b></td>
<td>12 June 2021</td>
</tr>
</tbody></table></div>
Add the above code where you want to place the table also want you to place a link 🔗 in it and change the text according to your need. If you place the code correctly then the table will look like this:
This code will take place inside the post so that there will be no effect on the theme and site. Coming to the next point that is:
*** How to Add Stylish Slider Button in Blogger, WordPress, or any other site?:
In our website design and style plays an important role and Button is one of the parts of the design, So let us start the tutorial: (Here I am showing you to add two ✌ Buttons)
Step1:
Basically for adding a slider button 🔳 you have to add HTML and CSS in your theme section. Add the following code before </body>. Go to your site's dashboard>theme>edit HTML, and then paste the following code before </body> and save it.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>
Now the second step is to add CSS to your theme.
Step2:
For adding CSS in your theme just go to edit html page and search (ctrl+F) ]]></b:skin>. After finding ]]></b:skin> just paste the following code before ]]></b:skin> and save it.
.bie-slide,
.bie-slide2 {
position: relative;
display: inline-block;
height: 40px;
width: 170px;
line-height: 40px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #f84f4f;
margin: 10px;
transition: all 0.5s ease-in-out;
}
.bie-slide2 {
border: 2px solid #36D7B7;
}
.bie-slide:hover {
background-color: #f84f4f;
}
.bie-slide2:hover {
background-color: #36D7B7;
}
.bie-slide:hover span.circle,
.bie-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #f84f4f;
}
.bie-slide2:hover span.circle2 {
color: #36D7B7;
}
.bie-slide:hover span.title,
.bie-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.bie-slide:hover span.title-hover,
.bie-slide2:hover span.title-hover2 {
opacity: 1;
left: 28px;
}
.bie-slide span.circle,
.bie-slide2 span.circle2 {
display: block;
background-color: #f84f4f;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 30px;
height: 30px;
width: 30px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.bie-slide2 span.circle2 {
background-color: #36D7B7;
}
.bie-slide span.title,
.bie-slide span.title-hover,
.bie-slide2 span.title2,
.bie-slide2 span.title-hover2 {
position: absolute;
left: 65px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #f84f4f;
transition: .5s;
}
.bie-slide2 span.title2,
.bie-slide2 span.title-hover2 {
color: #36D7B7;
}
.bie-slide span.title-hover,
.bie-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.bie-slide span.title-hover,
.bie-slide2 span.title-hover2 {
color: #fff;
}
Step3:
After adding CSS you have to add HTML code in your post. Just paste the following code in your post where you want to add Buttons. After adding code place your link instead of #.
<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" rel="nofollow" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
If you followed our instruction correctly then your Table and Buttons will look like:-
Now the last topic is
*** How to Add a Basic responsive Button without adding code in the Theme section?:
(the code I am providing you, Fully designed by the themidom team)
For adding the Responsive button 🔳 without adding CSS or javascript, you have to paste the code where you want to place the button. Paste the HTML code and save it also replace our link to your URL.
<div id="wrap" style="text-align:center">
<a href='https://www.themidom.in' target='_blank'>
<input type='button' style='padding-left:50px;padding-top:17px;padding-right:50px;padding-bottom:18px;margin-left:9px;margin-top:10px;margin-right:10px;margin-bottom:10px;background-color:#2b00ff;color:#FFFFFF;border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-color:#d5d5d5;border-radius:100px;cursor:pointer' value='Click Here!' onMouseOver=this.style.backgroundColor='#FFFFFF';this.style.color='#2b00ff';this.style.borderColor='#d5d5d5' onMouseOut=this.style.backgroundColor='#2b00ff';this.style.color='#FFFFFF';this.style.borderColor='#d5d5d5' />
</a>
</div>
Once you paste the code and publish it your Responsive Button will look like this:
Conclusion:
Before adding something in your theme section, backup your theme as if there will be a problem you can restore your theme. That is all for today, If you liked our content don't forget to comment down below.
Team Themidom- Thanking You
Wow
ReplyDeleteNice
ReplyDelete