"oya om gimana cara bikin "preview page" web lain di blog kita?"
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>
/*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 II
Kemudian masukan lagi kode javacript dibawah ini diantara code <Body>....</Body>
<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>
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>
Sumber : http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm
36 comments:
thanks ya ini ya saya cari...ini gak mesti hanya untuk blog khan?
aku tau gunanya Oom..itu berguna buat yg punya blog lebih dr 2 spt aku..hehe..yg di view blog kt sendiri..
aldo <= iya aldo semua aplikasi web apa saja bisa, asal support java script
iya <= bener juga wan..terserah buat apa aja..tergantung keiinginan masing2 :)
thanks informasinya. salam kenal,
thanks juga, dan salam kenal baik.
pertama kirain kayak SnapShot gitu.. hehe..
itu kayak tab2 buat ke link laen gt yah? lucu jg.. dari dulu kepengen blog yang ada tab2nya.. hehehe..
-SatoNa-
Document viewer hanya untuk...menampilkan web lain di tempat kita ya..oom. bgamana caranya kalo web tsb kita ganti jadi ruang di blog kita sendiri contoh.. home,frofile,,dll ...ditunggu loh Ilmunya
yups..tentu saja bisa, itu tinggal ngarahin link yang dituju aja..
tulisan yang sangat bermanfaat, thanks Om..
Tampilan jd ckep tapi performance jd lambat ya om..pengen tp sayang juga..ya sudahlah stidaknya dpat ilmu baru..tankyu ya om..
@fadhil : Thanks juga :)
@Mangamovie : iya pasti bikin loading page jadi semakin lambat
oom, kok ga bisa ya oom? katanya "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.". emang taronya dimana sih? di selipin aja kan? waduh ga ngerti nih oom
Muantap bgt om...
thx...regards
om...........berarti kita harus py lebih dari satu blog ya...!??byat ngisi halaman lainnya???...Bingung....!!!!
makacih om
jempol uat om
om permisi aku link ke blognya..boleh kan?
om.. kgk bisa! aq pasang di source code template aku ternyata ngk bisa. aq pakek blogger. solusinya gmn om? email aq ya/ ym m_fatihuddin :D
Saya coba dulu ya?? :D
Om..saya dapet pesen begini begitu sudah naro semua kode saat edit HTML dan di preview :
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.
hiks...hiks...ga ada satupun code yang berhasil saya coba nih.. :((
salam oom..
saya amat tertarik dgn posting ini, tp apabila saya install dlm blog saya dan disavekan ia akan mengeluarkan warning ini "Templat anda tidak boleh dihuraikan kerana ia tidak purna bentuk. Sila pastikan semua elemen XML ditutup dengan sempurna.
Mesej ralat XML: The entity name must immediately follow the '&' in the entity reference."
bagaimana tu oom?
tq teramat2 jika dpt membantu saya
salam oom....
saya ingin bertanya caranya membuat link ke halaman lain, saya coba ikutin cara yg dipandu mas oom tp pd langkah 3 di setting blogspot tidak ada fasilitas tambah template.... blog saya batik-sadewi.blogspot.com, disitu saya coba buat menu:produk, hubungikami dll. yg saya mau begitu klik di salah satu menu akan link ke halaman tersebut yg berisi hanya produk. mohon bantuannya oom... makasih sebelumnya. atok_sugiharto@yahoo.com
keren postingnya.....
thx banget boss.!!
memang ga perlu cari kemana2 kalo masalah nguplek uplek blog... disini aja dah komplit
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif
nice info om ....dari dulu kepengen blog yang ada tabnya
Om apa resep tersebut bisa dipasang pada Side Bar? karena page yg ingin saya "viewer" ukuranya kecil, mirip widget gitu.
Maaf bukan nyepam ya Om (http://eqso.g4eid.co.uk/status/eqso/INDONESIA.html) page itu yang ingin saya jadikan Tab Viewer pada Widget.
Terima kasih Om.
om! klo yang kayak "home,Web 2.0, Tutorial, Tips, SEO,Tools,Template,eBook,Testimoni,Arsip" yang kayak punya om diatas apaan om ? trus gimana cara bikinnya om?
ga bisa di simpen bozzz,,, pa ada yg salah???
Om, tahu gak cara nampilin rss web laen di web kita, jadi orang yang baca web kita n liat berita menarik, begitu klik langsung menuju web sesungguhnya!!!
Plesae dunk!!!
Prom
Najid
salam kenal :)
asrtikelnya sangat membantu sekali
Thanks
saya mengalami error :
"Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The entity name must immediately follow the '&' in the entity reference"
mohon bantuannya..
terima kasih..
salam kenal om...
mau nanya dunks om, caranya bikin halaman ( HOME PRODUK FAQ TESTIMONI dll ,biasanya yg umum diatas ) gimana sih om... sorry bgt nih newbie question...makasih ya om sebelumnya.
thaks om infonya bagus ,siap belajar lagi nie
ane nubi total nih,baru belajar ngeblog...trick agan bguna banget nih,mudah2an ane bisa meraktekinnya :)
thank tutor nya tapi aku lom ngerti sambil belajar nih...
Terimakasih sharingnya, cukup membantu sy dalam mengolah blog
Poskan Komentar
Silahkan beri komentar dengan bijak dan jangan sampai komentar anda masuk dalam {COMMENTS SPAM}. Thanks