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

widget

• tutorial footer style ide blogspot v1
• widget social media blogspot
• widget social media
• cara membuat widget spoiler background style
• widget kategori floating
• cara membuat widget link di atas postingan blog
• cara membuat widget space iklan text
• cara membuat widget permalink with space iklan
• cara membuat halaman kontak di blog
• cara membuat subscribe with advertise
• cara membuat widget share image hover

seo

• cara memilih nama domain
• fungsi description dan title link blog
• mempercepat loading blog dengan compress html
• cara membuat open new tab semua link di blog
• cara membuat blog menjadi nofollow
• mengantisipasi tag heading h4 h5 h6 not found pada tool seo
• membuat link internal dan external seo friendly
• meningkatkan trafik pengunjung dengan feedburner
• meningkatkan trafik dengan web direktori dmoz
• verifikasi blog ke google webmaster
• Random post dengan gambar valid html5

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

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