This is article will show you how to add a del.icio.us link with a counter displaying the users number that bookmarked the current article in del.icio.us.

del.icio.us is a famous social bookmarking service which gives for all users a great opportunity to discover millions of unique URLs bookmarked.

Therefore, if you accept to show a simple/reachable link to bookmark your post as well as to show how many users have bookmarked this post, this will doubtlessly be a manner to move up your article’s popularity.

The result will be like this:

How to do that:

1 - Go to your Layout, Edit your template and Expand Widget Templates.

2 - Add the following CSS classes

.delicioushits{
   float:right;
   padding:2px 4px;
   font-size:12px;
   color:#343434;
   background:url(“Use Your 14x14 delicious Logo URL”) left no-repeat; padding:0 10px 0 20px;
}
.delicioushitsbold{
   font-weight: bold;
}

3 – Place this following code snippet just before <b:includable id='post' var='post'> in case of you want to display it like in this site. Otherwise, you can choose your convenient position within the Blogger template and edit the appropriate CSS classes.

<span class='delicioushits'>
<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' target='_blank'>Save to del.icio.us</a> with
<span class='delicioushitsbold' expr:id='"a"+data:post.id'>0</span> hits!</span>

<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById('a<data:post.id/>').innerHTML = urlinfo.total_posts;
}
</script>
<script expr:src='"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=displayURL"'/>

4- This was successfully tested in Chrome, FF, Safari and IE.

5- Enjoy yourself.

---

...

---

I have received an e-mail from a Blogger user asking me how I did to place Google AdSense inside every post without showing it on the first page. This means that the Google AdSense is only shown when you are on the article page.

I haven’t answered this guy but this article will be my answer.

First, go to your Layout, Edit your template and Expand Widget Templates.


Search for the following snippet:

<p><data:post.body/></p>

Just before the "data:post.body", you should add your Google AdSense script as the following:

<b:if cond='data:blog.pageType == "item"'>
<!-- Your Google Adsense Script -->
</b:if><data:post.body/>

The if statement is used to show your sponsored links only into the single post and not in the home page for example.

This is a nice and clean way to give more visibility to your sponsored links.

---

...

---

Website Menus need to be simple, user-friendly, well-designed or at least clear and obvious. This is the first point to consider before designing any menu as all menus are the important elements to guide your visitor through your website.
The purpose of this article is to present you 20 navigation menus which I find perfectly designed. In other words, they are all excellent. Of course, there are so many menus that you can continue to discover everyday through the web but these menus below are my favorite.
These menus will also give you a sort of inspiration to help you to design your own navigation menu. Every menu is well-matched with the style of its website.
All these navigation menus are either CSS-based or JavaScript&CSS-based.

For any suggestion about other CSS-based or JavaScript-CSS-based navigation menu (s) please just leave a comment.

1 - Hopking Design


2 - Nopoko Graphics


3 - Mars Hill


4 - 24 ways


5 - Wards Exchange


6 - Jayme Blackmon


7 - Nathan Borror


8 - Ten Thousand Things


9 - Students Against Destructive Decisions


10 - Folietto


11 - Clothing + Kindness


12 - Navigant Consulting


13 - Sitesquared


14 - Web Designer Wall


15 - Aviary


16 - Acko.net



17 - House of spring mix


18 - Studio Racket


19 - Artgeex


20 - Design Intellection

---

...

---

Validation hints are useful for any kind of form. It is useful because the user remains aware about the validation of the field criteria he is trying to fill in.
This post is about showing you how to create this kind of feedback using jQuery and CSS.

View Demo

Let’s go through the code.

General behavior:

HTML

<input
type="XXYY"
id="XXXX"/>
<span class="message">XXXX message.</span>

Since any input element receives focus either via the pointing device or by tabbing navigation, the focus event fires and executes following function:

$("input").focus( function() {$(this).parent().find("span.message").css("display", "inline");});

This means that we will display the message inside the span element.

When any input element loses focus either via the pointing device or by tabbing navigation, the following function will be executed:

$("input").blur( function() {$(this).parent().find("span.message").css("display", "none");});

This means that we will hide the message inside the span element.

The span message will be displayed following its CSS class definition:

span.message {
  display:none;
  position:absolute;
  font:normal 11px/14px verdana;
  width:250px;
  margin: -12px 0 0 14px;
  padding:5px 5px 5px 40px;
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color: #FEEFB3;
  background-image:url('warning.png');
}

Username:

jQuery:

$("#username").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if (text.length > 7) {
fieldset.addClass("done");
}
else {
fieldset.removeClass("done");
}
});

• We merely check the length of the value entered in the username field when the keyup event is triggered;
• If it is okay (text length value is higher than 8), we apply the CSS class “done” and if not, the warning message “span.message” remains applied.
  

CSS:

fieldset.done span.message {
  border: 1px solid #4F8A10;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}

Password and Password confirmation:

jQuery:

$("#password").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if (text.length > 3 && text.length <> 7) {
fieldset.removeClass("almostgood");
fieldset.addClass("done");
} else {
fieldset.removeClass("almostgood");
fieldset.removeClass("done");
}
});

$("#password1").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if(text!=$("#password").val() && jQuery.trim($("#password").val())!=""){
$("#passwordok").css("display", "none");
$("#passwordnok").css("display", "inline");
}
else{
if(text==$("#password").val()){
$("#passwordnok").css("display", "none");
$("#passwordok").css("display", "inline");
}
if(jQuery.trim($("#password").val())==""){
$("#passwordnok").css("display", "none");
$("#passwordok").css("display", "none");
}
}
});

• If we find that the password is at least 4 characters long, this can be good enough to continue. Then the “almostgood” CSS class will be applied;
• If the password is at least 8 characters long, that's very good and the “done” CSS class will be applied in this case;
  
• The second keyup event above concerns password comparing. In case of #password and #password1 values are the same; “passwordok” CSS class will be applied. In the opposite case, it is CSS class “passwordnok”.
  

CSS:

fieldset.done span.message {
  border: 1px solid #4F8A10;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}

fieldset.almostgood span.message {
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color:  #FEEFB3;
  background-image:url('almostgood.png');
}

#passwordnok{
  font:normal 11px/14px verdana;
  width:250px;
  position:absolute;
  margin: -12px 0 0 14px;
  padding:5px 5px 5px 40px;
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color:  #FEEFB3;
  background-image:url('passnok.png');
  display:none;
}

#passwordok{
  font:normal 11px/14px verdana;
  width:250px;
  position:absolute;
  margin: -12px 0 0 14px;
  padding:5px 5px 5px 40px;
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color:  #FEEFB3;
  background-image:url('passok.png');
  display:none;
}

Email:

jQuery:

$("#email").keyup( function() {
var fieldset = $(this).parent();
var text = jQuery.trim($(this).val());
if (text.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
fieldset.addClass("done");
} else {
fieldset.removeClass("done");
}
});

• We simply use regular expressions to validate the e-mail field.

That’s all guys.

Download here

---

...

---

This article will show you how to create a tabbed box and how jQuery can be useful to let you play with the tabs.

View Demo

Let’s show first the high-level structure:
HTML

<div id="wrap">
<div class="tabbed">
 <ul class="tabs">
  <li><a id="1" href="#">My Mail</a></li>
  <li><a id="2" href="#">RSS</a></li>
  <li><a id="3" href="#">PHP Courses</a></li>
  <li><a id="4" href="#">jQuery for All</a></li>
 </ul>
 <div id="1" class="content">
 <center><h3>Tab1</h3></center>
  <p>Sed ut perspiciatis...</p>
 
 </div>
 <div id="2" class="content">
 <center><h3>Tab2</h3></center>
  <p>eum iure reprehenderit, qui ...</p>
 </div>
 <div id="3" class="content">
 <center><h3>Tab3</h3></center>
  <p> iusto odio dignissimos...</p>
 </div>
 <div id="4" class="content">
 <center><h3>Tab4</h3></center>
  <p>voluptatem sequi...</p>
 </div>
</div>
</div>

The code above is made up of:

+ Principal wrapper (wrap class);

CSS

#wrap {
width: 400px;
font-size: 12px;
margin: 20px auto;
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

+ Another wrapper (tabbed class) that holds the whole tabbed box;

CSS

.tabbed {
width: 400px;
background: #39414A repeat-x bottom;
}

+ A list (tabs class) which contains all the 4 tabs;

CSS

