How to Embed a Youtube Playlist on Your Blogger Blog

In this post we will see how to create a YouTube video gallery using jQuery. It is an elegant gallery in which we can add 5 videos and for its dimensions, we could put it below the blog header. Actually you can put it anywhere, but it is recommended in that area considering that 765px is the width of the gallery.

How to Embed a Youtube Playlist on Your Blogger Blog

To add this video slider to your blog go to Template > Edit HTML and before the </head> tag, add these scripts:

<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
$.fn.hoverscroll = function(params) {
if (!params) { params = {}; }
params = $.extend({}, $.fn.hoverscroll.params, params);
this.each(function() {
var $this = $(this);
if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}
if (params.fixedArrows) {
$this.wrap('<div class="fixed-listcontainer"></div>')
}
else {
$this.wrap('<div class="listcontainer"></div>');
}

$this.addClass('list');
var listctnr = $this.parent();
listctnr.wrap('<div class="ui-widget-content hoverscroll' +
(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
//listctnr.wrap('<div class="hoverscroll"></div>');

var ctnr = listctnr.parent();

var leftArrow, rightArrow, topArrow, bottomArrow;
if (params.arrows) {
if (!params.vertical) {
if (params.fixedArrows) {
leftArrow = '<div class="fixed-arrow left"></div>';
rightArrow = '<div class="fixed-arrow right"></div>';

listctnr.before(leftArrow).after(rightArrow);
}
else {
leftArrow = '<div class="arrow left"></div>';
rightArrow = '<div class="arrow right"></div>';

listctnr.append(leftArrow).append(rightArrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"></div>';
bottomArrow = '<div class="fixed-arrow bottom"></div>';

listctnr.before(topArrow).after(bottomArrow);
}
else {
topArrow = '<div class="arrow top"></div>';
bottomArrow = '<div class="arrow bottom"></div>';

listctnr.append(topArrow).append(bottomArrow);
}
}
}
ctnr.width(params.width).height(params.height);

if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev();
bottomArrow = listctnr.next();

listctnr.width(params.width)
.height(params.height - (topArrow.height() + bottomArrow.height()));
}
else {
leftArrow = listctnr.prev();
rightArrow = listctnr.next();

listctnr.height(params.height)
.width(params.width - (leftArrow.width() + rightArrow.width()));
}
}
else {
listctnr.width(params.width).height(params.height);
}

var size = 0;

if (!params.vertical) {
ctnr.addClass('horizontal');
$this.children().each(function() {
$(this).addClass('item');

if ($(this).outerWidth) {
size += $(this).outerWidth(true);
}
else {
size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
}
});
$this.width(size);

if (params.debug) {
$.log('[HoverScroll] Computed content width : ' + size + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth();
}
else {
size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))
+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container width : ' + size + 'px');
}
}
else {
ctnr.addClass('vertical');
$this.children().each(function() {
$(this).addClass('item')

if ($(this).outerHeight) {
size += $(this).outerHeight(true);
}
else {
size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))
+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
}
});
$this.height(size);

if (params.debug) {
$.log('[HoverScroll] Computed content height : ' + size + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight();
}
else {
size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))
+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container height : ' + size + 'px');
}
}
var zone = {
1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},
2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},
3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},
4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},
5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},
6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},
7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},
8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},
9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
function checkMouse(x, y) {
x = x - ctnr.offset().left;
y = y - ctnr.offset().top;

var pos;
if (!params.vertical) {pos = x;}
else {pos = y;}

for (i in zone) {
if (pos >= zone[i].from && pos < zone[i].to) {
if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}
else {stopMoving();}
}
}
}

function setArrowOpacity() {
if (!params.arrows || params.fixedArrows) {return;}

var maxScroll;
var scroll;

if (!params.vertical) {
maxScroll = listctnr[0].scrollWidth - listctnr.width();
scroll = listctnr[0].scrollLeft;
}
else {
maxScroll = listctnr[0].scrollHeight - listctnr.height();
scroll = listctnr[0].scrollTop;
}
var limit = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * limit;

if (opacity > limit) { opacity = limit; }
if (isNaN(opacity)) { opacity = 0; }

var done = false;
if (opacity <= 0) {
$('div.arrow.left, div.arrow.top', ctnr).hide();
if(maxScroll > 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
}
done = true;
}
if (opacity >= limit || maxScroll <= 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).hide();
done = true;
}

