WordPress Website Me Stylish Social Button Kaise Lagaye - Full Guide

Hello Bloggers, क्या आप जब किसी दूसरे के Blog पर Visit करते है तो आपको उस Blog की Social Profile Follow Button देख कर ऐसा लगा कि काश ऐसी ही Stylish Social Button मेरे Blog या Website में भी होती तो कितना अच्छा रहता, तो इस Post में मैं आपके लिये लेकर आया हूँ कुछ Stylish Social Button जो की मैंने खुद ही Create की है CSS और HTML का Use करके तो मैने सोचा क्यो न ये आपके साथ Share की करदूं जिससे आप भी Stylish Social Button का Use अपने Blog में कर सकें।

अगर आपने अपने Blog में अभी तक Social Profile Follow Button नही लगाया है तो मैं Suggest करूँगा कि आप इनका Use जरूर करें क्योकि इनकी वजह से आपके Social Media पर Follower Increase होते है आप Social Influencer बन जाते है और आपको उनसे Benefit भी बहुत मिलता है जैसे की आपके Blog पर Traffic Increase होता है और अगर आप कोई Affiliate Link Share कर देते है तो लोग उस Link का Use करके Product भी लेते है जिससे आपकी Income Increase होती है।

वैसे तो आप WordPress में Plugin का Use करके भी Social Button लगा सकते है पर वो Button ज्यादा Stylish नही होती है तो ऐसे में अगर आप चाहते है कि आप Stylish Social Button का Use करें तो आप ऐसा नही कर पाते है इसलिये आपको फिर Custom Button का Use करना होता है।

WordPress में Stylish Social Button कैसे लगायें?

आपको WordPress में Social Profile Button लगाना बहुत ही आसान है आप बस नीचे दिये गए Steps को Follow कीजिये आप Easily सब कर लेंगे और आपके Blog में Stylish Button भी लग जाएगी।

Step – 1

सबसे पहले आप Image में Button Style देखे जो भी आपको पसंद हो आप उसके नीचे दिए गए Code को आप Copy करले।

Step – 2

अपने WordPress Dashboard में जाकर Appearence > Widget में जाये और आपको जहाँ पर भी Follow Button लगाना है जैसेकी Sidebar, Footer में वहाँ पर आप एक New Widget Add करें Custom HTML का और उसमे वो Code Paste करदें।

Step – 3

Code को Paste करने से पहले आपको इस Code में अपनी Social Profile Link Add करनी होगी इसके लिये आप Code में देखे आपको # का Option मिल जाएगा तो इसे Clear करके अपनी Profile का Link Add करें।

Step – 4

Link Add करने के बाद आपको Code को Custom HTML Box में Paste करके Save कर देना है इसके बाद आपके Blog पर भी Stylish Social Button लग जायेगी।

Stylish Social Button – 1

[asg-content-box boxcolor=”grey” boxtitle=”” boldtitle=”false” boxexpand=”false” showcontent=”false”]<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css“>
<style>
.fa {
padding: 25px;
font-size: 30px;
width: 80px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}.fa:hover { opacity: 0.7;

}.fa-facebook {

background: #3B5998;
color: white;
}.fa-twitter {

background: #55ACEE;
color: white;
}.fa-google {

background: #dd4b39;
color: white;
}.fa-linkedin {

background: #007bb5;
color: white;
}.fa-youtube {

background: #bb0000;
color: white;
}.fa-instagram {

background: #125688;
color: white;
}.fa-pinterest {

background: #cb2027;
color: white;
}.fa-snapchat-ghost {

background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}.fa-skype {

background: #00aff0;
color: white;
}.fa-android {

background: #a4c639;
color: white;
}.fa-dribbble {

background: #ea4c89;
color: white;
}.fa-vimeo {

background: #45bbff;
color: white;
}.fa-tumblr {

background: #2c4762;
color: white;
}.fa-vine {

background: #00b489;
color: white;
}.fa-foursquare {

background: #45bbff;
color: white;
}.fa-stumbleupon {

background: #eb4924;
color: white;
}.fa-flickr {

background: #f40083;
color: white;
}.fa-yahoo {

background: #430297;
color: white;
}.fa-soundcloud {

background: #ff5500;
color: white;
}.fa-reddit {

background: #ff5700;
color: white;
}.fa-rss {

background: #ff6600;
color: white;
}
</style>
</head>
<body>

