How to Use Character Entities in CSS, HTML and JavaScript

Sometimes, when using scripts, we must write special characters like accents by using a special set of codes called character entities, however these don't always look good or we get a question mark or other strange symbols. Usually, this is solved if the character encoding is done right but the logic may not always work.

In Blogger, special characters most of the time appear correctly, but when it is about other services, like external files, things can get complicated.

For example, this usually looks good and when you click on this link, you should see the letters in the right way:

alert(" � � � � �  ? ? ? ");

If we are trying to use other method and we want to use this type of characters, sometimes we need to write them in a special format called escape sequence which is nothing but a backslash followed by a letter and a number in hexadecimal format. In the case of common characters or accents, it would be \x followed by two hex digits:

\xe1 is the letter �
\xe9 is the letter �
\xed is the letter �
\xf3 is the letter �
\xfa is the letter �

Other combinations generate special characters:

\n is a line break
\t is the tab character
\' is single quote
\" is double quote
\\ is a back slash

Or we can use \u followed by the Unicode character code expressed as four hexadecimal digits:

\u00e1 is the letter �
\u00e9 is the letter �
\u00ed is the letter �
\u00f3 is the letter �
\u00fa is the letter �

this will allow us to see correctly what we couldn't before if we were using some other services:

alert(" \u263a \u2764 \u271b ");

On this page you can find a comprehensive list of all the characters, both symbols and different alphabets.
Although rare characters are not often used in the CSS, there is a case when they are necessary as well, like when using the content property with the :after and :before pseudo-elements.

The same criteria applies there, but we only need to add a backslash followed by the four-digit hexadecimal code. For example:

content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ":after  \263a  \2724  \2602";

:??????

:after ? ? ?

Remember that IE doesn't understand the :before pseudoclass with content, and you would have to set the list-style-type property as none, or you would get 2 bullets in CSS compliant browsers.

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is one way to make your site more interactive so that readers can "play" with certain elements of the page being able to drag from one side to another within the container in which they are, i.e. can drag the images with a script that will allow them to move from one place to another within the blog.

Demo

You can see an example in this test blog

To create this effect on images

Login to your Blogger account, go to Template and click the Edit HTML button:

Click anywhere inside the template's code and press the CTRL + F keys to search for this tag:

</head>

Just before </head> paste the following scripts:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.easydrag.js' type='text/javascript'/>

Note: If you already have jquery, please remove the code in red.

Now when you want to drag an image, use this code inside the HTML of your post or of your page:

<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>

Change the URL of the image where is indicated, and furthermore, it is important that each image has a unique ID, in this example the ID is called easeydrag1, that ID must be twice.

If you have another picture with this effect, then you should put a different image with other ID, for example easydrag2, otherwise it will not work:

<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
<img id="easydrag2" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
$(function(){ $("#easydrag2").easydrag();});
</script>

And how do you do if you want to put a link to the image?

We will set one Javascript function, so that when we will double click on it to open the page we want.

In this case, the code you would use, would be this:

<img id="easydrag1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('link-URL')" src="image-URL" /><script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>

With this the picture can be without any problems dragged around and can be activated by double clicking on its link.

Filter out your visits to your blog from Google Analytics traffic statistics

The results of daily visits in the web hit counters always have a margin of error. In most of them, this margin is very high, therefore the statistics shown are not even a bit closer to the actual visits we have. Google Analytics has a very short margin of error, which makes it more reliable, so that we have a better idea of how many people visit us.

However, if you visit your own website, either to check if everything works well, to review comments, to answer them, to see if anyone is online, or just because you need to enter, then your visit will also be registered in the counter. This implies that the margin of error is larger again, because those visits are not our actual visits and we are not interested in knowing how many times we are coming back to our site, but how many people from elsewhere are visiting.
Therefore what we can do is to filter our IP so that we won't be registered in the statistics and thus to get "cleaner" results on the total number of visits and page views.

