Ubuntu / Linux news and application reviews.

Google Analytics Public Visitors HTML Counter For Any Website With Sharega (Free)

| Date: January 08, 2010 | View Comments | Tags: blogging, google analytics, html, statistics, web, webmaster

A while back, we covered how to display some Google Analytics stats on your website, using PHP and the Google Analytics API.

But here is a much simple way of doing this, but for visitor stats only: by using Sharega, a web service which will display a visitors counter on your website, no matter the platform you use because it will allow you to simply enter some HTML code as your counter.

To use Sharega, all you have to do is add it's email address to your Google Analytics users, with 'view stats only' account access, then on the Sharega website enter your website url and finally, add a piece of code to your website.

Convert HTML to PDF [Linux]

| Date: November 22, 2009 | View Comments | Tags: converter, html, linux, pdf, ubuntu

There are numerous ways one can convert a web page (HTML) to PDF. Some using websites, a Firefox addon, but here is how to do it in Linux.

MobaPhoto Creates HTML Image Galleries And Does Basic Photo Editing [Portable, Freeware]

| Date: November 13, 2009 | View Comments | Tags: gallery, google webmaster tools, html, image editor, mobaphoto, portable, software, windows



MobaPhoto is a Windows freeware app (which also comes in a portable version) that allows you to create some professional looking photo galleries for your webpage. MobaPhoto also allows you to resize, crop or correct red-eyes of all your pictures very easily.

3 New Free Cheat Sheets For Web Designers and Developers [And A Bonus]

| Date: September 16, 2009 | View Comments | Tags: blogging, css, css3, html, html5, web, web design, webmaster, wordpress

1. The HTML 5 Visual Cheat Sheet - was created by Wook and it's a great way to see the new HTML 5 elements in action:

This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.



You can get it by heading over to Wook (download available as high quality JPEG or PDF, in 2 versions: white or black background).

Create a HTML Twitter Widget For Your Blog Using JavaScript and CSS

| Date: September 16, 2009 | View Comments | Tags: blogger, blogging, html, JavaScript, twitter, web, widget

twitter html widget
(this is just a screenshot, see a live demo link at the end of the post)

1. The CSS (if you use Blogger, you need to place this before the ]]></b:skin> tag in your template / for other platforms, place this code inside your main .css file):

#twitter_div_ws {font-family:Arial, Helvetica, sans-serif; font-size: 13px; border: 1px solid #CCCCCC; padding: 5px; width:300px; background-color:#FFF; margin: 0 auto;}
ul#twitter_update_list_ws {padding:0; margin:0; list-style: none; display:block;}
ul#twitter_update_list_ws li {list-style: none; min-height:50px; border-top: 1px solid #CCCCCC; padding:5px 0px;}
ul#twitter_update_list_ws li span {font-style: italic; display: block;}
ul#twitter_update_list_ws .timeago {display:inline-block;}
ul#twitter_update_list_ws .timeago a {font-size:10px; color: #999999; text-decoration: none;}
#twitter_div_ws b a {font-weight: bold; text-decoration: none; text-transform:uppercase}
#twitter_info_ws {border-bottom: 5px solid #CCCCCC; padding-bottom:10px;font-size: 10px;}
#twitter_info_ws b {font-size: 15px; line-height:30px;}
#twitter_info_ws img {padding: 0 5px 0 0; width: 50px; border:0px;}

Overlay Content Using CSS

| Date: August 29, 2009 | View Comments | Tags: css, html, webmaster

There are many scripts that use effects to change the content when you put your mouse over something. This is called a rollover effect. In the following examples the "hover" CSS property will be used. We can change colors, background, fonts, text or anything you like. Take a look below.

The HTML code is basically the same for all examples, like this:

HTML:
<div class="infobox">
<img src="URL_imagen">
<div>visible text</div>
<div class="more">text displayed on mouse over</div>
</div>


Example 1:

Demo:


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas hendrerit quam a elit luctus ut tempor leo congue? Maecenas blandit massa id mi blandit consectetur.


CSS:

.infobox {
border: 1px solid #345;
cursor: pointer;
padding: 5px;
position: relative;
width: 130px;
}
.infobox img {
position: relative;
z-index: 2;
}
.infobox .more {
display: none;
}
.infobox:hover .more {
background-color: #345;
border: 1px solid #89A;
display: block;
font-size: 20px;
height: 130px;
left: 0px;
padding: 5px 20px 5px 140px;
position: absolute;
text-align: justify;
top: 0px;
width: 400px;
z-index: 1;
}


