Audrino

Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com with some slight modifications so that it can be easily adapted to our Blogger template. In the upper right side of this menu, we have the contact links and social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, there is the drop-down navigation menu and on the left side, the search form. To achieve a 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 selector. Demo Adding the CSS dropdown navigation menu in Blogger Step 1. Access your Blogger Dashboard and go to "Template", then click on the "Edit HTML" button Step 2. Next, 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 Ent...

AddThis is the most complete social sharing service allowing you to share your posts in more than 270 different social networks. If you want to use the AddThis widget and get the AddThis sharing buttons, this tutorial will show you how to register and add this feature on your blog. Plus, 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 websi...

While browsing some sites, we can see 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 that you can see in the example below: Hover Over Me! This transition is achieved by using the CSS3 transition property - property which is supported in all major browsers such as 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 will it 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 hove...

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. Not only that this can give your blog that personal touch but attaching an image to your blog posts in Blogger can help visitors identify, and perhaps have a level of trust with you. Also, this could be a great addition to blogs with multiple authors, since the info for each 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 in 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 thi...

PageRank is an algorithm used by Google Search to rank websites in their search engine results. Page Rank was named after Larry Page, one of the founders of Google as a way of measuring the importance of website pages. What is Google PageRank and Why Is It Important 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." Briefly, the Page Rank 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 backlinks that each page receives, however, the number doesn't matter that much if we don't build high quality backlinks from sites which are related to our links, preferably internal links. A greater importance has the quantity of internal links linked by...

The search engine optimization (SEO) is a good way to promote your blog on Google search results and other search engines. For those who don't understand how SEO works, here you can find several SEO articles that might help you, but we need to be also aware of the good and bad SEO techniques that could have a direct impact on our ranking. This article will shed some light on the terms known as black hat and white hat SEO and we will get to know what's good and what is not when we optimize our website and its content. What is Black Hat SEO? From the 'SEO dictionary', the term black hat SEO 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 ...

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 or site 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 ...

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 a similar share button on Blogger with a really cool hover effect and 4 social media icons 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...

This tutorial will show you 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 Im...

Many times when we think about creating a blog , we tend to put many gadgets, although many are not necessary, or perhaps only a few of them. In order to add the gadgets that we want, we need to have enough space. A solution would be to use 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 user registration, but that doesn't mean 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 dashboard ...