Magazine Web Design: April 2012

Sabtu, 28 April 2012

Google Translate Widget with Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language.
This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese.

google translate for blogger, blogger gadgets, blogger tricks

How To Add The Google Translate Widget To Blogger

Step 1. Go to your Blogger Dashboard >> Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3. Paste the code below in the empty box:

Step 4. Now click on Save

google translate, blogger widgets, gadgets for blogspot

And you're done! Enjoy (:

Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links.

What you can do with this widget:

display post titles only
change the number of posts
change the number of characters of the post snippet/excerpt
show the post dates

See the screenshot below:

How to add Recent Posts Widget to Blogger

Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Step 4.

Change 5 (option 1) and 10 (option 2) with the number of posts you want to display.
Change false to true if you want the posts dates to appear
Change 100 (option 1) if you want more characters to be displayed.
To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
To change the style of posts summary, modify the values in green (color) and orange (font size)
Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

Step 5. Save your widget. And that's it! Enjoy!

If you need any help, leave a comment below.
And if you liked this post, please consider sharing it. Thanks.

Jumat, 27 April 2012

European Google Analytics User Conference in Belgium, Sweden and Spain

We’re excited to announce 3 upcoming Google Analytics User Conferences in Europe. The first will be in Brussels on May 3rd, the second will be in Stockholm on May 8th and the third will be in Barcelona on May 10th.

You can find further information, such as the agenda and speakers, on the links below. In our experience these events quickly sell out. So act fast if you want to take part, otherwise it is possible that you have to wait another year for the next event!

Key benefits of attending a Google Analytics User Conference:

Meet members of the Google Analytics team, experts, and other users like you
Learn through tangible examples how to measurably impact your business
Find out how others solve the challenges you are facing today
Have your business questions addressed by Google and Google Analytics Certified Partners

Brussels:

View the full agenda and register at www.gabc.be.

This is the first Belgian User Conference! You will get to hear from some of our local Belgian Partners as well as Google speakers. Topics will range from learning how to take action using diverse data sets, creating tailor made dashboards, how to optimize your ROI with advanced campaign tracking, to measuring the value of social analytics.

Stockholm:

View the full agenda and register at www.analyticsconference.se

This is the second Google Analytics User Conference in Sweden. You’ll learn from national and international Google Analytics specialists to use the tool for maximum impact. You will meet speakers from Google as well as speakers from Google Analytics Certified Partners such as inUse Insights, Klikki, iProspect, Guava, and Relevant Traffic.

Barcelona:

View the full agenda and register at www.googleanalyticsconference.es

Building on the successful User Conference last year in Madrid, some of our Spanish partners have decided to do the same in Barcelona! Meet and share your experiences with other users of the tool, experts in the field of Analytics, and of course meet the Google speakers. Make sure not to miss the hands-on workshops that are being offered!

User Conferences are part of a global series of events hosted by Google Analytics Certified Partners. This series brings together Partners from each region to present content that is relevant to local Google Analytics users.

We look forward to seeing you there!

Posted by Jon Day, Google Analytics team

Kamis, 26 April 2012

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.

Steps Adding the jQuery Drop-Down menu

Step 1. Go to Dashboard - Template - Edit HTML - Proceed

Step 2. Expand Widget Template (make a backup)

Step 3. Search for the following code:

]]></b:skin>

Step 4. Add the following CSS code before/above it:

#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 5. Now find this piece of code:

</head>

Step 6. Add this code immediately before/ABOVE it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Step 7. Click on Save Template button.

Step 8. Go to Layout > click on "Add a gadget" link

Step 9. Choose HTML/JavaScript from the pop-up window

Step 10. Paste the following code in the empty box:

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>

Note :

You must change links titles and replace the # symbol with the URL address of each of your links

Step 11. Click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Template > Edit HTML and search (CTRL + F) for this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

You should change 1 with 3 and no with yes like this:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Save the Template.

Next thing to do is to go to Layout and drag your menu immediately below your header

Then click on Save Arrangement

Here you can see the DEMO.

Enjoy! :)

Selasa, 24 April 2012

Codecademy

Please finish the Flash Replication project first.

Today will start working on learning Java Script using the website Codecademy. Java Script is a modern code that runs a lot of technology including websites, computers, and apps. This is how you will learn how to program your robot. It is important to learn.

I'll be doing it along with you! I've forgotten Java Script and I think its time to relearn using this new site. We can help each other.

I would like you to create an account on the site. This way we can keep track of your progress.