1. The first thing is to find out what is your IP address. Just type "what is my ip address" on google and above all of the results it will say "Your public IP address is..." or you can use an online service that shows your IP. There are many of these sites, one of them being http://whatismyipaddress.com... just go to the site and it will automatically show your IP.
2. Login to your Google Analytics account and click Admin in the orage bar on the right side. This will take you to the account administration screen 
3. On the left is the Account section and below you'll find a tab called All Filters, just click the "+NEW FILTER" button.
4. Give the filter any name you'd like. Filter Type is "Predefined filter", "Exclude", choose "traffic from the IP addresses" and "that are equal to" then enter your four numbered IP address you looked up in step 1.  Check whether it's IPv6 or not (if you don't know leave it unchecked).
5. Save the changes.

Screenshot:

You can add as many IP as you want, depending on how many different computers you use to access your site. And that's it. Now you can browse your site without registering a click in the Google Analytics metrics.

Recent Rotating Post Gadget with Excerpt For Blogger

This Javascript code will display the latest posts of any feed with the distinction of having two parts that can be used individually or combined. At the top this widget will show a single post along with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us. At the bottom, we'll find a full list with chosen posts that will change the post above when we mouse over them, thus breaking the automatic cycle.

Before installing anything, let's see it in action to decide if it does what we want.

Loading...

How to Add Recent Rotating Posts Widget to Blogger

Step 1. Go to Layout > click on Add a Gadget link.

Step 2. From the pop-up windows, choose the HTML/Javascript gadget

Step 3. Paste this code inside the empty box:

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://helplogger.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Customizations:

The url in blue is the feed address. Obviously, the http://helplogger.blogspot.com address should be replaced with yours.

Next is start-index=1. This number indicates which post will appear first on the list. By default it is the latest post published on our blog, so if we want to begin displaying older posts, we need to change the 1 value.

max-results=10 indicates the maximum number of posts that we will be reading from the feed, beginning from the one that we have set up before in the start-index=1. This number always needs to be equal or greater to what we should see later and its purpose is to set the number of posts that will be shown in the gadget. The easy thing would be to put 500 in order not to fail, but the higher the number is, the longer the gadget will take to load, so it's better to adjust to what we need to show.

Finally here are some other parameters of the script:

title: 'Latest Posts', is the widget's title that appears on top.
numResults: 10, number of posts that will show in the list
displayTime: 5000, the delay time between posts in the rotator (in milliseconds)
hoverTime: 500, minimum time for an item in the list to be displayed at the top.

If you want to hide the list and show only the posts, then change this part:

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}

 to :

.gfg-list {
display:none;
}

and if you want to display only the list, then change this part:

.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

to:

.gfg-entry {
display: none; }

Step 4. Save the gadget and you're done. Enjoy!

Scriptaculous image slider/carousel for Blogger

Image galleries, sliders and slideshows have become increasingly popular within web pages and more and more developers have been creating these amazing powerful, versatile and sleek galleries. In this tutorial, I will show you how to display the relevant content in an attractive and usable manner, by adding this beautiful carousel slideshow made by Brian R. Miedlar which will display a gallery of images with a cool sliding effect.

If you need to see this carousel in action, please visit this demo blog.

How to Add the Scriptaculous Image Slider on Blogger

Step 1. Log in to your Blogger Dashboard and select your blog

Step 2. Go to Template and click the Edit HTML button:

Step 3. Click anywhere on the code area and press the CTRL + F keys, then search this tag:

</head>

Step 4. Just above the </head> tag, add this code:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>

<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/os.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/carousel.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/application.js' type='text/javascript'/>

Note: If you already have Scriptaculous and Prototype, it's not necessary adding the code in red.

Step 5. Now search for the following code (take a look at the screenshot for more details):

]]></b:skin>

Screenshot

Step 6. Just above it, add the code below:

.carousel {
position:relative;
clear:both;
left:20px; /* Distance from left */
margin-top:10px;
margin-bottom:20px;
border:2px solid #000; /* Carousel border */
background-color:#333333; /* Background color */
}
.carousel .navButton { cursor:pointer; display:block;
text-indent:-9999px;
background-repeat:none;
z-index:10;
}
.carousel .container {
position:absolute;
overflow:hidden;
}
.carousel .items {
position:absolute;  }
#Carousel2 {
height:88px; /* height of the container */
width:685px; /* width of the container */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* width of the images container */
height:100px; /* height of the images container */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* overall width of all the thumbnails */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglkTP50vpdinYA8EVMEay1hDdvTxvgQBsXZfyY6Q18kq0LU6dLmGecv-nuJ0B66m2cLBR-K9Kn7kvg1poWXFrV6TJ3udu-lUOCkekz88Im2GW5UtkLB8geQIEvsVq4HL-ZO8NZqjycUCU/s1600/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujSFjSztpsfEX5KxTGm2cau62vA3iTCuqSo71dSGY5U9cNVFtILykfae8d8qQbGbHC9ql8PJfHBvqlZWnyTqZpE8-l6K0CfP9jXcfqlJVklg8C6XvxQ6gobCPsHPDLG3bqqA4rnn7Jos/s1600/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}

Here, I have put some styles in green that can be customized as you want , such as the border color and the background color. The arrows are images, so if you want to change their color or use other pics, you have to change the two URLs in blue.
The width of the carousel is of 685px, so below the header might look good. If you want to change the length, then you need to change the /* width of the container */ (which is the size of the entire carousel), the /* width of the images container*/ (which is the area that shows the thumbnails) and the /* overall width of the thumbnails */ which is the actual width that all the thumbnails occupy.

Step 7. In order to save the changes, click the Save Template button

Step 8. Finally, go to Layout and click the Add a Gadget link, then choose HTML/Javascript from the pop-up box and paste the structure of the carousel inside the empty box:

<div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;">Back</div>
<div class="button navButton next" style="display:none;">Forward</div>
<div class="container">
<div class="items">

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

</div>
</div>
</div>

Add the links and images addresses. The link URL is optional, so you can add the addresses only when if you want to link the images to some posts.

If you add more images or remove some, you need also to change the width of the thumbnails, otherwise some pictures will appear behind the others.

If you want to add more pictures, just add before the </div> tag, a piece of code like this:

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

And in case you want to align the gadget, just change the part from Distance from the left to another value.

How to Write SEO Optimized Blog Posts

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

Obviously, not all scenarios are the same, 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; therefore, when it comes to web ranking, there's no specific time that applies for all. Having said this, let's get into the subject.

Focus on a topic

Whatever the topic of your blog is, when you try to write a seo optimized blog post, focus on a specific subject that has a clear purpose, with no distractions. For example, if you write about "Digital Cameras", then the beginning and ending of your 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 deviate from the topic.

Define the post title

The post title should be short and to the point, so that you can briefly summarize the content of the post, but you shouldn't abuse this either. Although it has to be concise, don't try to 'save' words which 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 2013

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

The keywords

Keywords are those terms that the most people are searching for on the internet and you should try focusing on them when writing a post; these keywords need to be included throughout the entire post, but be careful to not over-stuff keywords into your content.

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 paying attention to any terms. While, in the second one, we used phrases that are searched on the internet by the most users.

So, the most popular keywords should be included wisely without cluttering your posts with them, or it can be counterproductive.

Again, these keywords should be included in the posts title, as well.

Rely on synonyms

While it's a good strategy to use specific 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, we can avoid leaving the impression that we are being too 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. While, 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

A good practice when you write seo optimized blog posts, would be to make the keywords bold by wrapping them in strong tags, so that they will stand out from the rest. But keep in mind that 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 these three keywords are in bold, only one is more attractive to robots, which is the first:

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

The same goes for the italics. Use them for highlighting important words, but don't place them between font-style: italic; but rather between <i> or even better <em>.

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

Again, the first one has a better chance of ranking than the others. Thus, 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 External Links

Some may say 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 needed and especially with sites that talk about the same topics as our own.

Another important thing to mention is that, we should 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, but in the second it is.

Rank with your images

