Custom your pages for better marketing

BagasBamaska · 2021-04-17T15:30:13+00:00

hai bro I wanna share with you custom pages like this video. https://drive.google.com/file/d/1GSuvXPsEPEPrqgAqvjjiJ5WL4yrF7rdC/view?usp=sharing. comment bel...

Custom your pages for better marketing

rupak

@BagasBamaska great work! can you share you website to view?
Thanks in advance.

soodomaa

rupak See above given link. Why must see his site?

BagasBamaska

rupak there is this kurirkuexpress.website
this website not yet launching

rupak

soodomaa its not like your not sharing your site to view doesn't mean that others will also don't give sir, and i think this is the only place everyone help each other and share their views and thoughts and also share customizations and its very hard that a person share every thing so its better view site and you can that many asked something @BagasBamaska sir's site and he is helping them as well hope you got the point is clear thank you

Djaniel

BagasBamaska

Great work! 😄 Mind sharing info how to create tabs?

Mohit

BagasBamaska Are you using supper cache module?

josan420

Djaniel https://freefrontend.com/css-tabs/
Choose one you like.

BagasBamaska

Djaniel thank you if you want i can give you

Djaniel

BagasBamaska well if you can I appreciate it.

BagasBamaska

copy paste on metadata store
`<div class="tab_container col-12 mt-10">
<input checked="" id="tab1" name="tabs" type="radio">
<label for="tab1"><i class="fa fa-code"></i>
<img src="https://i.ibb.co/xCfH9bb/logo-diskon-512.png" alt="logo-diskon-512" border="0" width="20px" height="20px"> Promo</label>

<input id="tab2" name="tabs" type="radio">
<label for="tab2"><i class="fa fa-code"></i>
<img src="https://i.ibb.co/4FxHhrw/jadwal.png" alt="jadwal" border="0" width="20px" height="20px"> Jam Operasional</label>

<input id="tab3" name="tabs" type="radio">
<label for="tab3"><i class="fa fa-code"></i>
<img src="https://i.ibb.co/SnYwdWx/location.png" alt="location" border="0" width="20px" height="20px"> Alamat Restoran</label>

<section class="tab-content col-12 mt-10" id="content2">
<p>Senin : 09.00 - 22.00</p>
<p>Selasa : 09.00 - 22.00</p>
<p>Rabu : 09.00 - 22.00</p>
<p>Kamis : 09.00 - 22.00</p>
<p>Jumat : 09.00 - 22.00</p>
<p>Sabtu : 09.00 - 22.00</p>
<p>Minggu : 09.00 - 22.00</p>
</section>

JL. H. Noer (Halaman Toko Karunia), Sugihwaras, Candi, Sidoarjo
<br>
<br>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d247.24306011476614!2d112.70248352153223!3d-7.477512452381337!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd7e11f5a1994d1%3A0xd771638ceb8d8021!2sTahu%20Garing%20TAGAR%20Candi!5e0!3m2!1sid!2sid!4v1618081054607!5m2!1sid!2sid" width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</section>

</div>`

copy paste on custom css

`.tab_container{
width: 100%;
margin: auto;
padding-top: 0;
position: relative;

}
input,section{
clear:both;
display:none
}
label{
text-align: center;
font-weight: 700;
font-size: 10px;
display: block;
float: left;
width: 33%;
color: #999;
cursor: pointer;
text-decoration: none;
text-align: center;
background: transparent;
padding-bottom: 10px;
}
#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3,#tab4:checked ~ #content4,#tab5:checked ~ #content5{display:block;padding-left:10px;color:#999;padding-bottom:10px;}
.tab_container .tab-content p,.tab_container .tab-content h3{-webkit-animation:fadeInScale 0.7s ease-in-out;-moz-animation:fadeInScale 0.7s ease-in-out;animation:fadeInScale 0.7s ease-in-out}
.tab_container .tab-content h3{text-align:center}
.tab_container [id^="tab"]:checked + label{box-shadow:inset 0 3px rgb(255 197 53);}
.tab_container [id^="tab"]:checked + label .fa{color:rgb(255 197 53);}
label .fa{
font-size: 1.5em;
display: inline-block;
width: 100%;
height: auto;
float: center;
padding: 0.5em;
margin: auto;

}

/Media query/
@media only screen and (max-width:900px){
label span{display:none}
.tab_container{width: 98%;}
}
/Content Animation/
@keyframes fadeInScale{
0%{transform:scale(0.9);opacity:0}
100%{transform:scale(1);opacity:1}
}
.clearfix:before,.clearfix:after{content:" ";display:table}`

russellssean

BagasBamaska Hello Bro, can you help me with the Hero slider code at the top and menu categories, please see the screenshot
.

Kara

BagasBamaska nice bro thank you but when i do this the addons display destroyed

SebastianCamia

BagasBamaska Your code is messing the addon menu.

There is already a class named "label" in the addon category.

BagasBamaska

russellssean slider on the top thats manual from html and css custom for the category slider just custom css and build template with photoshop

Stanbuggy

russellssean
Pls how did u integrate the chat admin on whatsAPP button.

Thanks

bhojmandu

BagasBamaska sir, how can change Latitude & Longitude

russellssean

Can you help with code HTML & CSS BagasBamaska your like your design Bro

BagasBamaska

bhojmandu for what ? for the map on store?

bhojmandu

BagasBamaska for map on store

BagasBamaska

bhojmandu owh you can add latitude and longitude store on gmaps then you need to embed code from gmaps and paste to store or this

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d247.24306011476614!2d 112.7024835 2153223!3d -7.4775124 52381337!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd7e11f5a1994d1%3A0xd771638ceb8d8021!2sTahu%20Garing%20TAGAR%20Candi!5e0!3m2!1sid!2sid!4v1618081054607!5m2!1sid!2sid

change bold number

BagasBamaska

for that slider banner and category slider?

russellssean

BagasBamaska Yes Bro Slider banner and Category

alabtechnosoft

BagasBamaska Please help me to show my home page banner image with full screen and auto slider every 30 seconds
Please help me on this.

BagasBamaska

Slider Banner
html code

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider"> <figure> <img src="https://i.ibb.co/s1DHJCL/62834-OACMY6-383-copy.jpg" alt="62834-OACMY6-383-copy" border="0"> <img src="https://i.ibb.co/FHSQgQd/top-up.png" alt="top-up" border="0"> <img src="https://i.ibb.co/s1DHJCL/62834-OACMY6-383-copy.jpg" alt="62834-OACMY6-383-copy" border="0"> </figure> </div> </div>

css custom code

`@keyframes slideshow {
0%, 25%, 100%{left: 0}

30%, 55%{left: -100%}

60%, 85%{left: -200%}

}
#slider{overflow:hidden;width:50%;margin:5px auto; border:5px solid transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:20s slideshow infinite}
@media screen and (max-width: 767px) {
#slider {overflow: hidden; width: 100%; margin: 0 auto;}}
`

css custom slider category

.secondary-slider-wrapper { position: relative; display: grid; grid-template-columns: auto auto auto auto auto; grid-template-rows: 100px 100px; grid-gap: 2px; } .slider-wrapper__img-wrapper{ margin-left: 1rem; margin-right: 0.5; } .slider-wrapper__img-wrapper:first-child{ margin-left: 1rem; }

bhojmandu

BagasBamaska where to put html code sir

mounika

BagasBamaska Hey
Category slider not working for me, Can you please help me with that

russellssean

Thanks, Bro much appreciated

BagasBamaska

bhojmandu for store on metadata