Some of you will really get into this. After we get the basics down we will have a project option to develop computer programs and apps.

More ways to measure your website's performance with User Timings

As part of our mission to make the web faster, Google Analytics provides Site Speed reports to analyze your site’s page load times. To help you measure and diagnose the speed of your pages in a finer grain, we’re happy to extend the collection of Site Speed reports in Google Analytics with User Timings.

With User Timings, you can track and visualize user defined custom timings about websites. The report shows the execution speed or load time of any discrete hit, event, or user interaction that you want to track. This can include measuring how quickly specific images and/or resources load, how long it takes for your site to respond to specific button clicks, timings for AJAX actions before and after onLoad event, etc. User timings will not alter your pageview count, hence, makes it the preferred method for tracking a variety of timings for actions in your site.

To collect User Timings data, you'll need to add JavaScript timing code to the interactions you want to track using the new _trackTiming API included in ga.js (version 5.2.6+) for reporting custom timings. This API allows you to track timings of visitor actions that don't correspond directly to pageviews (like Event Tracking). User timings are defined using a set of Categories, Variables, and optional Labels for better organization. You can create various categories and track several timings for each of these categories. Please refer to the developers guide for more details about the _trackTiming API.

Here are some sample use cases for User Timings

To track timings for AJAX actions before and after onLoad event.
A site can have their own definition of “User Perceived Load Time”, which can be recorded and tracked with user timings. As an example, news websites can record time for showing the above fold content as their main metric instead of onLoad time.
Detailed performance measurement and optimization of sub components on a page, such as time to load all images, CSS or Javascript, download PDF files and time it takes to upload a file.

Want to check out User Timings Report in your account?
Go to the content section and click the User Timings report under Content section. There are three tabs within the User Timings report for you to review: Explorer, Performance, & Map Overlay. Each provides a slightly different view of user timings reported.

The Explorer tab on the User Timings report shows the following metrics by Timing Category, Timing Variable, or Timing Label (all of which you define in your timing code).

Avg. User Timing—the average amount of time (in seconds) it takes for the timed code to execute
User Timing Sample—the number of samples taken

The Explorer tab also provides controls that you can use to change the tabular data. For example, you can choose a secondary dimension—such as browser— to get an idea of how speed changes by browser.

To learn more about which timings are most common for user timings, switch to the Performance tab. This tab shows timing buckets, providing you with more insight into how speed can vary for user reported timings for selected category, variable and label combinations. You may switch to Performance tab at any point of navigation in the Explorer tab, such as after drilling down on a specific category and variable, to visualize distribution of user reported timings. The bucket boundaries for histograms in Performance Tab are chosen to be flexible so that users can analyze data at low values ranging from 10 milliseconds granularity to 1 minute granularity with addition of sub-bucketing for further analysis.

The Map Overlay tab provides a view of your site speed experienced by users in different geographical regions (cities, countries, continents).

- Satish Kambala & Mustafa M. Tikir, Google Analytics team

Senin, 23 April 2012

5 rules for social media

5 rules for social media:

License Some rights reserved by Mister Norris

some ways to get free backlinks from high page rank sites

ways to get free backlink from high page rank sites is to submit your best articles to these articles directory. Your backlinks from high PR sites will drive slowly your blog traffic and Serp.

How to get free backlink from high page rank sites
One of ways to get free backlink from high page rank sites is to submit your best articles to these articles directory. Your backlinks from high PR sites will drive slowly your blog traffic and Serp.These are the lists of article directories. Note, You just submit one article to a directory do not resubmit to other directories.

GoArticles (PR6) register and go to member button and add your blog Url. Article Dashboard (PR5) – Sign up for a free account or look at the link at the top of the right hand column. The Free Library (PR6) – click on the red “Submit Articles Free” link in the top right hand corner and complete the form.

make money writing online

Freelance writing is not for all. One who is do not like writing is impossible to take this job even if you work hard on it. You also need to learn writing strategies and standard writing. On the other side, if you enjoy writing job then freelancing is a great way to make money fast and free on the internet.

When you look for sites for publishing your articles you have to look for information and make comparison of the reward so that you can calculate how much you will earn.There are some sites that give you up front payment like Factoidz and that give you passive income from internet like Triond, Bukisa, Wikinut and Helium. There are many other sites that give you opportunity to make money as freelance writer. read more

Theory of Steinberg in children development