Posts with images are not only visually appealing, but might help the reader to understand what you are talking about. So, whenever you can, use an image in your post to illustrate the writing, but don't overdo it. 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 (actually, the last gets penalized). So try to write new stuff, even if you think that all has been said. Each person has a different way of saying things.

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

Final Words

With these few techniques you can increase the chances of ranking your posts higher in search engines. As I mentioned earlier, these aren't things that no one heard about, but I know that many are beginners and may not know how to write seo optimized blog posts.

It does not hurt repeating that the results won't appear overnight, but with some effort and patience, you should see the desired results over time.

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out. There is nothing complicated about using this type of carousel, however when it's about customizing it, we need to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.

To see it in action, please visit the below demo blog and just drag the red dot:

Tiny jQuery Circleslider Demo

Adding the Tiny CircleSlider to a Blogger Blog

In order to make it work, first task is to add the javascript jQuery library in the template:

Step 1. Log in to your Blogger account > select your blog

Step 2. Go to "Template" and hit the Edit HTML button:

Step 3. Click anywhere on the code area and search by using the CTRL + F keys for this tag:

</head>

Step 4. Just above the </head> tag, add the following scripts:

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

Please note that if you already have another version of jQuery, you will need to remove the line in red.

Step 5. Now, let's add the CSS styles above the same </head> tag:

<style>
  #rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRT2JTjj53eXgQiC7NmmoT5UQNaEy5HukzX0dirZdTqBMSkreTtvII3F3mkOqiQkNl_cMz-Mrbr4wKTLva7kyQQges2xk1B6tpmilo99Fjzby2R_ugsYmnlUrkCM23kMAxNVhImYq8b-qz/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKkAiknZuADnTDv2Sn_2b6cpCQT8_g8MNvd-S1Z6amlqrvHD8dq7FIvDWiWIf5K-pA6zUPQm2Fxv2ma9WO-tpcsN66RoIWDcTR4OdfE4S6nzItqwxaMAODln_PB_TqYQYMx3LKvHUREOV/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZjwBXOZm3BPATAtMdGxvtJ13_bHyD7Zyvy5YshMmAxsVKuvdehSzWztvtjvvZ9aHcxJLnBav16MppqupyslAN396zjiibLEXY_4TqbNu8bAL8QE6l89ydZXa3KzJRC765t5iYnyRXQGk/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* are hidden by default */
    display: none;
  }
 #rotatescroll .viewport ul.overview li img {
   width: 100%;
   min-height: 260px;
   margin-top: 20px;
   padding:0;
   border:0;
 }
</style>

Screenshot

Step 6. Save the changes by clicking the Save Template button

And here's the HTML that has to be added to where we want to display the carousel. To add it inside a post, click the "New post" button on the left side of your dashboard and paste the below code in the "HTML" box of your post:

<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({
interval: true,
snaptodots: true
});
});
</script>

Adding HTML inside a Blogger post

Replace the imageURL text with the URL of your images.

Some other options that could be added, separated by commas:
1) snaptodots: false if you want no dots to be shown when dragging them
2) hidedots: false if you want to display the internal points (by default is true)
3) intervaltime - is the time between slides (by default 3500)
4) radius - defines the size of the circle (by default is 140)

To add it to your sidebar, simply go to "Layout" > click the "Add a Gadget link" > from the popup window, choose "HTML/Javascript" and paste the code inside the empty box.

Turn off the lights with jQuery

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko. And what this script does? It will turn off the lights for you, so that everything on the page will be fading to dark, except the video, and everything around the video will be less visible, in a way that nothing will distract you while watching it.

You can test it on the following demo blog - click the link that says "Turn off the lights" and the page will be darkened. To make the page elements active again, just click the "Turn on the lights" link:

Turn Off the Lights DEMO

How to add the "Turn off the Lights" Feature to Blogger/Blogspot 

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

Step 2. Click anywhere inside the code area and search for the following tag by pressing the CTRL + F keys (hit Enter to find it)

</head>

Step 3. After you found it, paste the below scripts just above it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Note: if you already have one version of jquery in the template, please remove the line in red.

