Hello ! previously i added tutorial on how to add bubble number for comments , now here i want to show how to add nice keyboard button effect in your posts while writing tutorials, this blogger tips and tricks tutorial help you in creating good looking tutorial for your blogger so lets get into the steps:
ctrl alt shift
STEPS TO FOLLOW:
STEP1: Find <head> tag after that paste below code
Now save your template
STEP2: now where ever you want this effect use
DEMO :
STEPS TO FOLLOW:
STEP1: Find <head> tag after that paste below code
g4u{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid gray;
padding:1px 5px;
margin:0 5px;
font-family:courier new;
font-size:1.2em;
-webkit-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
-moz-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
background:-moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));
background:-webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background:-o-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background:-ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background:linear-gradient(left, #fff 0%, #e2e2e2 25%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 )}
g4u.space{padding:0 90px}g4u:hover{cursor:default}
Now save your template
STEP2: now where ever you want this effect use
<g4u>YOUR TEXT</g4u>hope you like my blogger tutorial