A website’s footer credit section contains information about copyright, Designer’s website URL, information about different informative page...
A website’s footer credit section contains information about copyright, Designer’s website URL, information about different informative page links etc. But most of us ignore this section, because we think that this part is useless. But to give a professional look to your site you must craft your site top to bottom professionally. Many web designer design site’s footer credit section different way. Some are gives emphasize on design and some are leave it with simple or without design. We see many popular website those who are using a text in footer section that said –
- Crafted With Love + A Heart image
This is a message towards site visitors, nothing else. Some of them are showing heat with pulse effect. This is really cool staff and makes our web site’s footer section eye-catching. In this tutorial I will show you the way that how easily we can add this effect on a heart icon and add it in our Blogger template footer section. So hang tight and go ahead with me.
First we need to create a heart icon. Now using image is pointless because it can affect loading time. Instead of image we will use Font Awesome icon for heart creating heart shape. So let’s proceed to the step guide below.
If your template already containing Font Awesome file then please just skip this step. But if you want to add latest Font Awesome version then you can go through this steps.
Step #1: Go to “https://www.blogger.com” and Sign in to your account
Step #2: From “Blogger Dashboard” click on ->Template ->Edit HTML
Step #3: And locate the <head> section in your Blogger template
Step #4: Finally copy following line of markup and paste it below <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Step #5: Now scroll down and locate you blogger footer text where maybe written “All rights reserved 2016” or something else. And add below code for after text. You can change the “#FF0000” code for altering the heart color.
<i class='fa fa-heart fa-lg' style='color:#FF0000'/></i>
Step #6: After that hit the “Save template” button.
The above steps will help you to add latest Font Awesome core file into your Blog, and a heart icon into your site’s footer section. You can check your website now to see the heart icon.
How to add pulse effect on Heart Icon with CSS3 Animation?
Now we need to do small code for adding pulse effect on the heart icon that we have displayed by using Font Awesome icon code. Please go through the below steps guide-
Step #1: Go to “https://www.blogger.com” and Sign in to your account
Step #2: From “Blogger Dashboard” click on ->Template ->Edit HTML
Step #3: Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
<i class='fa fa-heart fa-lg' style='color:#FF0000'/> </i>
Step #4: Paste the below code Before/above ]]></b:skin>
.pulse{-webkit-animation:pulse .8s linear infinite;-moz-animation:pulse .8s linear infinite;-ms-animation:pulse .8s linear infinite;animation:pulse .8s linear infinite}@keyframes "pulse"{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(0.8);transform:scale(0.8)}100%{-moz-transform:scale(1);transform:scale(1)}}@-webkit-keyframes "pulse"{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-ms-keyframes "pulse"{0%{-ms-transform:scale(1);transform:scale(1)}50%{-ms-transform:scale(0.8);transform:scale(0.8)}100%{-ms-transform:scale(1);transform:scale(1)}}
Step #5: Now locate the pulse icon code from your Blogger footer section
Step #6: And replace the above code by below code. In below code I just added “pulse”text to integrate the CSS effect with heart icon.
<i class='pulse fa fa-heart fa-lg' style='color:#FF0000'/></i>
#Alternatively you can add some text if you wish to add with it like below. Please replace Blogger Spice with your Blog name.
All Rights Reserved © 2016. Crafted With Love <i class="pulse fa fa-heart fa-lg" style="color: #FF0000;"> </i> By <a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null"> <span itemprop="name">Blogger Spice</span></a>
Step #7: And click "Save template” button from the top.
All done! Now visit your Blog or website and see footer section. I am sure that your heart icon has got pulse effect. This is looking just like heart beat. Your site visitors obviously love to see this effect on footer credit section.
 |
| Add Pulse effect on Font Awesome Heart Icon with CSS3 Animation? |
What steps you have taken to make your website footer credit section attractive?
.jpg)
No comments:
Post a Comment