Display HTML , Css, JavaScript , jQuery And Other Codes With Hover Effects In Blogger Post

If you use HTML, CSS, JavaScript or any other codes in your posts then you can show the codes on a colored and professional looking background. Showing HTML/Javascript codes is a most important part. Every blogger try something new to show their HTML/Javascript codes differently. This tutorial will show you How To Display HTML, Css, JavaScript, Script, jQuery And Other Codes With Hover Effects In Blogger Post.

Demo

LIVE DEMO

How To Display HTML , Css, JavaScript In Blogger Post

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the Code Shown Below just above/before it

.latesthack
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #000000;
color: #ffffff;
width: 95%;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.latesthack:hover
{
background-color: #0c991a ;
color: #fff;
}
.latesthack:active
{
background-color: CornflowerBlue ;
color: #000;
}

• Now save your template

How to use this code

Use the HTML code shown below while creating any post

<div class="latesthack">
YOUR CODE HERE
</div>

Like it? Share it.