WordPress Ya Blogger Par Responsive Social Media Follow Buttons (Widget) Kaise Add Kare

Social media follow buttons ya widget humare blog ke liye kitne important hote hai yeh toh aap sabko pta hi hai. Blog ki kisi bhi post ko social media site par share karne me yeh sabse best solution hai. Jisse na sirf hume balki visitors ko bhi contents share karne me asaani hoti hai. Jisse others users bhi site par visit karna pasand karte hai.

WordPress ya blogger blog me responsive social media follow buttons ya widget ke use karne ka sabse bada fyada yeh hota hai ke hum apne posts ko facebook, twitter etc. social par jyada se jyada logo tak easily pahucha sakte hai.

Responsive Social Media Follow Buttons Widget

Blogger Blogspot ya WordPress blog par responsive social media follow buttons ya widget kaise lagate (add karte) hai, ke bare me Hindi me jankari dene ja raha hu. Toh chaliye start karte hai.

Responsive Social Media Follow Buttons Widget Design And HTML CSS Coding

social media follow widget logo

<style> .widget_social_apps { margin-left : -1%; margin-right : -1%; } .widget_social_apps:after { clear : both; } .widget_social_apps .app_social { margin : 1% 0.5%; width : 49%; height : 50px; float : left; text-align : center; background-color : #111; transition : all 0.2s; border-radius: 5px; } .widget_social_apps .app_social.facebook { background-color : #3e64ad; } .widget_social_apps .app_social.twitter { background-color : #58ccff; } .widget_social_apps .app_social.pinterest { background-color : #de010d; } .widget_social_apps .app_social.instagram { background-color : #125688; } .widget_social_apps .app_social.google { background-color : #dd4b39; } .widget_social_apps .app_social.linkedin { background-color : #007bb6; } .widget_social_apps .app_social.flickr { background-color : #ff0084; } .widget_social_apps .app_social.youtube { background-color : #ef4e41; } .widget_social_apps .app_social.rss { background-color : #ea8914; } .widget_social_apps .app_social.tumblr { background-color : #38466a; } .widget_social_apps .app_social:hover { background-color : #777; } .widget_social_apps .app_social a { display : block; color : #fff; padding : 15px 5px; } .widget_social_apps .app_social span { display : block; } .widget_social_apps .app_social span.app_icon i { font-size : 15px; margin-bottom : 10px; } </style> <div class=”widget_social_apps”> <div class=”app_social facebook”> <a href=”#” target=”_blank” title=”Follow on facebook”> <span class=”app_icon”><i class=”fa fa-facebook”></i> 1545 Likes</span></a></div> <div class=”app_social twitter”> <a href=”#” target=”_blank” title=”Follow on twitter”> <span class=”app_icon”><i class=”fa fa-twitter”></i> 24 Followers</span></a></div> <div class=”app_social pinterest”> <a href=”#” target=”_blank” title=”Follow on pinterest”> <span class=”app_icon”><i class=”fa fa-pinterest”> 84 Followers</i></span></a></div> <div class=”app_social instagram”> <a href=”#?hl=en” target=”_blank” title=”Follow on instagram”> <span class=”app_icon”><i class=”fa fa-instagram”></i> 857 Followers</span></a></div> <div class=”app_social google”> <a href=”#” target=”_blank” title=”Follow on google+”> <span class=”app_icon”><i class=”fa fa-google-plus”></i> 10 Followers</span></a></div> <div class=”app_social linkedin”> <a href=”#” target=”_blank” title=”Follow on linkedin”> <span class=”app_icon”><i class=”fa fa-linkedin”> 71 Followers</i></span></a></div> <div class=”app_social flickr”> <a href=”#” target=”_blank” title=”Follow on flicker”> <span class=”app_icon”><i class=”fa fa-flickr”></i> 12 Followers</span></a></div> <div class=”app_social youtube”> <a href=”#” target=”_blank” title=”Subscribe on youtube”> <span class=”app_icon”><i class=”fa fa-youtube”></i> 100 Subscribers</span></a></div> <div class=”app_social rss”> <a href=”#” target=”_blank” title=”Subscribe blog feed”> <span class=”app_icon”><i class=”fa fa-rss”></i> 432 Subscribers</span></a></div> <div class=”app_social tumblr”> <a href=”#” target=”_blank” title=”Follow on tumblr”> <span class=”app_icon”><i class=”fa fa-tumblr”></i> 12 Followers</span></a></div> </div>

How To Add Responsive Social Media Follow Buttons Ya Widget To WordPress Or Blogger Blog?

Blogger

Step:-1 Sabse pehle apne Blogger dashboard me jaaye.

blogger layout

widget

Step:-2 Layout par click kare fir add a widget select kare.

widget html css

Step:-3 Widgets list me se HTML/CSS par click kare.

Step:-4 Ab new window open hoga yaha aapkk upar likha html css code paste karna hai.

html css coding widget

Step:-5 Coding paste karne ke baad save button par click kare.

Ab aap apne blogger blog par visit karke chek kar sakte ho ke responsive social media follow buttons sidebar me show ho rahe hai.

WordPress

Step:-1 Sabse pehle account details se login karke WordPress dashboard me jaye.

wordpress widget

Step:-2 Appearance par click kare aur waha widgets option select kare.

wordpress text widget

Step:-3 New window open hogi yaha aapko text box ko select karna hai.

Step:-4 Ab aapko text box me two option milege.

1) Title:- Yaha aapko widget ka title rakhna hai.

