Posted : Monday, January 27, 2014 | Post Author : Paul Crowe
In the last post we had a CSS Zoom effect for images on your blog.Now we are continuing with image effects this time with something really awesome.This effect has a number of layers but as with all our tutorials it can be easily added to your blog even for a newbie.
So what is the effect ? The main feature is on hover images will spin and morph from square to round, to help this effect images will also have a 3D style.Below I have created an animated GIF to give you an idea of how it looks, check out the demo for the real thing (On the demo page hover over any of the images in the post).
Add Css Image Morph Effect To Blogger
Posted : Wednesday, January 22, 2014 | Post Author : Paul Crowe
The first effect we will cover is a nice zoom were upon the image will be displayed as normal then when you place the cursor over it the image grows to a zoom.This is a good effect in two ways, if you actually want visitors to be able to zoom into your images or if you just want something that looks cool.
Check out the demo below (On the demo page hover over any of the images in the post) :
Add Css Zoom Effect To Blogger
Posted : Wednesday, January 08, 2014 | Post Author : Paul Crowe
The counter increment works very well with comment replies by numbering those comments as siblings to the original comment.As seen in the image below the replies to the first comment are numbered 1.1, 1.2 etc..Other comments are then numbered naturally, you can see the comment from the screenshot as a live demo here.
We do this with a simple piece of CSS that;s really easy to add to your blog so lets do it.
Posted : Friday, October 11, 2013 | Post Author : Paul Crowe
The standard Blockquote on Blogger is very boring, just a slightly shaded background in most cases.Also many bloggers don't use blockquotes which is a shame as they can be an eye catching feature in your posts.Blockquotes can be stylish and informative when used correctly and styled as you might see in newspapers and magazines.
So when recently working on a blog the owner wanted the blockquote to be a real feature.They used a lot of quotes in posts and wanted these quotes to stand out.Using just some simple CSS I styled a blockquote that readers would love and I will share it with you in this post.
OK so this style places the quote within a box with the text large and colored, we use quotation marks at the top and bottom and finally you can add the quote authors name if required.You can see a screenshot of the blockquote or check out a Live Demo Here.
Add Stylish CSS Blockquote To Blogger
Posted : Sunday, September 08, 2013 | Post Author : Paul Crowe
Basically on any text on your blog you can make a sliding underline appear on hover (when you place the cursor over it).For me this effect works best on headings and links as these are the text visitors to your blog will hover on most.In future posts I may show how to add the effect to all links on your blog or maybe to Labels/Tags (Like the previous Bump effect for Blogger labels we published in 2011).
OK, hover over the "Show Me The Effect Already" text above to see the magic, cool ehh ?
Hover Here For The Effect In A Heading.
And Hover Here for It In A Link.
What About The Underline Slide From Right To Left ?
Add The Slide Underline Effect To Your Blog
Posted : Tuesday, September 03, 2013 | Post Author : Paul Crowe
If you are thinking about starting you own blog, than it's extremely important for you to have, at the very least, a basic understanding and knowledge of how HTML and CSS can properly work to your advantage. Although learning these different coding languages may seem difficult and somewhat foreign at first, as you continue to familiarize yourself with the basics of HTML and CSS, the process will become more clear and easier for you to use. It's critical for you not to give up on learning the specific codes and maintain practicing how to create them in order for your blog to be fully successful. As you continue to learn the "ins and outs" of coding for HTML and CSS, there are many outlets that consist of different websites that will prove to be extremely beneficial in your quest to master these computer languages.Below we list the best sites you can visit to help you learn the basics and get you on the way to become an expert coder.
Posted : Friday, August 30, 2013 | Post Author : Paul Crowe
The solution we came up with using some simple CSS adds some cool style to the comment and avatars as well as showing the author comment (That would be your comments on your blog) in a different color.We also overlap the commenter name with their avatar.All unique features for Blogger comments and originally for Spice Up Your Blog but so many have copied it without permission I though we might as well share it with all our readers.
The comments are almost the exact same as you see here on SUYB with some subtle differences so you can see exactly how it will look on your blog by checking out the demo below and scrolling to the comments.
Add Comment Style To Your Blog
Posted : Monday, July 08, 2013 | Post Author : Paul Crowe
So like the pop out icons these use simple CSS to create the effect but this time we also use a sprite instead of individual images.This makes the flip smooth and adds less load time to your blog.I have tutorials for adding them to your sidebar on both Wordpress and Blogger but you could add them to your blog footer or even in a menu.
The icons are for Facebook, Twitter, Google+, Rss Feed, Pinterest, Skype, Vimeo, Dribbble, Flickr, LinkedIn and Youtube.But as I did in the footer you can remove the icons you don't want displayed.
Live Demo :
Posted : Wednesday, June 26, 2013 | Post Author : Paul Crowe
I have two seperate tutorials for Wordpress and Blogger users with instructions to add your links and remove the icons you don't want.I have added the no-follow tag to the icons as there is no need to pass link juice to social profiles and also set the target for the links to open in a new window.
The instructions are below but first let's see the demo's.
Here is a working example, hover over each icon to see the pop out effect :