PVM Garage » Coding

How To Create Depth And Nice 3D Ribbons Only Using CSS3

Piervincenzo Madeo — Sun, 10 Jan 2010 11:43:33 +0000

In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites.
In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills.
Thanks to useful graphic softwares (2D) we can easily create 3D elements, like ribbons and shadows, but we can also reproduce 3D scene using perspective, focus, color shading and opacity. There is also the possibility of using 3D softwares, like Blender, to create some 3D objects and images that we can use in our designs. There is an interesting article on CreativityDen about the fundamental ways of adding depth in web design works; it explains six basic techniques to simulate the 3D perception in our works and I suggest an attentive reading.

Many beautiful web sites have a wonderful, balanced, three-dimensional perception and it’s clear that this kind of layouts use, in a clever way, images (generally in the background property), lines and some CSS techniques to create the illusion of depth (there is a brilliant post, by Henry Jones on Web Design Ledger, about the use of 1px line to simulate the depth). Below some examples.

DesignM.ag

Blogof.FrancescoMugnai.com

Yoast.com

From-The-Couch.com

Wait, wait, wait. We are web designers, right? We have two great allies to realize our daily projects: HTML and CSS.
The improvements for these languages have been considerable and now the question in my mind is: could we build 3D elements and create depth only using HTML and CSS?
Barack Obama could say “Yes, we can!”

Sure? Yes, it’s possible to create a simple and nice (3D) layout playing with some CSS3 properties, only using code and without the help of Photoshop.

We Want to Make 3D Elements Without Images

There are some properties of the CSS3 languages that can help us to accomplish this mission.
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds.
RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

background: rgba(196,89,30,0.65);

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

Other great new property: border-radius, that allows us to add nice rounded corners on box-items.

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;

We will also use particular borders to create useful triangles for building a nice ribbon. Below the CSS code to draw an arrow (read Creating Triangles in CSS to know more about this techinque).

.triangle {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
}

The arrow is useful to reproduce the depth for some 3D elements, like a ribbon. Box-shadow helps us to create depth through shadows. Border-radius, instead, is just to add rounded corners where we want to utilize this solution.
See the image below to deduce how we will use the CSS triangles, the shadows and the rounded corners.

We will create a simple menu, through an unordered list, using the transform property for the single items of the list to make a nice effect.

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);

Below you can see the final result of our efforts. You can also download the archive with the source files and see the live demo.

How To Make a CSS Based 3D Layout

First of all we set up our files. We create a new folder with index.html and style.css.

We prepare the HTML document.





CSS Ribbon

Take a look at the following image to understand how we will realize the “structure” in our index.html file.

Well, as you have just seen in the picture we need a main container (centered), a bubble for the contents, and three elements for the ribbon: a rectangle and two triangles.

     

 
3D CSS Ribbon
 

I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!


Go to the tutorial!

The CSS code to style the basic elements (container, bubble and rectangle) is the following.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}
/* // Reset */

body {
	background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
	font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
	font-size: 12px;
	color: #999;
}

h2 {
	font-style: italic;
	font-weight: normal;
	line-height: 1.2em;
}

div#container {
	margin: 50px auto 0px auto; /* centered */
	width: 400px;
}

.bubble {
	clear: both;
	margin: 0px auto;
	width: 350px;
	background: #fff;
	-moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #7f9db9;
	height: 50px;
	width: 380px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 6px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}

Below the result of these statements.

We add the two classes to make and place the triangles in style.css… and we also add the style for the content (class info).




3D CSS Ribbon
 
 

I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!


Go to the tutorial!

We add the two classes to make and place the triangles in style.css… and the style for the content (class info).

.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-color: transparent transparent transparent #7d90a3;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 350px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}

.info {
	padding: 60px 25px 35px 25px;
}

.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}

Here the result.

We create a nice menu on the top. Below the markup.





CSS3
is really
powerful

by PV.M Garage



3D CSS Ribbon



I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!


Go to the tutorial!

The style for our top-menu.

.menu {
	position: relative;
	top:3px;
	left: 50px;
	z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
	-webkit-transform: rotate(-45deg); /* rotate the list item */
	-moz-transform: rotate(-45deg); /* rotate the list item */
	width: 50px;
	overflow: hidden;
	margin: 10px 0px;
	padding: 5px 5px 5px 18px;
	float: left;
	background: #7f9db9;
	text-align: right;
}

