Copy Paste Seluruh Bagian Kode HTML ini Menjadi 1 Kode HTML Secara berurutan untuk menghasilkan Widget Feeds Instagram Yang Terlihat Premium.
=================================================
PART 1
=================================================
<!-- ==========================================================
Instagram Profile Widget Premium v1.0
PART 01 - HTML Structure
Edit bagian CONFIG saja untuk akun Instagram lain.
=========================================================== -->
<div id="ig-widget">
<!-- ==========================
CONFIG
=========================== -->
<!--
PROFILE PHOTO
https://YOUR-PROFILE-PHOTO.jpg
DISPLAY NAME
Nama Anda
USERNAME
@username
PROFILE URL
https://instagram.com/username
POSTS
125
FOLLOWERS
12.5K
FOLLOWING
580
BIO
Tulis bio singkat di sini.
FEED IMAGES
https://IMAGE-01.jpg
https://IMAGE-02.jpg
https://IMAGE-03.jpg
https://IMAGE-04.jpg
https://IMAGE-05.jpg
https://IMAGE-06.jpg
-->
<div class="ig-card">
<div class="ig-cover"></div>
<div class="ig-header">
<div class="ig-avatar">
<img
src="https://via.placeholder.com/220x220.png?text=PHOTO"
alt="Instagram Profile">
</div>
<div class="ig-info">
<h2 class="ig-name">
Nama Anda
</h2>
<div class="ig-username">
@username
</div>
<div class="ig-stats">
<div class="ig-stat">
<strong>125</strong>
<span>Posts</span>
</div>
<div class="ig-stat">
<strong>12.5K</strong>
<span>Followers</span>
</div>
<div class="ig-stat">
<strong>580</strong>
<span>Following</span>
</div>
</div>
<p class="ig-bio">
Tulis bio singkat di sini.
</p>
<div class="ig-buttons">
<a
class="ig-btn ig-follow"
href="https://instagram.com/username"
target="_blank">
Follow
</a>
<a
class="ig-btn ig-view"
href="https://instagram.com/username"
target="_blank">
View Profile
</a>
</div>
</div>
</div>
<!-- ==========================
FEED PREVIEW
=========================== -->
<div class="ig-gallery">
<a href="https://instagram.com/username" target="_blank">
<img src="https://via.placeholder.com/400" alt="Feed 1">
</a>
<a href="https://instagram.com/username" target="_blank">
<img src="https://via.placeholder.com/400" alt="Feed 2">
</a>
<a href="https://instagram.com/username" target="_blank">
<img src="https://via.placeholder.com/400" alt="Feed 3">
</a>
<a href="https://instagram.com/username" target="_blank">
<img src="https://via.placeholder.com/400" alt="Feed 4">
</a>
<a href="https://instagram.com/username" target="_blank">
<img src="https://via.placeholder.com/400" alt="Feed 5">
</a>
<a href="https://instagram.com/username" target="_blank">
<img src="https://via.placeholder.com/400" alt="Feed 6">
</a>
</div>
</div>
</div>
=================================================
PART 2
=================================================
<style>
/*====================================================
Instagram Profile Widget Premium v1.0
PART 02 - Premium CSS
====================================================*/
#ig-widget{
max-width:980px;
margin:40px auto;
padding:20px;
font-family:Arial,Helvetica,sans-serif;
}
#ig-widget *{
box-sizing:border-box;
}
.ig-card{
overflow:hidden;
border-radius:28px;
background:
rgba(255,255,255,.92);
backdrop-filter:blur(18px);
box-shadow:
0 25px 60px rgba(0,0,0,.12);
border:1px solid rgba(255,255,255,.45);
transition:.35s;
}
.ig-card:hover{
transform:translateY(-6px);
box-shadow:
0 35px 70px rgba(0,0,0,.16);
}
.ig-cover{
height:170px;
background:
linear-gradient(
135deg,
#833AB4,
#C13584,
#E1306C,
#F56040,
#FCAF45
);
position:relative;
overflow:hidden;
}
.ig-cover:before{
content:"";
position:absolute;
width:320px;
height:320px;
border-radius:50%;
background:
rgba(255,255,255,.12);
top:-140px;
right:-90px;
}
.ig-cover:after{
content:"";
position:absolute;
width:240px;
height:240px;
border-radius:50%;
background:
rgba(255,255,255,.08);
bottom:-120px;
left:-70px;
}
.ig-header{
display:flex;
gap:28px;
padding:0 35px 35px;
margin-top:-75px;
position:relative;
z-index:2;
}
.ig-avatar{
width:150px;
height:150px;
border-radius:50%;
padding:6px;
background:
linear-gradient(
135deg,
#833AB4,
#E1306C,
#FCAF45);
box-shadow:
0 15px 35px rgba(0,0,0,.18);
flex-shrink:0;
}
.ig-avatar img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
display:block;
background:#fff;
}
.ig-info{
flex:1;
padding-top:82px;
}
.ig-name{
margin:0;
font-size:34px;
font-weight:700;
color:#222;
}
.ig-username{
margin-top:6px;
font-size:17px;
color:#777;
}
.ig-stats{
display:flex;
gap:30px;
margin:22px 0;
flex-wrap:wrap;
}
.ig-stat{
text-align:center;
}
.ig-stat strong{
display:block;
font-size:24px;
color:#111;
}
.ig-stat span{
font-size:14px;
color:#777;
}
.ig-bio{
font-size:15px;
line-height:1.8;
color:#444;
margin:18px 0 24px;
}
.ig-buttons{
display:flex;
gap:14px;
flex-wrap:wrap;
}
.ig-btn{
padding:14px 26px;
border-radius:999px;
font-weight:bold;
text-decoration:none;
transition:.3s;
font-size:15px;
}
.ig-follow{
background:
linear-gradient(
135deg,
#833AB4,
#E1306C,
#F56040);
color:#fff;
box-shadow:
0 12px 25px rgba(225,48,108,.35);
}
.ig-follow:hover{
transform:translateY(-3px);
}
.ig-view{
background:#fff;
color:#444;
border:1px solid #ddd;
}
.ig-view:hover{
background:#f5f5f5;
}
.ig-gallery{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:10px;
padding:0 20px 20px;
}
.ig-gallery a{
overflow:hidden;
border-radius:18px;
display:block;
}
.ig-gallery img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
display:block;
transition:.4s;
}
.ig-gallery img:hover{
transform:scale(1.08);
}
@media(max-width:768px){
.ig-header{
flex-direction:column;
align-items:center;
text-align:center;
margin-top:-60px;
padding:0 22px 28px;
}
.ig-avatar{
width:125px;
height:125px;
}
.ig-info{
padding-top:0;
}
.ig-name{
font-size:28px;
}
.ig-buttons{
justify-content:center;
}
.ig-gallery{
grid-template-columns:
repeat(2,1fr);
padding:0 15px 15px;
}
}
@media(max-width:480px){
#ig-widget{
padding:10px;
}
.ig-cover{
height:135px;
}
.ig-gallery{
grid-template-columns:
repeat(2,1fr);
gap:8px;
}
.ig-btn{
width:100%;
text-align:center;
}
}
</style>
=================================================
PART 3
=================================================
<style>
/*==========================================
PART 03
Premium Animation & Effects
==========================================*/
/* ---------- VERIFIED BADGE ---------- */
.ig-name::after{
content:"✓";
display:inline-flex;
justify-content:center;
align-items:center;
margin-left:10px;
width:22px;
height:22px;
border-radius:50%;
background:#0095F6;
color:#fff;
font-size:13px;
font-weight:bold;
vertical-align:middle;
box-shadow:
0 0 12px rgba(0,149,246,.35);
}
/* ---------- FOLLOW BUTTON SHINE ---------- */
.ig-follow{
position:relative;
overflow:hidden;
}
.ig-follow::before{
content:"";
position:absolute;
top:-40%;
left:-120%;
width:60%;
height:220%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);
transform:rotate(25deg);
transition:1s;
}
.ig-follow:hover::before{
left:180%;
}
/* ---------- AVATAR GLOW ---------- */
.ig-avatar{
animation:
avatarGlow 4s ease-in-out infinite;
}
@keyframes avatarGlow{
0%,100%{
box-shadow:
0 15px 35px rgba(0,0,0,.18),
0 0 0 rgba(225,48,108,.15);
}
50%{
box-shadow:
0 18px 45px rgba(0,0,0,.18),
0 0 35px rgba(225,48,108,.35);
}
}
/* ---------- FEED ---------- */
.ig-gallery a{
position:relative;
}
.ig-gallery a::after{
content:"📷 Instagram";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:
rgba(0,0,0,.42);
color:#fff;
font-size:15px;
font-weight:bold;
opacity:0;
transition:.35s;
letter-spacing:.5px;
}
.ig-gallery a:hover::after{
opacity:1;
}
/* ---------- IMAGE ---------- */
.ig-gallery img{
transition:
transform .45s,
filter .45s;
}
.ig-gallery a:hover img{
transform:scale(1.08);
filter:brightness(.88);
}
/* ---------- CARD ---------- */
.ig-card{
position:relative;
overflow:hidden;
}
.ig-card::before{
content:"";
position:absolute;
top:-200px;
right:-120px;
width:320px;
height:320px;
border-radius:50%;
background:
rgba(255,255,255,.08);
pointer-events:none;
}
/* ---------- BUTTON ---------- */
.ig-btn{
letter-spacing:.3px;
}
.ig-btn:hover{
transform:
translateY(-3px);
}
/* ---------- MOBILE ---------- */
@media(max-width:768px){
.ig-name::after{
width:18px;
height:18px;
font-size:11px;
margin-left:8px;
}
}
</style>
=================================================
PART 4
=================================================
<style>
/*==================================================
Instagram Profile Widget Premium v1.0
PART 04 - Final Premium Effects
==================================================*/
/* Aurora Background */
.ig-cover{
background-size:300% 300%;
animation:igAurora 10s ease infinite;
}
@keyframes igAurora{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
/* Floating Avatar */
.ig-avatar{
animation:
avatarFloat 5s ease-in-out infinite,
avatarGlow 4s ease-in-out infinite;
}
@keyframes avatarFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-6px);
}
}
/* Badge */
.ig-card::after{
content:"FOLLOW ME";
position:absolute;
top:18px;
right:18px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.35);
font-size:11px;
font-weight:bold;
letter-spacing:1px;
color:#fff;
box-shadow:
0 10px 25px rgba(0,0,0,.12);
}
/* Feed Border */
.ig-gallery a{
border:2px solid rgba(255,255,255,.45);
transition:.35s;
}
.ig-gallery a:hover{
border-color:#E1306C;
}
/* Button Animation */
.ig-btn{
transition:
transform .35s,
box-shadow .35s,
background .35s;
}
.ig-follow:hover{
box-shadow:
0 18px 35px rgba(225,48,108,.45);
}
.ig-view:hover{
box-shadow:
0 12px 28px rgba(0,0,0,.12);
}
/* Smooth Card */
.ig-card{
transition:
transform .35s,
box-shadow .35s;
}
.ig-card:hover{
transform:
translateY(-8px);
}
/* Better Text */
.ig-bio{
max-width:620px;
}
/* Responsive */
@media(max-width:768px){
.ig-card::after{
top:12px;
right:12px;
font-size:10px;
padding:6px 10px;
}
}
</style>
=================================================