.tabbed {
width: 400px;
background: #39414A repeat-x bottom;
}

.tabbed .tabs li {
list-style: none;
float: left;
}

.tabbed .tabs li a {
display: block;
width: 99.25px;
padding: 5px 0;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background: #181C21 repeat-x bottom;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.tabbed .tabs li:first-child a {
border-left: none;
}

.tabbed .tabs li a:hover {
color: #B4CBD9;
}

.tabbed .tabs li a:focus {
outline: none;
}

The width of “tabbed .tabs li a” was calculated as follows:
- We have “.tabbed .tabs li:first-child a” has no left border;
- Then we have only 3 border-left of 1 px;
- The full width is 400px.

So: (400px – 3 * 1px)/4 = 99.25px

+ 4 Divs (content class) considered as containers of all tabs.

CSS

.content{
display: none;
border:1px solid #fff;
}

.content p{
padding: 20px 10px 10px 10px;
color:#C0D0C0;margin: 1em 0;
}

jQuery:

$(document).ready(function() {

$("#wrap").corner("round 10px");

$(".tabs li a").click(function(event) {
 $(".tabbed .content").css("display", "none");
 $(".tabbed .tabs li a").removeClass("active");
 $(this).addClass("active");
 $(".tabbed .content[@id="+$(this).attr("id")+"]").fadeIn("def");
});

$(".tabs li a[@id=1]").click();

});

In order to have a round corner for wrap class, I have chosen to use the Corner jQuery plugin.

Our code is very simple to understand. We first choose to display only the tab content that we prefer thanks to: $(".tabs li a[@id=1]")
Now you may know why we have an id for every anchor that matches the same id defined in the content class for div element.

Example:

<li><a id="X" href="#">HHHHH</a></li>
...
<div id="X" class="content">
...

The active class applied when the click event is triggered for each matched element is:

.tabbed .tabs li a.active {
background: #fff;
color: #B4CBD9;
}

Finally, the fadeIn effect was used to show the content of every tab.
That’s all.

---

Share this post?

...

---

I was just searching for a nice 3D loading image to put it in a form when a user submits his login details (in my application).
If you remember I have already talked about ajaxload which eases your life to create your own ajax loader icon.
Now I am so glad to give you another useful link that can help you to create your animated gif preloader. The service is called Preloaders. You have simply to choose:

Categories: 3 dimensional (3D), Rectangular, Circular, or Horizontal;

• Preloader type;
• Background color;
• Foreground color;
• Size of your gif;
• Animation speed of your preloader.
  

That’s all.

---

Share this post?

...

---

7 Useful effects (accordion, bounce…) that you can use to animate your vertical menus with only one level have been gathered in this post.
Two of the menus are using the powerful jQuery Easing Plugin (version 1.3) and the rest is simply using the css and animate functions in order to create custom animations.

View Demo

All the menus are chiefly having a common HTML structure:

<ul class="cssclassone">
    <li><a class="cssclasstwo" href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">CV</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>

We have chosen to write a simple jQuery code just to make sure to be able to understand how every effect for every right menu is working.
Every effect is triggered thanks to mouseover and mouseout events. For menu D for example, we simply use the jquery.min.js script to create our custom animation using css function to change the background color value and animate function to change the padding-left css property value.

/*Menu D*/
$(".menu2 .menu2_liste li a").mouseover(function () {
    $(this).css("background-color","#FFFFFF");
    $(this).animate({ paddingLeft: "50px" }, 50 );
});

$(".menu2 .menu2_liste li a").mouseout(function () {
    $(this).css("background-color","#ECEFF5");
    $(this).animate({ paddingLeft: "4px" }, 50 );
});

Menu E is using the jQuery Easing Plugin (file jquery.easing.1.3.js) with 'easeOutBounce' easing type to make every menu tab to vertically bounce.

/*Menu E*/
$(".sliding-element1 a").mouseover(function(){
    $(this).stop().animate({width:'250px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});

$(".sliding-element1 a").mouseout(function(){
    $(this).stop().animate({width:'148px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});

Of course this is an unvarnished code which lets you to customize it with your favorite colors and style.
That’s all.

Download Here

Important: Thanks to Shin, I have added .stop() to every menu script now to get a real accordion effect. Just refresh your browser cache in order to view the “new” live demo.

---

...

---