HTML Box Examples
If you use Chrome, make sure you have the latest version.
Go to https://developers.facebook.com/docs/plugins/like-button, configure your button, get the iFrame code and insert it using the code section of the Embed function.
I no longer see the iFrame option. I guess we should try making our own code using the example as a template.
Random text display using JavaScript
From THIS SITE
EXPAND IMAGE ON HOVER
To add the code, select Embed from the Insert menu and choose Embed Code.
<html><head>
<title></title>
<style type="text/css">
.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}
</style>
</head>
<body>
<h1>Hover over image to expand it</h1>
<img src="https://pbs.twimg.com/media/DY7soQVXcAAgbB2.jpg" class="thumbnail" height="150" width="150" />
</body></html>
NOTE: I got the image URL from a twitter post..
<html><head> <title></title>
<script type="text/javascript">
var collapseDivs, collapseLinks;
function createDocumentStructure (tagName) {
if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array(elements.length);
collapseLinks = new Array(elements.length);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var siblingContainer;
if (document.createElement &&
(siblingContainer = document.createElement('div')) &&
siblingContainer.style)
{
var nextSibling = element.nextSibling;
element.parentNode.insertBefore(siblingContainer, nextSibling);
var nextElement = elements[i + 1];
while (nextSibling != nextElement && nextSibling != null) {
var toMove = nextSibling;
nextSibling = nextSibling.nextSibling;
siblingContainer.appendChild(toMove);
}
siblingContainer.style.display = 'none';
collapseDivs[i] = siblingContainer;
createCollapseLink(element, siblingContainer, i);
}
else {
// no dynamic creation of elements possible
return;
}
}
createCollapseExpandAll(elements[0]);
}
}
function createCollapseLink (element, siblingContainer, index) {
var span;
if (document.createElement && (span = document.createElement('span'))) {
span.appendChild(document.createTextNode(String.fromCharCode(160)));
var link = document.createElement('a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild(document.createTextNode('expand'));
link.onclick = collapseExpandLink;
collapseLinks[index] = link;
span.appendChild(link);
element.appendChild(span);
}
}
function collapseExpandLink (evt) {
if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = 'expand'; }
else {
this.parentNode.parentNode.nextSibling.style.display = '';
this.firstChild.nodeValue = 'collapse'; }
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
function createCollapseExpandAll (firstElement) {
var div;
if (document.createElement && (div = document.createElement('div'))) {
var link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('expand all'));
link.onclick = expandAll;
div.appendChild(link);
div.appendChild(document.createTextNode(' '));
link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('collapse all'));
link.onclick = collapseAll;
div.appendChild(link);
firstElement.parentNode.insertBefore(div, firstElement);
}
}
function expandAll (evt) {
for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs[i].style.display = '';
collapseLinks[i].firstChild.nodeValue = 'collapse';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
function collapseAll (evt) {
for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs[i].style.display = 'none';
collapseLinks[i].firstChild.nodeValue = 'expand';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
</script>
<script type="text/javascript">
window.onload = function (evt) {
createDocumentStructure('h1');
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<center><h1>Chapter 1</h1><p>This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is
chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. </p>
<h1>Chapter 2</h1><p>This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. </p>
<p>This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. .</p>
<h1>Chapter 3</h1><p>This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. </p></center>
</body></html>
Hanging indent: a paragraph that has all lines but the first indented. A hanging indent is also known as a hanging paragraph.
<div STYLE="text-indent: -25px; padding-left: 25px;">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </div>