if (!done) {
$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
}
}

function startMoving(direction, speed) {
if (ctnr[0].direction != direction) {
if (params.debug) {
$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
}

stopMoving();
ctnr[0].direction = direction;
ctnr[0].isChanging = true;
move();
}
if (ctnr[0].speed != speed) {
if (params.debug) {
$.log('[HoverScroll] Changed speed: ' + speed);
}

ctnr[0].speed = speed;
}
}

function stopMoving() {
if (ctnr[0].isChanging) {
if (params.debug) {
$.log('[HoverScroll] Stoped moving');
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
clearTimeout(ctnr[0].timer);
}
}

function move() {
if (ctnr[0].isChanging == false) {return;}

setArrowOpacity();

var scrollSide;
if (!params.vertical) {scrollSide = 'scrollLeft';}
else {scrollSide = 'scrollTop';}

listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
ctnr[0].timer = setTimeout(function() {move();}, 50);
}

if (params.rtl && !params.vertical) {
listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
}

ctnr
.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})
.bind('mouseleave', function() {stopMoving();});

this.startMoving = startMoving;
this.stopMoving = stopMoving;

if (params.arrows && !params.fixedArrows) {
// Initialise arrow opacity
setArrowOpacity();
}
else {
// Hide arrows
$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
}
});

return this;
};

if (!$.fn.offset) {
$.fn.offset = function() {
this.left = this.top = 0;

if (this[0] && this[0].offsetParent) {
var obj = this[0];
do {
this.left += obj.offsetLeft;
this.top += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return this;
}
}

$.fn.hoverscroll.params = {
vertical: false,
width: 400,
height: 50,
arrows: true,
arrowsOpacity: 0.7,
fixedArrows: false,
rtl: false,
debug: false
};
$.log = function() {
try {console.log.apply(console, arguments);}
catch (e) {
try {opera.postError.apply(opera, arguments);}
catch (e) {}
}
};
})(jQuery);

$(function(){
$("#videoslider-tabs a").click(function(){
var container = $("#videoslider-content");
container.html("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYntwVHwZQZJHstyK48nH6OfKGKFrCMrO_WT3srhDFNTLCOytnYYBXRqqPWDbtuBnjVxRrFTl9gOVhFbkQKvFrYfBa3pUE0ipWp1I1BnLMX6RDIy82XDH3D6l9GyC9zEAwde8GTsIcFBt/s1600/loading.png' class='loading-vid' />");
var id = $(this).attr("href").slice(1);
loadvideo(id);
return false;
});
$("#videoslider-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});
$("#videoslider-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
loadvideo();
});

function loadvideo (hash){if(hash){hash = hash.slice(3);$("#videoslider-content").html(video[hash]);$("#videoslider-tabs li").removeClass("actVid");$("#videoslider-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#videoslider-content").html(video[1]);$("#videoslider-tabs li").removeClass("actVid");$("#videoslider-tabs a[href=#vid1]").parent().addClass("actVid");}}
//]]>
</script>

Then add the styles before ]]></b:skin>

/* Video Gallery for Blogger
----------------------------------------------- */
#videoslider {
background:#000; /* Background color */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#videoslider, #videoslider-content, #videoslider-tabs {height:350px;overflow:hidden;}
#videoslider-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#videoslider-tabs {float:right;width:300px;margin:0;}
#videoslider-tabs li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErn89LG2B8JIPo7JvpkzpQNt5vgglRjftDEeyjKjy12fXWHcM5iHQRIfy3VsPOXVYWcCFC1LMM2aYsCsNNGDdUjXTnHho2wktM08HcXNWBW45RsB7zYfob80ZymkqarRVn6JZbbct9N2P/s1600/tab_backgr.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#videoslider-tabs li a {padding:0 !important;border:0 !important;}
#videoslider-tabs li.hover {background:#333;}
#videoslider-tabs li.actVid {background:#555;}
#videoslider-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#videoslider-tabs li span.vidTit {
display:block;
color:#CD332D; /* Titles color */
font-size:14px; /* Titles font size */
font-weight:bold;
text-decoration:none;
}
#videoslider-tabs li .vidDesc {
display:block;
color:#fff; /* Color of the description */
font-size:12px; /* Font size of the description */
font-weight:bold;
text-decoration:none;
}
#videoslider-tabs a {text-decoration:none;}
#videoslider-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#videoslider-tabs li a:hover {background: none !important;}

