Cara membuat tab viev

Saya sendiri kadang bingung, banyak widget yang harus di tampilkan di sidebar blog saya tapi karena tempat tidak mencukupi akhirnya tidak saya pasang. Untuk mengatasi semua itu kita bisa memakai cara dengan membuat menu tab view 3 kolom yang tentunya akan menghemat tempat, karena kita bisa menaruh widget-widget blog yang kita inginkan di dalam menu tab view tersebut.

Berikut Cara Membuat Menu Tab View :
Masuk blogger > rancangan > edit html > centang expand template widget
cari kode ]]></b:skin>
copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Perhatikan tulisan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).

selanjutnya cari kode </head>kemudian pastekan kode script di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Kemudian Simpan / Save Template.
Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript
copy kode di bawah ini di dalam box atau kotak HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Perhatikan tulisan merah width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3  bisa di isikan script html, banner dan script widget lainnya.. Sampai disini selesai tidaklah begitu sulit Cara Membuat Menu Tab View, hanya membutuhkan kesabaran sedikit saja :D

Silahkan di coba semoga berhasil.

sumber http://www.antigaptek.com/2011/07/cara-membuat-menu-tab-view.html

Scrip bikin recent komentar di blog

langsung tambah gadget, dan copas kode di bawah ini sobat.

<script style="text/javascript" src="http://sites.google.com/site/anasku2000/comments.js"></script><script style="text/javascript">var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src=" http://pm-gank.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

huruf berwarna merah itu di ganti dengan alamat URL blog sobat, dan jangan lupa di save.

Scrip recent post

1. Login ke Blogger lalu klik Layout -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript
3. Copy kode dibawah ini dan paste ke dalam kotak "content".

<script style="text/javascript" src="http://hbhost.googlecode.com/files/recent_posts.js"></script><script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 50;var standardstyling = true;</script><script src="http://namabloganda.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Keterangan:
Angka 5 pada numposts menunjukkan jumlah postingan yang muncul. Ganti sesuai keinginan.
false pada showpostdate menunjukkan tanggal postingan tidak ditampilkan. Ganti "true" jika anda ingin menampilkan tanggal postingan.
false pada showpostsummary menunjukkan isi postingan tidak ditampilkan. Ganti "true" jika anda ingin menampilkannya.
Angka 50 pada numcharts menunjukkan jumlah huruf yang tampil. Ini hanya berlaku jika showpostsummary=true.
Ganti tulisan yang dicetak tebal dengan nama blog anda. 

4. Kalau sudah, klik Save. Selesai

Pasang banner atau iklan di blog

langsung copy pste scrip di bawah ini dan simpan di tambah gadget.

<a href="URL Situs" target="_blank" title="Keterangan Situs"><img style="border:0px; margin-top:5px; width:120px; height:50px;" alt="Nama Situs" src="URL Gambar Banner"/></a>

Belajar membuat kolom atau tabel di blog

 langsung copy paste di bawah ini dan simpan di tambah gadget sobat.

Nama tabel

satu kolom

script nya

<table width="200" border="1">
<tr>
<td scope="col"><div align="center">Nama tabel</div></td>
</tr>
<tr>
<td><div align="center">satu kolom</div></td>
</tr>
</table>

keras

watak

script nya

<table width="200" border="1">
<tr>
<td scope="col"><div align="center">keras</div></td>
<td scope="col"><div align="center">watak</div></td>
</tr>
</table>
;

qqq	wwww
aaaaa	zzzzz

scripnya

<table width="500" border="1">
<tr>
<td scope="col"><div align="center">qqq</div></td>
<td scope="col"><div align="center">wwww</div></td>
</tr>
<tr>
<td scope="col"><div align="center">aaaaa Goggle</div></td>
<td scope="col"><div align="center">zzzzz</div></td>
</tr>
</table>

qqqqqqqqqqqqqqqqqqqqqqqqqq
qq	aa	zz
xxxxx	vvvvv	wwwww
rrrrr	ffffff	hhhhh

script nya

<table border="1" style="margin-left: auto; margin-right: auto; text-align: left; width: 200px;"><tbody>

<tr> <th colspan="3" scope="col"><div align="center">qqqqqqqqqqqqqqqqqqqqqqqqqq
</div></th> </tr>
<tr> <td><div align="center"><strong>qq</strong></div></td>
<td><div align="center"><strong>aa</strong></div></td>
<td><div align="center"><strong>zz</strong></div></td>
</tr>
<tr> <td><div align="center">xxxxx</div></td>
<td><div align="center">vvvvv</div></td>
<td><div align="center">wwwww</div></td>
</tr>
<tr> <td><div align="center">rrrrr</div></td>
<td><div align="center">ffffff</div></td>
<td><div align="center">hhhhh</div></td>
</tr>
</tbody></table>


ket :
colspan="3" artinya baris pertama lebarnya 3 kolom

Scrip tanggal dan waktu di blog

kode scrip di bawah, nanti hasilnya seperti di gambar ini.

langsung saja kode di bawah ini di copy paste dan simpan di tambah gadget.

<script type="text/javascript">

now = new Date();

if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))

else (a=now.getTime());

now.setTime(a);

var tahun=now.getFullYear()

var hari=now.getDay()

var bulan=now.getMonth()

var tanggal=now.getDate()

var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")

var bulanarray=new Array("Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember")

document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)

</script>

<script type="text/javascript">

now = new Date();

if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))

else (a=now.getTime());

now.setTime(a);

document.write("Pukul : " + ((now.getHours() < 10) ? "0" : "") + now.getHours() + ":" + ((now.getMinutes() < 10) ? "0" : "") + now.getMinutes() + (" WIB "))</script>

Membuat ucapan selamat datang di blog

Berikan ucapan selamat datang kepengunjung blog and tentunya dengan bahasa kita masing-masing langsung saja anda copy kode script berikut ini.

contoh kode scrip di bawah, nanti hasilnya seperti di gambar ini sobat

<script type="text/javascript">
alert('TULISAN ANDA DISINI ')
</script>
<noscript>Enable javascript in your browser to view an important message</noscript>

copy paste di tambah gadged.

selamat mencoba kawan blogger :-)