Steinberg ( 1982) succeeded in his experiment to teach young children between 1,0 and 4,0 to read. He placed five principles of teaching young children to read. Here they are.
1. Reading is not writing. Children can learn to read even though they can write.
2. Reading must be fun for children.
3. Children read words, phrases, sentences that have meaning.
4. Children do not learn to speak but they learn to read. Their competence in understanding verbal language becomes the foundation of learning to read.
5. Teaching to read is not teaching grammar and vocabularies.
Steinberg created programs to teach young children to read based on those five principles.
1. Children must get used to listening, uttering, and reading words. This stage has a goal to make children recognize written words. Children also can distinguish between oral words and written words. They will know the symbols of the words. You can try to put on to words on the wall ” Father and Mother”. You start to teach the sound of those two words. Children will know the difference then you say a word ” father” and ask your young child to point to the word father on the wall. It is nor surprising if your young child can point correctly. The more words you give the more words your children remember.
2. Children recognize words. You’d better put on pictures together with the written names of the pictures.
By seeing the pictures and the words your children will recognize letters or
symbols of the sound. read more

Using Google Analytics Social Reports To Measure Your Website Content And Engagement in Google+

The following is a guest post contributed by Daniel Waisberg, Owner of Conversion Journey, a Google Analytics Certified Partner, and Founder of Online Behavior, a Marketing Measurement and Optimization portal.

Google Analytics has recently launched a new set of reports called Social reports, which can be used to analyze on-site and off-site interactions with social networks in reference to your own website content. The reports’ ultimate goal is to enable brands to measure the return on investment for social media activities and make more accurate, data-driven decisions about social.

The most significant change that it brings to the game is we are now able to better tie social activities (on and off-site) to online behavior and revenue. This is especially accentuated for the Social Data Hub Partners, a group of networks that use the platform provided by Google Analytics; for all these networks we can learn deep information about off-site behavior.

I have recently written a guide to Google+ Analytics, where I discussed how to use Google Analytics in order to understand Google+ on-site interactions (e.g. +1 button clicks) and off-site interactions (e.g. comments, posts, shares that happened on Google+). In this post I will recap the main points of that guide and add actionable tips that will help marketers and analysts use these reports effectively.

Setting Up Goals - First Step to Social Media Measurement

Before using the Social reports, it is essential to configure your website goals on Google Analytics, otherwise the reports won't be as useful (here is a step-by-step guide). Thomas Carlyle wrote: "A man without a goal is like a ship without a rudder." The same is true for Google Analytics accounts: if a goal is not configured, the stats will not help improving the performance of websites, no matter how good the reports are.

Google+ Social Referral Traffic - Quantity and Quality

According to Google Analytics, the Social Sources report, the first in the list of Social reports, is described as follows:

The Sources report shows engagement metrics (Pageviews, Avg. Time on Site, Pages/Visit) for traffic from each social network. This report is also enhanced with off-site data for Social Data Hub partner networks. Click on a partner network to see the URLs that were shared on that site, how they were shared (for example, via a "+1" or "reshare" action), and the public conversations that took place about your content.

In this report we will see the number of visitors that came through Google+, the number of pageviews that they saw, time on site and number of pages per visit. Nothing surprising. However, since Google+ is part of the Social Data Hub, we can click through to get more detailed data on what kinds of interactions happened off-site, i.e. on plus.google.com.

As you will see, when clicking through to the Google+ row (see screenshot above) we will have two reports on the Social Referral tab: Google+ Shared URL and Google+ Social Network and Action (the tabs can be found above the graph, and the reports below the graph).

Google+ Shared URL

The Google+ Shared URL report shows which URLs were shared in Google+ and what traffic they drove. It will also provide a Data Hub Activities metric, which tells how many interactions they drove on Google+ including: +1, post, comment and reshare.

Actionable Tip: use this report to find out which content drives the most social activity on Google+. Based on that, you might consider increasing the exposure of this content on prominent website real estate.

Google+ Social Network and Action

If you click on the link to Social Network and Action (see arrow above), you will be able to see all interactions performed on Google+, segmented by action type.

Google+ Conversations - Activity Stream

Moving over to real interactions with real people, Activity Streams allow us to see the conversations as they happened inside Google+ (for activities that have occurred publicly). The conversations are organized starting from the newest and we can do the following actions for each conversation:

Page Analytics: leads to more information regarding traffic that was resulted from the post.
View Ripple: leads to the post Ripple, an interactive visualization of the public shares of the post
View Page: leads to the website page that was shared
View Activity: leads to the actual publicly-shared post on Google+

