tHomBloG

Satu Kotak untuk Display Banyak Foto

Untuk membuat satu kotak untuk display banyak foto, seperti yang ada di samping kanan postingan blog jelek saya ini, ikuti langkah berikut. Gampang sekali. Copy semua kode di kotak bawah ini. Pastekan pada elemen html baru di sidebar kamu.

<style type="text/css"> background:white; div.TabView div.Tabs {height: px; text-align:center; overflow: hidden} div.TabView div.Tabs a {float:left; padding: 3px; display:block; width: px; text-align:center; font-size:90%; height: px; padding-top:5px; vertical-align:middle; border:1px solid #BDBDBD; border-bottom-width:0; text-decoration: none; font-family: ; /* Font Menu Utama Atas */ font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px} div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #cfcfcf; /* Warna background Menu Utama Atas */ } div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; overflow:hidden; background:black; } div.TabView div.Pages div.Page {height:%; padding:0px; background:black; overflow:hidden} div.TabView div.Pages div.Page div.Pad {background:black; overflow-x:hidden; overflow-y:auto; padding: 5px 5px} </style> <a href='http://indo-template-blogger.blogspot.com' style='display:none'>template blogger indonesia</a> <script type='text/javascript'> //<![CDATA[ function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } //]]> </script>

Kode di atas jangan diubah-ubah. Kalau salah malah tidak bisa jalan. Setelah kamu copy dan pastekan semua, di bawahnya tambahkan kode berikut. Lha di bagian ini kamu bisa mengatur sesuai keinginanmu.

Bagian pertama: judul menu di atas kotak. Kamu bisa mengubah [width]-nya sesuai lebar sidebarmu. Angka 1234 di antara tanda "a" kamu ganti dengan menu kamu, misalnya FOTO BAYI, FOTO ANAK-ANAK, dst. Di sini hanya ada 4 elemen. Kamu bisa menambah sesuai keinginan.

<form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 240px;" class="Tabs"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </div>
Kode di bawah ini untuk mengatur tinggi dan lebarnya kotak display. Width dan height]-nya kamu sesuaikan dengan lebar sidebarmu. Display ini berkorelasi dengan menu. Jadi banyaknya elemen di bawah ini [ditandai dengan "div class Page dan Pad"] harus sama dengan elemen menu. Kode html kamu diletakkan di tiap elemen ini, seperti pada contoh gambar dari saya di bawah ini.
Copy paste kode di bawah ini, persis di bawah kode tadi, lalu ganti kode html gambar saya dengan punya kamu.

<div style="width:240px; height:350px; " class="Pages"> <div class="Page"> <div class="Pad"> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLBORzeuiu5yrxmiYFebDex3_IjzdLZfKhVSf88NU2klRnr5HzLm9FEKS2xvkex_EddkWAs8jdTmmgwuabbffeSjsRsBXnikQo-Ue3cibaBFabYtqIBuSV8AxgSoB7ssJHvvnSkyPPNU/s1600/kristik+pangeran+antasari.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 221px; height: 280px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLBORzeuiu5yrxmiYFebDex3_IjzdLZfKhVSf88NU2klRnr5HzLm9FEKS2xvkex_EddkWAs8jdTmmgwuabbffeSjsRsBXnikQo-Ue3cibaBFabYtqIBuSV8AxgSoB7ssJHvvnSkyPPNU/s400/kristik+pangeran+antasari.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5560969007170029714" /></a> </div> </div> <div class="Page"> <div class="Pad"> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih_oveZ8xiV1Hg9wx60mE2IB6IXJRO27hY_ZqtsRpOT2Oj1LeEm4FCjfs3glsgQTR3sJ5gtU7bx1kXzBBKrQhKpCucNUBcJOJ_zpo3uZxro2NGM1WKNpX6vZzQXRCRYOn1zmqOw3YXdQI/s1600/flowers+116+cross+stitch.jpg"><img style="border:1px solid black; padding:1px;float:left; margin:0 ;cursor:pointer; cursor:hand;width: 220px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih_oveZ8xiV1Hg9wx60mE2IB6IXJRO27hY_ZqtsRpOT2Oj1LeEm4FCjfs3glsgQTR3sJ5gtU7bx1kXzBBKrQhKpCucNUBcJOJ_zpo3uZxro2NGM1WKNpX6vZzQXRCRYOn1zmqOw3YXdQI/s400/flowers+116+cross+stitch.jpg" alt=""id="BLOGGER_PHOTO_ID_5563618978329392994" /></a> </div> </div> <div class="Page"> <div class="Pad"> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiWNglx-D1hSqNTxrUkzyd01uIB7crFyi5jm6thbKzNLbuYbnrtCmrk9FLjP5T5jW7vUvLmN3GDrC-oqlJCupw3eRFch-B7d0aNMmNG8c6g6FOAvKRHL3rkSOQYWfO_tFNLnsIgD4e63I/s1600/flowers+115+cross+stitch.jpg"><img style="float:left; margin:0;cursor:pointer; border:1px solid black; padding:1px; cursor:hand;width: 220px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiWNglx-D1hSqNTxrUkzyd01uIB7crFyi5jm6thbKzNLbuYbnrtCmrk9FLjP5T5jW7vUvLmN3GDrC-oqlJCupw3eRFch-B7d0aNMmNG8c6g6FOAvKRHL3rkSOQYWfO_tFNLnsIgD4e63I/s400/flowers+115+cross+stitch.jpg" alt=""id="BLOGGER_PHOTO_ID_5563612671659457586" /></a> </div> </div> <div class="Page"> <div class="Pad"> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8YXEgqWBA_W8QEWHjLkoTjlYAbj7rt6C6fwEvf_wYEC2O4t9ZHg00AnALbREh5k4K-PX9lIOI0cAvKk3N9p_Y1NVTbjnZhVlGWlC4bbF2HOKSwJtXazRc-J8hiVLtyiLzMqokAFqN_rk/s1600/kristik+h+agus+salim.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 220px; height: 223px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8YXEgqWBA_W8QEWHjLkoTjlYAbj7rt6C6fwEvf_wYEC2O4t9ZHg00AnALbREh5k4K-PX9lIOI0cAvKk3N9p_Y1NVTbjnZhVlGWlC4bbF2HOKSwJtXazRc-J8hiVLtyiLzMqokAFqN_rk/s400/kristik+h+agus+salim.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5560810151924847778" /></a> </div> </div> </div> </div></form> <script type="text/javascript"> tabview_initialize('TabView'); </script><div></div>

Selamat mencoba, pasti bisa. Oh ya, kode gambar itu bisa juga diganti dengan kode iklan atau tulisan apapun yang kamu mau. Asyik khan. Sekedar catatan: kode ini hanya bisa berfungsi di gadget (elemen halaman), bukan di postingan blog. Ukuran foto yang akan dimasukkan ke kotak ini harus disesuaikan dulu. Caranya? Klik di sini ...

tag slideshow, tutorial | judul Satu Kotak untuk Display Banyak Foto