Widget Multi Tap View

Nah! kesempatan kali ini,akan membahas tentang widget multi tabView Pada Blog’.
Membuat Widget sederhana yang bertujuan untuk menghemat tempat,sekaligus menambah kerapian dari blog/web tersebut.
Contoh menu nya seperti di bawah ini,Masih bewarna hijo,klw sobat pengen ganti warna laen,sobat bisa otak atik kode warna nya.

Demo TabView :

TAB 1
TAB 2
TAB 3

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3

Cara Membuat Multi Halaman

Pergilah ke Dashboard,lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.
Letakkan kode berikut:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color: lime;
padding-top: 2px;
border: 1px solid #fff;
-webkit-box-shadow:0px 0px 55px lime;-moz-box-shadow:0px 0px 55px lime;
border-bottom: 1px solid #fff;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
-webkit-box-shadow:0px 0px 55px lime;-moz-box-shadow:0px 0px 55px lime;
{
background-color: lime;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid lime;
overflow: hidden;
background:#000 url('https://lh3.googleusercontent.com/-Bu0qoZ12Plk/TWajfsmKzlI/AAAAAAAABqM/7UQYU7UfDWY/s1600/pandet1.gif'); /* Warna background Kotak konten */
-webkit-box-shadow:0px 0px 55px lime;-moz-box-shadow:0px 0px 55px lime;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src=" http://h1.ripway.com/pandet/JavaScript/tabview-pandet.js  "></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Selamat Mencoba..!!!

Tweet