Now in a HTML/Javascript gadget paste the structure of the slider, this is the one you should put under the header:

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="videoslider">
<div id="videoslider-content"></div>
<ul id="videoslider-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/video_ID_1/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/video_ID_2/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/video_ID_3/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

</ul>
</div>

Add the IDs of the videos, their names and their description and that's it. The description should be brief so you wont have space problems.
If you do not know how to get the ID of a video, then open the video on YouTube and look at the address bar... the last characters are the ID you need.

How to Embed a Youtube Playlist on Your Blogger Blog

Note that the ID of each video should be added two times, one is for displaying the video and one for the tabs thumbnail.

As this gallery works with jQuery we should make sure to not repeat the version of the script if we already have jQuery.

Adding a Youtube Video in the Background Of Your Blogger Blog

Adding a Youtube Video in the Background Of Your Blogger Blog

Some of you might have wondered how to put a video to play in the blog's background, so that instead of having just a color or an image, to have a video. We can do this thanks to the jQuery plugin Tubular that lets you use a YouTube video as a background of a web page.

Although the result can be very original and attractive, I must say it has three drawbacks: they can not be silenced, if the video has ads, they will also appear, and it can slow the loading time of the blog, so if anyone wants to use it, may consider putting it only on special occasions, or on blogs that load very quickly.

Also it can be done in HTML5, the problem with this method is that you need to load the video in 3 different formats (.mp4, .webm and .ovg) along with a picture for browsers that do not support them, so this YouTube option seems more practical to me, despite the drawbacks.


You can see it working on this demo blog

Steps 

1. The first step is to just above the </head> tag, this script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */

var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';

jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);

jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});

var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;

var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';

jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}

function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}

//]]>
</script>

And this one too:

<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>

2. Then locate the <body> tag (CTRL + F)
Or if you are using a template from Template Designer, find this line:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

3. Under either of these two, add this:

<div id='wrapper-video'>

4. Now search for the </body> tag, and before it put this:

</div>

Save the changes and that's it. In red you must put the ID of Youtube video, the ID are the characters that appear at the end of the URL:

Remember: There is no option to mute, so if you don't want to have sound as in the demo blog, you have to choose a video that has no sound. I also recommend using a video in HD in case you don't want any black parts to show around it.

If you are using jQuery, remove other versions that you have to avoid duplication and have problems.

How to Add a Meta Description in to Blogger

How to Add a Meta Description in to Blogger

An important part of a good SEO is the implementation of meta tags, which are commonly located in the header of our website, that are being, in the same time, invisible to users visiting the site. Well, to be more succinct, these tags have only one purpose: to include information about the page such as author name, date, key word, description, title, among others.

However, here we will only mention one, which is the meta description in Blogger. This description will appear as a fragment in the search results and as a description when sharing on Google+, Facebook and other social networks. A clear and precise description increases the chances of getting more clicks or visits.

As we will work only on the Blogger platform, here I will leave a little guide to easily add a meta description.

Meta Description in Blogger

The first thing we will do is going to our Blogger dashboard and from there, go to Settings > Search preferences > Meta Tags > Description and click on Edit.

How to Add a Meta Description in to Blogger

Then check the box "Yes" to enable search description. Finally, click the "Save Changes" button.

Adding Meta Description To individual Posts

Now we will focus on adding the meta description to individual pages. Simply edit the page or post, look for the Search Description setting, and there we enter the text and save by clicking the Done button.

How to Add a Meta Description in to Blogger