Step 4. Now search for the following tag:

]]></b:skin>

Step 5. Just above ]]></b:skin> add the following CSS:

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgbA1gti4pKNe6VGdTkkGUPZcPa97RT9GZ2qogI024vMGYOHUgV3H1006JSIS7rS5mK_WMDuyMeykOmdVoxZYx-0CsyQxQerGCbXA72mTYkL9BzHuVhnjdteFrSjMvdxIKkzLSY_37YsT/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTe46PM1ktPMxPFqV6Mqsv9206_-w-8iVXLF7g9NY_bO8qmYShnE0w15TsYcPfJyswV3DPZXijstaFWAYA20czmdMQFGzpWvXaeS27mmgZ2CYDr1Vu7Ug03d1IMvO_w1_MZ5-myi6fcNIr/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Step 6. Try to find this tag:

</body>

Just above the </body> tag, add this HTML code:

<div id='lightsoff'/>

Step 7. Click the "Save Template" button and that's it!

Now, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>

Add the code of your video instead of the blue text and "Save" or "Publish" your gadget / post. Now you can enjoy your videos with the lights off!

Remember that this trick uses jQuery and if you use another version of jQuery, you must check to have only one, otherwise it might now work.

Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will surely be very useful for you. In this tutorial, you will see how to add the Before/After plugin, a script that works with jQuery to display two pictures dynamically for comparing them at the same time.

To see it in action, please click on the demo link from below - by dragging sideways the small bar, you'll see both images that are being compared:

Before & After Demo

Implementing this script is really easy. We just need jQuery, the Before/After script, and the two images to compare.

How to add Before/After Effect on Blogger Images

Step 1. Go to Template > Edit HTML and click anywhere inside the code area. Now press the CTRL + F keys and search for the following tag - hit Enter to find it:

</head>

Step 2. Right before </head> paste the following scripts:

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

Step 3. Click the Save template button to save your changes.

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

Step 3. To add it as a gadget - go to "Layout" > click on the "Add a gadget" link > choose "HTML/Javascript" option in the pop-up window and paste this code inside the empty box:

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

Add the URL of the first image that is the "Before" image, and the URL of the second image that should be the "After" image. Also, don't forget to specify the width and height of each picture, so that they work on all browsers (see the part in orange and just add the height and width of your images).

If you want to add more images, you will need to change the ID of the container. In my example, the container is called beforeafter1, so you will need to change it to beforeafter2 and so on, although, you can choose any name as long as all are different.

Then, add another line, like the blue one from below, in the first code that you added in step 2:

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

You can add as many before/after images as you want, as long ass all containers have a different ID and the corresponding lines are added in the script.

Below each image /photo container are the "Show only Before" and "Show only after" links that, once you click on them, will display the "before" or "after" picture. If you want to hide these links, then just change "true" to "false" in the first code (step 2) and they will not be displayed anymore.

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

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

And change the #ffffff value to transparent. That's it!

Autor: Catch my fame

Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with Time Machine and those who don't, I'm sure will enjoy this type of effect for viewing images.

SpaceGallery is a JQuery based slideshow / image gallery that performs overlaying in a visually appealing manner and provides a smooth fade out effect to images. This 3D image gallery lets you float through your pictures easily by enlarging them with an Apple-like animation.

To see the SpaceGallery slideshow in action, please visit this demo blog and click on the first image:

Demo Blog

How to Add Spacegallery Image Slideshow to Blogger

To implement this gallery is very easy. Just follow the steps below:

Step 1. Log in to your Blogger account and select your blog. Next, go to Template and click the Edit HTML button:

Step 2. Click anywhere on the code area and search by using the CTRL + F keys for this tag

</head>

Step 3. Just before/above the </head> tag, paste the following scripts:

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

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

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

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

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

Step 4. Next, search (CTRL + F) for this tag:

]]></b:skin>

Step 5. Above the ]]></b:skin> tag, paste the following CSS style:

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

Step 6. Hit the Save template button to save the changes.

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

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