<h2>Follow Us On Social Media </h2>

<!– Blog4Help.com Social Button –>
<a href=”#” class=”fa fa-facebook”></a>
<a href=”#” class=”fa fa-twitter”></a>
<a href=”#” class=”fa fa-google”></a>
<a href=”#” class=”fa fa-linkedin”></a>
<a href=”#” class=”fa fa-youtube”></a>
<a href=”#” class=”fa fa-instagram”></a>
<a h[gist file=”” username=”blog4help”]ref=”#” class=”fa fa-pinterest”></a>
<a href=”#” class=”fa fa-stumbleupon”></a>
<a href=”#” class=”fa fa-reddit”></a>
<a href=”#” class=”fa fa-rss”></a></body>

</html>[/asg-content-box]

Stylish Social Button – 2

ये दूसरी Button का Demo देख ले अगर आपको चाहिये तो ये Code Use करें

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css“>
<style>
.fa {
padding: 25px;
font-size: 30px;
width: 80px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}

.fa-instagram {
background: #125688;
color: white;
}

.fa-pinterest {
background: #cb2027;
color: white;
}

.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
background: #00aff0;
color: white;
}

.fa-android {
background: #a4c639;
color: white;
}

.fa-dribbble {
background: #ea4c89;
color: white;
}

.fa-vimeo {
background: #45bbff;
color: white;
}

.fa-tumblr {
background: #2c4762;
color: white;
}

.fa-vine {
background: #00b489;
color: white;
}

.fa-foursquare {
background: #45bbff;
color: white;
}

.fa-stumbleupon {
background: #eb4924;
color: white;
}

.fa-flickr {
background: #f40083;
color: white;
}

.fa-yahoo {
background: #430297;
color: white;
}

.fa-soundcloud {
background: #ff5500;
color: white;
}

.fa-reddit {
background: #ff5700;
color: white;
}

.fa-rss {
background: #ff6600;
color: white;
}
</style>
</head>
<body>

<h2>Follow Us On Social Media</h2>

<!– Blog4Help.com Stylish Button –>
<a href=”#” class=”fa fa-facebook”></a>
<a href=”#” class=”fa fa-twitter”></a>
<a href=”#” class=”fa fa-google”></a>
<a href=”#” class=”fa fa-linkedin”></a>
<a href=”#” class=”fa fa-youtube”></a>
<a href=”#” class=”fa fa-instagram”></a>
<a href=”#” class=”fa fa-pinterest”></a>
<a href=”#” class=”fa fa-snapchat-ghost”></a>
<a href=”#” class=”fa fa-skype”></a>
<a href=”#” class=”fa fa-stumbleupon”></a>
<a href=”#” class=”fa fa-reddit”></a>
<a href=”#” class=”fa fa-rss”></a></body>
</html>

इस तरह से आप अपने Blog में भी Stylish Social Button लगा सकते है अगर आप इसमें कुछ Button और Add करना चाहते है तो आप उसी Code में अपनी New Button Add करें या फिर हमसे Contact करें।

तो Friends, I Hope की आपको अब अपने Blog में Stylish Social Button लगाने में कोई भी Problem नही होगी, अगर आपको कुछ पूछना है तो आप Comment में पूछ सकते है।

अगर आपको ये Post पसंद आयी तो इसे अपने दोस्तो के साथ Social Media पर Share करें और आप हमे Social Media पर Follow भी कर सकते है।

#Blog4Help #DilSeBlogging