CSS I will also leave the link of the source code in the description of this video now in this video we're going to add this to a blogger website so let's get.
started all right here I have logged into my.
Blogger dashboard and uh let's click on view blog and this is how our blog looks right now now we're going to add this design to the end of the posts so here after this comment here we just add this.
Uh social media buttons so let's do that so let's go back to our dashboard and I'm using this theme called Contempo light which comes by default with blogger now here you have to go to.
Popular post widget so it is displayed over here so we need to add our design just after this blog post widget so let's go ahead and add a new Gadget so we can click on add a gadget and let's.
Select html/javascript and here you have to add the code so let's add the CSS inside a style tag so I'll just create a style tag and let's.
Go back to our source code and uh let's copy the CSS from here and let's paste it inside this style tag now let's go ahead and paste the HTML so let's go back to the HTML file and let's copy.
This HTML from here so this whole social buttons container division so let's copy this and let's paste it over here now here we can see we have each of the social media buttons so you can change.
These to what you want so the first one is set to Instagram you can change this to anything you want and then you can go ahead and add the handle over here so you can do the same with all these three.
Posts Related:
- Social Media Banners Templates For Photoshop Sheri Sk Banner Templates
- How To Create Your Own Drag & Drop Document Workflow Manager In Excel Free Download
- Sistema de Painéis de EstatÃsticas Financeiras Gráfico de mapa dinâmico do Excel Tutorial 2 Office
Social media buttons now you can also - ID Card Make
Add new buttons over here by just copying and pasting this anchor tag now here for these icons we are using font awesome so we need to copy this link as.Well so let's copy this and let's paste it over here just before the style tag right now let's go ahead and save this and uh now we need to add this.
Gadget down here so let's drag it over here and I'll just zoom out a little bit and uh let's drag it down here so we need to add it just after the block post widget so here we can see we have added.
It just after the blog post Gadget and now let's go ahead and click on on Save and here we can see that the changes have been saved so let's go back over here and let's reload this page and.
Here we can see that our social media buttons are being displayed and if I hold over these we get the animation working but the color of the text is not correct so let's right click over here.
And go to inspect and let's click on this anchor tag and uh here we have already added this color right here in the CSS but let's go ahead and click on Hover and let's activate hover and now.
If you go ahead and take a look at this anchor tag here we can see that our color is not set but it is setting the color to the color of the theme so for that we.
Need to change this to exclamation important now this will override the CSS of the theme so now we can see we have the correct color so let's go ahead and do that.
Let's go back to the layout and let's click on this edit button and let's go over here to style and here for the color let's add exclamation important and let's save.
It and let's go back to our website and
Reload and now we can see we have the correct colors now the next thing we will do is we will add a white background color to this so that it.Blends with the previous section so let's right click over here and go to inspect and uh let's select the container Division and right now we can see that there is some margin so if you.
Scroll down here we can see that we have this margin of 30 so we need to go ahead and remove the margin and then we need to add a background color so let's tab background and let's set the color to.
White and now we can see that we have some gap between this section and this section so if you hold over the block section we can see that it has some margin so if you scroll down here if you.
Take a look at this we can see that it has a margin bottom of 16 pixels so what we can do is we can go over here to our social buttons container Division and we can add a negative margin so let's type.
Margin top and let's set it to6 pixels and now we can see we don't have any Gap now let's go ahead and add some padding so that these elements do not stick to the edges so let's add a padding of 24.
Pixels or maybe we can increase it a little bit so let's try 40 pixels I think that looks all right so let's go ahead and add these three lines of CSS to social.
Buttons container so let's copy these and uh let's go over here to edit and here for social buttons container let's remove the margin and let's add the.
CSS right now let's go ahead and click on Save and let's let's go back to our website and reload and now we can see everything is working all right now here.
You can go ahead and add the links of your pages so here instead of this hash you can add the links of your social media pages and when someone clicks on these uh buttons they'll be taken to.
That page now you can also add conditions to this widget so for example if you don't want to display it inside the homepage so if you scroll down here we can see that these buttons are.
Displayed in the homepage as well now for example if you don't want to display it in the homepage then you can go ahead and go over here to theme and then click on this arrow and click on edit HTML and.
Here you have to add a condition to the widget now before making any changes inside the theme code you can just go ahead and copy everything from here and paste it somewhere so that you have a.
Backup now let's go over here to the HTML widget now we know that our widget is after the blog widget so if I go over here to blog and if I just fold this here we can.
See we we have the HTML widget now here you can add the condition so let's tap C or n d and uh here let's check whether it is not the homepage so you can just type Note data column vi. e homepage now.
This widget will be displayed only if it is not the homepage so let's click on Save and let's go back to our website and reload now we can see inside the homepage we don't have the buttons.
Displayed but if you go to any of these posts and if you scroll on here we have the buttons displayed so that's basically how you can add these animated social media buttons to your blogger.
Website all right so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this.
Channel to get the latest video updates thanks a lot for watching have a nice day .
