Pertanyaan diatas disampaikan salah satu sahabat blogger di shoutbox, yaitu bagaimana menampilkan halaman lain di blog kita, biasanya ini dinamakan Document Viewer. Gunanya buat apa om? *sambil garuk-garuk kepala* buat apa ya? mungkin buat aksesoris tambahan aja. Menurut om kayaknya aksesoris ini gak terlalu berguna selain itu juga bikin lambat loading page. Namum tidak ada salahnya kita mencoba membuat Document Viewer ini sekalian aja buat nambah ilmu untuk belajar koding :) Agar gak bingung kita lihat gambar dibawah:
Contoh tampilan tab document viewer.
Halaman yang kita buat nantinya merupakan Tab Dokumen Viewer, setiap tab akan mempunyai link tersendiri yang bisa kita modifikasi.
Ikuti langkah dibawah ini:
LANGKAH I.
Buka Template -> Edit HTML -> masukan kode CSS dibawah diantara kode CSS yang ada pada coding blogger kita, biasanya di antara code <head>....</head>
LANGKAH II
Kemudian masukan lagi kode javacript dibawah ini diantara code <Body>....</Body>
kalau kode di atas tidak ada di blog kamu coba kamu pakai yang ini <body>....</body> karena semua template nya itu berbeda
Jika sudah jangan lupa di simpan.
LANGKAH III
Buka Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman -> Lakukan Copy-Paste Kode dibawah ini -> kemudian simpan dan lihat hasilnya.
<ul id="tablist">
<li><a class="current" href="http://www.o-om.com" onClick="return handlelink(this)">O-om's Blog</a></li>
<li><a href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li>
<li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>
<li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
</ul>
<iframe id="tabiframe" src="http://www.o-om.com" width="98%" height="350px"></iframe>
<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()" value="ON"> Open tab links in browser window instead.
</form>
URL yang berwarna biru bisa kita ganti sesuai dengan keinginan.
URL yang berwarna pink merupakan alamat yang akan ditampilkan pertama kali
Cara menambahkan Alamat:
Untuk menambahkan halaman kita tinggal menambahkan kode dibawah ini dibawah code warna merah diatas :)
<li><a href="http://Alamat URL" onClick="return handlelink(this)">Nama URL</a></li>
Halaman yang kita buat nantinya merupakan Tab Dokumen Viewer, setiap tab akan mempunyai link tersendiri yang bisa kita modifikasi.
Ikuti langkah dibawah ini:
LANGKAH I.
Buka Template -> Edit HTML -> masukan kode CSS dibawah diantara kode CSS yang ada pada coding blogger kita, biasanya di antara code <head>....</head>
/*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;
}
#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 II
Kemudian masukan lagi kode javacript dibawah ini diantara code <Body>....</Body>
kalau kode di atas tidak ada di blog kamu coba kamu pakai yang ini <body>....</body> karena semua template nya itu berbeda
<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>
/***********************************************
* 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>
Jika sudah jangan lupa di simpan.
LANGKAH III
Buka Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman -> Lakukan Copy-Paste Kode dibawah ini -> kemudian simpan dan lihat hasilnya.
<ul id="tablist">
<li><a class="current" href="http://www.o-om.com" onClick="return handlelink(this)">O-om's Blog</a></li>
<li><a href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li>
<li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>
<li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
</ul>
<iframe id="tabiframe" src="http://www.o-om.com" width="98%" height="350px"></iframe>
<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()" value="ON"> Open tab links in browser window instead.
</form>
URL yang berwarna biru bisa kita ganti sesuai dengan keinginan.
URL yang berwarna pink merupakan alamat yang akan ditampilkan pertama kali
Cara menambahkan Alamat:
Untuk menambahkan halaman kita tinggal menambahkan kode dibawah ini dibawah code warna merah diatas :)
<li><a href="http://Alamat URL" onClick="return handlelink(this)">Nama URL</a></li>
Tidak ada komentar:
Posting Komentar