Posts marked with "HTML" in categories

How to alert user that he is the ___th visitor of blogger/blogspot blog?

If you ever visited my blog on the day it’s reaching a big view (24000 , 25000) you will get a javascript alert saying you are the 24000th visitor like this :

The above image shows that the blog alerted when the user was the 23000 visitor. It will also change the background to this. Want to have this feature on your blog ??? You are in the right place.

Requirements

One Stats Widget (Only one).

Add this code before  if you haven’t yet added a script src of Jquery Library.

... [READ MORE]

Creating a custom 404 Not Found page in Apache Server.

DEMO
You might have seen a 404 page on different sites such as Google,Yahoo etc… You can make this on your website too if you are using Apache Server. The default 404 page will be like this :

It’s just simple plain HTML 404 page and it’s ugly. To Change the default 404 page Do as below.
Go to your site’s folder.
Create a file named .htaccess (just .htaccess no name only file extension).
Open the file and add the line.

ErrorDocument 404 /pathtofile

... [READ MORE]

Selecting a particular parent in Jquery

If you want to select a particular parent div. Then you should use parents() function. If you use parent() function It won’t work. For Example:
index.html


 

  
 

If you want to get the id of the main parent which is .main then you should use Jquery code like this:

$("#click").live(‘click’, function(){
alert($(this).parents(".main").attr(‘id’));
});

The code above will alert the id of the main parent. Try it out yourself.

... [READ MORE]

Make Image Black & White (grayscale) using CSS In Webkit

If you want to make images grayscale ie black & white you can use this tutorial.
Note that this trick will only work on browsers that runs webkit which is used by browsers like Google Chrome, SafariMidori etc.
Other browsers using different engines do not support the gray scake option. Hence this trick does not support all browsers.
Grayscaled Image Using CSS & Original Image
Grayscaled Image Using CSS & Original Image
Here’s the CSS code which will make all images grayscale.

... [READ MORE]

CSS and Cursors CSS mouse cursor effects with DEMO

Ever wanted to change the cursor in your web page ? Well you can change it in CSS. There is a way of doing that, the cursor propery.
There is a way in CSS to change the cursor to pointer,cursor,resize,normal etc…..
This table show what will be the cursor when the value of cursor property changes as following.

  <td width="50%">
    <b><u><span style="font-family: inherit;">Cursor</span></u></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <span style="color: black;"><span style="font-family: inherit; font-size: small;"><b>Not-allowed,default,inherit,initial,no-drop,vertical-text</b></span></span>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">all-scroll</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">col-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">crosshair</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">e-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">ew-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">help</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">move</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">n-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">none</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">ne-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">nesw-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">ns-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">nw-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">nwse-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">pointer</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">Progress,wait</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">row-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <div align="LEFT">
      <span style="color: black;"><span style="font-family: inherit; font-size: small;"><b>s-resize</b></span></span>
    </div>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <div align="LEFT">
      <span style="color: black;"><span style="font-family: inherit; font-size: small;"><b>se-resize</b></span></span>
    </div>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <div align="LEFT">
      <b><span style="font-family: inherit;">sw-resize </span></b>
    </div>
  </td>
  
  <td id="vattu" width="50%">
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">text</span></b>
  </td>
  
  <td id="vattu" width="50%">
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">w-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
  </td>
</tr>
Value

... [READ MORE]

Adding Scroll To Top function in Blogger/Blogspot using Jquery

This Post will help you to add a Scroll To Top function in your Blogger Blog. Follow the steps given below.

<div style="text-align: center;">
  <span style="background-color: #93c47d; border-radius: 10px; font-family: inherit; font-size: x-large; padding: 8px 10px;"><a href="http://subin-demos.blogspot.com/#scrolltop" >DEMO</a></span>
</div>


1 – Go to Blogger -> Template -> Edit HTML 
2 – Adding Codes.
Add this script before if you haven’t added a script src of Jquery Library.

... [READ MORE]

Create Text Editor like Blogger Using HTML & jQuery

You might have seen text editors where you can bold a text, italic a text etc… The perfect example of this the Blogger Post Text Editor

This is a simple tutorial that will create a text editor using HTML, Jquery & JavaScript.

We have two files, index.html which contains the HTML code and texteditor.js which contains the jQuery code. You should include the texteditor.js in index.html.index.html

... [READ MORE]

Toggle Element visibility using a little piece of code – Jquery Toggle

You might wanted to Show/Hide element based on the visibility of the element. If the visibility is block  , hide the element and if visibility is noneshow the element.
You can do this without the if statement. You can do this in just a line of code.
For example : if we want to toggle the visibility of a div with the id sh.

$("#sh").toggle();

If the div #sh is hidden the code above code will make it visible and if it is visible the code will hide the div #sh.

... [READ MORE]

Removing HTML tags in an input element.

index.html (Removing HTML in INPUT element).






in" value="Subin">

If the code above didn’t worked try placing the script after the input element.
This is the script

 

... [READ MORE]

How to Stop your Blogger Blog from Redirecting to Country Domains

When you open your blog you will be redirected to the country based domain of your blog.
This will affect your blog badly. For Example:

  1. The social stats – or Facebook Likes, Google +1s and Tweet counts – for your blog stories may be diluted as the URLs for the same story become different from different visitors.
  2. You will have a similar problem if you are using an external commenting platform like Disqus or Facebook Comments.

To prevent this you need to add this code to your Template.
Go to Blogger -> Template -> EDIT HTML

... [READ MORE]

Follow/Subscribe

Telegram 

Mastodon  Twitter

GitHub GitLab

Subdomains

Demos  Lab

Past

This blog was once on WordPress. Now a static site. See source code on

GitLab