Cara membuat tab view valid html 5 dan seo frendly

TAB VIEW

 

Tab View adalah beberapa halaman html yang digabungkan menjadi satu dan memakai menu navigasi untuk memanggil semua element halamannya yang dioperasikan dengan suatu script, dan banyak juga orang menyebuttan dengan sebutan "TABBER"

Kegunaan

 

Pada dasarnya tabview pada awalnya dipakai dalam suatu halaman website yang berbasih PHP seiring dengan canggihnya pemikiran orang orang sehingga muncullah tab view diblog khususnya blogspot. Tab view sangat cocok dibuat iblog sebab tidak banyak makan tempat alis banyak gadget sehingga apa bila gadget terlalu banyak loding blogpun semakin lambat. Apa bila kita mempunyai banyak kategori contohnya, bila 15 kategori yang kita miliki dan kita ingin menampilkan 5 kategori di halaman blog kita saya rasa pasti makan tempat dan blog kita sepertinya sembraut. Nah disinilah prannya tab view ini, dan saya berharap sobat bloger sudah dapat memahaminya.

Dalam tutorial kali ini saya akan membahas " Cara membuat Tab View Valid HTML 5 " dan saya berharap sobat bloger bukan hanya dapat memasang tapi harus lebih mampun untuk menggunakannya dalam halaman kita. Kegunaan tab view untuk halaman kita pastinya akan mempersimpel tataletak halaman dan mempercepat loding serta mudah untuk dilihat para pengunjung blog kita. Struktur dari tabview ini adalah saat sebuat menu navigasi kita klik secara spontan page yang telah bersangkutan dengan menu navigasi tadi akan secara otomatis terpanggil dan memunculkan apa yang sudah kita letakkan pada page tadi.

Install Program CSS 

 

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.BD_tabview {border-top:4px solid #333;}
.BD_tabview a {font: 11px Verdana, Arial, Helvetica, sans-serif;overflow:none;color: #003366;line-height:16px;letter-spacing:0.1em;text-decoration: none;display:block;padding:8px 6px 10px 5px;background: 0px ;font-weight: normal; } .BD_tabview a:hover {text-transform: none;color: #FFFFFF;background-color: #379BFF;} div.TabView div.Tabs a{float: left;display: block;width: 93px;height: 30px; text-align: center; margin: 5px 0px 0px 3px;background-color: #000; padding-top: 10px; border: 1px solid #ffffff; border-bottom:0px solid #ccc; font-family: "Arial, Helvetica, sans-serif", Arial; font-weight: 900;color: #FFFFFF;text-decoration: none;text-shadow: none;} div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #970000;font-family: Arial, Helvetica, sans-serif;color:#FFFF00;text-shadow: none;} div.TabView div.Pages{clear: both;border: 2px solid #cccccc; overflow: hidden;background-color: #FFFFFF; } div.TabView div.Pages div.Page{height: 100%;padding: 0px; overflow: hidden;} div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}

 

Install Program Tag HTML & Script 

 

• Login ke dashboard anda
• Masuk ke "TATA LETAK"
• Klik "Add GADGET" ( tambahkan gadged )
• Copas Code script / HTML dibawah ini,

<div id="TabView" class="TabView">
<div style="width: 300px; font-size:12px;" class="Tabs">
<a>TUTORIAL</a>
<a>COMPUTER</a>
<a>COMUNITY</a></div>
<div style="border: 1px #BBBBBB solid;-moz-box-shadow: 0px 0px 8px #BBB;-webkit-box-shadow: 0px 0px 8px #BBB;box-shadow: 0px 0px 8px #BBB;width: 300px; height: 400px;" class="Pages">
<div class="Page">
<div class="Pad">
<script>
var numposts = 100;
var standardstyling = true;
</script>
<script>
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write();
document.write(posttitle);}
if (standardstyling) document.write();
document.write();
}
</script>
<div style="border: 0px #000 solid; margin-right: 0px; height: 390px; overflow: auto; padding: 0px; width: 290px;">
<div class="BD_tabview">
<script src="URL BLOG ANDA /feeds/posts/default/-/LABEL ANDA ?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</div></div>
</div>
</div>
<div class="Page">
<div class="Pad">
<script>
var numposts = 100;
var standardstyling = true;
</script>
<script>
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write();
document.write(posttitle);}
if (standardstyling) document.write( );
document.write();
}
</script>
<div style="border: 0px #000 solid; margin-right: 0px; height: 390px; overflow: auto; padding: 0px; width: 290px;">
<div class="BD_tabview">
<script src="URL BLOG ANDA /feeds/posts/default/-/LABEL ANDA ?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</div></div>
</div>
</div>
<div class="Page">
<div class="Pad">
<script>
var numposts = 100;
var standardstyling = true;
</script>
<script>
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write();
document.write(posttitle);}
if (standardstyling) document.write( );
document.write();
}
</script>
<div style="border: 0px #000 solid; margin-right: 0px; height: 390px; overflow: auto; padding: 0px; width: 290px;">
<div class="BD_tabview">
<script src="URL BLOG ANDA /feeds/posts/default/-/LABEL ANDA ?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</div></div>
</div>
</div>
</div></div>
<script src="http://rivaiblog.googlecode.com/files/Tabview.js">
</script>
<script>
tabview_initialize('TabView');
</script>

 

Keterangan Code

 

• Code tulisan warna merah adalah ukuran box
• Code tulisan warna biru ganti dengan label/kategori blog anda
• Code tulisan warna orange isikan dengan URL Blog anda
• Code tulisan warna hijau adalah banyaknya post yang akan ditampilkan

 

Membuat lebih dari 1 label dalam satu tabpage

 

• Duplikat code seperti code dibawah ini

<script src="URL BLOG ANDA /feeds/posts/default/-/LABEL ANDA ?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>

• Ganti label anda agar jangan double
• Bila anda ingin menampilkan lebih banyak lagi silahkan duplikat code diatas
• Silahkan ganti code CSS nya sesuai selera anda.
• Bila anda ingin artikel ini ada iblog anda silahkan hubungi saya.
• Bila da yang kurang jelas mengenai tutorial ini silahkan hubungi saya lewat comentar

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 11:42 PM