Give your logo special occasions theme like Valentines, Halloween
Spice up your website logo for any occasions, Seasons and holidays! Logo themes are an excellent way to add a refreshing and fun feeling to your brand or logo, and they can attract more visitors into your site.
There are several special occasions and holidays we celebrate over the year. Some significant Seasons like Winter, Spring, Fall, Summer and special occasions like Valentines, Halloween, Christmas, New Year, Thanks giving, ST.Patrick's, or your company's anniversary.
As a Website owner you may want to give an occasional theme thus your site visitors can feel the taste of festival. The best way to add occasions or holiday theme is in your website logo. There are many large website they redesign the logo for the occasion purpose and after temporary use of those logos they start using the main logo. But it cost them a lot. This is not possible for small blog to spend extra amount for temporary use.
This is probably the most trending feature on every Blogger and WordPress blog right now. There is no doubt that these types of occasional logo attract more visitors to our site but we can tweak our logo. Even you don’t have to spend a single penny.
Yes! You can give your website logo a Valentines, Halloween, Christmas etc. themed look by using simple CSS script.
You can add a little heart for valentines, scary look pumpkin for Halloween, Santa’s hat or a snow man lying next to you logo. It will add very unique and adorable touch to your site.
Requirements for this Tweak
We need some requirement for making this tweak. Those are as follows:
- A transparent image that match with occasion’s theme.
- Image can be use in .png or .svg format. (Blogger doesn’t support SVG)
- A photo editing software like Photoshop for resizing the image. You can also use online tool to resize image.
There are many website like iconfinder.com where you can download thousands of free graphics or objects for using with your logo. It’s better to download readymade object in .png format and if object size is not adjustable then simply resize the image by using photo editing tools.
How to give your logo a theme of special occasions?
This is pretty simple to embed any holiday or seasons icons next to your logo. I will show you the tutorial in Blogger site. I hope you can easily use the script in your WordPress Blog also.
Step #1: Log in to your Blogger Account and go to Dashboard
Step #2: From vertical options click on
Template ->Edit HTML->
Step #3: Now Find this code
]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac)
Step #4: Copy the code and Paste it code Before/above
]]></b:skin>
For adding Santa’s hat next to you logo please add the below script. Please save the Image and upload it to your Blogger site or any third party image hosting site for better performance.
 |
| BloggerSpice Santa cap logo |
#header-inner:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqyTqgZ1LVUTP3C1zVsIGzfZQEDJ3Fx1V2qc2hPkh2zOyMaBPdvSdcWm77loV6A9MgcLWJDpttGSRovrKcDF7GDUqJcdLI3AsevEQi4gPXLDsa8voA5HXsltsFHb3Xk2Bb-fvvrEGC46I/s1600/santa-cap-BloggerSpice.png);
position: absolute;
z-index: 9999999;
margin-left: 12%;
margin-top: -4%;
}
For adding Halloween pumpkin next to you logo please add the below script.
 |
| BloggerSpice Holloween logo |
#header-inner:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2gZvZnyiun2FwFvAF_Ndb8vvG26LKA35LFfINaXBP3IHoOxDWRtOb2CzIvqftpk4eFzXazLF4IHMl4O_cN0MqAATiWpMBy8CqjZj_OfCg-vcXaVYzfDvbKdd2tfWLolUGLWQ-OhQcais/s1600/hollowin%2Bbloggerspice.png);
position: absolute;
z-index: 9999999;
margin-left: 13%;
margin-top: -3.2%;
}
For adding Valentines heart next to you logo please add the below script.
 |
| BloggerSpice valentines logo |
#header-inner:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63f-Mxa-YzwRyqn9Zddt5mgmbYz6e4ip9r1qzn72iJmrG4HiSdVomxvpqIF_Ya4AX45aiEaNLZIGES4-PSqRdA3H_DSX0yl6UYJDH2v176G7CJ3cRS40xywXe4XXZ8ozuk5100bmdZKw/s1600/Valentines-BloggerSpice.png);
position: absolute;
z-index: 9999999;
margin-left: 13%;
margin-top: -5.2%;
}
Step #5: Your site logo position may vary, don’t worry, and to positioning the theme icon adjust the margin-left: 13%; margin-top: -5.2%; percentage. Finally hit the Save template from the top.
Now check your Blog logo and see the new appearance of your default logo. Your Blog logo is now representing the occasion’s theme. At the end of the occasion simply remove the script to show your default logo.
I have added just 3 logos for tutorial purpose but you can download any png image for the occasions and add it next to your blog logo. If you find the image size is not fit to your logo then you can use any photo editing tools like Photoshop and simply resize it and save it in .png format. Beside of .png format image WordPress blogger can use .svg format image.
If you are facing any problem to implement this tweak then feel free to write me. Thank you.
2 comments