ဓမ္မ နှင့် လောကီလမ်း

1/18/2026

Blog၏ About Page မှာ Social Link တွေကို Icon နဲ့ လှလှပပ ချိတ်နည်း






Social Icon Design Code ကို 

(About Page / Contact Page နှစ်ခုလုံးမှာ သုံးလို့ရအောင်)

👉 Copy–Paste အသင့် ရေးပေးထားပါတယ်။

✅ Step (၁) – Social Icon Design Code 

👉 About Page (HTML view) ထဲ

Social Icon section မှာရှိတဲ့ code ကို အစားထိုး လုပ်ပါ

Copy code Html


<style>

.social-box{

  text-align:center;

  margin-top:25px;

}

.social-box a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:48px;

  height:48px;

  margin:6px;

  border-radius:50%;

  font-size:22px;

  color:#fff;

  text-decoration:none;

  transition:0.3s;

}

.social-box a:hover{

  transform:scale(1.15);

  opacity:0.85;

}


/* Platform Colors */

.fb{background:#1877f2;}

.tg{background:#229ED9;}

.yt{background:#ff0000;}

.tt{background:#000000;}

.web{background:#f5c542;color:#000;}

</style>

✅ Step (၂) – Social Link HTML (TikTok ထည့်ပြီး)

Copy code Html


<div class="social-box">

  <a href="YOUR_FACEBOOK_LINK" class="fb" target="_blank" title="Facebook">

    📘

  </a>


  <a href="YOUR_TELEGRAM_LINK" class="tg" target="_blank" title="Telegram">

    ✈️

  </a>


  <a href="YOUR_YOUTUBE_LINK" class="yt" target="_blank" title="YouTube">

    ▶️

  </a>


  <a href="YOUR_TIKTOK_LINK" class="tt" target="_blank" title="TikTok">

    🎵

  </a>


  <a href="YOUR_WEBSITE_LINK" class="web" target="_blank" title="Website">

    🌐

  </a>

</div>

🔗 TikTok Link ပုံစံ

Copy code


https://www.tiktok.com/@username

❌ မသုံးရင် ဘယ်လိုဖျက်မလဲ?

ဥပမာ TikTok မသုံးချင်ရင် 👇

Copy code

Html

<a href="YOUR_TIKTOK_LINK" class="tt">🎵</a>

ဒီလို line တစ်ကြောင်းကို ဖျက်လိုက်ရုံပါပဲ 👍

No comments:

Post a Comment

Blog၏ About Page မှာ Social Link တွေကို Icon နဲ့ လှလှပပ ချိတ်နည်း

Social Icon Design Code ကို  (About Page / Contact Page နှစ်ခုလုံးမှာ သုံးလို့ရအောင်) 👉 Copy–Paste အသင့် ရေးပေးထားပါတယ်။ ✅ Step (၁) – Socia...