Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, May 24, 2013

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"

tab view

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 11:42 PM

15 comments :

  1. mantap broo.. ijin make gan..

    ReplyDelete
  2. thx your visit...
    oke gan silahkan... bila ada masalah silahkan hub saya.. salam bloger

    ReplyDelete
  3. makasih infonya.. kalau kita ingin menempatkan blog archive populer post dan label gimana ya???

    ReplyDelete
  4. @arul....
    Saya rasa untuk archive dan label kalo menurut saya tidak usah di tampilkan dihalaman karena blog menjadi lambat lodingnya, dan untuk SEO sangat mempengaruhi. tapi kalo sohib ingin ntar aku buat scriptnya.

    ReplyDelete
  5. Thanks gan, ini yang lagi saya cari - cari. Sukses terus buat blog ini :D

    ReplyDelete
  6. sama sama gan amin atas doanya...

    ReplyDelete
  7. sob gimana cara membuat menu melayang di atas header sob , seperti punya anda sob ..?

    ReplyDelete
  8. min labelnya maksudnya gmn? saya mau nampilin blog archive, label dan populart post. terus labelnya yg bewarna biru diganti dengan htmlnya gitu?

    ReplyDelete
    Replies
    1. tutorial ini hanya menampilkan artikel pada label blog saja,

      Cth : tab view di atas ada 3 page, jadi setiap tab page kita munculkan judul artikel blog pada label misalkan label 'TUTORIAL ' maka yang muncul pada tab page 1 berarti hanya judul artikel yang berlabel 'Tutorial ' saja.

      Untuk membuat tabview otomatis, silahkan kunjungi laman dibawah ini.

      http://rivai-silaban.blogspot.com/2013/06/cara-membuat-tab-view-otomatis-di-blog.html

      Delete
  9. kalo seandainya yang di dalamnya tab view kita pasang widget seperti alexa, dll gmn gan cranya?

    ReplyDelete
    Replies
    1. gantikan saja script dan kodenya ( masukkan kode alexa ) didalam code class="Page" dan class="Pad"

      Delete
  10. om,gimana caranya biyar tab view ini di isi dengan random post, popular post dan komentar visitors ? bukan label-label..
    minta script nua yah !

    ReplyDelete
    Replies
    1. silahkan kunjungi halaman ini..

      http://rivai-silaban.blogspot.com/2013/06/cara-membuat-tab-view-otomatis-di-blog.html

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog