Hi This Hack is to show that how can you design and show show codes with mouse hover effects.
See A Demo :-
How to Add HTML and JavaScript Codes In Blogger Posts With Mouse Hover Effects
Steps To Add This Hack In Your Blog :-
Note:Save Your Template Before Taking Any Action.
- Log In To Blogger.com
- Click Design –> Click Edit Html—> Mark Expand Widget Template
- Now Find ]]> By (Click Ctrl + F) And type ]]>
- Than Paste Below Code Before The Closing The ]]> Tag
Paste the following CSS code above that line.
pre{background:#efefef;border:1px solid #A6B0BF;font-size:120%;line-height:100%;overflow:auto;padding:10px;color:#000000 }pre:hover {border:1px solid #efefef;}code {font-size:120%;text-align:left;margin:0;padding:0;color: #000000;}.clear { clear:both;overflow:hidden;}
The above code is for drawing a display box inside the Blogger post to show HTML and JavaScript.You can change the length ,width ,size and color of the box , back ground image etc. by editing the CSS code. After adding this code you can call the display box anytime into your post by following next step.
Now Whenever you make post about adding widget tutorial or other.
Add you code with below example :-
<pre>Your HTML or JAVA script</pre>
Have Any Doubt ? Feel Free To Ask! Just Leave A Comment.
Related Posts:
No related Posts.