And that's it. However it is best to test if it works and we will do so with the MetaChecker online tool, where we only have to introduce the url of a post or page, click Analyze and then it will show the results, including a complete analysis of keywords, on-page seo , meta tags, URLs, current server status and a rating bar that goes from Horror to Excellent.

If none of the meta descriptions appear (rarely fails), we can do the process manually, but it requires us to touch a bit of code. In this case, go to Template > Edit HTML and insert before <b:skin><![CDATA[ the following code:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Of course, we will use again the previously mentioned tool to ensure that the description is placed correctly and if all goes well, our blog would be ready to face a good SEO.

Increase Your Blog Ranking in Alexa 2014

Increase Your Blog Ranking in Alexa 2014

The Alexa Rank in its time had a good importance for the SEO, however, these days is already losing its importance due to the changes in the algorithm that Google applies from time to time.

The network displays information about visitors of a website, which in turn classifies this in a ranking, also generates an estimated statistics about visitor traffic and links pointing to the website.

In a few words, the Alexa Rank does not directly affect SEO, but rather serves as a reference for measuring the traffic type, popularity by country and other metrics, although some companies that have a ranking below 100,000, whose purpose is to make room for their business are carried away by the web site.

For others more skeptical, the Alexa Rank is an essential part for search engine optimization and I will not contradict this, since everyone has their opinion on this aspect. If you would like to enrich or have a good Alexa Rank of your website, here I present some ways to do it and with short-term results.

Increase Your Blog Ranking in Alexa 2014

5 Ways to Increase the Alexa Rank

Daily Content: Try to publish at least 2 articles per day and within a month you will start to notice changes in alexa ranking, guaranteed.

Install Alexa Rank widgets: Besides notifying about the results of your alexa ranking, it also makes an estimation of the backlinks to your website. There are three types of widgets: button with ranking and links, the other one with the ranking only and finally a graph with daily records of visits. Traffic Widgets

Alexa Toolbar: From experience, I highly recommend installing the Alexa Toolbar, because when we access a website, Alexa takes it as important visit and thus, better results in the ranking. And of course, it will give you information about the links of a web site, popular pages, reviews, and more features.

Request a review: To calculate the alexa ranking of a website, besides taking the amount of daily and monthly visits, the number of reviews or opinions made with stars also play a role in the ranking. Ask your users or purchase alexa opinions about your website.

Number of backlinks: As I said earlier, the number of visits and reviews about your website used to calculate the alexa rank and the total number of quality backlinks, increase more the chances of achieving a favorable ranking for your website.

How to Add Google Analystic in Blogger Complete Tutorial 2014

How to Add Google Analystic in Blogger Complete Tutorial 2014

Google Analytics is a platform created with the purpose of helping us to track the number of visits and page views on our blog, which also uses several filters to check exactly from where the 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.

How to Add Google Analystic in Blogger Complete Tutorial 2014

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

How to Add Google Analystic in Blogger Complete Tutorial 2014

4. Now let's go to our Blogger account.
5. Look for your blog and click on it, then go to Template > click the Edit HTML button and 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. Within about 24 hours, we shall see the first statistics of our blog in Google Analytics, otherwise check the following:

- Double check that the code has no spaces or characters.
- Doesn't have errors in the configuration
- There are no poor implementation of the filters.
- The Flash plugin is working or javascript is enabled.
- You will have minor issues if you are receiving visits from China (this conflict is not yet solved, according to Google).

How to Redirect 404 Error (Page Not Found) With Home Page

How to Redirect 404 Error (Page Not Found) With Home Page

A 404 error page tells you and search engines that a page is not found by displaying a text similar to it "Sorry, the page you were looking for in this blog does not exist.". This may happen because you have changed your URLs over time, either removed a few pages when you overhauled your design or a visitor may have accidentally misspelled an URL inexistent in your blog, so it automatically redirects to the 404 error page (page not found).




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 to return back). In this case, the best method is by using Javascript about which I will go in detail below.

Redirect Blogger 404 Error with Javascript

Go to your Blogger dashboard, select your blog and then to Settings > Search preferences > Custom Page Not Found.

How to Redirect 404 Error (Page Not Found) With Home Page

Copy and paste the following code inside the empty box:

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 modified 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 which is the delay expressed in milliseconds, can be changed to other 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 verify the 404 error page functionality by adding a custom text at the end of your blog address and after hitting Enter, you should see the error page followed by a redirection after 5 seconds. That's it!

4 Alternative to Google AdWords

4 Alternative to Google AdWords

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 idea 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

Add a Forum Your Blogger Blog Easily With Nabble

Add a Forum Your Blogger Blog Easily With Nabble

Forum is a platform where visitors can interact with each other and discuss different hot topics. There you can add desired topics for getting comments and diverse suggestions on them. If you have a good traffic, then you can place questions on daily basis for the potential visitors to answer, thus your forum simultaneously converts itself into a huge frequently asked quesions section "FAQ". Forums will provide your visitors an open social atmosphere to express their useful ideas and share other's ideas.

In this brief tutorial, I have explained simple steps to add a forum to your Blogger or blogspot blog. So let's get started

How to Create a Forum With Nabble

To implement a forum we will use Nabble, in my opinion, one of the best free options. 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:

Add a Forum Your Blogger Blog Easily With Nabble

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:

Add a Forum Your Blogger Blog Easily With Nabble

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:

Add a Forum Your Blogger Blog Easily With Nabble

 

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.

 

Add a Forum Your Blogger Blog Easily With Nabble

 

Embed the forum in a Blogger page

Login to your Blogger Dashboard, select your blog, click the Pages link on the left sidebar and create a new Blank Page
  

Add a Forum Your Blogger Blog Easily With Nabble

Once there, get in the HTML mode.

Add a Forum Your Blogger Blog Easily With Nabble

Paste inside the empty box 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

Top Commentators Widget With Avatar For Blogger 2014

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.

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

Top Commentators Widget With Avatar For Blogger 2014

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:

<style type="text/css">
.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}
</style>
<script type="text/javascript">
var maxTopCommenters = 8; 
var minComments = 1;    
var numDays = 0;        
var excludeMe = true;   
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwdF0t3n-2SxFX0nPWPFdbrwp-iYe3tp3lWbkJ1PTIa3fZ9C99BUwFZNwZbnFZ_PE37VSbWvfljstt7IYQuJ0W_bObx4XMMQd4apMwCFk_jV7Y4Ldn0JuFZ8ZBdqMQZtfc3sG537gMgoKo/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmC8aZE3yOfQAwI9UwMeEhh_1uEPmIKA91qZoUkeEOLRwSzaiuxTwfn9nrB_ijMHjok8RIJaYeh8w93-0K6QmIXWn62Vsff9gfayUthyU8tOTTZiBn1cGlrpqWAma2bYyZBMKc1sLy2jUO/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
  
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

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.
- To hide your name or some other username, replace the someotherusertoexclude text between the quotes (to add more, add another comma after the text in red, then type the username you want to exclude between the quotes)

