Cek Tampilannya Disini
=================================================
PHOTO CIRCLE MELAYANG
=================================================
<div style="display:flex;justify-content:center;align-items:center;padding:20px;background:transparent;">
<style>
.ie-avatar-wrap{
display:flex;
justify-content:center;
align-items:center;
width:100%;
}
.ie-glass{
position:relative;
width:300px;
height:300px;
border-radius:50%;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,.10);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.35);
box-shadow:
0 0 20px rgba(37,211,102,.25),
0 0 50px rgba(37,211,102,.20),
0 20px 45px rgba(0,0,0,.18);
animation:floatImage 5s ease-in-out infinite;
}
.ie-glass::before{
content:"";
position:absolute;
inset:-25%;
background:
radial-gradient(circle,
rgba(37,211,102,.22),
transparent 70%);
animation:pulseGlow 4s ease-in-out infinite;
z-index:1;
}
.ie-glass img{
position:absolute;
inset:0;
width:100%;
height:100%;
/* Bagian penting */
object-fit:cover;
object-position:center bottom;
/* ---------------- */
z-index:2;
transform:scale(1.12);
user-select:none;
pointer-events:none;
}
@keyframes floatImage{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
}
@keyframes pulseGlow{
0%,100%{
opacity:.45;
transform:scale(.95);
}
50%{
opacity:.9;
transform:scale(1.08);
}
}
@media(max-width:768px){
.ie-glass{
width:220px;
height:220px;
}
}
@media(max-width:480px){
.ie-glass{
width:180px;
height:180px;
}
}
</style>
<div class="ie-avatar-wrap">
<div class="ie-glass">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5CEx4uDjpSmyDe3ijNvkL-93U-eykcGTqxwb1RLc8xvGygLuvWcbxX0oKMX0WQc7cw0PH5odVYLbmgJZo3mIZ7gKJxz9Vo3aQtdHZGweUn6f_T9n0xMLvVmjwEdiwWwfN7h76_9IEe_sTIs43Lall8hv1FUGU2IemsTmj8Eg4mXTNrkMtMu0_S3G-vF8/s320/ISKANDAR%20DORMAN%20-%20KAOS%20IKAN%20EKSPORT%20-%20BACKGROUND%20TRANSPARAN%20square.png">
</div>
</div>
</div>
=================================================
ISI ARTIKEL
=================================================
<div style="max-width:960px;margin:30px auto;padding:20px;">
<style>
.ikan-card{
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.25);
border-radius:24px;
padding:32px;
box-shadow:0 12px 35px rgba(0,0,0,.08);
animation:fadeUp .9s ease both;
font-family:Arial,Helvetica,sans-serif;
}
.ikan-header{
display:flex;
align-items:center;
gap:16px;
margin-bottom:24px;
}
.ikan-icon{
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#25D366,#128C7E);
font-size:30px;
color:#fff;
box-shadow:0 8px 20px rgba(37,211,102,.35);
flex-shrink:0;
}
.ikan-title{
margin:0;
font-size:clamp(30px,5vw,42px);
font-weight:700;
line-height:1.1;
background:linear-gradient(135deg,#25D366,#128C7E);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.ikan-line{
width:70px;
height:4px;
background:#25D366;
border-radius:10px;
margin-top:8px;
}
.ikan-body{
border-left:4px solid #25D366;
padding-left:22px;
}
.ikan-body p{
margin:0 0 18px;
font-size:clamp(14px,2vw,17px);
line-height:1.9;
color:#444;
text-align:justify;
}
.ikan-body p:last-child{
margin-bottom:0;
}
.ikan-body strong{
color:#128C7E;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@media(max-width:768px){
.ikan-card{
padding:24px;
}
.ikan-header{
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.ikan-icon{
width:54px;
height:54px;
font-size:26px;
}
.ikan-body{
padding-left:16px;
}
}
</style>
<div class="ikan-card">
<div class="ikan-header">
<div class="ikan-icon">💬</div>
<div>
<h2 class="ikan-title">Tanya Ikan Eksport</h2>
<div class="ikan-line"></div>
</div>
</div>
<div class="ikan-body">
<p>
Banyak di antara pengunjung website ini yang mengenal saya dari sejumlah konten <strong>Ikan Eksport</strong> yang tersebar di mesin pencari seperti Google maupun di media sosial. Bisa jadi, Anda juga berada di sini karena sedang mencari informasi mengenai bisnis ikan eksport.
</p>
<p>
Saya <strong>Iskandar Dorman</strong>, telah bekerja di perusahaan eksportir hasil laut sejak tahun <strong>2004</strong>. Saya siap berbagi informasi dan pengalaman tentang bisnis ikan eksport, baik secara teknis maupun administratif.
</p>
<p>
Saat ini saya masih terikat kontrak dengan salah satu perusahaan supplier dan eksportir ikan segar serta hasil laut di Makassar. Saya juga membantu administrasi dan bekerja di beberapa perusahaan serupa sebagai konsultan administrasi dan akuntan untuk perusahaan Frozen Fish maupun Live Fish.
</p>
<p>
Kalau ingin bertanya-tanya, silakan menghubungi saya melalui WhatsApp. Mohon maaf apabila saya lambat merespons. Anda juga dapat mengikuti instruksi dari Auto Reply (AI) yang akan membantu menjawab pertanyaan awal secara otomatis.
</p>
</div>
</div>
</div>
=================================================
TOMBOL WHATSAPP & BLOGSPOT
=================================================
<div style="max-width:950px;margin:auto;padding:20px;">
<style>
.ie-wrap{
display:flex;
gap:18px;
justify-content:center;
align-items:stretch;
flex-wrap:wrap;
font-family:Arial,Helvetica,sans-serif;
}
.ie-card{
position:relative;
flex:1 1 340px;
min-width:280px;
overflow:hidden;
border-radius:22px;
padding:22px;
text-decoration:none;
color:#fff;
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.22);
box-shadow:
0 15px 40px rgba(0,0,0,.14);
transition:.35s;
}
.ie-card:hover{
transform:
translateY(-8px);
box-shadow:
0 25px 55px rgba(0,0,0,.20);
}
.ie-card::before{
content:"";
position:absolute;
top:-120%;
left:-30%;
width:60%;
height:300%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.30),
transparent);
transform:rotate(25deg);
transition:1s;
}
.ie-card:hover::before{
left:150%;
}
.ie-wa{
background:
linear-gradient(
135deg,
#25D366,
#18C964,
#128C7E);
}
.ie-blog{
background:
linear-gradient(
135deg,
#ff9800,
#ff7a00,
#ef6c00);
}
.ie-top{
display:flex;
align-items:center;
gap:15px;
margin-bottom:18px;
}
.ie-icon{
width:58px;
height:58px;
border-radius:50%;
background:
rgba(255,255,255,.18);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:
0 0 18px rgba(255,255,255,.18);
}
.ie-icon svg{
width:28px;
height:28px;
fill:#fff;
}
.ie-title{
font-size:22px;
font-weight:bold;
line-height:1.2;
}
.ie-desc{
font-size:14px;
line-height:1.7;
opacity:.95;
margin-bottom:22px;
}
.ie-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 24px;
border-radius:50px;
background:
rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.25);
font-weight:bold;
font-size:14px;
backdrop-filter:blur(6px);
transition:.3s;
}
.ie-card:hover .ie-button{
background:#fff;
color:#222;
}
@media(max-width:768px){
.ie-wrap{
flex-direction:column;
}
.ie-card{
min-width:100%;
}
}
</style>
<div class="ie-wrap">
<a class="ie-card ie-wa"
href="https://whatsapp.com/channel/0029Vacs67K9cDDTkGogm421"
target="_blank">
<div class="ie-top">
<div class="ie-icon">
<svg viewBox="0 0 32 32">
<path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.5L3 29l6.7-1.7A13 13 0 1016 3z"/>
</svg>
</div>
<div class="ie-title">
Ikuti Saluran WhatsApp
</div>
</div>
<div class="ie-desc">
Dapatkan informasi terbaru, tips bisnis ikan eksport, serta update konten secara langsung melalui Channel WhatsApp.
</div>
<div class="ie-button">
Gabung Sekarang →
</div>
</a>
<a class="ie-card ie-blog"
href="https://ikaneksport.blogspot.com/p/faq.html"
target="_blank">
<div class="ie-top">
<div class="ie-icon">
<svg viewBox="0 0 24 24">
<path d="M5 2h8a7 7 0 010 14H9v6H5V2zm4 10h4a3 3 0 000-6H9v6z"/>
</svg>
</div>
<div class="ie-title">
Info Ikan Eksport
</div>
</div>
<div class="ie-desc">
Pelajari panduan, FAQ, artikel, serta berbagai informasi seputar dunia ikan eksport secara lengkap.
</div>
<div class="ie-button">
Baca Selengkapnya →
</div>
</a>
</div>
</div>
=================================================
EDIT HTML INI
=================================================
