Full Blogging Tutorial and SEO Trick For Your Blog

Home » All posts

Spacegallery: image gallery/slideshow made with jQuery

Posted by Unknown

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://fe-blogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://fe-blogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://fe-blogger.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/AVvXsEj2rEUIcRdapOTUOgzksuao6Ks3OJQrSoTN3Q4Q5bxavfRvLrY2Jckt_RHopp19WIoEugwEMH5jlpdMYGjJfalMIk37MFB-IQNePtJzTVoWf7s0OgypHJwR_N92tw2r1uPybGNWxYaGHEgI/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.

More about → Spacegallery: image gallery/slideshow made with jQuery

Top three qualities of a successful blogger

Posted by Unknown

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.

More about → Top three qualities of a successful blogger

Add Keyboard Keys Effect To Your Text in Blogger with CSS

Posted by Unknown

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 with css in blogger

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

More about → Add Keyboard Keys Effect To Your Text in Blogger with CSS

How to do natural SEO on Blogger

Posted by Unknown

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.

More about → How to do natural SEO on Blogger

How to Add a Recent Forum Topics Widget to Blogger

Posted by Unknown

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.

using nabble feeds to see latest forum topics

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

More about → How to Add a Recent Forum Topics Widget to Blogger

Add a forum on your Blogger blog with Nabble

Posted by Unknown

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.

More about → Add a forum on your Blogger blog with Nabble

Top Commentators Widget with Avatars for Blogger

Posted by Unknown

The commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and replying to discussions which leads to more activity in the posts.

how to add top commenters widget to blogger

It is therefore very important to know which are the most active users of your blog, the users who leave more comments, and for this reason, today I present a great method to display a list with the top commentators.

The gadget will look something like this:

This Top Commentators gadget comes with user's avatar and is done with JavaScript.

How to Add the Top Commenters Gadget to Blogger

1. To add this gadget, you have to go to Layout, click on Add a Gadget link.

2. Select the HTML/JavaScript gadget and copy/paste within the empty box the following code:

3. Now you just have to save changes and you're done!

Configuration

- To modify the number of users displayed in the gadget, look for var maxTopCommenters = 8; and change 8 with any number you want.
- To change the avatar size of the commenters, look for var sizeAvatar = 33; and change number 33 with the number of pixels you want.

More about → Top Commentators Widget with Avatars for Blogger

Redirect Blogger 404 Error (Page Not Found) To Homepage

Posted by Unknown

Whenever, by mistake, we or a user misspells an URL inexistent in our blog, it automatically redirects to the 404 error page (page not found). A message like this would appear:

"Sorry, the page you were looking for in this blog does not exist."

how to redirect blogger 404 error to homepage

And probably this will not make a good impression on the greatest potential users of our blog. Before the user clicks the back button or close the window/browser's tab, thus leaving our site forever, we may want to redirect 404 error in Blogger to a page, where are chances that the visitor will continue reading our blog.