How to Write SEO Optomized Blogger Post

How to Write SEO Optomized Blogger Post

I'm not a SEO Expert, nor what we will read further is a top secret, but this is about the basic positioning that everyone should apply in order to optimize their blog posts. And with these techniques, effort, and a lot of patience, we can occupy the best places in the search results of different search engines.

For sure not all the cases are alike, neither all blogs are positioned in the same manner, some might have greater competition than others depending on how popular is the topic that they handle, thus, when it comes to web positioning, there's no specific time that applies for all. Having said this, let's begin.

Focus on a topic

Whatever the theme of your blog is, when writing a post, try focusing on a definite subject that has a clear objective and has no distractions. For example, if you write about Digital Cameras, then the beginning and the end of the post should be only about it. Don't start talking about digital cameras and end up telling about what you have done last weekend. A reader goes to a page because is looking for a specific information, so unless it is not a personal blog (where you write about your daily life) do not digress.

Define the post title

The post title should be precise, so that you can briefly summarize the content of the post, but you must not abuse this either, and although it should be concise, do not save words that might be keys to the search.

Examples:

Collection of all the cameras that have been released last year on the market

The best digital cameras of 2012

Clearly, the first one hasn't been defined very much and the second is not only more accurate but it is more appropriate as well, for what people are searching on the internet.

