Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will surely be very useful for you.

In this tutorial we'll learn how to add the Before/After plugin, a script that works with jQuery and displays two pictures dynamically for comparing them at the same time. By dragging sideways a small bar we can see both images that are being compared.

See this Brittany Murphy pic before and after photoshop:

Implementing this script is simple, we just need jQuery, the Before/After script, and the two images that we are going to compare.

How to add the Before/After plugin to Blogger

Step 1. Go to Template > Edit HTML and before </head> (CTRL + F to find it) paste the following:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true});
});
</script>

Step 2. Click on the Save template button
Note: if the above script doesn't work for you, add it above the </body> tag. Also please verify if you have added jQuery in your template (if you did so, then remove the line in green)

Step 3. Go to Layout, add a HTML/Javascript gadget and paste this code inside the empty box:

<div id='beforeafter1'>
<div><img alt='before' src='URL of the first image' width='500' height='291'/></div>
<div><img alt='after' src='URL of the second image' width='500' height='291'/></div>
</div>

Add the URL of the first image that is the Before image, and the URL of the second image that is the After image.

It is important that you have specified the width and height of each picture so that they work on all browsers.
If you want to add more images just change the ID of the container, in this case the container is called beforeafter1 so you need to change it to beforeafter2 and so on, although you can choose any name as long as all are different.

And in the first code to paste, add another line like this one in blue:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true});
$(&#39;#beforeafter2&#39;).beforeAfter({showFullLinks : true});
});
</script>

You can add as many before/after images as you like as long as all containers have a different ID and the corresponding lines are added in the script.
Below each photo container are the "Show only Before" and "Show only after" links that when you click on them, the complete pictures will be shown. If you want to hide these links, then just change true to false in the first code and they will not be displayed anymore.

Note: if you see white space around the drag icons, then search for this code in your template:

   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>

... and change the #ffffff value in red to transparent.

Autor: Catch my fame

Read More

Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that we find on the net, but we rarely see one showing images so differently like this one.

Those using Mac OS X will surely find a lot of similarity with TimeMachine and those who don't, I'm sure will enjoy this type of effect for viewing images.

I'm talking about Spacegallery, an image gallery done with jQuery in which images are being displayed one after another when you click on them. You can see in the example below.

To use this gallery follow the steps below:

Step 1. Log in to your Blogger Dashboard, click on your blog and then go to Template and click on the Edit HTML button.

Step 2. Search using CTRL + F keys for the </head> tag and before it paste the following:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Screenshot

Note: if you have already added jQuery in your template, then delete the line in red.

Step 3. Search for ]]></b:skin> (CTRL + F) and when you found it, click on the arrow next to it:

Paste just above ]]></b:skin> the following CSS style:

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCQmRFFH8n4KQhTSjvC04IDb-r2epZ9Q1viZyPxh7gfKuzeNzI8NwBIRMo0-J1N5M9LDFaZfBh3Eb5uHUL7b_I6M0bEo-1NDX-UaGUjW-sLfGXM2JGc7tD0AUKaXwhvpDeDRlYE1tVa7U/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Step 4. Click on the Save template button

Step 5. Finally go to Layout > Add a Gadget > HTML/Javascript and copy-paste the code below:

<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

Note: In case you want to add this slideshow inside a post, then create a new post and paste the code in the HTML section

Replace the Image URL text with the URLs of the images of your gallery, keeping in mind that the last image is the first to be displayed.

And so you can enjoy this simple image gallery on your blog, and although it has no display options or settings, is without a doubt a gallery that will draw the attention of your readers.

Read More

Top three qualities of a successful blogger

Top Qualities To Become a Successful Blogger 

The qualities of a blogger should be attended at all times in order to become someone popular, a blogger should have plenty of ideas for creative writing, along with a truckload of motivation. The results sought will not come overnight, there's no guarantee. What you need first are two things in order realize your dream of running a successful blog: a lot of exclusive content and reader loyalty. In each case, time will be needed to develop the success, this is a process and not a short-term event.

Here are three qualities of a blogger who, as a site administrator will need to provide, if his goal is to manage a successful blog.

Patience

A successful blog is a product of time and effort and as a site administrator, you will need patience. As previously mentioned the results will not arrive rapidly overnight, therefore, it is important to realize this from the start. If you are constantly trying to develop new and creative ideas for writing on your blog and at the same time you are worried if you will see any results, this will only make things more difficult. The building of a blogging platform is a "long term" effort, therefore, you must decide whether to accept the challenge or not. This is the main qualities of a blogger.

Credibility

Much of the traffic of any successful blog is based on publishing unique content and its credibility. In fact, the quality of what is in the site will have a direct impact on what will become viral visitors coming to your platform. If it's worth people will talk about your blog, and if they do, others will come to see what you have. Depends on you to publish useful and accurate information, your readers will do the rest.

Consistency