One of the most used methods is the "meta refresh" but the problem with this method is that it breaks navigation (doesn't allow returning back). In this case, the best method is by using Javascript which will be shown below.

Redirect Blogger 404 Error with Javascript

First of all, go to your Blogger dashboard and then to Settings > Search preferences > Custom Page Not Found.

redirect 404 error page in blogger to homepage

Copy and paste the following code:

Sorry, the page you're looking for in this blog does not exist.
You will be redirected to homepage shortly.
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>

The message which is going to be displayed can be edited as you want. If you are willing to redirect your blog 404 error page to another page other than your home page, just replace pathname to href and / with the url of your page. And finally, the number 5000 is the delay expressed in milliseconds. You can edit any value if this is more convenient.

Next thing to do is to save all changes made in this section and do a little test to check if the code works well. You can enter a nonexistent URL on your blog, and see if the 404 error page added previously appears, followed by a redirection after 5 seconds. That's it!

More about → Redirect Blogger 404 Error (Page Not Found) To Homepage

4 Alternatives to Google AdWords

Posted by Unknown

Many think that Google AdWords is the only tool dedicated and available to perform a study such as a keyword search, but it isn't so, today I refute this little lie by collecting some alternatives that, although are not equal to Google AdWords, at least encourage us to make good keyword analysis for the SEO of our website.

Going back a bit, for those unfamiliar with the main features and tools of Google AdWords, we can find a very simple interface yet complete in every sense.

AdWords appearance has changed, however there is a chance of returning to the old design.
Allows you to place a phrase or keyword, a web site and use the categories.
For a better keywords search, you can apply filters such as location, language and add custom fields (competition, local or global monthly searches, CPC, Ad share, etc.).
Displays keyword ideas in columns with the amount of local and global monthly searches and approximate CPC.
You can download keyword ideas, search results in a format to open with Excel.

Having recalled and refreshed the memory a little with the characteristics of AdWords, now it is time to learn about other options both free and paid.

Google AdWords Alternatives

Bing Webmaster Tools: Bing may not be the tool that we had first thought of, however it wants to provide the best conditions for studying keywords.

After we register, to access the tool, go to Diagnostics & Tools and click on the second option on the list: Keyword Research.

SEMRush: Other freemium alternative that displays a very complete report of a particular keyword or website. However, it has limitations and if you opt for a PRO recurring plan you need to pay a monthly membership from $69.95 per month.

Ubersuggest: This nice and simple online tool searches keywords suggestion as well as potential titles for an article. Personally, I recommend it 100%.

Keyword Eye: If you are looking to perform a keyword research on a particular region, Keyword Eye will be your help. It also has the option of requesting the display of search volume or AdWords competition and a full report of anchor text, keywords and domain.

At first it offers a free plan with limitations and to enjoy all other benefits we have to pay $9.99 per month.

More about → 4 Alternatives to Google AdWords

How to Add Google Analytics to Blogger

Posted by Unknown

Google Analytics is a platform created with the purpose of providing us a tracking of the number of visits and page views on our blog that also uses several filters to check exactly from where visitors are coming via standard or custom reports.

Google Analytics is the leading free tool that has a good relationship with the internet marketing and offers suggestions and improvements or benefits for our website.

As Analytics is part of the variety of Google tools like Blogger, many bloggers still don't know if it is possible to add the tracking code in Blogger. Implementing analytics in Blogger is very quick and easy, so you don't need to be experts or web developers, here's a small guide for placing the Google Analytics tracking ID on our blog.

Implementing Google Analytics on Blogger

1. Do you have a Google Analytics account? Then it's perfect. If you don't have one, please Register.
2. Within the account, we'll go to Admin and in the Property column, click the menu, then click Create new property, where we enter the information from the website.

3. Click on "Get Tracking ID" and it will provide a box with a code, select and copy the code (CTRL + C).

4. Now let's go to our Blogger account.
5. Look for your blog and in the Template > Edit HTML, paste the code previously generated in Analytics before the </head> tag (CTRL + F in order to find it).

And this would be the entire procedure. And within about 24 hours, we shall see the first statistics of our blog in Google Analytics, otherwise do the following:

- Double check that the code has no spaces or characters.
- Errors in the configuration.
- Poor implementation of the filters.
- The Flash plugin is not working or javascript is disabled.
- Will have minor issues if you are receiving visits from China (this conflict is not yet solved, according to Google).

More about → How to Add Google Analytics to Blogger

Pages

Spacegallery: image gallery/slideshow made with jQuery

Top three qualities of a successful blogger

Top Qualities To Become a Successful Blogger

Patience

Credibility

Consistency

Add Keyboard Keys Effect To Your Text in Blogger with CSS

How to Add Keyboard Keys to Blogger

How to do natural SEO on Blogger

How to Add a Recent Forum Topics Widget to Blogger

Add a forum on your Blogger blog with Nabble

Create a Forum With Nabble

Embed the forum in a Blogger page

Top Commentators Widget with Avatars for Blogger

How to Add the Top Commenters Gadget to Blogger

Configuration

Redirect Blogger 404 Error (Page Not Found) To Homepage

Redirect Blogger 404 Error with Javascript

4 Alternatives to Google AdWords

Google AdWords Alternatives

How to Add Google Analytics to Blogger

Implementing Google Analytics on Blogger

Translate

Total Pageviews

Popular Posts

Labels

Blog Archive