The keywords

Keywords are those terms that the most people search for on the internet and you should try focusing on them when writing an article; these keywords have to be included throughout the entire article but you should be careful not repeating them too many times.

Example:

During the fourth week of the technology, there were many products that are utilized today, and the most famous experts gave a speech on them.

At the opening of the fourth Technology Week, the experts talked about various topics, including how to choose a digital camera, had discussions about the pros and cons of the iPad, and which are the best smartphones.

In the first example we have written without giving importance to any terms, meanwhile, in the second one, we used phrases that are searched on the internet by the most users.

So, the most frequent search terms should be included wisely without cluttering your posts with them, or it can be counterproductive.

These keywords should be added in the title of the posts, as well.

Rely on synonyms

While it is good using keywords, we should not limit ourselves to a single word. It is recommended using synonyms because users do not name things in same way and using less keywords, you'll avoid leaving the reader under the impression that you are being repetitive and insistent.

Examples:

For those who like good quality pictures, Nikon D7000s Digital Camera is a 16.2 megapixel digital camera that takes great pictures.

For those who like good quality images, Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures.

In the first example we have repeated the word digital camera and pictures twice, meanwhile, in the second one, we used the digital camera keyword once and changed the word pictures with images.

This way, the reader will find a greater diversity of words and might enjoy the article more.

Using bold and italics

The main keywords should be highlighted, so that they will stand out from the rest; this is taken into account by the search engine robots being like some kind of lures for them, so the words with which you want to position yourself, need to be highlighted with bold, but be careful, this shouldn't be done with CSS, but with HTML, i.e. they should not be tagged with font-weight: bold; but rather with <b> or even better, with <strong>.

Examples:

For those who like good quality images, Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures.

The result seems to be the same, but it is not. Although the three sentences are in bold, only one is more attractive to robots, which is the first.

For those who like <span style="font-weight: bold;">good quality images</span>, <strong>Nikon D7000s</strong> is a 16.2 megapixel <b>digital camera</b> that takes excellent pictures.

The same goes for the italics, use them for highlighting important words, but do not put them between font-style: italic; but rather between <i> or even better <em>.

For those who like <span style="font-style: italic;">good quality images</span>, <em>Nikon D7000s</em> is a 16.2 megapixel <i>digital camera</i> that takes excellent pictures.

Again, the first has a better chance of positioning than the others. So, it is recommended to highlight the keywords in bold and italics, or to put them between <strong> and </strong>, or between <em> and </em>.

Using links

Some believe that we shouldn't use links in the posts because this way we are giving away our Page Rank. This is not quite true, using referral links to sites that have already shaped their credibility, will also help us to shape our own. Certainly, we should not flood our posts with links, but we can do it when is necessary and especially with sites that address the same topics as you.

Also, avoid putting the typical "click here" or similar texts. When you put a link, the anchor text should be fairly descriptive.

Examples:

<a href="Link URL">Click here</a> to know more

More information about <a href="Link URL">digital cameras</a>

In the first example, the anchor text is not relevant and descriptive, in the second it is.

Illustrating with images

Articles with images are not only visually appealing, but might help the reader to understand what you are talking about, thus, whenever you can, use an image in your post to illustrate the publishing, but do not overdo it, because many images or very large images can slow the loading time of the blog.

New and relevant content

You should focus not only on writing many posts, but also making them relevant to your readers. New and original content is more attractive to the search engines than a copy & paste and actually, the last gets penalized. So try to write new stuff, even if you think that all has been said, it isn't so, each person has a different way of saying things.

Also, always try to get informed before writing an article; do a research and see if the information is valid, based on that, you will gain the trust of your readers.

With these few techniques you can increase the chances of positioning your posts on the internet. As I said earlier, these aren't things that no one heard about, but I know that many are beginners and don't know how to optimize the blog posts.

It does not hurt repeating that the positioning is not given overnight, but with some effort and patience, you should see the desired results over time.