Berat Badan Ideal Pria Usia 40 Tahun Dengan Tinggi 165CM
Widget Halaman Facebook
Copy Seluruh HTML di bawah dan Tempel Menjadi 1 Blok Untuk Hasil Yang Sempurna, Ubah Hanya Tulisan Yang Berwarna Merah.
=======================================
PART 1
=======================================
<!--=========================================================
FACEBOOK PAGE WIDGET PREMIUM v2.0
PART 01
HTML STRUCTURE + CONFIGURATION
==========================================================-->
<div id="fb-widget">
<!-- ==========================================================
FACEBOOK CONFIGURATION
Ubah bagian ini saja
========================================================== -->
<!--
PAGE NAME
Nama Halaman Facebook
USERNAME
@username
PAGE URL
https://facebook.com/username
PROFILE PHOTO
https://....
COVER PHOTO
https://....
CATEGORY
Business Service
FOLLOWERS
25K
LIKES
23K
DESCRIPTION
Tulis deskripsi halaman.
BUTTON 1
Ikuti Halaman
BUTTON 2
Kunjungi Facebook
POST IMAGE 1
https://....
POST IMAGE 2
https://....
POST IMAGE 3
https://....
POST IMAGE 4
https://....
POST IMAGE 5
https://....
POST IMAGE 6
https://....
-->
<div class="fb-card">
<div class="fb-cover">
<img
src="https://via.placeholder.com/1200x500?text=Facebook+Cover"
alt="Cover">
</div>
<div class="fb-profile">
<div class="fb-avatar">
<img
src="https://via.placeholder.com/300?text=LOGO"
alt="Avatar">
</div>
<div class="fb-info">
<h2>
Nama Halaman Facebook
</h2>
<div class="fb-user">
@username
</div>
<div class="fb-category">
Business Service
</div>
<div class="fb-stats">
<div>
<strong>25K</strong>
<span>Followers</span>
</div>
<div>
<strong>23K</strong>
<span>Likes</span>
</div>
</div>
<p>
Tulis deskripsi singkat halaman Facebook Anda di sini. Jelaskan layanan atau informasi yang ingin diketahui pengunjung.
</p>
<div class="fb-buttons">
<a
class="fb-follow"
href="https://facebook.com/username"
target="_blank">
👍 Ikuti Halaman
</a>
<a
class="fb-visit"
href="https://facebook.com/username"
target="_blank">
📘 Kunjungi Facebook
</a>
</div>
</div>
</div>
<div class="fb-gallery">
<a href="#"><img src="https://via.placeholder.com/400" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/400" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/400" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/400" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/400" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/400" alt=""></a>
</div>
</div>
</div>
=======================================
PART 2
=======================================
<style>
/*====================================================
FACEBOOK PAGE WIDGET PREMIUM v2.0
PART 02 - PREMIUM CSS
====================================================*/
#fb-widget{
max-width:1050px;
margin:40px auto;
padding:20px;
font-family:Arial,Helvetica,sans-serif;
}
#fb-widget *{
box-sizing:border-box;
}
.fb-card{
background:rgba(255,255,255,.95);
backdrop-filter:blur(16px);
border-radius:30px;
overflow:hidden;
box-shadow:
0 20px 60px rgba(0,0,0,.12);
border:1px solid rgba(255,255,255,.45);
transition:.35s;
}
.fb-card:hover{
transform:translateY(-6px);
box-shadow:
0 30px 80px rgba(0,0,0,.16);
}
/*========================
COVER
========================*/
.fb-cover{
height:260px;
overflow:hidden;
position:relative;
background:
linear-gradient(
135deg,
#1877F2,
#0A5AD4,
#3B82F6);
}
.fb-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:1.2s;
}
.fb-card:hover .fb-cover img{
transform:scale(1.05);
}
/*========================
PROFILE
========================*/
.fb-profile{
display:flex;
gap:30px;
padding:0 35px 35px;
margin-top:-70px;
position:relative;
z-index:10;
}
.fb-avatar{
width:150px;
height:150px;
border-radius:50%;
padding:6px;
background:#fff;
box-shadow:
0 15px 40px rgba(0,0,0,.20);
flex-shrink:0;
}
.fb-avatar img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
display:block;
}
.fb-info{
flex:1;
padding-top:75px;
}
.fb-info h2{
font-size:34px;
margin:0;
color:#222;
font-weight:700;
}
.fb-user{
margin-top:8px;
font-size:17px;
color:#1877F2;
font-weight:bold;
}
.fb-category{
margin-top:8px;
font-size:14px;
color:#777;
}
/*========================
STATS
========================*/
.fb-stats{
display:flex;
gap:35px;
margin:24px 0;
flex-wrap:wrap;
}
.fb-stats div{
text-align:center;
}
.fb-stats strong{
display:block;
font-size:24px;
color:#1877F2;
}
.fb-stats span{
font-size:14px;
color:#777;
}
/*========================
DESCRIPTION
========================*/
.fb-info p{
font-size:15px;
line-height:1.8;
color:#444;
margin-bottom:25px;
}
/*========================
BUTTONS
========================*/
.fb-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}
.fb-buttons a{
text-decoration:none;
padding:14px 26px;
border-radius:999px;
font-weight:bold;
transition:.35s;
}
.fb-follow{
background:#1877F2;
color:#fff;
box-shadow:
0 10px 25px rgba(24,119,242,.30);
}
.fb-follow:hover{
background:#0D65D9;
transform:translateY(-3px);
}
.fb-visit{
background:#fff;
color:#1877F2;
border:2px solid #1877F2;
}
.fb-visit:hover{
background:#1877F2;
color:#fff;
}
/*========================
GALLERY
========================*/
.fb-gallery{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:12px;
padding:25px;
}
.fb-gallery a{
display:block;
overflow:hidden;
border-radius:18px;
}
.fb-gallery img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
display:block;
transition:.45s;
}
.fb-gallery img:hover{
transform:scale(1.08);
}
/*========================
MOBILE
========================*/
@media(max-width:768px){
.fb-profile{
flex-direction:column;
align-items:center;
text-align:center;
margin-top:-60px;
padding:0 22px 30px;
}
.fb-info{
padding-top:0;
}
.fb-info h2{
font-size:28px;
}
.fb-buttons{
justify-content:center;
}
.fb-gallery{
grid-template-columns:
repeat(2,1fr);
padding:18px;
}
}
@media(max-width:480px){
#fb-widget{
padding:10px;
}
.fb-cover{
height:180px;
}
.fb-avatar{
width:120px;
height:120px;
}
.fb-buttons a{
width:100%;
text-align:center;
}
.fb-gallery{
gap:8px;
}
}
</style>
=======================================
PART 3
=======================================
<style>
/*=====================================================
FACEBOOK PAGE WIDGET PREMIUM
PART 03
Premium Animation
======================================================*/
/*=============
Floating Avatar
==============*/
.fb-avatar{
position:relative;
animation:fbFloat 5s ease-in-out infinite;
}
@keyframes fbFloat{
0%,100%{
transform:translateY(0px);
}
50%{
transform:translateY(-8px);
}
}
/*=============
Blue Glow
==============*/
.fb-avatar::after{
content:"";
position:absolute;
left:-8px;
right:-8px;
top:-8px;
bottom:-8px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(24,119,242,.35),
transparent 70%);
z-index:-1;
filter:blur(12px);
animation:fbGlow 3.5s ease infinite;
}
@keyframes fbGlow{
0%,100%{
opacity:.45;
transform:scale(.95);
}
50%{
opacity:.9;
transform:scale(1.08);
}
}
/*=============
Verified Badge
==============*/
.fb-info h2::after{
content:"";
display:inline-block;
width:22px;
height:22px;
margin-left:10px;
vertical-align:middle;
background:
url("https://upload.wikimedia.org/wikipedia/commons/e/e4/Twitter_Verified_Badge.svg")
center/contain no-repeat;
}
/*=============
Premium Follow Button
==============*/
.fb-follow{
position:relative;
overflow:hidden;
}
.fb-follow::before{
content:"";
position:absolute;
top:-40%;
left:-140%;
width:60%;
height:220%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.75),
transparent);
transform:rotate(25deg);
transition:1.1s;
}
.fb-follow:hover::before{
left:180%;
}
/*=============
Hover Effect
==============*/
.fb-buttons a:hover{
transform:
translateY(-4px)
scale(1.03);
}
/*=============
Feed Overlay
==============*/
.fb-gallery a{
position:relative;
overflow:hidden;
}
.fb-gallery a::before{
content:"📘";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:
rgba(24,119,242,.55);
font-size:34px;
opacity:0;
transition:.35s;
z-index:2;
}
.fb-gallery a:hover::before{
opacity:1;
}
.fb-gallery img{
transition:
transform .45s,
filter .45s;
}
.fb-gallery a:hover img{
transform:scale(1.08);
filter:brightness(.85);
}
/*=============
Card Hover
==============*/
.fb-card{
transition:
transform .35s,
box-shadow .35s;
}
.fb-card:hover{
transform:
translateY(-8px);
box-shadow:
0 35px 80px rgba(0,0,0,.18);
}
/*=============
Stats Animation
==============*/
.fb-stats strong{
transition:.35s;
}
.fb-stat:hover strong{
color:#0d65d9;
}
/*=============
Responsive
==============*/
@media(max-width:768px){
.fb-avatar{
animation:none;
}
.fb-avatar::after{
display:none;
}
.fb-info h2::after{
width:18px;
height:18px;
}
}
</style>
=======================================
PART 4
=======================================
<style>
/*==================================================
FACEBOOK PAGE WIDGET PREMIUM v2.0
PART 04 - FINAL PREMIUM EFFECTS
==================================================*/
/* Aurora Cover Animation */
.fb-cover{
background:
linear-gradient(
-45deg,
#1877F2,
#0A5AD4,
#3B82F6,
#60A5FA);
background-size:300% 300%;
animation:fbAurora 10s ease infinite;
}
@keyframes fbAurora{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
/* Floating Cover Image */
.fb-cover img{
mix-blend-mode:screen;
opacity:.92;
}
/* Official Badge */
.fb-card::after{
content:"OFFICIAL PAGE";
position:absolute;
top:18px;
right:18px;
padding:8px 16px;
border-radius:999px;
background:rgba(255,255,255,.20);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.35);
font-size:11px;
font-weight:bold;
letter-spacing:1px;
color:#fff;
box-shadow:
0 8px 20px rgba(0,0,0,.15);
}
/* Better Buttons */
.fb-buttons a{
position:relative;
overflow:hidden;
}
.fb-buttons a::after{
content:"";
position:absolute;
top:-45%;
left:-150%;
width:70%;
height:220%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent);
transform:rotate(28deg);
transition:1.2s;
}
.fb-buttons a:hover::after{
left:180%;
}
/* Gallery Card */
.fb-gallery a{
background:#fff;
box-shadow:
0 8px 18px rgba(0,0,0,.08);
}
.fb-gallery a:hover{
box-shadow:
0 18px 40px rgba(24,119,242,.25);
}
/* Better Typography */
.fb-info h2{
letter-spacing:-.4px;
}
.fb-info p{
max-width:650px;
}
/* Soft Animation */
.fb-card{
animation:fadeUp .8s ease;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:none;
}
}
/* Responsive */
@media(max-width:768px){
.fb-card::after{
font-size:10px;
padding:6px 12px;
top:12px;
right:12px;
}
}
</style>
Widget Profile Instagram
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>
=================================================
Embed HTML Google Sites Ikan Eksport
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
=================================================
Widget Untuk Preview 3 Photo
COPY SELURUH HTML DI BAWAH, DAN UBAH HANYA BAGIAN YANG DI WARNAI MERAH
===========================================
<!DOCTYPE html>
<html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Google Sites Photo Preview Slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>
:root{
--title:"Pasukan Dorman";
}
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:transparent;padding:18px}
.wrap{max-width:430px;margin:auto}
.card{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:14px;box-shadow:0 20px 45px rgba(0,0,0,.16)}
h2{
text-align:center;
margin:4px 0 14px;
font-size:24px;
font-weight:700;
line-height:1.3;
background:linear-gradient(#39d98a,#0e8b58);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.frame{background:#fff;padding:8px;border-radius:18px;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.swiper{aspect-ratio:1/1;border-radius:14px;overflow:hidden}
.swiper img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.swiper-slide:hover img{transform:scale(1.08)}
.swiper-pagination{bottom:8px!important}
.swiper-pagination-bullet-active{background:#18a058!important}
.btn{display:block;text-align:center;margin-top:16px;padding:14px;border-radius:999px;text-decoration:none;color:#fff;font-weight:bold;background:linear-gradient(#39d98a,#0e8b58);position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.8),transparent);animation:shine 2.5s linear infinite}
@keyframes shine{to{left:170%}}
.reveal{opacity:0;transform:translateY(30px) scale(.98);transition:.8s}.reveal.show{opacity:1;transform:none}
</style></head><body>
<!-- EDIT BAGIAN INI SAJA
Judul: Moment Idul Fitri 2026
Link Artikel: https://aboutiskandar.blogspot.com/2026/03/moment-lebaran-idul-fitri-1447h-maret.html
LINK_GAMBAR_1
LINK_GAMBAR_2
LINK_GAMBAR_3
-->
<div class="wrap"><div class="card reveal"><h2>Pasukan Dorman (IG)</h2><div class="frame"><div class="swiper"><div class="swiper-wrapper">
<div class="swiper-slide"><a href="https://www.instagram.com/pasukandorman"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhThobNRFthSPRLmZqgIz9sTI75fsJY1lbrNfJweJSS7L0gXtzDSsO_LRpHsfaFwETcs42cxxPdTb0M5E7-ntv9OFPFH0eqPy4GiGbtg3EB1RbF09KnlMThPdWV6-6KbT2ugw1daTgJx_wjDaO9vGhMXXFRua62nqgFd6YRkwtH4jPfVRm1ad78uF0AEFk"></a></div>
<div class="swiper-slide"><a href="https://www.instagram.com/pasukandorman"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjsPKZEVDHSmkbmkOL0mrHWYkccfaTkJnUlXNhIyL-NRI3m-FB0pon3EXkXTcQe8tSNcvVvnt1ittGGHfzY9pbfohilkdIrMxbkCK61YmNVT_MzG3D9apqDqi0ZtdwrqLxB7f5F-Yzrkm_EQS6KFSgf2sgZH21AtgddyHrF0pw9a5fFeV712lZXEJlYLtA"></a></div>
<div class="swiper-slide"><a href="https://www.instagram.com/pasukandorman"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLuuc-SU2-VhDmLupgB8aU7nkkZ_L1lNA-bfGb8KZvaXta_bP_TTkiXHoeJGwaWT40voEZg81S1Xwla2gJFk3MSqrTA_bC6x0a6l-lbrYtg9hiwmTUDAuNkwn-hNsyuHYSB2Wdl4vatzc/s1600/1670683799674070-3.png"></a></div>
</div><div class="swiper-pagination"></div></div></div>
<a class="btn" href="https://www.instagram.com/pasukandorman" target="_blank">View More Photos</a>
</div></div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
new Swiper('.swiper',{loop:true,autoplay:{delay:2500,disableOnInteraction:false,pauseOnMouseEnter:true},pagination:{el:'.swiper-pagination',clickable:true}});
new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('show')}),{threshold:.2}).observe(document.querySelector('.reveal'));
</script></body></html>
===========================================
7 RACUN PIKIRAN YANG HARUS DIBUANG
Perut Begah Setelah Makan Tape Singkong dan Minum Airnya
Malaikat Menjenguk Ahli Masjid Yang Sakit
Fadhilah dan Tata Cara Shalat Tasbih
Cara Menjadi Staff Administrasi Yang Baik
Menjadi seorang staf administrasi yang baik—atau bahkan hebat—bukan sekadar tentang mengetik cepat atau merapikan berkas. Administrasi adalah jantung dari operasional sebuah bisnis atau organisasi. Ketika bagian administrasi berjalan lancar, seluruh tim bisa bekerja dengan efisien.
Berikut adalah beberapa keterampilan utama dan langkah praktis untuk menjadi pekerja administrasi yang andal dan profesional:
1. Kuasai Manajemen Waktu dan Skala Prioritas
Dunia administrasi penuh dengan interupsi dan tenggat waktu (deadline) yang datang bersamaan.
Gunakan Skala Prioritas: Bedakan tugas yang mendesak & penting dengan tugas yang bisa ditunda. Selesaikan tugas krusial di awal hari.
Buat To-Do List yang Terstruktur: Manfaatkan aplikasi seperti Google Tasks, Todoist, atau catatan fisik untuk melacak apa saja yang harus diselesaikan setiap harinya.
2. Tingkatkan Ketelitian (Attention to Detail)
Kesalahan kecil dalam administrasi—seperti salah ketik angka pada laporan keuangan, salah menulis tanggal kontrak, atau salah input data logistik—bisa berdampak besar bagi perusahaan.
Selalu Double-Check: Biasakan membaca ulang dokumen atau memeriksa kembali data numerik sebelum mengirim atau mencetaknya.
Konsistensi Format: Pastikan format penomoran surat, penggunaan mata uang, dan tata letak dokumen selalu rapi dan konsisten sesuai standar perusahaan.
3. Optimalkan Penggunaan Alat dan Teknologi digital
Pekerja administrasi modern tidak lagi hanya mengandalkan kertas. Anda harus fasih menggunakan teknologi untuk mempercepat pekerjaan.
Kuasai Formula Spreadsheet: Maksimalkan penggunaan rumus dasar hingga menengah di Google Sheets atau Microsoft Excel (seperti VLOOKUP, XLOOKUP,
SUMIF, atau pivot tables) untuk mengolah data keuangan dan operasional secara otomatis.Manfaatkan Cloud Storage: Atur folder kerja di Google Drive atau OneDrive secara rapi dan sistematis agar dokumen mudah dicari oleh Anda maupun tim lain.
4. Komunikasi yang Jelas dan Profesional
Bagian administrasi sering kali menjadi jembatan antar-divisi atau bahkan dengan pihak eksternal (klien, vendor, atau investor).
Komunikasi Tertulis: Tulis email atau surat bisnis dengan bahasa yang sopan, ringkas, dan langsung pada intinya (to the point).
Menjaga Kerahasiaan: Staf admin sering menangani data sensitif (gaji, data legal, atau dokumen rapi perusahaan). Menjaga kerahasiaan informasi ini adalah tanda profesionalisme tertinggi.
5. Proaktif dan Antisipatif
Pekerja administrasi yang dinilai "sangat baik" adalah mereka yang tidak hanya menunggu perintah, tetapi bisa membaca situasi.
Jika Anda melihat stok alat tulis kantor (ATK) atau logistik pendukung sudah menipis, segera lakukan pemesanan sebelum habis total.
Jika melihat alur pengarsipan yang ada saat ini kurang efektif, ajukan ide atau sistem baru yang lebih efisien kepada atasan.
Tip Tambahan: Cobalah untuk selalu mencatat prosedur kerja (SOP) kecil untuk diri sendiri. Jika suatu saat Anda harus mengambil cuti atau mendelegasikan tugas, orang lain dapat menggantikan posisi Anda sementara waktu tanpa membuat operasional kantor terganggu.
Apakah ada bidang administrasi spesifik yang sedang Anda jalani atau persiapkan saat ini (misalnya administrasi keuangan, logistik, atau umum)?
South Sulawesi atau South Celebes ?
Manakah Yang Lebih Cocok Untuk Mengatakan Sulawesi Selatan Dalam Bahasa Inggris, South Sulawesi, atau South Celebes ?
Untuk penggunaan modern dan formal, yang paling cocok dan benar adalah South Sulawesi.
Berikut adalah penjelasannya mengapa kedua istilah ini berbeda:
1. South Sulawesi (Sangat Direkomendasikan)
Ini adalah nama resmi yang digunakan secara internasional saat ini.
Penggunaan: Digunakan dalam dokumen pemerintahan, paspor, berita internasional, akademis, dan percakapan sehari-hari.
Alasan: "Sulawesi" adalah nama resmi pulau dan provinsi ini yang diakui oleh PBB dan dunia internasional sejak Indonesia merdeka.
2. South Celebes (Kuno / Arkais)
"Celebes" adalah nama Pulau Sulawesi yang diberikan oleh bangsa Portugis dan digunakan selama masa kolonial (Belanda).
Penggunaan: Hanya cocok digunakan dalam konteks sejarah, peta tua, atau buku-buku dokumenter tentang masa lampau.
Alasan: Jika Anda menggunakan South Celebes hari ini untuk urusan formal (seperti menulis alamat, surat bisnis, atau riset modern), penutur bahasa Inggris mungkin akan bingung atau menganggapnya sudah kedaluwarsa.
Kesimpulan:
Gunakan South Sulawesi untuk semua kebutuhan modern Anda. Gunakan South Celebes hanya jika Anda sedang membahas sejarah abad ke-19 atau sebelumnya.
10 Artikel Terpopuler di BLOG Nandar
-
Sedikit Ilmu Yang Bisa Saya Sharing Pada Postingan Kali ini adalah tentang kalimat yang sering menjadi akhir dari diskusi atau ilmu-ilmu isl...
-
Surat Perjanjian Jual Beli Kredit ataupun tunai merupakan Hal yang sangat penting untuk mengikat pihak pembeli dan pihak penjual sebagai buk...
-
Assalamu Alaikum.... Dalam Laman ini, Insya Allah Saya Akan bagikan Kumpulan Display Picture ( DP ) Atau Profile Picture ( PP ) Untuk Pengg...
-
Afwan, Terima kasih Sebelumnya Untuk Saudara Saya Yang Masukkan Saya Dalam Sebuah Grup Facebook " DEBAT TERBUKA SALAFI VS TABLIGH...
-
Teks Khutbah Jum'at ini saya buat atas permintaan teman saya yang ingin belajar khutbah, bilamana ada kesalahan dalam pengetikannya, Mo...
-
Semua kebijakan yang tercantum di bawah dapat berubah sewaktu-waktu, update terus laman ini untuk info terbaru. 🙏🏻🙏🏻🙏🏻 Hai Snack Frien...
-
LOGO AC MILAN LOGO ARSENAL LOGO LOGO CHELSEA LOGO INTERMILAN LOGO JUVENTUS ...
-
Hari 'kasih sayang' yang dirayakan oleh orang-orang Barat pada tahun-tahun terakhir disebut 'Valentine Day' amat popular d...
-
TikTok Cash Is Gone, Mohon Maaf, Postingan ini sudah di hapus karena program tiktok cash sudah berakhir, Pihak TikTok Cash telah berusaha un...
-
Jasmine | Pagi ini Sempat Di Bikin Shock Juga Dengan Kelakuan Seseorang Yang Tidak Bertanggung Jawab, Entah Dia manusia atau Bukan, Wa...





