what images can i use on my blog and how to Make Pictures Have Animation Effects on Blogger
 |
| what images can i use on my blog and how to Make Pictures Have Animation Effects on Blogger |
Your Own Photos
Pros: Unique, tailored to your content, and you have full rights.
Cons: May require time and equipment to produce high-quality images.
Public Domain Images
Pros: Free to use for any purpose, no attribution required.
Cons: Quality and relevance may vary.
Sources:
Creative Commons Licensed Images
Pros: Many high-quality images available.
Cons: Must adhere to the license terms, which often require attribution.
Sources:
Stock Photos
Pros: High-quality images on a wide range of topics.
Cons: Can be expensive, especially for premium images.
Sources:
Illustrations and Graphics
Pros: Great for custom, stylized content.
Cons: May require graphic design skills or purchase from a designer.
Sources:
Screenshots and Infographics
Pros: Useful for tutorials, data representation, and unique content.
Cons: Screenshots should avoid showing sensitive information.
Tools:
- Canva for creating infographics.
Creating animated pictures on your Blogger site can make your blog more dynamic and engaging. Here’s a step-by-step guide to adding animation effects to images on Blogger:
Step 1: Choose Your Animation Style
First, decide what kind of animation you want to apply. Some common animation effects include:
- Fade in/out
- Slide in from left/right/top/bottom
- Zoom in/out
- Rotate
Step 2: Prepare Your Images
Ensure your images are ready and properly sized. You can upload these images to your Blogger media library or link them directly from an external source.
Step 3: Add CSS for Animation
To animate your images, you'll need to add custom CSS to your Blogger template. Follow these steps:
- Go to Blogger Dashboard: Log in to your Blogger account and go to your blog's dashboard.
- Navigate to Theme: Click on "Theme" in the left sidebar.
- Customize: Click on the "Customize" button under your blog's current theme.
- Advanced: In the customization menu, scroll down and click on "Advanced".
- Add CSS: Scroll to the bottom of the options and click on "Add CSS".
How to Make Images Have Animation Effects
First, open Blogger > Template > Click Edit HTML > Apply the code below just before/above the code ]]></b:skin>.
The image animation effect will automatically function, while the code used in this method only uses CSS code so it won't make your blog heavy.
img,.pS img,.post img{animation:rahrubberB 1s}img:hover,.pS img:hover,.post img:hover{animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-moz-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-webkit-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both; -o-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both; transform:translate3d(0,0,0); backface-visibility:hidden; perspective:1000px;}@keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-webkit-keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-moz-keyframes rahshaked {10%,90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@keyframes rahrubberB{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
Join the conversation