Trik Memasang Multi Tab Dalam Posting

Discussion in 'Blogger' started by Yuyutsu, Sep 2, 2016.

  1. Yuyutsu

    Yuyutsu Member

    Joined:
    Mar 22, 2015
    Messages:
    312
    Likes Received:
    34
    Trophy Points:
    28
    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.


    Hasilnya akan seperti di bawah ini.

    [​IMG]

    Untuk membuat Multi Tab Dalam Posting, silakan ikuti cara berikut ini:
    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>

    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;
    }

    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
     
    nelson sitompul likes this.
  2. nelson sitompul

    nelson sitompul Super Level

    Joined:
    May 3, 2014
    Messages:
    2,285
    Likes Received:
    397
    Trophy Points:
    83
    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.
     
    lasealwin and Yuyutsu like this.
  3. Yuyutsu

    Yuyutsu Member

    Joined:
    Mar 22, 2015
    Messages:
    312
    Likes Received:
    34
    Trophy Points:
    28
    Maksudnya robot search engine jadi susah merambah posting, ya?
     
  4. lasealwin

    lasealwin Well-Known Member

    Joined:
    Aug 1, 2015
    Messages:
    1,862
    Likes Received:
    171
    Trophy Points:
    63
    Itu skip amankah? saya kagak deman ngedit sampai ke head. Ini bukan blog garatisan.... :D Salah dikit themenya bisa berabe.

    Kalau saya lebih baik menggunakan page
    Terimakasih sarannya.
     
  5. Yuyutsu

    Yuyutsu Member

    Joined:
    Mar 22, 2015
    Messages:
    312
    Likes Received:
    34
    Trophy Points:
    28
    Aman dari apa/siapa?

    Pasang aja di yang bukan gratisan (kalau ada).
     
  6. nelson sitompul

    nelson sitompul Super Level

    Joined:
    May 3, 2014
    Messages:
    2,285
    Likes Received:
    397
    Trophy Points:
    83
    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:
    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.
     
    Yuyutsu likes this.
  7. nelson sitompul

    nelson sitompul Super Level

    Joined:
    May 3, 2014
    Messages:
    2,285
    Likes Received:
    397
    Trophy Points:
    83
    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..
     
  8. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
  9. nelson sitompul

    nelson sitompul Super Level

    Joined:
    May 3, 2014
    Messages:
    2,285
    Likes Received:
    397
    Trophy Points:
    83
  10. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    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 ?
     
  11. nelson sitompul

    nelson sitompul Super Level

    Joined:
    May 3, 2014
    Messages:
    2,285
    Likes Received:
    397
    Trophy Points:
    83
    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.
     
  12. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Hmm, bentar saya quote
     
  13. vanessa san

    vanessa san New Member

    Joined:
    Aug 16, 2016
    Messages:
    17
    Likes Received:
    0
    Trophy Points:
    1
    mendingan pakai page bukan ya.....
     
  14. Yusup febriansah

    Yusup febriansah Member

    Joined:
    Apr 13, 2016
    Messages:
    571
    Likes Received:
    43
    Trophy Points:
    28
  15. nelson sitompul

    nelson sitompul Super Level

    Joined:
    May 3, 2014
    Messages:
    2,285
    Likes Received:
    397
    Trophy Points:
    83
    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).
     
    Ardilas likes this.
  16. Wong Blajar

    Wong Blajar Member

    Joined:
    Dec 14, 2015
    Messages:
    337
    Likes Received:
    12
    Trophy Points:
    18
    bagus itu mas pakai seperti itu karena memudahkan pengunjung dan
     
Loading...

Share This Page