Example 2:

Demo:


Visible Content
Aliquam mattis purus vel leo dignissim vel pulvinar lectus hendrerit! Aenean facilisis ante vel lacus interdum ut lobortis enim aliquet. Vivamus sagittis feugiat est id rhoncus? Maecenas ut leo vel enim mollis tempor. Nullam ornare fermentum tempor. Proin eu interdum massa!


CSS:


.infobox {
-moz-border-radius: 10px;
background-color: #123;
border: 2px solid #567;
color: #ABC;
cursor: pointer;
font-size: 20px;
padding: 5px 10px;
position: relative;
text-align: center;
width: 180px;
}
.infobox .more {
display: none;
}
.infobox:hover .more {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background-color: #101921;
border: 2px solid #567;
color: #EEE;
display: block;
font-size: 12px;
left: -2px;
padding: 5px 10px;
position: absolute;
text-align: justify;
top: -2px;
width: 180px;
z-index: 1;
}


Example 3:

Demo:



EXPAND
Sed interdum interdum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fringilla aliquam lectus; laoreet accumsan magna vulputate eget. Aliquam vel quam mi.


CSS:


.infobox2 {
color: #888;
cursor: pointer;
font-size: 16px;
font-weight: bold;
position: relative;
text-align: center;
width: 130px;
}
.infobox2 img {
position: relative;
z-index: 2;
}
.infobox2 .more {
display: none;
}
.infobox2:hover .more {
-moz-border-radius: 10px;
background-color: #333;
color: #BBB;
display: block;
font-size: 14px;
font-weight: normal;
height: 130px;
left: 0px;
padding: 15px 20px 10px 135px;
position: absolute;
text-align: justify;
top:- 5px;
width: 320px;
z-index: 1;
}


Credits: vagabundia

jQuery FontEffect: Create Font Effects Without Using Images

| Date: August 24, 2009 | View Comments | Tags: html, JavaScript, jquery, plugin, web, webmaster

jquery fonteffect

FontEffect is a jQuery plugin that adds effects to HTML text, without using any images. In version 1.0 (which has only 7 kb), you can use 4 different text effects: edge (outline), shadow, gradient and reflection (mirror).


To use jQuery FontEffect, use the following code:


- Javascript / jQuery:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://path.to/jquery-FontEffect-1.0.0.min.js"></script>
Place the above code before the </head> tag in your template.

Obviously, replace http://path.to/jquery-FontEffect-1.0.0.min.js with the exact path to the jquery-FontEffect-1.0.0.min.js file. Also, if you already use jQuery, don't include the jQuery code twice.

-CSS:
#example{ font-family: Georgia,'Times New Roman', serif; font-size:3.0em; color:#ff0080; font-weight:bold; margin-bottom:10px;}
This can be placed in your .css file or if you use Blogger, before the ]]> tag in your template.

-HTML:

<div id="example">Web Upd8</div>

<script type="text/javascript">
$("#example").FontEffect({shadow:true});
</script>
The above html code will present the "Web Upd8" text using shadow effect. You can replace it for any of the other effects supported by this jQuery plugin.

It is an interesting jQuery plugin, ideal for dynamically generated headers (such as the title of the post). The best thing is that it works with most known browsers, including everyone's favorite: IE6. :)

More info, live demo & download

User Stats For Your Website Using Only An Image (HTML): Trendcounter

| Date: August 06, 2009 | View Comments | Tags: blogging, html, webmaster

Whos.amung.us became the most popular service to display the amount of online users on a website, but now it appears another similar service called Trendcounter offers the same service but with some improved, more advanced stats.

free counter

The site does not require any registration and you can create the widget for free. The buttons are customizable: you can select from 4 types of images - 1 with flags counter, change the color of the background and text and so on:

Trendcounter

Additionally it saves the visitor data of the history for all statistic freaks and creates nice charts of them:

» Visitors of the last 31 days
» Visitors of the last 12 months
» Visitors of the last 5 years

But take a look for yourself, here is our stats page (we just installed the widget).

[via puntogeek.com]
License: (cc) BY-NC-SA WebUpd8 | Privacy