Untitled

Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with a large image which takes up too much space and requires too much scrolling, now you could have a clean page that displays a gallery grid, with thumbnails and post titles, linking back to the source post for that thumbnail. Let's take a look at what it could look like in this demo blog.

If you have a wallpaper or photo blog that would benefit from displaying a thumbnail grid style layout, look no further. Here's how you can add Grid (gallery) View to Blogger posts.

Adding Grid (Gallery) View to Blogger Posts

Step 1. Log in to your Blogger account and go to Template > click on the Edit HTML button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box

Step 3. Type inside the search box and hit Enter to find it. Step 4. Just above the tag, add the following script and style:

//<![CDATA[ $(document).ready(function() {     var width         = <span style="color: blue;"><b>200;     var height        = <span style="color: blue;"><b>170;     var placeholder    = '<span style="color: #cc0000;">http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/s1600/no-thumb.png';     var margins     = "0px 0px 10px 10px";     var fitThumb                 = 1;     var titleTopPadding            = 5;     var titleBottomPadding        = 8;     var titleLeftRightPadding    = 5;        var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';     $('.post-body').each(function(n, wrapper){         var wrapper         = $(wrapper);         var image         = $(wrapper).find('img').first();         var link         = wrapper.parent().find('h3 a');         var linkURL         = link.attr('href');         var linkTitle        = link.text();         $(link).remove();         wrapper.empty();         if (image.attr('src')) {             var thumbHeight = image.attr('height');             var thumbWidth = image.attr('width');                var thumbParent = $(image).parent();             wrapper.append(thumbParent);             if (fitThumb) {                 image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});                 image.attr('width',width).attr('height',height);             } else {                 image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});                 image.attr('width',width);                 var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);                 image.attr('height',changeHeight);             }                     } else {             var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);             var thumbParent = $('<a>').append(image).appendTo(wrapper);         }         thumbParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postThumbnail');                 var thumbTitle = $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);          var ptitleHeight = thumbTitle.height();         var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);         thumbTitle.css('margin-top','-'+summary+'px');            wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');     });     $('#blog-pager').css('clear','both'); }); function hideLightbox() {     var images = document.getElementsByTagName('img');     for (var i = 0 ; i < images.length ; ++i) {         images[i].onmouseover=function() {             var html = this.parentNode.innerHTML;             this.parentNode.innerHTML = html;             this.onmouseover = null;         };     } } if (window.addEventListener) {     window.addEventListener('load',hideLightbox,undefined); } else {     window.attachEvent('onload',hideLightbox); } //]]> .post { border-bottom: 0 dotted #E6E6E6; margin-bottom: 0; padding-bottom: 0; } h2,.post-footer { display:none; } a.postThumbnail div { text-decoration: none; color: #fff; font-size: 12px; font-weight: bold; text-transform: capitalize; background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); } a.postThumbnail:hover div { display: block; } .post-body img { background-color: transparent; border: 1px solid transparent; padding: 0px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .post-body img:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }

In Blogger, we have the option to set the number of posts we want to display per page by going to the Settings menu > Posts and comments > Show at most ? posts. Once the number of total posts in our blog exceeds this number, we will see "Older Posts" and "Newer Posts" navigation links in our home page and archive pages footer as Blogger doesn't have any built-in function on page numbering. But page numbers instead of older and newer posts links could help our blog visitors to navigate quicker (jump from one page to another page or click on a specific page) and know the total number of posts published. Here's a tutorial on how to add numbered page navigation using Javascript to a Blogger/ blogspot blog. You can select any one of 3 different styles that I have mentioned below.

Adding Numbered Page Navigation to Blogger

You can add this widget in just two steps. 1. Adding The CSS. 2. Adding The Script. Now let's see how to add the CSS style for page navigation.

1. Adding The CSS

Step 1. Go to Blogger Dashboard > Template > click on the Edit HTML button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box. Type or paste ]]> tag inside the search box and hit Enter to find it. Step 3. Now choose one of the following numbered page navigation styles and copy the code just below it. Just above ]]> paste the code of the style that you want to use:

Style 1

.page-navigation{clear:both;margin:30px auto;text-align:center;} .page-navigation span,.page-navigation a{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} .page-navigation a:hover,.page-navigation .current{background:#CECECE;text-decoration:none;color: #000;} .page-navigation .pages,.page-navigation .current{font-weight:bold;color: #888;} .page-navigation .pages{border:none;}

Style 2:

.page-navigation{clear:both;margin:30px auto;text-align:center;} .page-navigation span,.page-navigation a{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;} .page-navigation .pages,.page-navigation .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);} .page-navigation .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