2) Content:- Isme aapko responsive social media follow buttons ki html css coding paste karni hai, jo mene alredy upar likhi huyi hai.

widget setup

Yeh sab settings karne ke baad save button par click karke widget ko add karde.

Ab aapka kaam ho chuka hai aur apne WordPress blog par visit karke dekh sakte ho ke aapki website me responsive social media follow buttons add ho chuke hai.

Agar aapko is post se related koi problem aati hai toh aap comment box me mujhe bata sakte hai. Aapki puri help ki jayegi.

14 Comments
  1. Shashikant kumar says

    Brother maine apka diya hua cord apne HTML me paste kiya to mere bolg me same apke blog ki tarah like aur following so krne lga
    Mujhe apne blog ki like following so krne ke liye kya krna hoga
    Cord me koi change krni hogi
    Plz help me

    1. Harpreet Kumar says

      Aapko coding me links and content ko apne hisab se likhna hoga. Aap coding me links and words ko find karke change kar sakte ho.

  2. Deep kaksiya says

    Bhai aapne ye copy kaha le liya hai site ka naam bataye

    1. Harpreet Kumar says

      Google par research karke html css se banaya hai bhai

  3. Naresh detruja says

    Thanks bro bhot hi accha Jankari share kiya hai aapne mai
    Kafi Dino se ye follow button dhudh raha tha

  4. Rishikesh Mishra says

    Bro.. mane hosgator se hosting le aur godaddy se domain nameserver bhi add kiya but abhi Dashboard aur na hi Website nahi open ho rahi hai http://www.techtohindi.com check kare thanks

    1. Harpreet Kumar says

      Bro aap hostgator customer care se baat kare. Wahi aapko sahi solution bta sakte hai

  5. Rishikesh Mishra says

    Bro.. kal maine hosting liya hosgator se aur domain godaddy se name sever bhi add kiya sbhi 20 hours ho gaya woh admin panel open nahi ho raha techtohindi.com

  6. Dev Rathore says

    Bro, ye code check karna. Meri theme me bhi set nahi ho raha hai. Only text aa raha hai. Please aap code check kare kya ye sahi hai.

    1. Harpreet Kumar says

      Bhai code update kar diya hai. Ab aap try kar sakte ho.

  7. Dev Rathore says

    Nice info. Bro. But mere 2 question hai.
    (1) sabse pahle to mujhe ye bataye ki isme apne social link ko add karne ke baad save karna hoga ya nahi.
    (2) homepage par jo category aur recent post widget hai unme me border lagana chahta hu lekin mujhe css code nahi mila. Can you provide me. Aapko agar pata hai to please mujhe send kare.

    1. Harpreet Kumar says

      1) save karna hai
      2) blog par kisi bhi tarah ki customization katne ke liye coding seekhna jaruri hai. Aap basic seekh kar essily html css settings kar sakte ho.

  8. Haidar @OHG says

    Thanks bro but merit theme me fit nhi ho raha hai don’t know why?

    1. Harpreet Kumar says

      Bro its updated, chek it now 🙂

Leave A Reply

Your email address will not be published.