Skip to main content

๐Ÿš€ Blogging Tips, SEO Guides & WordPress Tutorials

Welcome to BTK Thoughts, your ultimate hub for Blogger SEO, WordPress tutorials, and online earning strategies.

Learn how to:

  • ✔️ Rank your blog on Google
  • ✔️ Get high traffic (10K+ visitors)
  • ✔️ Fix Blogger & WordPress errors
  • ✔️ Earn money from blogging

๐Ÿ‘‰ Start here: How to Setup Free Domain in Blogger

Add Social Media Icons in WordPress Without Plugin (2026 Guide + Stylish Design)

Add Social Media Icons in WordPress Without Plugin (Stylish & Responsive)

Last Updated: 2026

add wordpress social media widget without plugin
Want to add social media icons in WordPress without using plugins? This guide will show you the easiest and fastest method.

Adding social icons improves user engagement and helps grow your audience across platforms.


๐Ÿ“Œ Step 1: Add Font Awesome CDN

Add this code inside your <head> section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

๐Ÿ‘‰ Get more icons from: https://fontawesome.com/icons


๐Ÿ“Œ Step 2: Add Social Icons HTML

Add this inside a Text/HTML widget:

<ul id="social-menu">

<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>

</ul>

๐Ÿ“Œ Step 3: Add CSS Styling (Modern Design)

#social-menu {
  list-style: none;
  padding: 0;
  text-align: center;
}

#social-menu li {
  display: inline-block;
  margin: 10px;
}

#social-menu li a {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  background: #f1f1f1;
  text-align: center;
  transition: 0.3s;
}

#social-menu li i {
  font-size: 18px;
  color: #333;
}

#social-menu li a:hover {
  background: #0073aa;
}

#social-menu li a:hover i {
  color: #fff;
}

๐Ÿš€ Advanced Options (EXTRA FEATURES)

✅ 1. Open Links Safely

target="_blank" rel="noopener noreferrer"

✅ 2. Add Tooltip

<a href="#" title="Follow us on Facebook">

✅ 3. Add Custom Colors

.fa-facebook { color:#1877f2; }
.fa-twitter { color:#1da1f2; }
.fa-youtube { color:#ff0000; }

✅ 4. Add Hover Animation

#social-menu li a:hover {
  transform: scale(1.2);
}

✅ 5. Add Fixed Floating Icons

#social-menu {
  position: fixed;
  left: 10px;
  top: 50%;
}

❗ Common Problems & Fix

❌ Icons not showing?

  • Check CDN added correctly
  • Clear cache

❌ Styling not working?

  • Check CSS placement

❓ FAQ

Q: Why not use plugin?

A: Plugins slow down your site. Manual method is faster.

Q: Is Font Awesome free?

A: Yes, most icons are free.

Q: Can I customize icons?

A: Yes, using CSS and classes.


๐Ÿง  Conclusion

Adding social media icons without plugin makes your WordPress site faster, cleaner, and more customizable.

Use the above method to create modern and professional social widgets easily.


๐Ÿ”ฅ EXTRA SEO BOOST

Comments

G. S. Brar said…
you are doing good work. Please friend subscribe my blog. I will also share your posts. jo be friend mera blog subscribe krege mei uske blog ko promote kraga.
plz visit -
https://www.guru-nanak-ji.com
Stevennall said…
Thank you for taking the time to write such an informative post. Your blog is not only informative, but it is also very creative.
Social media management

Popular posts from this blog

How to Setup Free .tk Domain on Blogger (Freenom DNS Guide 2026)

Last Updated: 2026 Table of Contents Step 1: Blogger Settings Step 2: Add Domain Step 3: DNS Setup How to Setup Free .tk Domain on Blogger (Step-by-Step Guide) Do you want to setup a free .tk (Freenom) domain on Blogger? This guide will help you connect a free domain to Blogger easily. Note: If you don’t have a domain yet, read this guide first: How to Get Free Domain Name Follow these steps to connect your free domain: Step 1: Open Blogger Settings Go to Dashboard → Settings → Basic Step 2: Add Custom Domain Click Set up a third-party URL for your blog under Publishing. Step 3: Login to Freenom Go to Services → My Domains and select your domain.

Complete WooCommerce Shortcodes List (2026) – Cart, Products, Checkout & More

Complete WooCommerce Shortcodes List (With Examples) Last Updated: 2026 Looking for a complete WooCommerce shortcodes list for WordPress? You’re in the right place. WooCommerce shortcodes allow you to add powerful eCommerce features like product listings, cart, checkout, and filters without writing complex code. ๐Ÿ“Œ What Are WooCommerce Shortcodes? Shortcodes are small pieces of code that let you display dynamic content inside posts, pages, widgets, or sidebars. With WooCommerce, you can easily display products, categories, cart, and more using simple shortcodes. ๐Ÿ›’ 1. WooCommerce Page Shortcodes Use these to display default WooCommerce pages: [woocommerce_cart] → Display Cart Page [woocommerce_checkout] → Display Checkout Page [woocommerce_order_tracking] → Order Tracking Page [woocommerce_my_account] → My Account Page ๐Ÿ›️ 2. Product Display Shortcodes a. Display Products by ID [products ids="1,2,3,4"] Displays selected products by I...

Fix “Briefly Unavailable for Scheduled Maintenance” Error in WordPress (2026 Guide)

Fix “Briefly Unavailable for Scheduled Maintenance” Error in WordPress Last Updated: 2026 Are you seeing the error “Briefly unavailable for scheduled maintenance. Check back in a minute.” on your WordPress website? Don’t worry — this is a very common WordPress error that usually happens after updating a plugin, theme, or WordPress core. In this guide, you’ll learn what causes this error and how to fix it step-by-step . ๐Ÿ“Œ What is This Error? When WordPress updates plugins or themes, it temporarily puts your site into maintenance mode . During this process, WordPress creates a file called .maintenance in your root directory. If the update fails or gets interrupted, this file is not removed — causing your website to get stuck in maintenance mode. ⚠️ Common Causes Plugin or theme update failed Slow internet during update Server timeout Updating multiple plugins at once ๐Ÿ› ️ How to Fix “Briefly Unavailable” Error Step 1: Open File Manager ...