Christmas Decoration Social Bookmarking Gadget For Blogger Blogs

In the past I have written a few tutorials on different styles of the share this social bookmark egg.Today just in time for Christmas I have a Christmas version.A cool Christmas ornament sits on the corner of your blog with social bookmarking options for readers.On hover the ornament slides open with share buttons for Facebook, Twitter, Pinterest, StumbleUpon, Google Plus, LinkedIn, Email and the ShareThis button that offers even more options.Check out the demo below :



OK if that's something you want to greet your visitors this Christmas heres the tutorial.

Add The Christmas Bookmark Gadget To Your Blog

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blogs screenshot choose "Edit Html" > Then Proceed, as shown in the video below.



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script>
<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:'holiday'});</script>
</div><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Tips</a><!-- End Christmas Share Code From http://www.spiceupyourblog.com/ -->

OK That's it Happy Christmas !

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

Add Css Image Morph Effect To Blogger

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
(Note : Some people have found the "Apply To Blog" button can not be clicked if so after the code click space)

/* CSS Image Morph http://www.spiceupyourblog.com */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph http://www.spiceupyourblog.com */

That's it Check out your blog and the effect will be in place.

Drop your comments and questions below.

How To Automatically Hide Spam Links In Blogger Comments

Comment spam is a major issue for all bloggers.We all love comments and they can be the life blood of a blog but spam can be hard to control.Even comments that look OK can contain spam links, especially on Blogger were when moderating comments you can not see if any of the text is a link.So in this post I have two ways to ensure your the comments on your blog will not contain spam links.Not only will it remove the links from any future comments but it will also remove all links from past comments.

We have two options :

CSS - First a small piece of CSS that will completely remove links left in comments.With the CSS the anchor text that make the link (the clickable words) will be completely removed the rest of the comment will remain.

jQuery - Second we have a small piece of jQuery script that will leave the anchor text that make the link (the clickable words) but they will no longer be a link or clickable.

Cool Ehh ? I had used the CSS for some time (Yes spammers ye have been wasting your time) but have now switched to the jQuery.Check out the video tutorial to see more on how each works then It's your choice on how you want to go.The codes needed are below the video.

Video Tutorial

Use CSS To Completely Remove Links And Anchor Text

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

.comment-content a {
display: none;
}

Use jQuery To Remove Links But Leave The Anchor Text

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</body>

Step 3. Now Copy And Paste This Code Directly Above / Before </body>

Note - The line in yellow is the main jQuery script if you previously added this to your blog do not add it.

<!--Stop Blog Comments http://www.spiceupyourblog.com -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>
<!--Stop Blog Comments http://www.spiceupyourblog.com -->

And that's your lot, no more sleepless nights worrying if people have left dodgey links on your blog.

Drop your comments and questions below.