Actionable Tip: use this report to discover people that are evangelizing your brand on Google+ and interact with them. Once you find those people, create a circle with them (call it "Evangelists") and start interacting with them in an ongoing basis.

Google+ Conversion Rates - Assisted vs. Last Interaction Analysis

This report uses the same functionality as the Multi-Channel Funnels reports. It provides both the last touch interaction value (i.e. conversions that happened in a visit attributed to Google+) and also the assisted value (i.e. conversions that happened in a visit following the visit from Google+). Above is a screenshot of how it looks and the explanation given by Google about the metrics in the chart.

Assisted Conversions and Assisted Conversion Value: This is the number (and monetary value) of sales and conversions the social network assisted. An assist occurs when someone visits your site, leaves without converting, but returns later to convert during a subsequent visit. The higher these numbers, the more important the assist role of the social network.

Last Interaction Conversions and Last Interaction Conversion Value: This is the number (and monetary value) of last click sales and conversions. When someone visits your site and converts, the visit is considered a last click. The higher these numbers, the more important the social network’s role in driving completion of sales and conversions.

Assisted/Last Interaction Conversions: This ratio summarizes the social network’s overall role. A value close to 0 indicates that the social network functioned primarily in a last click capacity. A value close to 1 indicates that the social network functioned equally in an assist and a last click capacity. The more this value exceeds 1, the more the social network functioned in an assist capacity.

Actionable Tip: use this report to understand where in the buying cycle is your Social Media traffic. This may help you understand which kind of offers will be most effective on Social Networks.

Google+ Social Plugin - On-site Interactions

The Social Plugins report provides an account of the social actions that happened inside the website and in which pages they occur. +1 buttons spread in the website content will be available in this report automagically (for other social buttons, coding is required).

Actionable Tip: use this report to understand which content is being +1'ed in-site. This will help you optimize the position of +1 buttons to increase exposure through Google+.

Google+ Visitors Flow

This report uses the same functionality used in the flow visualization report released by Google in 2011. Basically, it provides the path through which visitors experienced the website. In this report we will be able to segment just by visits originating from Google+. You can find the report at http://onbe.co/GXYQMN

Actionable Tip: use this report to understand how well optimized your site is for social traffic. If you find a page that is receiving large amounts of social traffic and is not persuading visitors to click-through (i.e. high drop rate), you might consider testing that page.

Concluding Thoughts

As seen above, Google Analytics has created robust tracking and analysis abilities for Google+, which puts Google+ in an excellent position when it comes to other Social Networks. In general, many other social sites don’t provide detailed metrics into what happens inside their walls, which makes investments less measurable. If marketers can easily measure how well each social networks perform, more resources might be devoted to them.

Posted by Daniel Waisberg, Conversion Journey

Flash Replication Project

Create/name a folder. Call it first initial last name flash (bschneiderFlash)

Set up a basic HTML page. Name it "home". Title it "Awesome Flash Animations".
Be sure all your items are in the same folder.
Embed a shiny headline into the webpage. When you create the movie be sure the canvas is the correct size (long and thin)

Center it
Use the <embed src="shiny text.swf" align=center> command to embed the movie title. Note that you are embedding the Movie, not the Flash file.

Create two Flash Animations

Stick Figure I give you direction for this.
Flowers I don't give you directions for this. Solve the puzzle!

Put the two animations in a 1 row table. You may need to play with the height/width of the movies.

<Table align="center" border="1">
<TR>
<TD><embed src="stick.swf"></TD>
<TD><embed src="flower.swf"></TD>
</TR>

All of the tutorials (text, stick, flower) I encourage you to be creative. Feel free to stick to the script, but once you "get it" I would like to see you take it to the next level.

Copy your folder to the UDrive.

Jumat, 20 April 2012

Webinar: Marketing Attribution: Insights from Google Analytics and Econsultancy

Please join us next Thursday for a webinar on marketing attribution featuring Bill Kee, our Product Manager for Attribution, and Stefan Tornquist, VP for Research at Econsultancy.

Stefan will talk about insights from the recent Attribution whitepaper by Econsultancy and Google Analytics, and Bill will discuss Google’s approach to attribution and some of the tools we offer, including Search Funnels in AdWords and Multi-Channel Funnels in Google Analytics. Plus, he’ll demo the Attribution Modeling Tool in Google Analytics Premium.

We'll also provide a few tips for how to get started with attribution. This webinar will be the first in a series on attribution -- so please stay tuned for future installments!

Date: Thursday, April 26
Time: 10:00am PT / 1:00pm ET
Click here to register

