Posts

Showing posts from February, 2014

Share Blog Posts in Social Media using AddThis

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

CSS3 Transition Property Basics

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

Add Author's Profile Picture and Name in Multi Author Blog

Image
In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make your blog not only look more personal but attaching an image to your blog posts in Blogger can help visitors identify, and perhaps gain a level of trust with you. Also, this could be a great addition to blogs with multiple authors, since 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. Related: How to Add or Invite Multiple Authors on Blogger Adding the Author's Profile Picture / Avatar and Name in Blogger Step 1. From the Blogger Dashboard , go to "Template" and click 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, then hit Enter to find it: <span class='post-author vcard'> Just below ...

PageRank Checker - Check Your Google Page Rank

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

The difference between white hat SEO and black hat SEO

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

Add floating social media sharing buttons below Blogger post titles

Image
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 . Social Media Sharing Buttons below 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 press the CTRL + F keys to open the search box. Typ...

Add A CSS Animated Share Button on Blogger

Image
I saw this on Paulund , a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop small utilities, all of these being applicable to web design. In this tutorial we will see how we can add as similar button with a really cool hover effect and four social media icons on Blogger with links to share the current page on Facebook, Twitter, Google+ and Pinterest. However, we can replace these social networks later with any other just by changing the links below. Demo Share t his page Creating A CSS Animated Share Button Step 1. From your Blogger dashboard > 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 blogger search box. Type or paste the ]]></b:skin> tag and hit Enter to find it. Step 3. Just above ]]></b:skin> add this CS...

Orbit - jQuery Image Slider Plugin For Blogger

Image
In this tutorial, you will see how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider, called Orbit, is a lightweight jQuery plugin that will display multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some small bullet icons indicating the current image that we are viewing and, on the upper right side, is the pause option and a timer letting us know when the next image will be displayed. If you want to see this cool image slider in action, please visit this demo blog: Demo Blog Related: Photo Gallery with Thumbnails using Javascript and CSS Spacegallery: A jQuery Time Machine-like Slideshow/Image Gallery Image Slider that Displays Pictures on Mouse Hover using only CSS The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the span tags of these images. How to Add the Orbit...

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Image
Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing menu that is hidden and expands when the user clicks on it. Originally, this plugin called Sliding Login Panel was created so that users could register on the site, but as we know, in Blogger we don't have the option to add a user registration, however, that doesn't mean that we can't take advantage of this plugin and use it to add other elements, such as a menu, search box, social icons, feed subscription etc. You can find a demo of this panel in this blog - just click on the Open menu link on the top. Adding the jQuery Expand/Collapse Slider Panel to Blogger This sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below the <head> tag: Step 1. From your Blogger dashboar...