Showing posts with label Css. Show all posts
Showing posts with label Css. Show all posts

Animated Zoom With Caption Effect For Pictures On Blogger


CSS3 Logo 3D Blue
OK we all love image effects and we love them even more when they can be achieved using just CSS with no need for Javascripts.This effect not only added a neat slide out caption to your pictures but also the image will darken and zoom behind the caption.Check out the link to the demo below (Just hover over the Spice Up Your Blog screenshot on the demo page) and then I will show you just how easy it is.Make sure to watch the video tutorial at the foot of the post to see the effect being added to the demo.

Add Zoom Caption To Blogger

Continue Reading

Add An Amazing Image Morph Effect To Post Images On Blogger


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).

View Demo Button

Add Css Image Morph Effect To Blogger

Continue Reading

Add CSS Auto Zoom Effect To Post Images On Blogger


OK over the next week or so I want to focus on some cool image effects for the images you use in your blog posts.Previously we have shown you some basic effects you can add to images on your blog.But with the advancement of CSS we can now use better effects with less code and all in a way even an absolute beginner can do it.Also I will be presenting this in a way that once the code is added the effect will be on only images within your posts.We will be adding some more fancy effects in the next few posts but we will start with a neat zoom.

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) :

View Demo Button

Add Css Zoom Effect To Blogger

Continue Reading

How To Number Comments On Blogger With CSS


A few weeks back we published a post with An Elegant New Comment Theme For Blogger Blogs called Blue Ice.One of the neat features of that comment theme was the comments were numbered with counter increment.If the full theme was not to your liking but you want to number comments this tutorial is for you.

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.

Continue Reading

Stylish New CSS Blockquote With Author Section For Blogger Blogs


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

Continue Reading

How To Use Sliding Underlines On Blogger And Wordpress


Tutorial Logo
As someone constantly looking at design and ways to add to the design of blogs often it's the little things that amuse me.This post is definitely an example of that, something as simple as an underline sliding out under a heading or for that matter any text most would see mundane but I see as 'Cool'.So lets look at the effect, first up it's a very easy effect to use on your blog no code knowledge is needed.

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).

Show Me The Effect Already !

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 ?

No Problem hover over the heading above or this text to see the slide from right to left.

Add The Slide Underline Effect To Your Blog

Continue Reading

The Best Websites To Learn HTML And CSS For Novice Bloggers


Guest Post - Our host is Christopher Forsythe, who looks at some great sites to learn the basics of coding.See How To Become a guest author on Spice Up Your Blog.

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.

Continue Reading

Spice Up Your Blog Threaded Comment Style For Blogger


I have received a lot of Emails and comments over the last year or so asking about the comments we use here on Spice Up Your Blog.When Blogger introduced threaded comments early last year I wanted a bright looking comment section with the authors comments easy to distinguish from readers comments.

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.

View Demo Button

Add Comment Style To Your Blog

Continue Reading

Mini Social Icons With CSS And Image Sprite Flip Effect


flip social icons
Just last week I published the pop out effect social icons.In a comment on that post Ger asked "Can you write a tutorial for the icons you have in the footer of this page ? The ones that turn color on hover !".The icons he refers to are a neat set of simple icons with a flip color effect and they are a popular option on many of the top websites and blogs.I only added them to the footer in the last site update and had not planned on a tutorial but ask and you shall receive.

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 :

Continue Reading

Pop Out Effect Candy Social Icons For Blogger And Wordpress


Candy Social Icons
Today we have another great set of social icons to link to your social profiles with an awesome effect created with pure CSS.The icons have a delicious candy design that will grab the attention of your readers and are so easy to add to your blog.The icons can be added to your blog sidebar to let readers quickly follow you on your favorite social networks and we have icons for your Rss Feed, Email, Facebook, Twitter, Google+, LinkedIn, YouTube and Skype.

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 :

Continue Reading

Hire Us