Tuesday, March 16, 2010

Web mind reader

Computer can read your mind. Don't believe? Try this computer magic trick. This page will attempt to read your mind, please follow the instructions carefully. You will probably be amazed (I was when I try this ming game for the first time), computer really know what symbol you imagine. If you think you know how it works please leave comment.


  1. Imagine one two digit number (example: 42)

  2. Substract digits from that number (example 42 - 4 - 2 = 36)

  3. Find results in a table and remember symbol attached to result number

  4. Concentrate on symbol. Click on square below and see result.


For visitors who are interested how this mind puzzle works there are two hints:

  • think what computer can do?

  • what you do?

Tuesday, March 2, 2010

Add digg button to every post

This article will step-by-step guide reader to place a real time Digg count button to every single blogger post. With Digg button you have a better chance your post will be digged and get you more web traffic. In this article reader can also find how to add Digg button on top or bottom of each post and how to align Digg button on left or right side of posts.

Example of Digg button:

Digg button


How to add Digg button to every blogspot post


To add Digg button to every post on your blogger blog you should copy and paste this code in blogger template:

<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>


You can add Digg button on the beginning of every post or on the bottom of every post. In HTML layout search for <data:post.body/> and paste the code just before if you want to have Digg button on the top of the post or after it for twitter button on the bottom of the post.


Here are step by step guide to add Digg button counter to blogger:

  • Go to Layout in your blogspot blog

  • Click on Layout --> Edit HTML

  • it is recommended to backup template on local hard disk before doing any change in edit template box

  • check on Expand Widget Template checkbox

  • find <data:post.body/>

  • for Digg button counter on the top of post add Digg button code (for code check code above) before <data:post.body/>

    ...

    [DIGG BUTTON CODE]
    <data:post.body/>
    ...

  • or you can want Digg button on the end of your posts, add Digg button code just after the <data:post.body/>

    ...
    <data:post.body/>
    [DIGG BUTTON CODE]
    ...



How to align Digg button left or right

To align your Digg button left use this code:

<div style='padding: 4px; float: left;'>
[DIGG BUTTON CODE]
</div>


Code needed to align your Digg button counter right:
<div style='padding: 4px; float: right;'>
[DIGG BUTTON CODE]
</div>


Sample code for Digg button on beginning of every post on right side:

<div style='padding: 4px; float: right;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>


<data:post.body/>

Tuesday, February 16, 2010

Parameters for tweeter buttons

There are parameters (options) for three retweet buttons counters: Tweetmeme, Backtype and Topsy. You can get more control over your tweet buttons with options listed for those three tweet counters.


Find answers how to:

  • change the @username who is tweeted

  • change the size of the button

  • what to do when the URL is different from the current URL

If you are interested in implementing twitter button on blogspot check Add twitter retweet button to blogger.


Tweetmeme options



ParameterDescription
tweetmeme_urlsample value - 'http://yoururl.com'. If you want to place the button on more than one page or would like it in your feed, you will need to override the URL. Commonly used for blog posts, sample value for blogger '<data:post.url/>'.
'<data:post.url/>' code link tweet counter to every post on blogger blog.
tweetmeme_sourceBy default the RT button will direct you in the format of "RT [@tweetmeme] [blog post title] [link]". You can, however change the button to retweet your user account. By specifying the tweetmeme_source parameter you can change the format to "RT [YOURNAME] [blog post title] [link]". Of course you [YOURNAME] will be value of tweetmeme_source parameter.
tweetmeme_stylevalue can be 'compact'. If you want compact button include tweetmeme_style='compact' code. Don't include this code if you want more bigger button.
tweetmeme_servicewith this option you have ability to chose any URL shortener service you like. Sample: tweetmeme_service = 'tr.im';

Sample code for tweetmeme options:

<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_source='BlogAndSEO';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>


Backtype parameters



