How to put numbers on image gallery?

you can ‘copy’ the gallery code into functions.php of your theme, and edit it there;

remove_shortcode('gallery','gallery_shortcode');
add_shortcode('gallery','custom_gallery_shortcode');

function custom_gallery_shorcode() {
// full code see pastebin https://pastebin.com/n1mfN3NX //
}

https://pastebin.com/n1mfN3NX

(for wp3.7.1 https://pastebin.com/XW1XVPaC )

line 108 outputs the number:
$output .= "<div class='imageNum'><span>".($i+1)."</span></div>"; //NEW

your sample site uses styles similar to these to format the output:

.gallery dt.gallery-icon{margin-bottom:9px;}
.gallery dl{margin-top:15px;}
.gallery{margin-bottom:15px;padding-bottom:0;}
.imageNum{background:#797979;color:#fff;margin-left:0px;width:30px;float:left;text-align:center;}
.imageNum span{text-align:center;padding:3px;}
.gallery-icon{clear:both;float:left;}
.gallery-caption{float:left;clear:left;}

I am sorry could you please elaborate the steps.

I copy gallery css code into function.php?

step 1:
paste the code from the pastebin link into functions.php of your theme;
step 2:
paste the css code at the end of style.css of your theme.