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>
0 comments:
Post a Comment