ParameterDescription
tweetcount_urlthe URL to measure tweets for
tweetcount_titletitle of the page for retweets
tweetcount_srcLeading text for retweets
tweetcount_viaIf tweets contain '(via @BackType)', true or false
tweetcount_sizeSize of button, 'large' or 'small' value
tweetcount_linksif links should be opened in new windows, 'true' or 'false' value
tweetcount_short_urlspecify the pre-shortened URL that you would like to use
tweetcount_backgroundButton background color (for example 'CCCCCC')
tweetcount_borderButton border color (for example 'FFFFFF'))
tweetcount_textButton text color (for example '000000')
tweetcount_api_keyAwe.sm API Key for custom URL shortener

Sample code for BackType tweeter button


<script type="text/javascript">
tweetcount_url = 'http://interestingwebs.blogspot.com/2010/02/add-twitter-retweet-button-to-blogger.html';
tweetcount_title = 'Tweetcount Parameters';
tweetcount_src = 'RT @BackType:';
tweetcount_via = false;
tweetcount_links = true;
tweetcount_size = 'large';
tweetcount_background = 'FFFFFF';
tweetcount_border = 'CCCCCC';
</script>
<script type="text/javascript" src="http://widgets.backtype.com/tweetcount.js"></script>

Topsy configuration topsy


ParameterDescription
topsy_themecan be set to any of the following themes to change the button colors (see above for examples): brick-red, brown, monochrome, jade, light-green, sea-foam, mustard, hot-pink, blue (the default theme).
topsy_nickshould be set to the Twitter username that you want to appear in retweet text (without an @). If this variable is unset, the button will use “TopsyRT” as the Twitter username.
topsy_stylecan be set to "big" if you want a large button. If this variable is unset, a small button will be displayed.
topsy_urlsets the URL to be retweeted. By default the button will use the URL of the page it is embedded in, but if you want to use a different URL, define it in this variable. Topsy will shorten the URL for you in the RT text.
topsy_shorturlsets the shorturl to use in retweet text. If you do not pass your own shorturl, Topsy will shorten the URL for you in the RT text.
topsy_titleallows you to define the RT text used by the button. By default the RT text will be the title of the page the button is embedded on.
topsy_ordersets the order the small button elements will be displayed in. This variable must be a comma-separated list of three items: “count”, “retweet”, and “badge”. Whatever order you place those items in, that’s the order they’ll appear in. Badge refers to Topsy TopLinks badges, which are displayed for pages that are in the Topsy Top5k or above.
topsy_tweet_textsets the text of the tweet button when there are no tweets yet.
topsy_retweet_textsets the text of the retweet button when there have been tweets.

Example Javascript code with a large Topsy button:

<script type="text/javascript">
var topsy_nick = "TopsyRT";
var topsy_style = "big";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>

Tuesday, February 9, 2010

Approve comments on blogger

Blogger owners who want to moderate comments on their blog will find this guide useful. You can moderate comments on blogger before it goes live on blog. This is handy for control comment spam. Blogger administrator can accept or reject comment before comment is published. Here you will find step by step instructions how to enable comment moderation.


Also, this post give answer how to find out to which post unpublished comment is connected. For example I have one unpublished comment and want to learn to which post it will be published.

Moderate comments on blogger



How to enable comment moderation


  • In blogger dashboard comment moderation setting can be found under the Settings|Comments tab

  • for comment moderation setting chose always

    Blogspot comment moderation setting

  • save settings

  • now under Posting tab you can go to Comment Moderation and review new unpublished comments

  • if comment is appropriate you can publish it. Or reject if you think it is a spam

  • when comment is published you can (as blogger owner) delete it. There is no option for blogger administrator to modify comments


Find out post name where comment will be published


To learn to which post a comment will be published on blogger in the Comment Moderation window click Post Name link (Sort: Post Name, Comment Date). You can see this link on the image from begging of this post. After you click on Post Name link sorting, Post name will become visible.

Learn post name in Comment Moderation for blogger

Tuesday, February 2, 2010

Add twitter retweet button to blogger

Learn how to add tweet retweet button and counter to every post on your blogspot blog and show the number of times your posts have been linked on Twitter and let readers retweet. Here you will find guide how to add retweet button to the top or a bottom of your posts and how to align retweet button on left or right side of your posts. You can choose one of three retweet counters (tweetmeme, backtype and topsy) described in this article. You will also find advantages and drawbacks for each one of those three retweet counter services.

Tweeter button looks like this button on the picture below:




Retweet buttons

You can choose one from various Retweet button counters. In this section you can find short description and demo of three most popular retweet buttons. Here you can also find code needed to paste inside blogger template to implement retweet button for each post in your blogger blog.
One option is to give visitors option to tweet your post from AddThis button.


Tweetmeme

In my opinion Tweetmeme is most popular retweet counter service on the internet.
Sample:




Advantages:

  • when retweet is clicked small popup window is open, after retweet is done counter is automatically updated without reloading web page

  • Tweetmeme is very popular

  • can be customized with parameters

Drawbacks:
  • visitor who tweet visited page with Tweetmeme for first time is asked to connect TweetMeme and Twitter together, this can turn off some vistors to tweet your post



Code for one retweet button per post page on blogger:
<script type='text/javascript'>
tweetmeme_source = &#39;[TwitterUserName]&#39;;
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>


You should replace [TwitterUserName] with your twitter user name and code is ready to paste in Edit Template. For further instructions where to put code go to section Where to add Twitter button code.


Backtype retweet counter service

Demonstration:

Advantages:

  • easy to implement, no need for define url parameter for individual posts

  • link directly to twitter, no need for approving connect twitter with some other application

  • appearance can be changed with parameters tweetcount_background and tweetcount_border


Drawbacks:
  • less popular then Tweetmeme

  • without automatically refreshing counter like with Tweetmeme, when retweet is clicked twitter is opened instead of page with retweet button (this can be changed with parameter tweetcount_links)


Code for retweet counter on every post page at your blogger blog:
<script src='http://widgets.backtype.com/tweetcount.js' type='text/javascript'/>

Topsy retweet button
Demo:

Advantages:

  • nice design

  • link directly to twitter, no need for approving connect twitter with some other application

  • find samples and help here

Disadvantages:
  • tweet counter will not be automatically refreshed

  • less popular then Tweetmeme


Code for retweet button on each post in your blogspot blog:
<script type='text/javascript'>
var topsy_nick = &#39;[TwitterUserName]&#39;;
var topsy_style = &#39;big&#39;;
var topsy_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://cdn.topsy.com/button.js' type='text/javascript'/>

Replace [TwitterUserName] with your user name and you can paste this code in your blogger template to add retweet button in every post.


Where to add Twitter button code


You can add tweet button on the beginning of every post or on the bottom of every post. In HTML layout search for <data:post.body/> and paste the code just before if you want to have twitter button on the top of the post or after it for twitter button on the bottom of the post.


Here are step by step guide to add Retweet button counter to blogger:

  • Go to Layout in your blogspot blog

  • Click on Layout --> Edit HTML

  • it is recommended to backup template on local hard disk before doing any change in edit template box

  • check on Expand Widget Template checkbox

  • find <data:post.body/>

  • for Retweet button counter on the top of post add Retweet button code (for code check previous section of this article) before <data:post.body/>

    ...

    [TWITTER BUTTON CODE]
    <data:post.body/>
    ...

  • or you can want Retweet button on the end of your posts, add Retweet button code just after the <data:post.body/>

    ...
    <data:post.body/>
    [TWITTER BUTTON CODE]
    ...




How to align Tweeter button counter left or right

To align your twitter button left use this code:

<div style='padding: 4px; float: left;'>
[TWITTER BUTTON CODE]
</div>


Code needed to align your tweeter button counter right:
<div style='padding: 4px; float: right;'>
[TWITTER BUTTON CODE]
</div>



Sample of code needed to add Tweetmeme to blogger on top of every post right aligned:
...

<div style='padding: 4px; float: right;'>
<script type='text/javascript'>
tweetmeme_source = &#39;[TWITTERUSERNAME]&#39;;
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>


<data:post.body/>

...

Put code before <data:post.body/> and replace [TWITTERUSERNAME] with your Twitter user name.

And for the end here are one more sample for Backtype retweet counter on bottom of each post on blogspot left aligned:


...

<data:post.body/>

<div style='padding: 4px; float: left;'>
<script src='http://widgets.backtype.com/tweetcount.js' type='text/javascript'/>
</div>


...

Tuesday, January 26, 2010

Expandable post summaries on blogger

