CSS Box with Hover and Active Text Effects for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


CSS code box for blogger
Before we begin this post let me tell you one thing about this CSS text box. It's a box which you can use for highlight your text message, important notes and HTML/JavaScript or CSS code snippets etc. The box has hover and active text effects which means in normal mode it stands white in color, in hover mode it turns blue in color and finally in active mode it becomes green. You can see the installation guide below. So try it out in your blog.

You can feel the live demo in action before we adding this CSS box. Have look at the demo box provided below and hover your mouse over the box and try to copy the text to see both hover and active text effect. So have an idea of what we are going to make here. 


css code box demo

Wanna add Google style top fixed menu bar to your blogger blog? Introducing Google style top fixed menu bar looks to integrate Google Plus with all other Google products. I believe it would be a great idea to make a tutorial on how to create this black menu bar using both simple jQuery and CSS. The style of the elements of this menu seems exactly to those found on Google web page. Lets see how to do it. Click here

question mark icon png How to add this CSS box to your blog
You can add this CSS box in two methods. The first one is One Click Installer. Just click on the below "Add to Blogger" button and it will automatically add this box to your blog.



NB: By clicking the above button, you can use this box as a gadget to display your notes, messages etc. But you can't add this box into your blog post by applying this One Click Installer. If you wanna add this box into your blog post use the second method.

The second method is adding this box to your blog manually. Let me tell you how to do do this. So please follow below steps carefully.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.postmsgg23
{
color: black;
background-color: white;
width: 640px;
margin: 5px 60px;
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;
}
.postmsgg23:hover
{color: white;
background-color: CornflowerBlue ;
}
.postmsgg23:active
{
background-color: darkgreen ;
}

NB: You can adjust the width of your box according to your blogger dimensions. Change the 640px from above highlighted line.

Save your template. Now we have successfully added the CSS (style) part in your template and lets see how to show this box in your blogger blog post.

 How to show this box in blogger blog posts
Its so easy to add this box in your blog. Just follow below two simple steps to do this task. that's all!

  • Switch your blog post from Compose to EDIT HTML while you writing post.
  • Copy the below ode and paste it in your blog post where you wanna display this CSS box.

<div class="postmsgg23" style="font-family: &quot;Courier 
New&quot;,Courier,monospace;">Your Text Here</div>
</div>

NB: Replace Your Text Here with your text or encoded HTML/Javascript code. Now You're done!

You may also like -

        1. Pure CSS Code Box for HTML/JavaScript Coding

        2. Add Widget/Gadget Inside Your Blogger Header
    Hope you like this tutorial. If you have any doubt to clarify, feel free to ask via comments or contact form. Also please share this trick and wishing you a happy blogging:)