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.

Merubah Tampilan Tag/ Label Cloud

Jika anda membuat Tag Cloud / Label Cloud versi Phydeaux3, tentu anda akan menjumpai kode seperti dibawah ini

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [248,250,8];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Pada var maxColor = [0,0,255]; ini akan menampilkan warna BIRU, sedangkan pada var minColor = [0,0,0]; ini akan menampilkan warna HITAM.

Tentu anda tidak ingin tampilan daripada Tag Cloud / Label Cloud selalu monoton warna itu saja, terlebih kalau background blog anda mempunyai warna seperti itu, jelas tidak akan nampak Tag Cloud / Label Cloud pada blog anda.

Anda bisa mengkombinasikan warna RGB dengan bantuan Color Picker pada Adobe Photoshop.


Perhatikan gambar di atas, kotak merah menunjukkan kombinasi warna RGB dengan penulisan sebagai berikut [248,250,8]. Kombinasi ini akan menghasilkan warna kuning seperti terlihat di gambar atas.

Kita dapat menambahkan beberapa kombinasi warna pada kode javascript diatas, dengan harapan tampilan Tag/ Label cloud berwarna-warni sesuai banyaknya artikel yang terkandung dalam Tag/ label tersebut. Berikut kita tambahkan beberapa kombinasi warna RGB pada kode Tag/ Label Cloud tersebut.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255]; [248,250,8]; [100,20,200]; .....dan seterusnya
var minFontSize = 10;
var minColor = [0,0,0];[110,9,201];[100,9,15]; ...... dan seterusnya
var lcShowCount = false;
</script>

Semoga bermanfaat.