.page-navigation{clear:both;margin:30px auto;text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .page-navigation span,.page-navigation a{padding: 3px 10px;margin-right:5px; color: #fff;} .page-navigation a:hover,.page-navigation .current{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .page-navigation .pages{border:none;background: none;}

2. Adding The Script

Step 4. Now find (CTRL + F) this line:

Step 5. Add the following script just below it:

var pgNavigConf = { perPage: <span style="color: #cc0000;"><b>7, numPages: <span style="color: #cc0000;"><b>6, firstText: "<span style="color: #cc0000;"><b>First", lastText: "<span style="color: #cc0000;"><b>Last", nextText: "<span style="color: #cc0000;"><b>Next", prevText: "<span style="color: #cc0000;"><b>Prev" }

Step 6. Now we need to put the page navigation where it has to be shown (posts footer). Find the code below (if you can't find it, try to find only the first line):

Step 7. Replace it with this one:

If you can't find the old page navigation code, then find this section of code:

... ...

Insert this code immediately above the tag:

Configuration

After installing, you might want to change some default settings. All the settings are in the script of step 5 above:

var pgNavigConf = { perPage: 7, numPages: 6, firstText: "First", lastText: "Last", nextText: "Next", prevText: "Prev" }

5 easy ways to improve the SEO of a blog 

SEO tips for a better search engine ranking

A blogger needs to know at least the minimum on SEO. For it, you don't need to be an SEO expert but you need to know the minimum so that your posts are well indexed in search engines. The phrase "content is king" is one of the widest spread Internet memes and is used by many bloggers, with the idea that you should focus on having quality content, while the rest don't matter much. This is not true. Quality content is important, but that shouldn't be the only concern of a blogger today. In addition to producing quality content, your text needs to be optimized for search engines.

5 easy ways to improve the SEO of a blog

In this post, I will talk about of what would be the basics that any blogger needs to learn about SEO and other simple SEO knowledge. Below are 5 tips to improve the SEO of your blog:

1. Define the keyword

When you write a post, it is necessary to choose the keyword (or term) suitable for your text. What you want is that this keyword or term to be searched on Google and then get your post among the top. For this, it is necessary to use this keyword a few times in the text. For example, here the keyword could be SEO, but this term is too generic and I could hardly get in the top for this search. Then I'll work with a term or a long tail keyword, so that this post will rank for the term "easy ways to improve the SEO of a blog". I will use this term a few times, but without exaggeration.

2. Use the keyword in the post title

Now that I have defined the keyword, I will use it in the post title. This step is very important and certainly will help you to get a better rank in search engines. As you can see, what I have in my title is the easy ways to improve the SEO of a blog keyword, along with other words to form an attractive and optimized title for SEO.

3. Use the keyword in the H2 tags

You must also use heading tags (h2, h3) in your posts. In this post, I am using the keyword "easy ways to improve the SEO of a blog" in a H2 header. Do this always, because it also helps to become well positioned in the search results. If you don't know or don't understand what are the header tags, I would suggest to do a further research on this subject.

4. Use the keyword in the text

You must use your keywords throughout the text. Especially in the first paragraph (please note that I have repeated the title in italics on the first line). But be careful when doing this, there is a maximum and minimum limit for that. Your text needs to be between 1 and 4.5% of occurrences of the keyword. Less than that will have no effect and more than that can alert the search engines and your text might be considered spam.

5. Write posts with more than 300 words

Posts under 300 words have little chance to be among the top results in search engines. Of course, you will be able to rank for multiple keywords that are less popular with less than 300 words text, but for the most competitive keywords that have the potential to bring a greater number of visits, it will be nearly impossible. Thus, it is recommended to write posts with more than 300 words. It's not hard when you really understand the subject you're talking about.

Conclusion

For those who would like to know more about HTML and CSS, today we will see about the difference between margin and padding CSS properties which allow us to add blank space between the HTML elements, preventing the elements from getting 'stuck' together. Although both possess similar functions, each has its particularity. 

Padding determines the inner margins, being responsible for determining the distance between the content of a given element and its border.

Margin is applied to the outside of an element affecting how far the element is away from other elements.

For more info, please take a look at the picture below:

Difference between margin and padding

If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have already shown you in one of my previous tutorials how to customize the Blogger lightbox by changing the background color, borders or text color, but this tutorial will show you how to replace it entirely with a really cool jQuery Lightbox plugin that is very popular among bloggers. What this lightbox does is to display larger versions of the images that will pop up into a larger box when we click on them and lets us to easily navigate through a set of images using the previous and next buttons.

To see a demo of it, please visit this page and click on any image to enlarge.

Adding jQuery Lightbox to Blogger

Step 1. From your Blogger Dashboard, click on Template > Edit HTML 

Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box. Paste the following tag inside the search box and hit Enter to find it:

]]>

Step 3. Choose a style from below and just above the ]]> tag, paste the CSS code: Lightbox with white background:

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} #jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;} #jquery-lightbox a,#jquery-lightbox a:hover{border:none;} #jquery-lightbox a img{border:none;} #lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;} #lightbox-container-image{padding:10px;} img#lightbox-image {max-height: 540px;max-width: 940px;} #lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;} #lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;} #lightbox-container-image-box > #lightbox-nav{left:0;} #lightbox-nav a{outline:none;} #lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;} #lightbox-nav-btnPrev{left:10%;float:left;} #lightbox-nav-btnNext{right:10%;float:right;} #lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;} #lightbox-container-image-data{padding:0 10px;color:#555;} #lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;} #lightbox-image-details-caption{font-weight:bold;} #lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;} #lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}

