Don't worry, using a tab interface, this DHTML script can be used to display external web pages inline on your page, with the help of the IFRAME tag. So you can monitor all the blogs that you have only on your home page.
Try to see in the DEMO (Monitoring Blogs)
This script allows the user to load a Web page is also in the entire browser window when desired.
This script created by Eric Meyer and I learned from Dynamicdrive.com.
Step by step install the Tabbed Blogs Viewer.
Step 1: Add the below CSS and DHTML script to the <HEAD> section of your page: ( add above ]]></b:skin> )
/*Eric Meyer's based CSS tab*/
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}
#tablist li a.current{
background: lightyellow;
}
Step 2. Then add the code below (under the ]]></ b: skin> and above </ head>)
<script type="text/javascript">
/***********************************************
* Tabbed Document Viewer script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var selectedtablink=""
var tcischecked=false
function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}
function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}
</script>
3. Save your template, then click on the Layout | Page elements "add gadgets" and select HTML / Javascript "
Add the following code:
<ul id="tablist">
<li><a class="current" href="URL blog" onClick="return handlelink(this)">Blog Title1</a></li>
<li><a href="URL blog" onClick="return handlelink(this)">Blog Title2</a></li>
<li><a href="URL blog" onClick="return handlelink(this)">Blog Title3</a></li>
<li><a href="URL blog" onClick="return handlelink(this)">Blog Title4</a></li>
<li><a href="URL blog" onClick="return handlelink(this)">Blog Title5</a></li>
</ul>
<iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px"></iframe>
<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>
The above HTML code renders the tab links and IFRAME tag used to contain the external documents. Change the URLs to your own.
Now, if you have lots of tab links, you can get them to appear on separate lines, by adding a divider.
example
<ul id="tablist">
<li><a class="current" href="#">Blog Title1</a></li>
<li><a href="#">Blog Title2</a></li>
<li><a href="#">Blog Title3</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="#">Blog Title4</a></li>
<li><a href="#">Blog Title5</a></li>
</ul>
Enjoy...good luck
0 Comments:
Post a Comment