Replace the Image URL text with the image addresses that you want to appear on the gallery, considering that the last image is the first to be displayed.

If you want to add this slideshow inside a post, go to your dashboard and create a New Post, then paste the code in the HTML section.

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

Source: eyecon.ro

Top three qualities of a successful blogger

The qualities of a blogger should be attended at all times in order to become someone popular on the internet. A blogger should have plenty of ideas for creative writing, along with a truckload of motivation. The results sought will not come overnight and there's no guarantee that this will be easy.

These are the two things that you need in order to fulfill your dream of running a successful blog: a lot of exclusive content and readers' loyalty. In each case, time is required to develop the success. This is a process and not a short-term event.

Related: How to Write SEO Optimized Blog Posts

Top Qualities To Become a Successful Blogger

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

Patience

A successful blog is a product of time and effort and for this, you will need patience. As I said before, the results will not appear quickly overnight, so it is important to realize this from the start. If you are constantly trying to develop new and creative ideas for writing on your blog and, at the same time, you are worried whether you will see any results, this will only make things more difficult.

The building of a successful business online is a "long term" effort and you must decide if you accept this challenge or not. This is one the most important qualities of a blogger.

Credibility

Much of the traffic of any successful blog results from its unique content, as well as its credibility. In fact, the quality of what's in the site, will have a direct impact on what will become viral visitors that are coming to your platform. If you will provide quality content, people will talk about your blog, and once they do it, others may come to see what you have. It depends on you to publish useful and accurate information and your readers will do the rest.

Consistency

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

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

Add Keyboard Keys Effect To Your Text in Blogger with CSS

For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. There's an HTML element meant for marking up keyboard keys named <kbd> which can be styled with CSS, so why not use it to make those elements look the keyboard keys?

Thus, in this tutorial, I am going to show you how to create a keyboard keys effect with CSS. It doesn't require images so your blog will load faster.

How to Add Keyboard Keys to Blogger

Step 1. From Blogger Dashboard, select your blog and go to Template > Edit HTML

Step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code:

]]></b:skin>

Screenshot

Click on the arrow to expand the code

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

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

Step 4. To save the changes, press the Save change button.

Finally, we need to add the html <kbd> tags to the text on which we want to apply the keyboard keys style.
From your blogger's dashboard, go to create a New Post, write the text on which you want to apply the style and go to the HTML tab. Before and after the text, add the following HTML tags:

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

Screenshot

This will make it to look like this:

Ctrl + F

How to do natural SEO on Blogger

Although many insist that blogs hosted on free servers, such as Blogger, are not ideal for getting your blog well-ranked, the truth is that a blog hosted by Blogger can be really fast and well positioned on the Internet if you are using the right SEO tools.

Now, given the latest updates from Google, the best would be hiring a specialized person. However, if you don't have the resources or you want to learn doing this job alone, you can choose to begin with the natural SEO.

Here are some tips to do natural SEO (Search Engine Optimization).

Natural SEO Techniques for Blogger

Pick a Good Domain

We must try having our keyword included in the domain name, and even if this may sacrifice our branding, we can use the redirection.

Create Value Added Content

Not only rewrite articles, or write like they would be intended for us. When writing our posts, we should consider our target audience, i.e., giving advices, tips, suggestions or guidance on specific topics and aside, use links, anchor text and key phrases.

The topic of the links is important

They should be of quality and while, it's no longer required to place five or ten links within the text of your website, now what truly matters, is to make the link relevant to the context.

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

How often should you update your blog?

You don't have to do this on daily basis, even if this may be ideal as, this way, we could achieve a greater relevance in search engines. But don't forget about your blog either. Let's say, two or three times a week would be enough. What should not happen is updating only three times a week and doing nothing next week.

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

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

How to Add a Recent Forum Topics Widget to Blogger

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

If you want to add a list with the Recent Forum Topics then follow the steps below:

Go to your forum and look at the bottom where it says Feeds, click on that link and then two links of the Feed will appear (the first being the Topics only Feed and the other one is Topics and replies) - choose the one you want.

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

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

That's it! Enjoy :)