.menu ul li a {
	color: #fff;
	text-decoration: none;
	display:block;
}

.menu ul li.l1 {
	background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
	background: rgb(131,178,51);
}

.menu ul li.l2 {
	background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
	background: rgb(196,89,30);
}

.menu ul li.l3 {
	background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
	background: rgb(65,117,160);
}

.menu span {
	margin: 15px 80px 0px 0px;
	float:right;
}

Here you can se the simple menu.

Our 3D layout is ready. It’s so sexy, I hope you find the final result attractive and inspiring.

Conclusions

I think this kind of solution is useful to improve the performance of the website holding a great 3D effect. There is great question: Internet Explorer and Opera have some problems with CSS3. But this is not an impediment because we are looking to the future. So, if you are browsing the web with IE, please consider to install Mozilla Firefox or Google Chrome or Safari. Some screenshots from different browsers (Windows 7 OS).

Finally, it’s a good idea to validate the code.

W3C Validation

Response: “This document was successfully checked as XHTML 1.0 Strict!”

Useful Suggestions To Secure And Speed Up Your WordPress Blog

ricardo — Mon, 14 Dec 2009 17:00:52 +0000

WordPress is the most used blogging system and, thanks to the great community that works to enhance its features, nowadays it is used as full content management system. WordPress rocks, dude!
For these reasons it is (maybe) one of the most hacked CMS. In some cases a website proudly powered by WP could be slow without a correct configuration and administration.

There are some tricks that allow us to boost our WordPress installation in a few minutes. Below there is a list of useful tips to secure and speed up your blog system. Take your time for reading, they are very simple and they could be helpful to save your time in the future.

Make Back-Up

A simple and basic rule that can save you in many cases. Remember to frequently back up your website root folder (with all files) and database, so you can restore your site anytime.

You can use PhpMyAdmin to make a quick copy of your SQL DB. Enter in your database structure, go to export, select all tables in SQL format (don’t forget to check “Add DROP TABLE”, I also use a GZIP compression).

Use the last version of WordPress

It’s essential to update your WordPress to fix bugs and security issues. You can use Automatic Upgrade (Tools -> Upgrade in your admin area), or a Three Step Manual Upgrade, to know more about how to stay updated you can read Upgrading WordPress.

Use a Solid Password and Protect your WP-Admin Folder

WordPress installation creates a default admin user with a random password. Are you still using the random default password? Change it and choose a new strong password, immediately!
It is a good thing to change the default username for the admistrator. In Users section of the admin area you can manage your profile.

Protect the wp-admin Directory with a server-side password. Put a .htaccess file in the directory that you want to protect. Below the code of the .htaccess.

AuthName "WP-Admin"
AuthType Basic
AuthUserFile /path/to/passwd  #(the path to .htpasswd)
Require valid-user

Use htpasswd to create a passwd file (.htpasswd) and put it in a non-web accessible directory (htpasswd -c /path/to/passwd username).

Protect wp-config.php

First of all you should set up secret keys in your wp-config.php. Why? Begining from the 2.6 version, WordPress includes a new set of security features for passwords and password hashing and cookie security and, if you want to increase the security of your site, you can use this generator to add secret keys.

define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');

Wp-Config contains sensible data and for this reason you must protect this file in your .htaccess.

# protect wpconfig.php

Order deny,allow
deny from all

Block Search Engine Access to the WP- Folder

The WP- folders don’t need to be indexed by search engines, so to block their access to these system folders you can write in your robots.txt file the following line.

Disallow: /wp-*

Bad Behavior Plugin

Bad Behavior complements other link spam solutions by acting as a gatekeeper, preventing spammers from ever delivering their junk, and in many cases, from ever reading your site in the first place. This keeps your site’s load down, makes your site logs cleaner, and can help prevent denial of service conditions caused by spammers.

Bad Behavior also transcends other link spam solutions by working in a completely different, unique way. Instead of merely looking at the content of potential spam, Bad Behavior analyzes the delivery method as well as the software the spammer is using. In this way, Bad Behavior can stop spam attacks even when nobody has ever seen the particular spam before.

