Skip to main content

Blogger website me sabse niche about me Social media Ka Code

Blogger website mein sabse niche "About Me" aur social media icons display karne ke liye HTML aur CSS ka use karke ek custom code add kar sakte hain. Aapko ye code apne Blogger dashboard mein Layout section mein Add a Gadget ke option ke through HTML/JavaScript gadget mein paste karna hoga. Chaliye step-by-step dekhen:



Step 1: Blogger Layout mein HTML/JavaScript Gadget Add Karein

  1. Blogger dashboard mein login karke Layout par jayein.
  2. Footer section mein ya jahan aap display karna chahte hain wahan Add a Gadget par click karein.
  3. HTML/JavaScript gadget select karein.

Step 2: HTML aur CSS Code Add Karein

Niche diye gaye code ko HTML/JavaScript box mein paste kar ke "Save" button par click karein.

html
<!-- About Me & Social Media Section -->
<div class="about-social-section">
  <!-- About Me Section -->
  <div class="about-me">
    <h3>About Me</h3>
    <p>Hi! I'm [Your Name], a passionate blogger sharing insights on [Your Niche/Topics]. Follow me on social media for updates and more content!</p>
  </div>

  <!-- Social Media Icons -->
  <div class="social-icons">
    <a href="https://facebook.com/yourprofile" target="_blank">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" alt="Facebook" />
    </a>
    <a href="https://twitter.com/yourprofile" target="_blank">
      <img src="https://upload.wikimedia.org/wikipedia/en/6/60/Twitter_Logo_as_of_2021.svg" alt="Twitter" />
    </a>
    <a href="https://instagram.com/yourprofile" target="_blank">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" alt="Instagram" />
    </a>
    <a href="https://linkedin.com/in/yourprofile" target="_blank">
      <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/LinkedIn_Logo.svg" alt="LinkedIn" />
    </a>
  </div>
</div>

<!-- CSS Styling for About & Social Section -->
<style>
.about-social-section {
  text-align: center;
  padding: 20px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}

.about-me h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.about-me p {
  font-size: 16px;
  color: #666;
}

.social-icons a {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
}

.social-icons img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}
</style>

Code Explanation

  • About Me Section: About Me text aur personal details yahan enter kar sakte hain.
  • Social Media Icons: Different social media platforms ke links add karein (href ke andar apna link dalen) aur icons display karne ke liye logos ka URL diya gaya hai.
  • CSS Styling: Ye section stylish aur centered banane ke liye CSS styles use kiye hain. Icons ke hover effect ke liye bhi styling di gayi hai.

Step 3: Save and Preview

  1. Save karne ke baad, apni website ko preview karein taaki aap dekh saken ki section kaisa dikh raha hai.
  2. Agar zaroorat ho to color, font-size aur other CSS properties mein apne hisaab se changes kar sakte hain.

Is code ke zariye aap footer mein About Me aur social media icons asaani se show kar sakte hain.


Labels:

Comments

Post a Comment

Popular posts from this blog

Contents Writings Karna Sikhe

Content writing ek aise skill hai jo practice, research, aur creativity ke saath improve hoti hai. Agar aap content writing seekhna chahte hain aur usmein expert banna chahte hain, toh niche diye gaye steps aur tips ko follow karke aap apni writing skills develop kar sakte hain. Step 1: Research aur Topic Ko Samjhein Audience aur Purpose Samjhein : Sabse pehle yeh samajhna zaroori hai ki aap kis audience ke liye likh rahe hain aur aapka purpose kya hai. Agar aapko apne readers ki needs aur preferences pata hain, toh aap unhe engage karne waala content create kar sakte hain. In-depth Research Karein : Topic ke related authentic sources, articles, aur reports padhein taaki aapke paas topic ke baare mein knowledge ho. Aap apne content ko valuable aur accurate banane ke liye references bhi use kar sakte hain. Competitor Analysis : Competitor blogs aur articles ko dekhein taaki aapko pata chale ki market mein kya trend kar raha hai aur readers ko kis type ka content pasand aa raha hai. Step...
Post a Comment
Read more

Domain Ke Liye .com .in me Se kaun Sa best Hain.

Domain extension select karna aapki website ke target audience, branding, aur business goals par depend karta hai. .com aur .in dono hi popular domain extensions hain, lekin dono ka alag use aur advantage hota hai. Main yeh dono ko detail mein explain karta hoon taaki aap apne business ke liye best decision le sakey. 1. .com Domain Extension : .com ka full form hai "commercial" aur yeh globally sabse zyada use hone wali domain extension hai. Yeh general-purpose domain hai jo kisi specific country ko target nahi karta, isliye worldwide businesses aur websites ke liye kaafi suitable hai. Advantages of .com: Global Reach : .com ek universal domain extension hai, jo kisi ek specific country tak limited nahi hai. Agar aapka business ya website worldwide users ko target kar rahi hai, to .com best option ho sakta hai. Yeh international presence establish karne mein madad karta hai aur kisi ek region tak limited nahi rehta. High Trust and Credibility : .com extension pehle se ...
Post a Comment
Read more