We hope you’ll be able to join the live webinar, but for those who can’t make it, we’ll be sharing a recording after the event.

Posted by Sara Jablon Moked, Product Marketing Manager, Conversion and Attribution

Kamis, 19 April 2012

Global Site Speed Overview: How Fast Are Websites Around The World?

At Google, we are passionate about speed and making the web faster, and from first hand experience, we are glad to see that many website owners share the same goal. A faster web is better for both users and businesses - faster pages lead to better user experience and improved conversions.

The first step in optimizing any process is to establish and obtain an accurate set of measurement data. In the context of optimizing the user experience on the web, it means that we need to measure the speed of a page as seen by your real users: users network, device type and speed, geographic location, cache sizes, and a dozen other factors all come into play.

Luckily, the Site Speed reports in Google Analytics provide most of this data to us already. The new Web Timing standard, which is already implemented by most modern browsers, allows Google Analytics to gather detailed latency data for a sample of requests across a dozen different dimensions. To see this data for your site, navigate to your Google Analytics account and look for the new “Site Speed” reports under the “Content” section - there is no additional instrumentation required on your behalf. This article describes the details about the speed metrics.

A frequently asked question we hear is: how do I know if my site is fast enough? The answer, of course, depends on the nature of the site, the content, and the type of interactions your users perform on the site. However, to help us establish a baseline, let us take a look at some aggregate speed data for the web as seen by Google Analytics and shared by opted-in web publishers:

Mobile internet is growing at an incredible rate and as we can see from the data above, mobile experience is about 1.5x slower than desktop experience. That’s a very big difference, and that is even taking into account that many popular sites are already optimizing for the mobile visitor: fewer resources, smaller resources, and smarter caching strategies.

Let’s take a closer look at web performance for a few specific countries:

The following interactive world map presents the page load times for desktop in seconds for the complete list of countries with enough samples for accurate measurement:

The following map presents the corresponding data for mobile.

Note that there are many factors that play a role in overall speed of web pages as experienced by users. The browser, the network connection, the client hardware (processing power), the content of the web page, and the hosting location of the web site relative to the user all impact the speed of an individual page load. As a result, the country aggregates listed above depend on all those factors as well.

Finally, let’s take a look at relative page speeds across some of the popular verticals:

How does your site stack up?

Posted by Arvind Jain, Mustafa M. Tikir and Ilya Grigorik, Google Analytics team

Rabu, 18 April 2012

How to Add Emoticons/Smileys in Blogger Comments

Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. This tutorial will show you some simple steps on how to add some very cute emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together.

Now available for threaded commenting system too!

emoticons in blogger, kolobok smileys, threaded comments

DEMO

How To Add Kolobok Smileys In Blogger Comments

Step 1. Go to Dashboard - Template - Edit HTML - Proceed

Step 2. Expand Widget Template (make a backup)

Step 3. Search (CTRL + F) for this tag:

</body>

Step 4. Copy and paste just above it, this code:

For previous commenting system (comments without reply option)

<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>

For threaded commenting system (comments with reply option)

<script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/>

Note: ignore steps 5-8 if you are using threaded comments!

Step 5. Now find this code snippet:

<b:loop values='data:post.comments' var='comment'>

Step 6. Paste the following code just above it:

<div id='smileys'>

Step 7. Find the following code (look carefully, it should be somewhere below the code from step 5)

</b:loop>

Step 8. Paste the following tag just after it:

</div>

Step 9. Now find this code:

For previous commenting system:

<data:blogTeamBlogMessage/>

Note: if you'll find it like 4 times, stop to the 2nd one!

For threaded commenting system:

<div class='post-footer-line post-footer-line-3'>

Step 10. And add this code just after it:

<b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/>:)
<img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/>:(
<img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/>:))
<img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/>:((
<img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/>=))
<img src='http://1.bp.blogspot.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif'/>=D>
<img src='http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif'/>:D
<img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/>:P
<img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/>:-O
<img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/>:-?
<img src='http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif'/>:-SS
<img src='http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif'/>:-f
<img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/>d(
<img src='http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif'/>:-*
<img src='http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif'/>b-(
<img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/>h-(
<img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/>g-)
<img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/>5-p
<img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/>y-)
<img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/>c-)
<img src='http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif'/>s-)
<img src='http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif'/>d-)
<img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/>w-)
<img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/>:-h
<img src='http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/></div></a></span>
</div></b:if>

Note: Ignore steps 11-12 if you are using threaded comments!

Step 11. Finally, find this code