Around 3200 Rss Feed readers​​ Already joined, Have you?
Showing posts with label Tools Blogging. Show all posts
Showing posts with label Tools Blogging. Show all posts

Add a Social Bookmarking Button to your Blog

Monday, June 06, 2011

In this tutorial you will learn how to add an Add This free Social Bookmarking button to your Blogger blog (Blogspot) blog. By adding this feature to your blog you will enable visitors to your blog to create links to popular social bookmarking sites such as Google, Technorati, Facebook, MySpace, Digg, Stumble Upon, Reddit, Delicious, Furl, Yahoo etc. Adding personal social bookmarks enables visitors to share these links with others thereby helping you attract more traffic to your site. For more information on the benefits of social bookmarking please refer to my article - Benefits of Social Bookmarking for Blogger bloggers.

add-this-share-buttonThis tutorial shows you how to place a social bookmarking button on your site by accessing a free social bookmark and feed button builder service called Add This. Add This will supply you with a simple piece of code which when placed in a widget will insert a social bookmarking button either at the end of each post or in the sidebar. If you wish you can add the social bookmarking button to both as I have done on this site. For those new to blogging don't worry if this sounds complicated as this article gives you step by step instructions suitable for any Blogger user including beginners.
How does an Add This Social Bookmarking Button Work?
The code from Add This places a button on your site which when clicked on by a visitor to your site opens a menu of the most popular social bookmarking services. When a selection is made by a visitor Delicious, Yahoo, Google, Facebook, MySpace, Stumble Upon they are given the option to submit your blog to their online bookmarks. Once a visitor submits your blog to a social bookmarking service Add This can provide you with useful analytics about bookmarks, feeds and emails depending on which buttons you enable on your site. This kind of statistical information from Add This will help you gain greater understanding of your site traffic and your most popular posts.
add-this-button-choices Now Steps for Adding a Social Bookmarking Button from Add This to Your Blogger Blog
1. Register for a free account with Add This

add-this-signup-screen
2. Once you supply a username, email address, password and your website address sign up is pretty much instanteous.

3. After sign up is confirmed click on Get Your Button. This will take you to the Create Your Button Page.
add-this-button-screen
4. On the Create Your Button page you will be asked to make some selections about your social bookmarking button.

What kind of Button? Select Sharing/bookmarking button

What Look? Choose any of the six button choices. For this example I am going to select the share button

add-this-share-radio-button-option
Where? Select on a blog

Blogger Platform? Select Blogger

At this point the information your have entered should look like the picture below:
add-this-button-screen
Once you have confirmed that you have entered the correct information click on the Get Your Code button and you will be taken to the Get Your Code page.

5. From the Get Your Code page you will be given the option to Preview your button. Do so if you wish or move on to Step 6.

Having generated the code for your Add This Social Bookmarking button you now need to decide where to position it on your blog.
You may either place your new Social Bookmarking Button beneath each post (see below) or in a sidebar.

Instructions for Placing a Social Bookmarking Button Beneath Each Post of Your Blogger Blog


Click on Blog Post Button option.

Highlight the Javascript code supplied by Add This
Copy the code to the Clipboard of your computer using Ctrl + C command


In a new window open your Blogger Blog and sign in
Navigate to Layout > Edit HTML


As a precaution Backup your template in case you inadvertently overwrite some code.

Once you have backed up place a tick in the Expand Widget Templates checkbox

Use the Ctrl + F command to open the toolbar which will appear at the bottom of your page while using Blogger. You can close this at any time using the Ctrl + F command or by clicking on the blue cross in the lefthand corner.

Now highlight the following line of code and using the Ctrl + C command copy and paste the code into the Search Box on the toolbar at the bottom of Blogger.
This action will quickly locate the code for you in your Blogger template. You will be placing the code immediately before this tag.

Return to Add This and highlight the Javascript button code supplied. Copy the code to your clipboard using the Ctrl + C command.

Reopen the Blogger window and place the cursor right before the tag that you located earlier.

Paste the Javascript code from Add This into the template using the Ctrl + V command.
Your code placement should look like that pictured below
share-button-code
Click on Save Template
Now click on View Blog from the top menu and navigate to the end of your first post. If all instructions have been followed you will now have a social bookmarking button at the bottom of each post.

Instructions for Placing a Social Bookmarking Button in a Sidebar of Your Blogger Blog

Follow the Add This automated process by clicking on Add the Menu to My Blog button. This will place an Add This social bookmarking button in a widget in your sidebar as you see on this site.
sidebar-bookmark-button
This Blogger tutorial has covered the steps involved in adding a free Add This Social Bookmarking Button to your Blogger blog (Blogspot blog). Grow your Blogger (Blogspot) blog today by adding a free Add This social bookmarking button which will enable visitors to bookmark your site and share your posts with others.
Read More - Add a Social Bookmarking Button to your Blog

Optimization blog with Google Page Speed ​​and Yahoo! YSlow

Wednesday, May 11, 2011

This post is a continuation of my previous writings about the subject of 15 How To Optimize Blog To Appear Faster, create a who already read please continue reading this article, if not .. please read first, due for discussion this time we directly analyze practice using the tools, and article I wrote earlier that as the handle will not just let any sort confused if a page must be optimized.

Optimization of this time is actually aimed at reducing the error message when the browser for rendering on a page. The logic is that fewer and fewer mistakes would be the better because this will reduce the heavy work of the browser or at least we try to save on bandwidth usage.

Google Page Speed 

For the first optimization tools, I usually use Google Page Speed, but because these tools are made by directly from Google, these tools also provide fairly complete information about reporting errors on the page. Each of our blog page automatically analyzes will be reported into the table lists. Page Speed ​​will determine and inform you in detail what errors are found, other than an error message, there is also in informing the message of truth, which means found some page elements that do not need to be repaired because it was considered correct. 

The page is finished analyzed Google Page Speed ​​usually be given a value (score). Value best score is 100, remember! not easy to reach a value of 100, my advice is sufficient to reach a score of 80-90/100, even this has been spelled out pretty good numbers.

So how to fix the error?

Any error messages displayed in the list are all of course have no solution, say the message is displaying "Remove unused CSS" which means we are asked to dispose of unused CSS code. Please click the link that displays the error, Google will automatically provide the best solution to resolve the issue. Well, we just learned it the task instructions and tips on optimization from Google.

Yahoo! YSlow
 
Google Page Speed ​​In addition there is one more tool that I usually use that is Yahoo! YSlow. Options on YSlow because I realize this tool is developed by Yahoo, of course accuracy diragunakan not need anymore. Actual workings from YSlow information report errors and breast bengeknya almost the same as Google Page Speed, they both provide information on repairs and of course how to handle errors. Mecolok difference lies in the provision of Value page, if Google Page Speed ​​based on the Score, Yahoo's YSlow Grade AF itself based on where the value of Grade A is the best value and Grade F is the worst value. Like I said above would be very difficult to achieve a perfect score, my suggestion is among Grade BC only.

Well, now it's up to colleagues just choose from the two tools above, both are equally good. Save me choose one only, because the two tools above certainly gives a different score value.

How To Install: 

Before attempting the second above confirm Peer Tools already installed firefox plugin for Firebug, ok! if so, please install plugin for Google Page Speed ​​and Yahoo YSlow.
Read More - Optimization blog with Google Page Speed ​​and Yahoo! YSlow