put jquery javascript on
Configure HTML/JavaScript
could slow down all the page load whether they need dynamic feature or not.
First of all, don't try to use jquery to do css, do css in bloger's Template-> Customize->Advanced->Add css
.code {
color:black;
background-color: #eff0f1;
}
color:black;
background-color: #eff0f1;
}
Use pure java implementation instead of jquery is not good, in the long run, you need to update the script which should have been the work of jquery library developers.
A trade off is to load that script on a per needed basis, or better, don't use javascript at all (use css animation and pagination).
some simple javascript have cross browser support, which can cover many usage case.
<button onclick="document.getElementById(id).style.display = 'block'">Show Answer</button>In case you need serious javascript features.
Load javascript or static resources from google drive or google site is a bad idea if you don't have many huge shared javascript code. Why do you want to load from another site (no matter how fast it is) if your picture, video, javascript and css can all be hosted on your blogger local?
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
<script>
$(document).ready(function(){
$(".answer").hide();
$("#hide").click(function(){
$(".answer").hide();
$(".distraction").show();
$("#show").show();
});
$("#show").click(function(){
$(".answer").show();
$(".distraction").hide();
$("#show").hide();
});
//$('div.code').css({"color":"white", "background-color": "black"});
//$('div.code').css({"color":"black", "background-color": "#eff0f1"});
});
</script>
<form>
Site Search:
<input type = "text"
id = "sitesearch"
value="OCAJP"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "var uri = 'https://www.google.com/search?as_sitesearch=xyzcode.blogspot.com&q='+document.getElementById('sitesearch').value; window.open(uri);"
/>
</form>
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
<script>
$(document).ready(function(){
$(".answer").hide();
$("#hide").click(function(){
$(".answer").hide();
$(".distraction").show();
$("#show").show();
});
$("#show").click(function(){
$(".answer").show();
$(".distraction").hide();
$("#show").hide();
});
//$('div.code').css({"color":"white", "background-color": "black"});
//$('div.code').css({"color":"black", "background-color": "#eff0f1"});
});
</script>
<form>
Site Search:
<input type = "text"
id = "sitesearch"
value="OCAJP"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "var uri = 'https://www.google.com/search?as_sitesearch=xyzcode.blogspot.com&q='+document.getElementById('sitesearch').value; window.open(uri);"
/>
</form>