Maintaining a steady stream of creative writing ideas is vital to be able to constantly update the blog. The frequency of publication to a proper schedule is related to the measure of the amount of time you have available and your level of motivation. However, it is important to establish a sort of consistency so that people can schedule their own visits accordingly. Just remember that the more often you write, the more people will visit, so their loyalty will grow faster and their referrals will be extended.

For becoming a popular blogger is important having a healthy source of creative writing ideas, along with a lot of patience and motivation. Ultimately, it will be reduced to you as the system administrator to provide the three qualities of a blogger we discussed above, who is searching tirelessly his goal of having a successful blog. In the end, your own motivation and patience will be the glue with which all the elements will be put together for your dream to come true.

Read More

Add Keyboard Keys Effect To Your Text in Blogger with CSS

For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. In this tutorial, I will show you how to create a keyboard keys effect only with CSS. It is not necessary to add an image, so that your blog will load faster.

How to Add Keyboard Keys to Blogger

Step 1: From Blogger Dashboard, go to Template > Edit HTML

Step 2: Look for this line (Ctrl + F)

]]></b:skin>

Screenshot

Click on the arrow to expand the code

Step 3: Just above ]]></b:skin> paste this CSS code:

kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Step 4: Save the change made.

Now the only thing left to do is adding the tags to the desired text to make it look as it would be inside of the keyboard keys.

For this you need to create a new post, write the text on which you want to apply the style and then switch to HTML - where you have to add before and after it, the following HTML tags:

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Screenshot

And, it will be visible in your post as:

Ctrl + F

Read More

How to do natural SEO on Blogger

Although many insist that blogs hosted on free servers, such as Blogger, are not ideal for performing a correct positioning of your web site, the truth is that a blog hosted by Blogger can be really well positioned and quickly on the Internet if you are using the right SEO tools.

Now, given the latest updates from Google, the best would be hiring a specialized person, however, if we don't have the resources or we want to learn doing this job alone, we can choose to begin with the natural positioning. Here are some tips to start a SEO work (Search Engine Optimization).

The first thing is to pick a correct domain

We must try having our keyword included in our domain name, of course, this may sacrifice our branding but we can use the redirection.

Create Value Added Content

Not only rewrite articles, or write like it would be something for us. We should write thinking about our target audience, i.e., giving advices, tips, suggestions, guidance on specific topics and, aside, put links, use anchortext and keyfrases.

The topic of the links is important

They should be of quality and is no longer needed to place five or ten links within the text of your website, now, what matters is that the link is in context and is relevant.

Finally, the domain, in value-added content and a right use of the internal and external links, will not be useful if we don't try to update our blog constantly.

How often should you update your blog?

This is not necessary to be done on daily basis, although this may be ideal as in this way we could achieve a greater relevance in search engines, but has to be a constant work. Let's say, two or three times a week would be enough, what should not happen is updating only three times a week and doing nothing next week.

Keep in mind that search engines happen to pass daily on our blog in order to index our content.

I hope that you find these SEO tips useful and if you would like to receive more tutorials by email, subscribe for free to this blog, check out the facebook page or add the RSS feed.

Read More

How to Add a Recent Forum Topics Widget to Blogger

If you are using the Nabble forum in your blog is very likely that this gadget will interest you because, as the title says, it will show the lastest topics that have been published in your forum in a very similar manner to the recent comments gadget which uses the blog's feed.

First you should go to your forum and look at the bottom where it says Feeds, click there, then two links of the Feed will appear (the first being the Topics only Feed and the other one is Topics and replies), choose the one you want.

After this, log in to your Blogger Dashboard, go to Layout, click on Add a Gadget link, choose Feed from the gadgets list and paste the Feed URL you have selected inside the text box.

Click on Continue, and you only have to configure the parameters, then Save changes to see the results.

That's it! Enjoy :)

Read More

Add a forum on your Blogger blog with Nabble

If you have many users on your blog and many comments, perhaps you should consider a forum to finish enriching your blog.

Create a Forum With Nabble

To implement a forum we will use Nabble, in my opinion, the best free option. We go to Nabble page and there, we will create an account (keep in mind that this account will be the moderator of the forum).

And once we have everything set (it also has a wide variety of customizing options), go to Options -> Application -> Change appearance:

There, we can also edit the CSS of the forum and other things...

Now we have to give the structure of a real forum, i.e. organizing it by categories. To do this click on the Options menu, select Application, then click Change application type:

Then choose the Forum category and save your changes.

To finish, we only have to create categories and for this go back to Options, this time select Structure and then choose Create a new sub-forum:

Fill in the details of the category and that's it, you will have your forum running.

The rest are small details, like sort categories (Options > Structure > Manage sub-forums), customize your avatar and your signature (YourNickname > Account Settings), change permissions (Options > Users > Permissions), etc..

Now for integrating the newly created forum to your blog, you must go to Options - Embedding options and copy the javascript code.

Embed the forum in a Blogger page

Go to your Blogger Dashboard and create a new Blank Page

Once there, get in the HTML mode.

Paste here the code that we copied earlier, and if everything went well, we should see our brand new forum for our blog!

I hope this tutorial was helpful to you and you will begin using this great service.

Read More