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

10

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.

10 COMMENTS

  1. 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.

LEAVE A REPLY