Czy w tych czasach naprawdę można obejść się bez instagrama? Głupie pytanie. Ominęłoby mnie wtedy tyle wspaniałych rzeczy, blond Billie czy słodka buzia Aire. W każdym razie, jeśli planujesz sobie założyć nowe konto, a nie wiesz dokładnie, jakie zastosować ustawienia, przychodzę Ci z pomocą! Poniżej znajdziesz odpowiedni kod, który możesz przekopiować do swojego posta. Ilość wierszy można powielać nieskończoną ilość razy... jeśli naprawdę uważasz, że ktoś będzie chciał zjechać tak nisko. Albo upaść. Miłego kopiowania!
<div class="slide" data-slide="slide">
<div class="slide-items">
<img alt="Img 1" src="LINK DO ZDJĘCIA NA STORY 1" />
<img alt="Img 2" src="LINK DO ZDJĘCIA NA STORY 2" />
<img alt="Img 3" src="LINK DO ZDJĘCIA NA STORY 3" />
tutaj wstaw kod do kolejnego zdjęcia na story
</div>
<nav class="slide-nav">
<div class="insta-story"><img class="img-av" src="https://i.imgur.com/6bree6i.png" /> gossip_girl</div>
<div class="slide-thumb"></div>
<button class="slide-prev">Previous</button>
<button class="slide-next">Next</button>
</nav></div>
<br /><br />
<center>
<div class="gossipinstagram">
<div class="profil">
<div class="instaikona"><img id="iik" src="LINK_DO_AVATARA"/>
<table class="instatabela1">
<tbody>
<tr>
<td class="instanick">instagramowa_nazwa</td> <td class="instaprzycisk1">Follow</td> <td class="instaprzycisk2"><a href="LINK_DO_KARTY">Send a message</a></td>
</tr>
</tbody>
</table>
<table class="instatabela2">
<tbody>
<tr>
<td class="liczby">313</td> <td class="liczby">885</td> <td class="liczby">34</td>
</tr>
<tr class="lid">
<td class="dane">posts</td> <td class="dane">followers</td> <td class="dane">following</td>
</tr>
</tbody>
</table>
<div class="instaopis">
<div class="instanazwa">NAZWA UŻYTKOWNIKA</div>
Pierwsza linijka opisu<br />
Druga linijka opisu
</div>
<div class="instastories">
<table class="instatabela3">
<tbody>
<tr>
<td class="stories"><img class="miniikon" src="LINK_DO_ZDJĘCIA_STORIES"/><br />
<div class="nazwastories">nazwa01</div></td>
<td class="stories"><img class="miniikon" src="LINK_DO_ZDJĘCIA_STORIES"/><br />
<div class="nazwastories">nazwa02</div></td>
<td class="stories"><img class="miniikon" src="LINK_DO_ZDJĘCIA_STORIES"/><br />
<div class="nazwastories">nazwa03</div></td>
<td class="stories"><img class="miniikon" src="LINK_DO_ZDJĘCIA_STORIES"/><br />
<div class="nazwastories">nazwa04</div></td>
<td class="stories"><img class="miniikon" src="LINK_DO_ZDJĘCIA_STORIES"/><br />
<div class="nazwastories">nazwa05</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<table class="instatabela4">
<tbody>
<tr>
<td class="pusta"></td> <td class="opcje"><div class="instaposty">posts</div></td> <td class="opcje"><div class="instarolki">reels</div></td> <td class="opcje"><div class="instaoznaczone">tagged</div></td> <td class="pusta"></td>
</tr>
</tbody>
</table>
<div class="instagramposty">
<table class="instatabela5">
<tbody>
<tr>
<td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td>
</tr>
<tr>
<td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td>
</tr>
<tr>
<td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td>
</tr>
<tr>
<td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td> <td class="poscik"><img class="kwadrat" src="LINK_DO_ZDJĘCIA_POSTA"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</center>
<br /><br />
<script src="//pull.cappuccicons.com/cpf.js"></script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Square+Peg&display=swap');
.insta-story {
display: flex;
position: absolute;
height: 40px;
border-radius: 20px;
z-index: 2!important;
top: 20px;
left: 10px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 12px;
color: #ffffff;
padding: 20px 0px 0px 65px;
}
.insta-story::after {
content: '\ea8d';
font-family:'cappuccicons';
position: absolute;
color: #fffafb;
z-index: 3;
right: -170px;
top: 18px;
font-size: 15px;
transform: rotate(90deg);
}
.insta-story img {
position: absolute;
width: 40px!important;
height: 40px!important;
border: 0.5px solid #202020!important;
border-radius: 22px!important;
top: 10px;
left: 10px;
outline: none!important;
outline-offset: 0px!important;
padding: 0px!important;
background: none!important;
}
.slide {
position: relative;
width: 330px;
margin: 20px auto;
display: grid;
height: 600px;
padding: 00px 0;
border-radius: 30px;
overflow: hidden;
border: 6px solid #202020;
outline: 1px solid #323232;
background-color: #2b2b2b;
box-shadow: 20px 20px 5px 0px rgba(0, 0, 0, 0.3);
}
.slide::after {
content:'\eb04';
font-family:'cappuccicons';
position: absolute;
color: #fffafb;
bottom: 23px;
right: 60px;
height: 27px;
font-size: 22px;
text-align: right;
font-weight: 400;
}
.slide::before {
content:'\ebcc';
font-family:'cappuccicons';
position: absolute;
color: #fffafb;
right: 25px;
font-size: 20px;
bottom: 18.5px!important;
font-weight: 300;
z-index: 1;
}
.slide-items {
position: relative!important;
grid-area: 1/1;
overflow: hidden;
border: 6px solid #141414;
border-radius: 30px;
}
.slide-items img {
object-fit: cover!important;
object-position: center top!important;
height: 100%!important;
width: 100%!important;
border-radius: 0px!important;
outline: 0px!impotrant;
outline-offset: 0px!important;
padding: 0px!important;
background: none!important;
border: 0px!important;
position: relative;
margin-bottom: 0px!important;
}
.slide-nav {
grid-area: 1/1;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
}
.slide-items > * {
position: absolute!important;
top: 0;
opacity: 0;
pointer-events: none;
}
.slide-items > .active {
position: relative!important;
opacity: 1;
pointer-events: initial;
}
.slide-nav button {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0;
}
.slide-thumb {
display: flex;
grid-column: 1/3;
padding: 0 15px;
}
.slide-thumb > span {
flex: 1;
display: block;
height: 2px;
background: #afafaf;
margin: 3px;
margin-top: 20px;
border-radius: 3px;
overflow: hidden;
}
.slide-thumb > span.done:after {
content: "";
display: block;
height: inherit;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
}
.slide-thumb > span.active:after {
content: "";
display: block;
height: inherit;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
transform: translateX(-100%);
animation: thumb 5s forwards linear;
}
@keyframes thumb {
to {
transform: initial;
}
}
</style>
<script type="text/javascript">
class SlideStories {
constructor(id) {
this.slide = document.querySelector(`[data-slide=${id}]`);
this.active = 0;
this.init();
}
activeSlide(index) {
this.active = index;
this.items.forEach((item) => {
item.classList.remove("active");
});
this.items[index].classList.add("active");
this.thumbItems.forEach((item) => {
item.classList.remove("active");
});
this.thumbItems[index].classList.add("active");
this.autoSlide();
console.log(this.thumbItems.classList);
}
prev() {
if (this.active > 0) {
this.activeSlide(this.active - 1);
} else {
this.activeSlide(this.items.length - 1);
}
}
next() {
if (this.active < this.items.length - 1) {
this.activeSlide(this.active + 1);
} else {
this.activeSlide(0);
}
}
addNavigation() {
const nextBtn = this.slide.querySelector(".slide-next");
const prevBtn = this.slide.querySelector(".slide-prev");
nextBtn.addEventListener("click", this.next);
prevBtn.addEventListener("click", this.prev);
}
addThumbItems() {
this.items.forEach(() => (this.thumb.innerHTML += `<span></span>`));
this.thumbItems = Array.from(this.thumb.children);
}
autoSlide() {
clearTimeout(this.timeout);
this.timeout = setTimeout(this.next, 5000);
}
init() {
this.next = this.next.bind(this);
this.prev = this.prev.bind(this);
this.items = this.slide.querySelectorAll(".slide-items > *");
this.thumb = this.slide.querySelector(".slide-thumb");
this.addThumbItems();
this.activeSlide(0);
this.addNavigation();
}
}
new SlideStories("slide");
</script>
| instagramowa_nazwa | Follow | Send a message |
| 313 | 885 | 34 |
| posts | followers | following |
Druga linijka opisu.
nazwa01 |
nazwa02 |
nazwa03 |
nazwa04 |
nazwa05 |
posts | reels | tagged |
 | |  |
| | |
| | |
| | |