Lightbox with dark background:

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} #jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0} #jquery-lightbox a,#jquery-lightbox a:hover{border:none} #jquery-lightbox a img{border:none;} #lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto} #lightbox-container-image{padding:10px;} img#lightbox-image {max-height: 540px;max-width: 940px;} #lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0} #lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10} #lightbox-container-image-box > #lightbox-nav{left:0;} #lightbox-nav a{outline:none} #lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block} #lightbox-nav-btnPrev{left:10%;float:left} #lightbox-nav-btnNext{right:10%;float:right} #lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0} #lightbox-container-image-data{padding:0 10px;color:#fff} #lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left} #lightbox-image-details-caption{font-weight:bold} #lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em} #lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

Step 4. Now find the tag and just above it, add the following scripts: Lightbox with white background:

       Lightbox with dark background:

    Step 5. Click on the Save template button. Now we need to disable the original Blogger lightbox so that it doesn't interfere with this one that we just added. Go to Settings > Posts and comments and on the right side you will see the "Showcase images with Lightbox" section. Select "No" and click on the Save settings button on the upper right side.

Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for example, when we visit a page where we have to login with an username and a password. In this case, after verifying that the login is correct, usually a cookie is recorded on our computer. An example would be the popular page of Google. This search engine allows users to choose how many search results they want to see on each page. Thanks to a cookie, this configuration remains unchanged for each computer, even after rebooting several sessions. Despite this, it is good to remove them from time to time because, although, some will expire being erased automatically after a while, some of them will never do so.

Like many other things, cookies may suffer a poor use and hence their bad reputation. For instance, some websites can store and study the browsing habits of a user without their knowledge. This is why most browsers already include a system to filter them and can decide if they will provide some privacy or not. If you want to see a live example of how a cookie works, please visit this page and refresh it a few times. You should get an alert window telling you about how many times you visited the page. (script source: javascriptkit.com) There could be other ways to use cookies but a server could do this with JavaScript. Below we have a simple script that can be used as many times we want, even for different purposes. Basically, what the following script does is to create three functions: the first one is to set a cookie, the second one is to read it, and the last one is to erase it. We can apply it in Blogger by accessing the template HTML and add it just before the tag:

//<![CDATA[ <span style="color: #cc0000;">// Set cookie function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } <span style="color: #cc0000;">// Read cookie function getCookie(name){ var cname = name + "="; var dc = document.cookie; if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) { begin += cname.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin, end)); } } return null; } <span style="color: #cc0000;">//delete cookie function eraseCookie (name,path,domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } } //]]>

Once done, in order to set a cookie, we only need to put the name and the value in quotes when we call the function. Additionally, we will set the expiry date by getting the current Time (in milliseconds) and add the required number of minutes (in milliseconds):

var expiration = new Date(); expiration.setTime(expiration.getTime() + 10000); //Expire after 10 seconds setCookie("cookiename","hello",expiration); }

The above code sets a cookie called cookiename, with the hello value and set its expiry date to 10 seconds after it has been set (10000 milliseconds = 10 seconds). If we want to restore the value of this cookie, then we should use the second function with the cookie name:

var checkCookie = getCookie("cookiename");

By adding this code below , we created a cookie with the value 'hello' which can be shown on the screen if we want to. The cookie will disappear after 10 seconds:

var expiration = new Date(); expiration.setTime(expiration.getTime() + <b>10000); setCookie("<span style="color: #3d85c6;"><b>cookiename","<span style="color: #0b5394;"><b>hello",expiration); var checkCookie = getCookie("<span style="color: #3d85c6;"><b>cookiename"); document.write(checkCookie);

If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and fast way to add CSS (Cascading Style Sheets) so that it will be easier for you to customize your blog. Some readers have complained that when they had to add the CSS codes to install some feature in Blogger, they found it difficult to locate the ]]> tag. So, I decided to make this quick tutorial to show you another way of adding the CSS without having to access the Blogger HTML editor.

Adding CSS via the Blogger Template Designer

Step 1. Log in to your Blogger account and select the blog that you want to customize. Step 2. From the Blogger dashboard, choose "Template" and click on the "Customize" button.

Step 3. Click on the "Advanced" tab. Step 4. Now just add your CSS code inside the right field, located in the "Add CSS" tab (if you have more options, you may need to scroll down the list). Here you can add any CSS code when you want to apply a new style to your template.

In this post we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style sheet of a Blogger blog. The values for the Variable definitions can be modified directly through the Blogger Template Designer where are the settings for colors, backgrounds, fonts and font sizes.

Most default Blogger templates, such as the Minima Template, use these settings for the CSS, which makes it easier to modify these variables through the Blogger dashboard, using the "Template Designer" (Template > Customize) editor and accessing to the "Advanced" section.

If the definitions are already established in the CSS, we'll be able to change the background colors, font colors, styles or sizes, directly from our Blogger dashboard without having to touch the HTML code of our template. If these values ​​are not set, we can define them by creating our own variables. The more variables are created, the greater will be the ease of changing colors and fonts of the Page Elements by going to the "Template Designer" and accessing the "Advanced" tab. In some cases, we can't change the color or font of a particular template if the designer has not implemented the variables in the template and didn't defined and specified a particular value directly into a property, and if there is no definition for these values​​, we may not be able to customize it through the Blogger's Template Designer. There are two types of variables: 1) Color Variable:

body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#66bbdd"/>

In red is the variable name. Here you can put any name you want, however, it must not contain spaces, that's why we may see some variable names using a dot "." between each word. In green is the description that will appear in the Fonts and Colors panel (it can contain spaces). In blue is variable type, which in this case is "color" In purple is the default value, which runs in the absence of any other value. In orange is the value of the selected color. 2) Font Variable:

body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" />

In red the variable name without spaces. In green the description of the variable, may contain spaces In blue is the type of the variable, which in this case is font. In purple the default font. In orange is the font that you choose. We can find the variables definitions in the section of our Template by accessing the HTML code (click on the Edit HTML button). There we should see a pair of .. tags. The CSS style declarations will go in between those tags, along with the variable names.

How to Create Variables with type Color

Now, let's see how we can create type="color" variables in our template. Please copy the below snippet and replace the names and types as you like, then paste the code below this comment:

/* Variable definitions    ====================

Code to copy:

 NAME" description="DESCRIPTION" type="color" default="#xxxxxx" value="#xxxxxx" />

For a better understanding, let's take a look at this example with variable of type "color":

variablecolor" description="Variable with light blue color" type="color" default="#DDF2FF" value="#DDF2FF" />

Here I have created a variable of type "color", with the "variablecolor" name. The color values (#DDF2FF) can be applied to all the borders of my blog and whenever I want to apply color styles to a specific border, I will type it like this:

border: 1px solid $variablecolor;

Note that I have added the "$" symbol before the variable's name which should be added everytime you want to implement a new variable definition. Once we have created the variable, we can apply it on any property (not only borders) of any selector (page element) where it is possible applying the chosen color. For example, if I want to add this color in the main-inner background (sidebar and posts area), I will add it just after the "main-inner" class selector, like this:

.main-inner { background-color: $variablecolor; }

Now that a new variable has been established, save and return back to the blogger dashboard by clicking on the "Customize" button > Advanced tab. You will notice that there is a new variable called "Variable with light blue color" - to change the color, just use the color picker tool.

How to Create Variables of type Font:

Now let's say I want to create a new variable of type="font" which I want to apply on the title of the sidebar gadgets. I will add it this way:

gadgetstitlefont" description="Gadgets Title Font" type="font" default="normal normal 16px Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif"  value="normal normal 20px Cambria"/>

In this variable that I just created, the default font to be searched by the web browser should be Arial, and in its absence, Verdana and so on. Otherwise, apply the Cambria font which is actually the font that we want and which can be easily changed by accessing the Blogger Template Designer. Once the font variable has been implemented, we can add it to any property of any selector where we want to define this font style. To define where this variable should be applied (which, in my example, is the title of the sidebar gadgets), I will need to include the values ​​directly in the "h2" property of the "sidebar" (sidebar-right-1) selector, by creating the following CSS rule:

#sidebar-right-1 h2 { font: $gadgetstitlefont; }

And I will add this above the ]]> tag of the Template (don't forget to add the "$" symbol before the variable's name, otherwise it won't work).

Now that we have given a new variable, Save the template and return to the Blogger dashboard by clicking on the Template > Customize button and access the Advanced tab. Scroll down and you will notice that there is a new variable named "Gadgets Title Font" - if you want to change the font type or size, you can do it directly by using this panel.

After you've decided what font style should be applied, click on the Apply to blog button on the right side.

When following a tutorial to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of certain terms, and sometimes, it may be harder to locate them. As for the gadgets, usually it is required to access the blog's layout in order to add or arrange any of the page elements. For a better understanding, here are some basic explanations about the Page Elements located in the Layout section of a Blogger dashboard.

What are the Page Elements?

Page Elements is, basically, the body of our blog. To access the Page Elements, we need to click on the "Layout" option in the Blogger dashboard.

Understanding the Page Elements sections

The Blogger Layout is made of "sections and elements". The sections mark certain areas of a page. Every section is represented by the tag

and has an unique "ID" that names its element which is followed by a "class" tag. Each section has some attributes and through these, we can determine the number of elements allowed in the section and if this section gives the option to add a "page element".

Let's take a look to an example of the default code related to the header section found in the HTML of a Blogger template:

class='header' id='header' maxwidgets='1' showaddelement='no'> <-- rest of the code -->

Breaking apart the code above:

is the opening tag of the section.

class='header' - describes the existing group inside the "header" element

id='header' - identifies and specifies the header as a single element.

maxwidgets='1' - determines the number of elements allowed in the "header"; here we have the number of gadgets that we can include in the header section. In this example, '1' means that this section allows us to add only a gadget.

showaddelement='no' - the 'no' attribute means that the header will not show the "Add a gadget" link or we won't be able to move any Page Elements. To activate this option so that we can add new Page Elements (Add a gadget), we should change 'no' to 'yes'. By setting the "showaddelement" attribute to 'yes', we'll be able to arrange the elements as we like, just click on the element that you want to move and drag & drop it wherever you want.

The spaces reserved for adding elements in the existing sections are called Gadgets (or Widgets). You can easily add various Page Elements by clicking "Add a Gadget" link. This will open a pop-up window for you to pick and choose which elements should be added. Click on the Gadget's title or on the blue plus sign symbol to add it to your blog's layout.

Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com to which I have made some slight modifications so that it could easily adapt in our Blogger template. In the upper right corner of this menu we have the contact links and the social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, we have the drop-down navigation menu and on the left side, the search form. To achieve better user interface and interaction, the CSS dropdown menu features sub categories that appear with a nice touch of CSS3 box-shadow, text-shadow and a cool transition once the parent link is activated by a hover.

Please visit this demo page to see it in action.

Adding the CSS dropdown navigation menu in Blogger

Step 1. Access your Blogger Dashboard and go to Template > click on the Edit HTML button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it.

Step 3. Just below add the HTML structure:

            About         Contact                                    

                                      Home

                Dropdown                    

                        Menu element 1

                        Menu element 2

                        Menu element 3

                        Menu element 4

                        Menu element 5

                                                    Dropdown                    

                        Menu element 1

                        Menu element 2

                        Menu element 3

                        Menu element 4

                        Menu element 5

                                                    Dropdown                    

                        Menu element 1

                        Menu element 2

                        Menu element 3

                        Menu element 4

                        Menu element 5

                                                    Single Menu

                Single Menu                

Dropdown                    

                        Menu element 1

                        Menu element 2

                        Menu element 3

                        Menu element 4

                        Menu element 5

                                                                                                                          Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear. To change the social media icons, add the links of your icons instead of the ones in blue. If you don't know how to upload and get the URL of an image, please read this tutorial. If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including the ul tags. To remove only a menu element, remove the part that starts with

and ends with

Step 4. And now let's add the CSS styling for the menu. Search for the following piece of code:

]]>

Just above ]]> add this code:

#contact-links {     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);     margin: auto;     position: relative;     width: 100%; } #contact-links a {     color: #4C9FEB; } #contact-links a:hover {     color: #3D85C6; } #my-links {     float: right;     font-size: 12px;     margin: 4px 10px;     overflow: hidden;     text-shadow: 0 1px 0 #FFFFFF; } #my-links a {     margin-left: 7px;     padding-left: 8px;     text-decoration: none; } #my-links a:first-child {     border-width: 0; } #menu-container {     background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;     background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;     background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );     border-radius: 0 0 4px 4px; border:1px solid rgba(0,0,0,0.1);     box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;     clear: both;     height: 46px;     padding-top: 1px; } #neat-menu {     float: left; } #neat-menu a {     text-decoration: none; } #neat-menu ul {     list-style: none;     margin: 0;     padding: 0; } #neat-menu > ul > li {     float: left;     padding-bottom: 12px; } #neat-menu ul li a {     box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;     border-color: #D1D1D1;     border-image: none;     border-style: solid;     border-width: 0 1px 0 0;     color: #333333;     display: block;     font-size: 14px;     height: 25px;     line-height: 25px;     padding: 11px 15px 10px;     text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul li a:hover { background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;     background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;     background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); } #neat-menu > ul > li.active > a {     background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;     background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;     background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );     border-bottom: 1px solid #2D81CC;     border-top: 1px solid #4791D6;     box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;     color: #FFFFFF;     margin: -1px 0 -1px -1px;     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu > ul > li.active > a:hover {     background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;     background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;     background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 ); } #neat-menu > ul > li:first-child > a {     border-radius: 0 0 0 5px; } #neat-menu ul ul {     background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;     background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;     background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );     border-radius: 5px 5px 5px 5px;     border: 1px solid rgba(0, 0, 0, 0.1);     box-shadow: 0 1px 0 #FFFFFF inset;     height: 0;     margin-top: 1px;     opacity: 0;     overflow: hidden;     width: 240px;     padding: 0;     position: absolute;     visibility: hidden;     z-index: 1;     -webkit-transition: all .5s;     -moz-transition: all .5s;     -ms-transition: all .5s;     -o-transition: all .5s;     transition: all .5s; } #neat-menu ul li:hover ul  {     margin-top: 0\2;     height: auto;     opacity: 1;     visibility: visible; } #neat-menu ul ul a {     border-right-width: 0;     border-top: 1px solid #D1D1D1;     box-shadow: 0 1px 0 #FFFFFF inset;     color: #444444;     height: 24px;     line-height: 24px;     padding: 7px 12px;     text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul ul a:hover { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;     background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;     background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );     border-top: 1px solid #4791D6;     box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;     color: #FFFFFF;     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu ul ul li:first-child a {     border-top-width: 0; } #menu-search {     margin:8px 10px 0 0;     float: right; } #menu-search form {     background: url("http://1.bp.blogspot.com/-NzU9je1udG4/Uw-1tZku4eI/AAAAAAAAGWs/-h4BU1mFTiU/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;     border: 1px solid #CCCCCC;     border-radius: 3px 3px 3px 3px;     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;     height: 26px;     padding: 0 25px;     position: relative;     width: 130px; } #menu-search form:hover {     background-color: #F9F9F9; } #menu-search form input {     color: #999999;     font-size: 13px;     height: 26px;     text-shadow: 0 1px 0 #FFFFFF;     background: none repeat scroll 0 0 transparent;     border: medium none;     float: left;     outline: medium none;     padding: 0;     width: 100%; } #menu-search form input.placeholder, #menu-search form input:-moz-placeholder {     color: #C4C4C4; }

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the buttom of this post to see the AddThis sharing buttons.

This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started!

Getting the AddThis share buttons code

Step 1. Visit the https://www.addthis.com/get/sharing page. Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "Create account" button.

The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button.

Step 3. After you've been logged in, right below the "Get sharing buttons for", choose the "A website" option.

Step 4. In the "Select style" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons.

Step 5. After you have chosen the style, the site will provide a code - click on the "Grab it" button to copy it.

The code provided will look like this:

var addthis_config = {"data_track_addressbar":true};

Now that you have selected and set up your AddThis sharing buttons, it is recommended to add them in the footer of your posts...

Adding the AddThis sharing buttons on Blogger

Step 1. Access your Blogger Dashboard and go to Template, then click on the Edit HTML button on the right:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Step 3. Type the following line inside the search box and hit Enter to find it:

 Step 4. Just above this line, add the code for the AddThis social sharing buttons. Note: If you want to add at the beginning of your posts, add the code below the second

Adding more buttons

To add more buttons, simply choose the button for that social network and add the code just above the

tag (see step 5 above). Some examples:

/* linkedin button */ /*gplus button */ /* digg button */ /* stumbleupon button */ /* print button */

