How to Add a Widget Below FirstPost in Blogger alphause

Po ... How to Add a Vintage Style to Images In Blogger using CSS 3 comments To get that vintage Instagram effect for your pictures you don't have to use a program, now you can use CSS and get a similar result! We will apply a shadow inside the image, add a border, put a color in it, and on top of our image, add another semitransparent image with a grunge style that will give a vintage touch. See an example below: move the mouse pointer onto the image and it changes back to normal - notice that borders remain the same. Obviously there will be images that will fit better these effects than others, but regardless of that we do, there should be made a few observations: - this effect is made with CSS and it will not recognize some browsers, especially Internet Explorer. So this effect might not work on older versions of IE. - The images are not centered, you will have to align them to the left (default) or to the right. Now let's add the CSS code for applying this vintage Instagram effect on our images in our template. Adding a Vintage Effect to Blogger Images Step 1.From your Blogger dashboard> go toTemplate>Edit HTML Step 2.Click anywhere inside the code area and press the CTRL + F keys to open Blogger' search box Step 3.Type or paste the following tag inside the search box: Step 4.Just above it, add the following CSS style: Note:The line in bold that corresponds to the color of the image, can be changed to any other color; here are some examples of traditional vintage: background-color: rgba(0,0,255, 0.5);/* blue */ background-color: rgba(0,255,0, 0.5);/* green */ background-color: rgba(0,255,255, 0.5);/* cyan */ background-color: rgba(255,0,0, 0.5);/* red */ background-color: rgba(255,0,240, 0.5);/* violet */If you want the image to not change to its original state on mouse hover, then remove the last code: .vintage:hover:before { background: none; box-shadow:none; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; }Step 5.After you've made your changes, click onSave Template Step 6.Finally, add the following HTML code inside the HTML part of your posts each time you want to apply the vintage effect to an image:

Replace the text in blue with the url of your picture. And that's it, with this little experiment you can have your vintage-style images using CSS only. Like 0 Random Posts Ways To Increase Page Impressions and Traffic on Your Blog11/04/2012 - 13 Comments Turn off the lights with jQuery27/10/2013 - 2 Comments How to put Adsense ads on Blogger/Blogspot16/03/2012 - 17 Comments Related Posts: How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... How to Use Cookies in Javascript 3 comments: Chị Hoa Mua 3/05/2013 You are so smart at blogspot. Thank you for your reply on " Missing for a while" entry. I' ll try what you told me soon. Reply jempot2 mempawah 3/06/2013 I will try the tutorial vintage style to this image, for the installation script I guess it's not that hard. thank you, and I will copy. Reply hsdsupplier 8/23/2013 wow this is very nice tuts, but anyway is there is way to customize width and height of image, thanks alot ,m8 Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,784 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 0 Like