WordPress
Blogger
Wix
WordPress
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet nemo consequuntur? Hic magni voluptatum doloribus error dolorum labore, possimus soluta.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi, ratione!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis repellendus vero praesentium, quisquam corporis quos eius omnis unde quibusdam voluptatem.
Learn MoreBlogger
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet nemo consequuntur? Hic magni voluptatum doloribus error dolorum labore, possimus soluta.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi, ratione!
Learn MoreWix
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet nemo consequuntur? Hic magni voluptatum doloribus error dolorum labore, possimus soluta.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi, ratione!
Learn More
<div class="tabs-container">
<div class="tab-headings-container">
<h2 class="tab-heading wordpress-btn active">WordPress</h2>
<h2 class="tab-heading blogger-btn">Blogger</h2>
<h2 class="tab-heading wix-btn">Wix</h2>
</div>
<div class="panels-container">
<div class="panel wordpress active">
<h2>WordPress</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis
illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet
nemo consequuntur? Hic magni voluptatum doloribus error dolorum
labore, possimus soluta.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,
ratione!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
repellendus vero praesentium, quisquam corporis quos eius omnis unde
quibusdam voluptatem.
</p>
<a href="#">Learn More</a>
</div>
<div class="panel blogger">
<h2>Blogger</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis
illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet
nemo consequuntur? Hic magni voluptatum doloribus error dolorum
labore, possimus soluta.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,
ratione!
</p>
<a href="#">Learn More</a>
</div>
<div class="panel wix">
<h2>Wix</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis
illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet
nemo consequuntur? Hic magni voluptatum doloribus error dolorum
labore, possimus soluta.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,
ratione!
</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
<script src="main.js"></script>
font-family: "Roboto", sans-serif;
}
.tabs-container {
padding: 16px;
max-width: 600px;
margin: 0 auto;
}
.tab-headings-container {
display: flex;
border-bottom: 1px solid #dee;
}
.tab-headings-container .tab-heading {
border: 1px solid #cacaca;
padding: 8px 24px;
font-size: 16px;
margin: 0 8px;
border-radius: 10px 10px 0 0;
cursor: pointer;
transition: 300ms;
font-weight: normal;
border-bottom: 0;
}
.tab-headings-container .tab-heading:hover {
background: #eee;
}
.tab-headings-container .tab-heading.active {
background: #353535;
color: #eee;
font-weight: bold;
}
.panels-container h2 {
color: #b92646;
}
.panels-container a {
background: #b92646;
padding: 10px 48px;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
margin-top: 10px;
display: inline-block;
transition: 300ms;
}
.panels-container a:hover {
background: #83132b;
}
.panels-container {
position: relative;
}
.panels-container .panel {
position: absolute;
opacity: 0;
transform: translateX(100px);
padding: 20px;
line-height: 1.8;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
border-radius: 0 0 10px 10px;
transition: 500ms cubic-bezier(0.24, 1.57, 1, 1);
}
.panels-container .panel.active {
opacity: 1;
transform: translateX(0);
transition-delay: 100ms;
}
const tabsContainer = document.querySelector(".tabs-container");
if (tabsContainer) {
const wordpressPanel = document.querySelector(".panels-container .wordpress");
const bloggerPanel = document.querySelector(".panels-container .blogger");
const wixPanel = document.querySelector(".panels-container .wix");
const wordpressBtn = document.querySelector(".tabs-container .wordpress-btn");
const bloggerBtn = document.querySelector(".tabs-container .blogger-btn");
const wixBtn = document.querySelector(".tabs-container .wix-btn");
let activePanel = wordpressPanel;
const calculateHeight = () => {
let panelHeight = activePanel.clientHeight;
tabsContainer.style.marginBottom = panelHeight + "px";
};
calculateHeight();
const removeActiveFromAllPanels = () => {
wordpressPanel.classList.remove("active");
bloggerPanel.classList.remove("active");
wixPanel.classList.remove("active");
};
const removeActiveFromAllBtns = () => {
wordpressBtn.classList.remove("active");
bloggerBtn.classList.remove("active");
wixBtn.classList.remove("active");
};
wordpressBtn.addEventListener("click", () => {
removeActiveFromAllPanels();
wordpressPanel.classList.add("active");
removeActiveFromAllBtns();
wordpressBtn.classList.add("active");
activePanel = wordpressPanel;
calculateHeight();
});
bloggerBtn.addEventListener("click", () => {
removeActiveFromAllPanels();
bloggerPanel.classList.add("active");
removeActiveFromAllBtns();
bloggerBtn.classList.add("active");
activePanel = bloggerPanel;
calculateHeight();
});
wixBtn.addEventListener("click", () => {
removeActiveFromAllPanels();
wixPanel.classList.add("active");
removeActiveFromAllBtns();
wixBtn.classList.add("active");
activePanel = wixPanel;
calculateHeight();
});
}CODE BY SR7THEMES
Quick Guide
HTML code- Add the HTML code anywhere u want on blogger Page/PostCSS code- Add the CSS code in
1. Go to Theme option
2. Click on Customise
3. Go to Advanced meanu
4. Click on Theme colour meanu
5. Click on Add CSS and and there u paste CSS
Js. code- Add the Js. Above the </body> tag
Disclaimer
If you are going to use any of our code, give the following credit and don't remove the credit comment from the codes. If you don't want to give credit, you are strictly prohibited to use any of our code.
Add the following Credit:
[ Source Code by Plus UI Tejash ]
Help me to cross the milestone of 550-600 Subscribers: Tech With Deo After that Redesigned Version of Median UI v1.5: Plus UI v1.1 will release...