You want know how to create expandable post summaries on main page of your blogger blog? You want to display only few lines of text from the beginning of each post, and one read only link bellow each summary which is linking to the rest of article? With help of jump break blogspot feature it is very easy to accomplish it. "Jump break" feature is also called "After the Jump" feature lets you create expandable post summaries in your blog posts, so longer posts appear as an intro with a link to Read More.



"After the Jump" feature can be very handful when your blog contains long posts and you want to only show a selected snippet of each post on your homepage with Read More option to lead visitor to the complete post. In this guide you will learn how to implement Read more option to your blogger blog. Check articles with useful tips for blogger!


Insert read more in post


To insert read more link in your blog you need to put this code in Edit HTML on the place where you want to Read More link appear:


<!-- more -->

For sample of inserting <!-- more --> take a look for sample on this picture:

Inerting of Read more link for expanded summary in your post


When you publish your post, on your home page (caution: read more is visible only on main page of your blog, not on individual post page) only portion of text before <!-- more --> will be displayed with Read more link. Look for sample on this picture:

Blogger home page with Read more option


Change Read more text


Let's say you don't like "Read more" text for your link and want to change it to "Continue reading...". You can change post page link text directly from blog post widget. Follow those steps:

  • click Layout --> Page Elements

  • in "Blog Posts" click on Edit

    Blogger edit posts

  • Change Post page link text, for example to "Continue reading..."

    Post page link text in Configure blog posts

  • click Save in Configure blog posts widget and you will have new Read more text

For bloggers who use customized templates


If you are using customized template, Read more link will not be displayed. In this case you will have to make some changes in your blogger template. Here are instructions:


  • Go to Layout

  • Click on Layout --> Edit HTML

    Edit blogger template

  • it is recommended (wise) to backup template on local hard disk before doing any change in edit template box

  • click the Expand Widget Templates checkbox and find <data:post.body/>

  • after <data:post.body/> paste this code snippet:

    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
    </div>
    </b:if>


  • it should look something like this:

    Update code for expandable summaries in blogger customized templates

  • save template and from now you should see Read more link on your main page

Tuesday, January 19, 2010

Scrolling text HTML code

Learn how to add scrolling text on your site or web page. Read this guide and you can make text to move horizontal or vertical. You just need to copy scrolling text HTML code from this page, adjust copied code and paste it to your HTML page.


To add scrolling text or images on web page use MARQUEE HTML tag. MARQUEE tag can work well for announcements. So, with MARQUEE tag you can easily get animated text effect on your page.



Take a look at scrolling text sample made with MARQUEE HTML code:


  MARQUEE scrolling text

  Link to my blog


In this tutorial you will find:

  • Simple scrolling text HTML code sample

  • How to change direction of animated text

  • Change style of scrolled text

  • How to stop scrolling on mouse over Marquee control

  • guide for implementing Marquee on blogspot (blogger)



Simple scrolling text HTML code sample


Code for scrolling text from left to right:


<marquee direction="right" behavior="scroll" scrollamount="1" >Simple marquee sample</marquee>


Result:

Simple marquee sample


Marquee direction attribute

Animated text can move left to right, right to left, up to down or down to up. Direction :

  • left - text is moving right to left

  • right - text is moving left to right

  • up - text is scrolled upward

  • down - text is scrolled form up to down



Scrollamount attribute - how fast text will be scrolled, higher number faster is scrolled

Change style of MARQUEE tag


You will probably want to limit area of Marquee effect on your site. You can do it with style attribute inside your MARQUEE HTML tag. You need to use height and width property. If you want visible border of your rectangle add border property to your style attribute.


Sample HTML code for MARQUEE limited to rectangle 100 x 200 with thin black border:


<marquee style="border: thin solid rgb(0, 0, 0); height: 100px; width: 200px;" direction="up">&nbsp;<a href="http://interestingwebs.blogspot.com/">Link to my blog</a></marquee>


Result:
 Link to my blog

You can use Marquee code HTML generator by clicking this link.

Stop scrolling when a mouse is over Marquee area