Login Lock-Down Plugin

Login LockDown tabulates the IP address and timestamp of every failed WordPress login attempt, so, when a certain number of attempts are detected within a short period of time from the same IP range, the plugin disables all requests from that range. This can prevent brute force password attack.

Secure WordPress

Secure WordPress is a little help to secure your WordPress installation. It removes Error information on login page; adds index.html to plugin directory, removes the wp-version, except in admin area.

Optimize Images on your Server

Images are important for the great impact on the design of a website, but if the pictures on our webpages aren’t optimized we could have some troubles with the load time and bandwith of the website.

So you should use a good compression for your image, depending on your software, to find the right balance between quality and dimension of the file.
Rcently I’ve read a good article on Web Designer Wall about the image’s compression using two different software, Fireworks vs Photoshop Compression.

Enable GZIP Compression

Compression is a quick and effective way to save bandwidth and speed up your website. Apache allows the compression through mod_deflate and adding the following code in you .htaccess you will enable the GZIP compression of your webpages.

# BEGIN GZIP

AddOutputFilterByType DEFLATE text/xml text/css application/x-javascript application/javascript

# END GZIP

Test your compression using GZIP-Test.

Minify CSS and Compress Javascript files

To minify your CSS (and speed up your website), you can use one of the available tools, such as Styleneat, or php library, such as Minify.

Something else to do is to put all of your JavaScript into a single file and load it in the bottom of the page (footer.php).

Yo can use Firebug with Page Speed on Mozilla Firefox to test and optimize your webpages.

Reduce the Number of Links to External Websites

External websites and scripts can take a lot of time to load depending on the server connection. You should limit widgets and connections to other sites, in fact, reducing the number of hostnames from which resources are served, we can minimize the number of DNS resolutions and the RTT delays.

Caution! Reducing the number of unique hostnames has the potential to reduce the parallel downloads in the page and this may increase response times. You should find the right balance.

Page Speed can help you in this “mission”.

Optimize and Repair Database

Periodically you should optimize your database. go to the Database Structure for your WordPress installation, check all tables, select the Optimise Tables option and repair.

There is a plug-in that allows the database optimization from the admin area of WordPress, WP-Optimize.

Turn Off Post Revisions

To turn off Post Revisions feature (if you don’t need it), add this following code to wp-config.php:

define('WP_POST_REVISIONS', false);

Remove Unused Plugins

Browse your list of plugins you’re using and try to optimize your WordPress deleting unused plugins. If you have more than 15 plugins active on your blog, ask yourself if you really need them and delete the less useful ones.

Remember this words, many things don’t need plugins but ten minutes of reflection, php skills, fantasy to integrate directly into your theme a great feature!

WP Super Cache Plugin

WP Super Cache Plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings)

Piervincenzo Madeo — Wed, 07 Oct 2009 13:07:05 +0000

It has been proved. You can become a “RockStar” developing WordPress themes. Think at the audience, think at the creative process… in my opinion a great WP theme is like a great rock song.
In my experience I’ve developed some themes for this great blogging platform and when I start a new WordPress-based project my mind automatically thinks at the development of the website in four steps (once the concept is set). My brain sends me the following orders: first, design the general web-layout in Photoshop; second, convert the mockup to a (x)html/css webpage; third, develope the theme for WP; fourth, hack your template. My brain often is a strange company.

The steps are clear and in this post you can find some useful tutorials and excellent readings to really become a star as WordPress Themes Designer.
I tested many of the following tutorials, and they help me to improve my skills. My brain thanks.

First Step: Design Your Layout in Photoshop

Below there are the top tutorials for learning how to design a perfect web-layout. They show how to create the essential elements for a WordPress-based website using amazing techniques in PhotoShop.

How to Make an Impressive Blog Layout in Photoshop

Create an Elegant Photoshop (PSD) Template for Wordpress

Create a wordpress interface in Photoshop

How to Create a Unique Wordpress Theme

Creating a tech blog layout in Adobe Photoshop

Wordpress Layout #5

Create a Vibrant Modern Blog Design in Photoshop

Create a Magic Night Themed Web Design from Scratch in Photoshop

Creating A Professional Magazine Web Layout

How to Create a Sleek and Textured Web Layout in Photoshop

How to Create a “Worn Paper” Web Layout Using Photoshop

#71: Building a Website (1 of 3): Photoshop Mockup

Second Step: PSD-to-HTML Conversion

I understand, maybe you are bored switching from Photoshop to a blank page that needs your skills to become a perfect (x)html/css web-layout. Don’t worry, below you can find more information to speed and to improve your techniques in psd-to-html conversion.

How to Convert a Photoshop Mockup to XHTML/CSS

Styling Post Headings That Stick Out

Animated Navigation with CSS & jQuery

Tips for Developing Semi-Liquid Layouts

#72: Building a Website (2 of 3): HTML/CSS Conversion

SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme

MakingSEO coded, Free CSS Template with PSD-to-HTML tips

How to Code a Grunge Web Design from Scratch

Third Step: WordPress Rocks!

You are ready “to get in the zone”. Read the following posts to discover the techniques and tricks to build a great WordPress theme.

#73: Building a Website (3 of 3): WordPress Theme

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

How to Create a Wordpress Theme from Scratch

How to write your own wordpress theme

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

Styling Your Wordpress Comments

So you want to create WordPress themes huh?

Four Step: Hacks to Improve your Theme

Customize your website using the tips collected below. You’ll find some fantastic suggestions on how to boost your website.

The Ultimate Wordpress 2.8 Optimization Guide

Display Thumbnails For Related Posts in Wordpress

Displaying Author Meta Information in Wordpress 2.8

How to : Make a control panel for your wordpress theme

Display Subcategories on Category Pages in WordPress

How To Rearrange Comments in WordPress – Display the Most Recent One on Top

WordPress loop: Get posts published between two particular dates

Wordpress tutorial: Blog posts in different columns

Multiple WordPress Loops Explained

Extra: Resources and Utilities

Build your own set of tools to speed up the the development of your website proudly powered by WordPress.

Wordpress – Lorem Ipsum Test Post Pack

WordPress PSD Framework

Blank Wordpress Themes

Thematic, A WordPress Theme Framework

Free HTML 5 WordPress Theme

ThemeHybrid is about users, quality and WordPress

WP Framework, A blank WordPress Theme Framework

Whiteboard – A Free Wordpress Theme Framework

Extra: Other Useful Articles and Roundups

Below you’ll see a collection of other great articles and roundups to find other awesome resources.

Wordpress Posts Explained…

WordPress Theme / CSS Techniques

Power Tips For WordPress Template Developers

22 Mixed Quality Wordpress Hacks

135+ Ultimate Round-Up of Wordpress Tutorials

300+ Resources to Help You Become a WordPress Expert

Personalise your WordPress Weblog

Best of the Best? WordPress.org!

All-In-One! Browse Wordpress.org to discover the secrets behind the state-of-the-art publishing platform.

How to Realize a Daily Activities Widget in WordPress Sidebar using SimplePie

Piervincenzo Madeo — Thu, 11 Jun 2009 00:09:17 +0000

It’s the moment of Social Networking and Social Bookmarking. Twitter, Delicious, Digg, Facebok… yes, maybe I’m doped! Yes, I believe in the power of the Social Connection. So I decided to show my social on-line life on PV.M Garage. How?

See in the bottom of my sidebar and you’ll understand. I’m convinced that sharing my updates on social web-site the reader could know more about me and my thinking and for this he could be encouraged for returning on my blog.

In this post I explain how I’ve realized the Daily Activities Widget with the stream of my updates on Twitter, Facebook, Digg and Delicious. The following information are valid only using WordPress.

To reach our purpose we use Simple Pie.
What is Simple Pie? It is a code library, written in PHP, intended to make it easy for people to manage RSS and Atom feeds. Imagine? It’s so!

I suggest to you a backup of the theme folder in WordPress because we’ll modify sidebar.php, style.css and we’ll add the folder for Simple Pie Cache and the Library itself.

How to use Simple Pie

First download the Simple Pie Library, after unzip the package and copy simplepie.inc in theme folder in your WordPress installation (presumably /wp-content/themes/yourtheme). Create a new folder called cache, this useful for caching system of our PHP Library that optimize the loading process of our web-page (learn more here “How does SimplePie’s caching system work?”).

Now add the following code in the top of sidebar.php to “activate” the RSS reader.

set_feed_url(array(
    'http://feeds2.feedburner.com/pvmgarage',
		'http://twitter.com/statuses/user_timeline/32445507.rss',
		'http://feeds.delicious.com/v2/rss/piervix',
		'http://digg.com/users/piervix/history.rss',
		'http://www.facebook.com/feeds/share_posts.php?id=1658021339&viewer=1658021339&key=41c698e7f8&format=rss20',
    ));
    //enable caching
    $feed->enable_cache(true);
    //complete path for caching system
    $feed->set_cache_location('/web/htdocs/www.pvmgarage.com/home/en/pvmenglishcontent4984/themes/pvmgarage/cache');
    //set the amount of seconds you want to cache the feed
    $feed->set_cache_duration(1500);
    //init the process
    $feed->init();
    //let simplepie handle the content type (atom, RSS...)
    $feed->handle_content_type();
?>

Watching code

See the previous code and observe the array of RSS url. You can find them in your settings.
Activate with true boolean the cache and put the complete path of your cache folder in $feed->set_cache_location.
Remember that the folder for caching must be writable (chmod 777), read more on Change the file permissions to be server-writable?

Insert Widget on Sidebar

Now insert the following code to add a widget in the sidebar.php of WordPress.




  get_items(0, 5) as $item): ?>
  
    
     get_date('j M Y'); ?> | get_date('g:i a'); ?>

    
    get_feed(); echo $feed->get_favicon(); ?>" class="icon" alt="" />
    get_title(); ?>

    get_feed(); echo $feed->get_title(); ?>

Watching code

In this example we’re simply going to display five recent headlines, for this reason we insert get_items(0, 5) as $item): ?>. Below you can see methods.

get_date(‘j M Y’); ?> returns the date;
get_date(‘g:i a’); ?> returns hour;
get_feed(); echo $feed->get_favicon(); ?> returns social web site favicon;
get_permalink(); ?> returns entry url;
get_title(); ?> returns entry title;
get_feed(); echo $feed->get_permalink(); ?> returns your profile url;
get_feed(); echo $feed->get_title(); ?> returns your profile name;

Style it!

Now modify the style.css. In my theme I’ve added the following code:

/*Simple Pie Style*/
.sidecontdaily {
margin: 0 0 15px 40px;
width: 278px;
background: url(immagini/dailyact1.png) no-repeat top;
}

ul.daily {
list-style: none;
padding: 90px 10px 50px 25px;
background: url(immagini/dailyact2.png) no-repeat bottom;
}

ul.daily li {
padding-bottom: 35px;
}

h5.dailycont {
font-size: 12px;
}

h5.dailycont a {
color: #69695f;
}

h5.dailycont a:hover {
color: #d54e21;
}

.info {
padding: 10px 0;
}

span.date {
background-color: #69695f;
color: #eee;
padding: 1px 3px;
font-size: 10px;
font-weight: bold;
}

img.icon {
float: left;
padding: 3px;
}

span.linkfeed {
background-color: #69695f;
float: right;
padding: 1px 3px;
margin-top: 3px;
}

span.linkfeed a {
color: #eee;
font-size: 10px;
font-weight: bold;
}

Conclusion and Source Files

With this hack we add a little box where we show our daily on-line activities, you can learn more about the use of Simple Pie in these articles: Easy feed reading with SimplePie; How to Create a Lifestream of Your Online Activities; Adding RSS Content with SimplePie.

How to Show Recent Posts with NewsTicker Effect in WordPress Sidebar

marbio — Sat, 06 Jun 2009 18:24:30 +0000

With this little tutorial I want to illustrate the way in order to show recent articles with newsticker effect on the sidebar of your wordpress blog. The term “newsticker” refers to a small section of the page in which we can read the last news (the last ones post in this case) with the typical sliding effect of the on-line magazine.
The execution of this script demands to edit some files of your template, therefore it is better idea a backup copy of the theme folder.

End

To this point the recent-post-newsticker has been correctly installed.

A great part of the material for this module has been recovered on Woork (Antonio Lupetti’s tech blog) in the following article ” How to implement a news ticker with jQuery and ten lines of code “.

If you have any suggestions or ideas to improve the module write a comment to the post.