Posts

Showing posts from October, 2013

How to Add a Tiny jQuery Circleslider to Blogger

Image
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 is 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...

Turn off the lights with jQuery

Image
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 visible 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 into your Blogger account and click on your blog, then 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, pas...

Before/After Photo Effect with jQuery

Image
If you have a design or makeup blog, or if you are using before and after image comparison , this script will most likely be useful for you. In this tutorial, you will see how to add the Before/After plugin , a script that works with jQuery in order to display two pictures dynamically for comparing them at the same time. To see how it works, click on the demo link from below and drag horizontally the small bar to 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" and click on the "Edit HTML" button. Once the template HTMK editor opens up, click anywhere inside the code area and press the CTRL + F keys to search for the following tag - hit Enter to find it: </head> Step 2. Right before </head> paste the following scripts: <script src='http://aja...

Spacegallery: image gallery/slideshow made with jQuery

Image
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 ...

Top three qualities of a successful blogger

Image
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...

Add Keyboard Keys Effect To Your Text in Blogger with CSS

Image
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-ra...

How to do natural SEO on Blogger

Image
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, anch...

How to Add a Recent Forum Topics Widget to Blogger

Image
If you are using the Nabble forum on your blog, you will most likely need this gadget as well in order to display the latest topics that have been published on the forum. This works similar to the recent comments gadget as it uses the Blogger blog's feed. To add the Recent Forum Topics widget to Blogger, follow the steps below: Adding Recent Forum Topics Widget Go to your forum and look at the bottom where it says Feeds . Clicking on that link, you will see two Feed links: the first being the Topics only Feed, and the other one is Topics and replies . Pick the one you need. Now, log into your Blogger Dashboard , go to "Layout" and look for the Sidebar section on the right side. Click on the "Add a Gadget" link and choose Feed from the gadgets list. Paste the Feed URL that you copied inside the text box. Click the "Continue" button to configure the parameters and finally, click "Save changes" to see the results. That's it... now you sh...

Add a forum on your Blogger blog with Nabble

Image
Forum is a platform where visitors can interact with each other and discuss different hot topics. There you can create various topics for getting comments or suggestions on them. If you have good traffic, then you can post questions on daily basis for the potential visitors to answer, thus your forum simultaneously converts itself into a huge frequently asked questions section (FAQ). Forums are a great way to provide your visitors an open social atmosphere to express their useful ideas and share others ideas as well. So, here are a few easy steps on how to add a forum to your Blogger or blogspot blog using Nabble: How to Create a Forum on Blogger With Nabble To add a forum we will use Nabble which is, in my opinion, one of the best free options available online. First, go to the Nabble page to create an account (keep in mind that this account will be the moderator of the forum). Once we have everything set, go to "Options" -> "Application" -> "Change app...

Top Commentators Widget with Avatars for Blogger

Image
The commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and replying to discussions which leads to more activity in the posts. It is therefore very important to know which are the most active users of your blog, the users who leave more comments, and for this reason, today I present a great method to display a list with the top commentators. The gadget will look something like this: This Top Commentators gadget comes with user's avatar and is done with JavaScript. How to Add the Top Commenters Gadget to Blogger 1. To add this gadget, you have to go to Layout , click on Add a Gadget link. 2. Select the HTML/JavaScript gadget and copy/paste within the empty box the following code: <style type="text/css"> .top-commentators { margin: 3px 0; border-bottom: 1px dotted #ccc; } .avatar-top-commentators { vertical-align:middle; border-radius: 30px; } .top-commentators .commenter-link-name { padding-left:0; } </sty...

Redirect Blogger 404 Error (Page Not Found) To Homepage

Image
A 404 error page tells you and search engines that a page is not found by displaying a text similar to "Sorry, the page you were looking for in this blog does not exist.". This may happen because you have changed your URLs over time, either removed a few pages when you overhauled your design, or a visitor may have accidentally misspelled an URL nonexistent in your blog, so it automatically redirects to the 404 error page (page not found). Most likely, this will not make a good impression on the potential users of our blog. So, before the visitor clicks the back button or close the window/browser's tab, thus leaving our site forever, we may want to redirect 404 error in Blogger to a page, so that the visitor will continue reading our blog. One of the most used methods is the " meta refresh " but the problem with this method is that it breaks navigation (doesn't allow to return back). In this case, the best method is to use JavaScript about which I will go in...

4 Alternatives to Google AdWords

Image
Many think that Google AdWords is the only tool dedicated and available to perform a study such as a keyword search, but it isn't so, today I refute this idea by collecting some alternatives that, although are not equal to Google AdWords, at least encourage us to make good keyword analysis for the SEO of our website. Going back a bit, for those unfamiliar with the main features and tools of Google AdWords, we can find a very simple interface yet complete in every sense. - AdWords appearance has changed, however there is a chance of returning to the old design; - allows you to place a phrase or keyword, a web site and use the categories; - for a better keywords search, you can apply filters such as location, language and add custom fields (competition, local or global monthly searches, CPC, Ad share, etc.); - displays keyword ideas in columns with the amount of local and global monthly searches and approximate CPC; - you can download keyword ideas, search results in a format to open...

How to Add Google Analytics to Blogger

Image
Google Analytics is a platform created with the purpose of helping us to track the number of visits and page views on our blog, which also uses several filters to check exactly from where the visitors are coming via standard or custom reports. Google Analytics is the leading free tool that has a good relationship with the internet marketing and offers suggestions and improvements or benefits for our website. As Analytics is part of the variety of Google tools like Blogger, many bloggers still don't know if it is possible to add the tracking code in Blogger. Implementing analytics in Blogger is very quick and easy, so you don't need to be experts or web developers. Here's a small guide for placing the Google Analytics tracking ID on our blog. Implementing Google Analytics on Blogger 1. Do you have a Google Analytics account? Then it's perfect. If you don't have one, please Register. 2. Within the account, we'll go to Admin and in the Property column, click...

How to Increase Alexa Ranking of your Blog

Image
The Alexa Rank in its time may have been pretty important for the SEO, however, these days is already losing its importance due to the changes in the algorithm that Google applies from time to time. The company displays information about visitors of a website, which in turn, classifies this in a ranking, generating estimated statistics about visitor traffic and links pointing to the website. In a few words, the Alexa Rank does not directly affect SEO , but rather serves as a reference for measuring the traffic type, popularity by country and other metrics. If you would like to enrich or have a good Alexa Rank of your website, here some ways to do it, with short-term results. 5 Ways to Increase the Alexa Rank Daily Content : Try to publish at least 2 articles per day and within a month you may start to see some changes in the Alexa ranking. Install Alexa Rank widgets : Besides notifying about the results of your Alexa ranking, they will also provide an estimate of how many backlinks you...

On-Page SEO Tips for Blogger

Image
We know that SEO Off Page refers to the search engine optimization techniques that can be done outside of your website, such as link wheels, reviews, social bookmarking, social media (references and followers), sidebar links, among other techniques. However, without a proper on-page seo optimization, all would sum up to a non-optimized webpage without quality, which will not reach the traffic expected to have. This is mostly because search engines (especially Google) pay much attention to the alt and title tags (for images), meta tags, internal links, robots and so on, in order to display the content of your web page to the user who made a specific query in the search. To never fall in this depression of search engine optimization, you can choose a good and reliable blog platform like Blogger. If you are working only on Blogger, here are some on-page optimization tips that might help you to become successful in the blogging world and increase the daily traffic to your blog. Basic On-Pa...