alexa-tracking

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/50de98ac6112431977000003/ask--ada-yang-tau-script-tab-kaya-gini--mau-di-buat-ke-web-sendiri-tanpa-wordpres
Peringatan! 
ASK !!! Ada yang tau script posttab kaya gini ?
gan kalau buat tab kaya gini gimana yah ??? ini contoh dari suatu situs :

Quote:http://www.skidrowgames.net/might-an...e-skidrow.html

ASK !!! Ada yang tau script tab kaya gini ? mau di buat ke web sendiri tanpa wordpres

jadi isi dari menu tab di tampilkan dalam 1 page itu saja, tidak ganti page ...
misal dari description, terus klik ke screenshot (tapi tampil nya masih di page yang sama), lanjut lagi ganti ke tab video (tetap tampilnya di page itu sendiri).

itu plugin dari wordpress namanya posttabs
Quote:http://wordpress.org/extend/plugins/...s/screenshots/

Spoiler for penampakan:


nah, maksudnya. ane mau tau code htmlnya itu, jadi biar bisa digunakan di selain wordpress. Mungkin agan2 disini ada yang tau code html nya itu seperti apa ? emoticon-Bingung (S)

mohon bantuannya yah emoticon-Big Grin

Ini namanya "Tab Menu pake CSS"

<title>Membuat CSS Tabs</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
p { margin: 5px 5px 10px 0; }
#page-wrap { width: 960px; margin: 0 auto; }
h1 { font: 36px Georgia, Serif; margin: 10px 0; }
.group:after {
visibility: hidden; display: block;
font-size: 0; content: " "; clear: both; height: 0;
}
.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a {
color: black; float: left; display: block;
padding: 4px 10px; margin-left: -1px;
position: relative; left: 1px;
background: white; text-decoration: none;
}
.tabs li a:hover { background: #ccc; }
.tabbed-area { margin: 0 0 120px 0; }
.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div {
background: white; padding: 20px; min-height: 250px;
position: absolute; top: -1px; left: 0; width: 100%;
}
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }
#box-one:target, #box-two:target, #box-three:target { forbidden 1; }
</style>
</head>
<div id="page-wrap">
<div style="width: 420px; float: left;">
<h1>CSS Tabs</h1>
<p>Contoh Sederhana</p>

<div class="tabbed-area">
<ul class="tabs group">
<li><a href="#box-one">Tab 1</a></li>
<li><a href="#box-two">Tab 2</a></li>
<li><a href="#box-three">Tab 3</a></li>
</ul>

<div class="box-wrap">
<div id="box-one">
<p><em>Konten untuk Tab 1</em></p>
<p>Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egest
augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="box-two">
<p><em>Konten untuk Tab 2</em></p>
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
</div>
<div id="box-three">
<p><em>Konten untuk Tab 3</em></p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas.</p>
</div>
</div>
</div>
coba cari aja gan di mbah google, banyak kok. tabs jquery.
Pake jQuery UI gan, ato pake punya Bootstrap juga bisa
Makasih banget nih para mastah pencerahannya emoticon-Matabelo ... ane coba dulu ya gan emoticon-I Love Kaskus (S) emoticon-I Love Kaskus (S) emoticon-I Love Kaskus (S)

Coba

ane punya cara lain.. agan bisa edit pake DW CS!.. bikin tab kya gtu ada semua di DW CS..

emoticon-Request
kalau saya pake jurus CTRL+U emoticon-Big Grin