How to stop scrolling when a mouse hover scrolling text? To accomplish this task javascript event onmouseover will be used. Also javascript event onmouseout will be used to continue scrolling when mouse pointer lost focus of Marquee. To see how this work check first scrolling text sample at beginning of this article.


Sample code for stop scrolling text when mouse is over text and start scrolling text when focus is lost:


<marquee direction="right" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">Simple marquee sample</marquee>


Tutorial for implementing Marquee on blogger (blogspot)


Add HTML code for Marquee element to blogger sidebar (for help visit this article : How to add HTML or JavaScript gadget to blogger


Here is code for Marquee sample from beginning of the article:


<marquee style="border: thin solid rgb(0, 0, 0); height: 120px; width: 200px; background-color: rgb(255, 255, 255); font-family: Arial; font-size: 10pt; color: rgb(0, 0, 0);" direction="up" behavior="scroll" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">&nbsp; MARQUEE scrolling text<br /><br />&nbsp; <a href="http://interestingwebs.blogspot.com/">Link to my blog</a></marquee>

Marquee HTML tag can be used for announcements, but be carefully, one can be OK, but if there are too many visitor can get headache.

Bad news is that Marquee tag is obsolete in HTML5. To find out how to achieve HTML5 scrolling text effect visit article: HTML5 scrolling text.

Tuesday, January 12, 2010

Blog decisions in new year

In the end of 2009 I stopped publishing new posts because I get tired. After take about one month vacation it is time for new posts. For new year I set two goals. First goal is to regularly publish one new post every week on tuesday. Second goal is to publish guest posts on blogs more famous then my blog and to track how this action impact on my web traffic.


Publish post once a week


This is a goal that I believe it is possible for me to achieve. My intention is to publish once a week every tuesday and keep that rhythm. If I miss to publish new article on one tuesday, then I will continue to prepare new articles and continue on next week. My thesis is that it is better to publish four articles in four weeks than four articles in firs week and than three weeks nothing for visitors and search engines. I believe it is good to keep same rhythm all the time, visitors will be used to check for new articles every tuesday.


When we are talking about blog publishing frequency there are some advices like to not publish on weekend and Public Holiday because of less visits on those days. One advice also say to not post anything for a while after very important post so your important post remains at the top of your blog.


Search engine likes blogs who publishes often and frequently. If your posts are published more frequently means more frequency of your content in Search Engines. You must be careful to not set for goal to publish too many posts per week (or day), you can burnout. My advice is to set reasonable goal and to keep regularity and rhythm. For example some magazines are published every week and you know that you can buy a new issue of magazine on specific day in week.


Publish guest posts


Publishing guest posts on blogs with high rate of visits can help your blog to become more known. First problem is to find someone who have web traffic and who is ready to publish your article with link to your blog. Currently I do not have experience with guest posting and its influence on guest poster blog web traffic but I think it have potential.

Monday, January 4, 2010

Do not count my visits in GA - cookies

Here is a guide how to exclude your visits from GA (Google Analytics) statistics with help of cookies. If you have static IP address you can learn how to exclude your IP address in google analytics by clicking this link. In linked article you can also find do you have static or dynamic IP address.


This tutorial for excluding your visits in GA is simpler than most other tutorials you can find on Internet about same topic. Main goal of this article is to help blogger users to count off their visits from GA records.


Exclude your own traffic from GA records with cookies


  • First go to web page you track with Google Analytics

  • copy code below and paste this code in address bar of you browser (don't forget to click enter)

    javascript:pageTracker._setVar('DoNotCount');alert('Cookie has been created')


  • With this line of code in browser address bar you will create cookie for visited site with content "DoNotCount" or other if you change colored text. If you want to check created cookie visit my article Check cookies on my computer


  • now you need to create filter


  • In your Google Analytics click Edit

    Edit in Google Analytics

  • Click Add filter in the Filters Applied to Profile box

    Add filter in Google Analytics


  • enter filter name, for filter type choose Custom filter, choose Exclude. For filter field choose User defined. For field pattern enter same text you set in javascript we paste in address bar (colored text, in our example: DoNotCount)

    Custom exclude filter for cookie in Google Analytics

  • now you need to wait few days and GA (Google analytics) will no more count your visits. This guide was tested on my blog and it works.