Tabbed Document Viewer

MEMANTAU BLOG KITA

Seberapa banyak blog yang anda punya ? Apakah anda sulit untuk memantaunya?
Saya yakin banyak diantara blogger mania mempunyai tidak hanya satu blog, mengingat layanan membuat blog gratis.
Agar kita dapat memantau blog kita dari salah satu blog kita, berikut sebuah script buatan Eric Meyer yang dapat kita fungsikan untuk memantau blog kita :

DEMO | bisa dilihat pada bagian sidebar atas.

Langkah pertama tambahkan kode CSS and DHTML script diatas kode ]]></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;
}

Langkah kedua. dibawah kode ]]></ b: skin> tambahkan kode berikut ini :


<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. Simpan template anda, kemudian pada Layout | Page elements "add gadgets" kemudian pilih "HTML / Javascript "
lalu tambahkan kode berikut ini :

<ul id="tablist">
<li><a class="current" href="Your URL blog" onClick="return handlelink(this)">Blog Title1</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title2</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title3</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title4</a></li>
<li><a href="Your 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>

Jika kita mempunyai lebih dari lima blog, maka kita bisa menambahkan sela dengan menambahkan kode :
<div style="margin-bottom: 8px"></div>

sehingga posisi nama blog pada navbarnya tidak menumpuk.

contoh :

<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>

Semoga bisa membantu dan bermanfaat.