Thursday, 21 September 2017

How to apply the Beautiful Social Media Follow Button in your blog?


Hi dude, In this post we bring you the Beautiful Social Media Follow Button which you can add to your blog very simply. If you have not added any awesome social media widget to your website or blog yet, then you no longer need to take a tension.
Because in this tutorial, we will tell you how to add Beautiful Social Media Follow Button to your blog. These are the same follow buttons that we are using in this blog's sidebar and I have added it in the image below so that you know what kind of design this show will show on your blog. The best thing about it is whether your blog is made on Blogger or works for all platforms on WordPress, as well as mobile responsive.

For some time, some bloggers were talking about sharing the code of this Beautiful Social Media Follow Button, but I had said to wait at that time. Because in this it wanted to share it in its post, so that all should be helped once in a while because sharing individually was a bit of fun work.

How to add beautiful Social Media Follow Button?
As we all know that any strange thing seems sweet to our eyes, there is a different effect. Similarly, if there are good looking custom social media buttons on our blog or website then visitors have a different impression. And if there are any follow widgets created with so many good social networking sites icons then what to say. If you want you can see in the sidebar of this blog, you will definitely like it.

Add widget to any site is very important so that any visitor can easily connect you with like, follow or subscribe on social media. And your followers also get increasingly easily, so that your social media traffic is also improved.

Read more

So let's first tell you how to add Beautiful Social Media Follow Button to the sidebar of your Blogger website.

Blogspot Blog me Beautiful Social Media Follow Buttons How to Add?
If you want to add these follow buttons to your Blogger blog then follow the steps given below -

Step - 1


  1. First log in to your Blogger account.
  2. Now click on Template and click on Edit html.
  3. Now press CTRL + F and </ head> search and paste the code below right above it
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />


Step - 2


  1. Click on Layout.
  2. Now click on Add a Gadget.
  3. Now a box will open in front of you on HTML / JavaScript.
Step - 3

  1. Write "Follow Us" in the Title field or write what you want to write.
  2. Now paste the social media follow buttons html and CSS code below in the content field.<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 : 45px; float : left; text-align : center;
    background-color : #000; transition : all 0.2s; border-radius: 5px; }
    .widget_social_apps .app_social.facebook { background-color : #4267b2; }
    .widget_social_apps .app_social.twitter { background-color : #1DA1F2; }
    .widget_social_apps .app_social.pinterest { background-color : #C92228; }
    .widget_social_apps .app_social.instagram { background-color : #af2d9e; }
    .widget_social_apps .app_social.google { background-color : #e24d3b; }
    .widget_social_apps .app_social.linkedin { background-color : #0d6a96; }
    .widget_social_apps .app_social.flickr { background-color : #ea097d; }
    .widget_social_apps .app_social.youtube { background-color : #b5170a; }
    .widget_social_apps .app_social.rss { background-color : #e07706; }
    .widget_social_apps .app_social.tumblr { background-color : #5c6682; }
    .widget_social_apps .app_social:hover { background-color : #cacaca; }
    .widget_social_apps .app_social a { display : block; color : #ffffff; padding : 15px 5px; }
    .widget_social_apps .app_social span { display : block; }
    .widget_social_apps .app_social span.app_icon i { font-size : 12px; margin-bottom : 10px; }
    </style>
    <div class="widget_social_apps">
    <div class="app_social facebook"> <a href="https://www.facebook.com/blogminto" target="_blank" title="Follow on facebook"> <i class="fa fa-facebook" aria-hidden="true"></i> 1250 Likes</span></a></div> 
    <div class="app_social twitter"> <a href="https://twitter.com/blogminto" target="_blank" title="Follow on twitter"> <i class="fa fa-twitter"></i> 12 Followers</span></a></div> 
    <div class="app_social pinterest"> <a href="https://in.pinterest.com/blogminto/" target="_blank" title="Follow on pinterest"> <i class="fa fa-pinterest"> 13 Followers</i></span></a></div> 
    <div class="app_social instagram"> <a href="https://www.instagram.com/blogminto/?hl=en" target="_blank" title="Follow on instagram"> <i class="fa fa-instagram"></i> 345 Followers</span></a></div> 
    <div class="app_social google"> <a href="https://plus.google.com/b/109047349319670258604" target="_blank" title="Follow on google+"> <i class="fa fa-google-plus"></i> 10 Followers</span></a></div> 
    <div class="app_social linkedin"> <a href="https://www.linkedin.com/company/blogminto" target="_blank" title="Follow on linkedin"> <i class="fa fa-linkedin"> 43 Followers</i></span></a></div> 
    <div class="app_social flickr"> <a href="#" target="_blank" title="Follow on flicker"> <i class="fa fa-flickr"></i> 0 Followers</span></a></div> 
    <div class="app_social youtube"> <a href="http://www.youtube.com/c/blogminto" target="_blank" title="Subscribe on youtube"> <i class="fa fa-youtube"></i> 13 Subscribers</span></a></div> 
    <div class="app_social rss"> <a href="http://feeds.feedburner.com/blogminto" target="_blank" title="Subscribe blog feed"> <i class="fa fa-rss"></i> 974 Subscribers</span></a></div> 
    <div class="app_social tumblr"> <a href="http://blogminto.tumblr.com/" target="_blank" title="Follow on tumblr"> <i class="fa fa-tumblr"></i> 10 Followers</span></a></div> </div>
  3. Now click on Save.

  • Now save the widget by clicking on the Save option.


Customization Note: - Do not forget to replace the URLs of your social media profile with the URL of our social media profile, and counting your followers and editing them.

Read more

Congratulation ! Now you will be able to show in the Beautiful Social Media Follow Button sidebar in your Blogger blog, you can check to confirm. And now we are going to tell you how to add these follow widgets to WordPress blog.

How to put Beautiful Social Media Follow Buttons on WordPress?
If you want to add these follow buttons in the sidebar of your WordPress blog, then follow the steps given below -

Step - 1

First of all enter your WordPress Dashboard.

  1. Go to Appearance and click on Editor
  2. Now click on Header.php file and open it.
  3. Now press CTRL + F and paste the code below just before </ head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Step - 2

  1. Now go to Appearance
  2. Click on Widgets.

Step - 3

  1. Now the list of Widgets will be opened in front of you, by clicking on Text.
  2. Now click on Add Widget.
Step - 4

  1. Now type "follow me" in the title field or write something on your own.
  2. In the field of content, paste the social media follow buttons html and CSS code above.
  3. Now click on the Save button.

Customization: - Make sure you replace your social media profile with the URL of our social media profile, and counting your followers and editing them.

Now the Beautiful Social Media Follow Buttons has been added in the sidebar bar of your WordPress blog, which you can check by opening your blog.

Read more

Hopefully you will also have to add Beautiful Social Media Follow Button to your blog, if any problem is coming then you can ask by commenting. If you like this post with the Beautiful Social Media Follow Button, then share it with your friends on social media. Thanks

No comments:

Post a Comment