Trik Memasang Multi Tab Dalam Posting

Assalamu'alaikum,

Mungkin Aden/Ajeng sudah tidak asing lagi dengan apa itu multi tab yang contohnya juga bisa dilihat di sidebar forum tercinta ini.

Setelah cari sana sini, saya berhasil menemukan Trik Memasang Multi Tab Dalam Posting dari blog berbahasa Inggris.

Spoiler: Sumber

mybloggerlab.com

Hasilnya akan seperti di bawah ini.

Spoiler: Multi Tab Dalam Posting

Untuk membuat Multi Tab Dalam Posting, silakan ikuti cara berikut ini:

Spoiler: Letakkan kode script berikut sebelum tag </head>.

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

Spoiler: Letakkan kode CSS berikut sebelum tag ]]></b:skin>.

HTML:

.post-pagination {
    margin: 40px auto;
    text-align: center;
    width: 100%;
float:left;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}

Spoiler: Pada posting silakan letakkan kode HTML berikut.

HTML:

<div class="content_1">
Konten 1<br/> Disinilah Anda harus menempatkan isi konten dari tab konten ke-1 yang dapat memuat teks, gambar dan/atau video.
</div>
<div class="content_2" style="display: none;">
Konten 2<br/> Disinilah Anda harus menempatkan isi konten dari tab konten ke-2 yang dapat memuat teks, gambar dan/atau video.
</div>
<div class="content_3" style="display: none;">
Konten 3<br/> Disinilah Anda harus menempatkan isi konten dari tab konten ke-3 yang dapat memuat teks, gambar dan/atau video.
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Demikianlah Trik Memasang Multi Tab Dalam Posting, silakan dikustomasi agar sesuai selera Aden/Ajeng.

Selamat bereksperimen

Wassalam

 

Tab di dalam posting sungguh manis mas.. sayang itu mengganggu seo. Kalau situs-situs berita pake teknis ini karena mereka sudah kuat brand nya, jadi butuh suatu tampilan yang manis dan tidak membosankan karena kepanjangan kalau 1 post..

Beda halnya dengan kita yang ngandalkan visitor secara seo..

Ref: coba cek video ini menit ke 11 hingga 12.

 

Maksudnya robot search engine jadi susah merambah posting, ya?

 

Itu skip amankah? saya kagak deman ngedit sampai ke head. Ini bukan blog garatisan.... Salah dikit themenya bisa berabe.

Kalau saya lebih baik menggunakan page
Terimakasih sarannya.

 

Aman dari apa/siapa?

Pasang aja di yang bukan gratisan (kalau ada).

 

Yup.. itu berarti konten tersembunyi. Kalau mau manis dan malah mendukung seo, coba cek di blog bandungoge.com. khususnya artikel tentang trans studio bandung. Lihat garis biru di bawah posting (pagination). Kamu sorot page mouse, maka ada html: link prev / next. Itu sesuai kaidah seo. Jadi bukan css or script, dijamin super super ringan. Tinggal dipermanis aja modelnya klo jago design.
Kenapa sistem itu mendukung seo? Karena 5 postingan dijadikan satu itu berurutan. Seolah robot bacanya 1 postingan yang relevan dan berkaitan. Dan karena totalnya bisa ribuan kata, makanya mudah masuk SERP.

Ref:

• https://support.google.com/webmasters/answer/1663744?hl=en
  
• https://webmasters.googleblog.com/2011/09/pagination-with-relnext-and-relprev.html

Monggo dikreasikan html nya, trus share lagi di sini. Klo di bandungoge punyaku itu sederhana pooolll, jauh dari desain keren krn saya gak jago desain. Saya taunya prinsipnya aja.

 

Klo yang dikasih TS itu khusus egine blogspot, kang.. gak masalah sih secara css dan modelnya manis banget.. klo blog kita sehari udah puluhan ribu pengunjungnya (min 70% existing visitor / pelanggan bukan new visitor), saya sarankan pakai itu.. karena manis banget modelnya..

 

@nelson sitompul. Untuk pemasangan tag rel="next" di Blogspot gimana yah?

 

Wuihhh muncul juga lu.. dah lama gak bersua..hehehe
Simple koq mas.. kaya bikin html url link biasa aja.. di semua engine bisa selama mengadopsi html.

<link rel="prev" href="http://www,example,com/article-part1,html">
<link rel="next" href="http://www,example,com/article-part3,html">

Klo yang di blog saya, link tersebut dibungkus pake kode tabel single, jadi kaya dikotakin gitu..

 

Iya nih, maklum lagi pura-pura sibuk.
Saya sudah lihat blognya, misal bandungoge.com/trans-studio-bandung.html
Bukannya di pasang di head yah? Berbedakah dengan Artikel Terkait / Related Posts ?

 

Itu masangnya di html postingan.. jadi abis bikin posting, klik edit html pada post tersebut lalu paste aja..

Beda dengan artikel terkait. Klo artikel terkait lebih cocok disebut internal link. Kalau teknis di atas sebenarnya internal link juga tetapi ada perlakukan khusus. Yaitu crawl google akan membacanya sebagai satu kesatuan dengan artikel sebelumnya (ini akibat adanya perintah next / prev).
Jadi klo jago ngoprek, related artikel bisa juga ditambahin code next / prev, dan silakan tentukan urutannya. Ini akan lebih powerfull dalam seo karena artikel makin kaya keyword, panjang dan saling berhubungan.

 

Hmm, bentar saya quote

 

mendingan pakai page bukan ya.....

 

Aku malah nggak ngerti kaya gituan .. btw thanks infonya...

 

Itu klo kita memiliki single topik dan home page jadi center (biasanya situs bisnis).

Tapi kalau kita mengelola blog dengan banyak artikel utama (masing-masing dibidik dengan kw masing2), maka link next / prev dimasukkan pada postingan utama (contohnya artikel trans studio di bandung oge).

 

bagus itu mas pakai seperti itu karena memudahkan pengunjung dan