CSS3 AddThis Share Buttons

You can add just a single button, so that when the reader hover over it, a menu will open with the options of social networks to share the post.

Visit this page for a demo. Step 1. Go to Template > click on the Edit HTML button > press the CTRL + F keys and search for the

line. Just above this line, paste the following code:

.addthis_share_btn a, .addthis_share_btn a:visited { background: <b><span style="color: #cc0000;">#FF5C00; <span style="color: #6aa84f;">/* background color of the button */ display: inline-block; padding: 6px 12px; font-family: arial,helvetica,lucida,verdana,sans-serif; font-size: 12px; line-height: 1em; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; } .addthis_share_btn a:hover { background: <b><span style="color: #cc0000;">#D45500; <span style="color: #6aa84f;">/* background color on mouse hover */ color: #fff; } .addthis_share_btn a:active { top: 1px; } .addthis_share_btn a span, .addthis_share_btn:visited a span { background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left; padding: 1px 0 1px 18px; }

Share

If you recently tried accessing the developer tools in your browser on Facebook you might have noticed a large notification in the console highlighted in red. Well, that's for a reason, if you haven seen that scam/spam yet let's tell you more about it.

You can see on various blogs an interesting effect on some links. Most of the time, when you hover over a link, something changes in its style: it will either change its color or background or will become underlined. What about this cool effect that consists in gradual transition from one style to another, as you can see in this demo below:

Hover Over Me!

#example7 { padding: 15px; background-color: #FF7CA6; font-size: 16px; width: 30%; font-weight: bold; color: #fff; height: 20px; -moz-transition-property: background-color,width,height,padding,font-size,color,border-radius; -moz-transition-duration: 1s; -webkit-transition-property: background-color,width,height,padding,font-size,color,border-radius; -webkit-transition-duration: 1s; -o-transition-property: background-color,width,height,padding,font-size,color,border-radius; -o-transition-duration: 1s; } #example7:hover { background-color:#9c3; width: 30%; height: 140px; padding: 80px 30px 0px; font-size: 20px; color: #FFFF00; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -moz-transition-property: background-color,width,height,padding,font-size,color, border-radius; -moz-transition-duration: 2s; -webkit-transition-property: background-color,width,height,padding,font-size,color,border-radius; -webkit-transition-duration: 2s; -o-transition-property: background-color,width,height,padding,font-size,color,border-radius; -o-transition-duration: 2s; } This transition is achieved by using the CSS3 transition property - property which is supported in all major browsers like Chrome, Firefox, Opera, Safari (for Safari we will need the -webkit- prefix to get this effect).

The CSS3 Transition Syntax

The syntax of the transition supports four values: - the property affected by the transition, such as color, border, background, width, etc. - the duration of this transition in seconds, i.e., how long it will take to change your style completely - the delay time for the transition to be executed, also in seconds, i.e., how long it takes for the transition to start when the mouse hovers over that element; Check out the code below:

.example {  transition-property: width; /* property that undergoes a transition */  transition-duration: 2s; /* duration of the transition */  transition-timing-function: linear; /* timing-function */  transition-delay: 0; /* length of time to delay the start of a transition */ /* now we will repeat the entire declaration with the -webkit- prefix for the effect to work in Chrome and Safari */  -webkit-transition-property: width;  -webkit-transition-duration: 2s;  -webkit-transition-timing-function: linear;  -webkit-transition-delay: 0; }

In the example above, the elements with the class .example will become wide within two seconds as the mouse passes over them. When we define the style of a link, usually we need to use the a:link selector, and when defining the style when the mouse is over the link, we need to use the :hover selector. However, the transition can be used in any HTML element, not just links. To make the transition effect to work properly, we should define two blocks of style for that element, i.e. the normal style for a tag/id/class and the style on mouse :hover for a specific tag/id/class. For example:

tag, #id, .class { /* insert here the styles that you want for the selector */ /* insert below the transition effects */ } tag:hover, #id:hover, class:hover { /* Insert here the styles for when the mouse is over the element */ /* here it is not necessary to repeat the declaration of the transition */ }

You can add the same style on multiple selectors separated by commas as I have done above, although that's not necessary. Below are some transition examples with their respective codes. I will not use the transition-timing-function in these examples because it makes no difference, as the first value is the duration in seconds and the second is the delay. Example 1

Transition example

#example1 { background: #FFFF00; -moz-transition-property: background-color; -moz-transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; -o-transition-property: background-color; -o-transition-duration: 2s; } #example1:hover { background: #B5E2FF; }

/* with a single property */ #example1 {  background-color: #FFFF00; -moz-transition-property: background-color; -moz-transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; -o-transition-property: background-color; -o-transition-duration: 2s; } #example1:hover { background-color: #B5E2FF; }

Example 2

Transition example

#example2 { background: #9c3; border: 8px solid #690; padding: 20px; color: #fff; -moz-transition-property: background-color,border; -moz-transition-duration: 1s; -webkit-transition-property: background-color,border; -webkit-transition-duration: 1s; -o-transition-property: background-color,border; -o-transition-duration: 1s; } #example2:hover { background: #690; border: 8px dashed #fff; color: #FFFF00; -moz-transition-property: background-color,border; -moz-transition-duration: 2s; -webkit-transition-property: background-color,border; -webkit-transition-duration: 2s; -o-transition-property: background-color,border; -o-transition-duration: 2s; }

/* with four properties and delay */ #example2 { background-color: #9c3; border: 8px solid #690; padding: 20px; color: #fff; -moz-transition-property: background-color,border; -moz-transition-duration: 1s; -webkit-transition-property: background-color,border; -webkit-transition-duration: 1s; -o-transition-property: background-color,border; -o-transition-duration: 1s; } #example2:hover { background-color: #690; border: 8px dashed #fff; color: #FFFF00; -moz-transition-property: background-color,border; -moz-transition-duration: 2s; -webkit-transition-property: background-color,border; -webkit-transition-duration: 2s; -o-transition-property: background-color,border; -o-transition-duration: 2s; }

Example 3

Transition example

#example3 { padding: 15px; background-color: #FF7CA6; font-size: 16px; width: 30%; font-weight: bold; color: #fff; height: 20px; -moz-transition-property: background-color,width,height,padding,font-size,color; -moz-transition-duration: 1s; -webkit-transition-property: background-color,width,height,padding,font-size,color; -webkit-transition-duration: 1s; -o-transition-property: background-color,width,height,padding,font-size,color; -o-transition-duration: 1s; } #example3:hover { background-color:#9c3; width: 60%; height: 60px; padding: 50px; font-size: 30px; color: #FFFF00; -moz-transition-property: background-color,width,height,padding,font-size,color; -moz-transition-duration: 2s; -webkit-transition-property: background-color,width,height,padding,font-size,color; -webkit-transition-duration: 2s; -o-transition-property: background-color,width,height,padding,font-size,color; -o-transition-duration: 2s; }

/* with seven properties and delay */ #example3 { padding: 15px; background-color: #FF7CA6; font-size: 16px; width: 30%; font-weight: bold; color: #fff; height: 20px; -moz-transition-property: background-color,width,height,padding,font-size,color; -moz-transition-duration: 1s; -webkit-transition-property: background-color,width,height,padding,font-size,color; -webkit-transition-duration: 1s; -o-transition-property: background-color,width,height,padding,font-size,color; -o-transition-duration: 1s; } #example3:hover { background-color:#9c3; width: 60%; height: 60px; padding: 50px; font-size: 30px; color: #FFFF00; -moz-transition-property: background-color,width,height,padding,font-size,color; -moz-transition-duration: 2s; -webkit-transition-property: background-color,width,height,padding,font-size,color; -webkit-transition-duration: 2s; -o-transition-property: background-color,width,height,padding,font-size,color; -o-transition-duration: 2s; }

Example 4

Transition example

#example4 { padding: 15px; background: #9c3; color: #fff; font-size: 16px; width: 30%; font-weight: bold; transition: all 2s; -webkit-transition: all 2s; } #example4:hover { background:#FF7CA6; color: #242424; width: 60%; }

/* with all the properties simultaneously */ #example4 { padding: 15px; background-color: #9c3; color: #fff; font-size: 16px; width: 30%; font-weight: bold; transition: all 2s; -webkit-transition: all 2s; } #example4:hover { background-color: #FF7CA6; color: #242424; width: 60%; }

In this tutorial we will see how to add a photo next to the name of the author just below the post title. This feature can be used on Blogger blogs that have not only one author but also on blogs with multiple authors, so the info for each of the publisher will be shown below the titles of their respective posts and this way, they will get the proper credit for their work.

I strongly recommend to make a backup of your template before making any changes.

Adding the Author's Profile Picture / Avatar and Name in Blogger

Step 1. From the Blogger Dashboard, go to Template and click on the Edit HTML button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Paste the following code inside the search box and hit Enter to find it:

Just below this line, you should see the rest of code which should look something like this:

                                                                                                                                                                                                                                                                                                      Note: If you are using a modified template, it could look something like this:

Step 3. Now that you found the code, delete it. Pay attention that it should start and end with the tags marked in yellow. This code is repeated two times, so you need to replace it two times. Step 4. Next, search for this line (you'll find it twice and you should stop at the second one):

Step 5. Just below it, paste the following code:

                                                                                                                                                                Replace the AuthorName text with the EXACT name that appears on the Blogger profile, i.e., the one that appears in the posts or comments. If it is added in a different way, Blogger will not recognize the username, nor the image and the code will not work. To display the author's pic, add the URL of the author's Blogger profile and the image URL by replacing the text in blue. I recommend you to use an image with a maximum height of 40px and 40px wide. Once done, the photo of the author should appear next to the "posted by" text just below the post title. If you have a blog with more than one author, add a code like the one below, just above

If you have more than two authors, repeat this block of code for each author that you want to add. Step 6. Now let's go ahead and add the CSS styles - search for the ]]> tag and just above it, paste the following code:

.author img{ float: left; border: 1px solid #FFFFFF; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); margin: 0px 5px 10px 0px; width:35px; height:35px;  } .post-author{ color:#777; font-size: 13px; } .post-author a { color:#777;  margin-top: 10px; }

PageRank is an algorithm used by Google Search to rank websites in their search engine results. PageRank was named after Larry Page, one of the founders of Google. PageRank is a way of measuring the importance of website pages. According to Google:

"PageRank works by counting the number and quality of links to a page to determine a rough estimate of how important the website is. The underlying assumption is that more important websites are likely to receive more links from other websites."

Source: Wikipedia Briefly, the PageRank is an assessment of the importance of a web page. This relevance is calculated and published on a scale from 0 to 10. Google basically takes into account the number of links that each page receives, however, it's no use getting any links, it is important that these links are from quality sites which are related to your links, preferably internal links. A greater importance has the quantity of internal links, linked by other websites, which happens when you create a post and someone publishes the link that redirects to this posting that you created. Therefore, the more links your blog or site has, the higher is the probability of having a good PageRank.

Now that you understand what PageRank is, how about checking yours? You can easily calculate your PageRank and verify the importance of your page. Just enter the address of your website / blog below and check it out:

Check Page Rank of your Web site pages instantly:

This page rank checking tool is powered by Page Rank Checker service

The search engine optimization (SEO) is a good chance to promote your blog on Google search results and other search engines. For those who don't understand how SEO works, I've posted some articles on this blog that may help, but it's important to understand that there are good and bad techniques that could have a direct impact on your ranking. So, in this post I'll talk about the terms known to those who are familiar with SEO - the black and white hat - and we will get to know what's good and what is not when we think about optimizing our website and its content.

What is black hat seo?

From the 'SEO dictionary', the term black hat has to do with the abusive techniques that will force the search engines to look at a specific site and rank it. This might work at first, but the algorithms can already see some of these techniques that have become common for a fast result. Such practices to trick the search engines are, for example, the excessive use of keywords, especially in headings and subheadings; transparent keywords to the user - the so-called hidden text, automatically generated content, pages redirecting automatically to other content and more.

What is white hat seo?

It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to our blog/website and boost sharing stats is to add social sharing buttons. In this tutorial we will see how to add a floating social media sharing bar below the title of Blogger posts, so when a reader scrolls down the page, he will still be able to see the sharing buttons without having to scroll back to the top.

Adding the below jQuery script will make the buttons float in a fixed position as soon as they reach "the top" of the page. By scrolling back, the buttons will return to their initial position. The social sharing bar includes buttons for Facebook, Twitter, Google+, and Pinterest.

Adding the social media sharing buttons below every Blogger post title

Step 1. From the Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2. Click anywhere inside the code area and type the tag inside the search box. Step 3. Just above add this script:

//<![CDATA[ $(function() { var $movesbuttons = $("#floating-social-buttons"), $window = $(window), offset = $movesbuttons.offset(); $window.scroll(function() { if ($window.scrollTop() > offset.top) { $movesbuttons.css({'position' : 'fixed', 'width' : '<span style="color: #cc0000;"><b>550px', 'top' : '0px'}); } else { $movesbuttons.css({'position' : 'absolute', 'top' : 'auto'}); } }); }); //]]>

Step 4. Now before ]]> add the following CSS styles:

#floating-social-buttons { padding: 6px 0px 12px; position: absolute; background: #F6F6F6; border-bottom: 1px solid #DEDEDE; width: 550px; height: 18px; z-index: 99; } .floating-social-buttons { margin-left: 5px !important; } .floating-social-buttons li { float: left; margin-left: 5px; list-style:none; }

To change the width of the bar, modify the 550px values in red. Note that this value also appears in the script which also needs to be modified. Step 5. Finally, just below the second

(press CTRL + F and hit Enter twice to find the second one) add the following code:

Tweet

Pin It

Customization: If you want the buttons appear at the end of the post, paste this code before or after