Harga Jual / Beli Bitcoin

Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman

21:32:00 Wahab Saputra 46 Comments

Cara membagi konten atau artikel ke dalam tiga bagian dalam satu halaman - Teman blogger kali ini saya akan membuat tutorial untuk membuat posting ke dalam beberapa bagian, cara kerja script ini sebenarnya mirip dengan Tabviews yang kita kenal namun jika dilihat dari layout jauh berbeda.

Jika pada tabview konten dipisahkan bertujuan untuk mengelompokkan dalam kategori atau label khusus akan tetapi pada tutorial ini bertujuan untuk memisahkan artikel karna jumlah artikel yang cukup banyak jadi kita tidak perlu meng-scroll terlalu panjang kebawah cukup mengklik tombol untuk beralih ke konten selanjutnya.

View Live Demo

Membagi Artikel Tiga Bagian Dalam Satu Laman


Berikut tutorialnya :

Pastikan template blogger teman blogger sudah terdapat  Jquery :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Jika sudah abaikan saja,,,,dan jika belum ada silahkan tambahkan sebelum atau diatas <head>. Untuk membuat artikel posting teman blogger tebagi 3 silahkan gunakan kode di bawah ini. Simpan kode dalam post atau page pada mode HTML.

<style>
    .post-pagination {
        margin: 20px auto;
        text-align: center;
        width: 100%;
    }
    .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;
    }
    </style>
    <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>

    <div class="content_1">

    Add Content Here

    </div>

    <div class="content_2" style="display: none;">

    Add Content Here

    </div>

    <div class="content_3" style="display: none;">

    Add Content Here

    </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>

Silahkan ganti text Add Content Here dengan konten yang anda inginkan, baik itu text,  gambar video dan lain-lain...

46 comments:

  1. Wah tutorial menarik nih ngemuat Jquery

    ReplyDelete
  2. emang artikel suguhan kita dengan pake 3 bagian akan terlihat keren dan makjleb, tapi tetap saja jika sedang bokek dan jomblo mah nggak ngaruh....teteppusing ah

    ReplyDelete
  3. oo begini ya caraya . saya control s mas ah. sekalian di cobain. makasih mas wahab

    ReplyDelete
  4. Tumben mas wahab sepintar ini.....abis minum suplemen ya....he...he...untuk tutorial ini saya tertarik banget...mas...karna saya sering bikin tutorial panjang mas...tankyu infonya..like untuk mas Wahab

    ReplyDelete
  5. Langsung saya edit postingan saya yang panjang mas...dengan script ini...wah maknyos tipsnya...

    ReplyDelete
  6. izin comot mas,
    terimakasih ilmunya

    ReplyDelete
  7. koq pinter banget begitu sih Mas?

    ReplyDelete
  8. Replies
    1. Tapi yang ini gak ngereload lagi mas...

      Delete
  9. Artikelnya di potong menjadi 3 bagian. supaya bikin orang penasaran... sama kayak baca berita di media online. kirain pakai 3 url yang berbeda... berarti ngga berpengaruh sama pageview ya.. tapi artikelnya terlihat simpel

    ReplyDelete
  10. Saya lihat demonya keren juga ya mas?? jadi ga perlu kebanyakan scroll kebawah terus..
    tapi sayangnya saya belum sanggup buat artikel sepanjang itu mas, hehehe

    ReplyDelete
    Replies
    1. Buat jaga-jaga mas....sapa tau nanti butuh

      Delete
  11. Ilmu yang bermanfaat mas, dengan membagi postingan menjadi 3 page view pasti akan lebih meningkat ya, saya bookmark dulu mas.

    ReplyDelete
    Replies
    1. Siip mas...
      Kebetulan fungsinya reloadnya dihilangkan, agar pengunjung gak bete mas..

      Delete
  12. harus diamankan dulu euy scriptnya,, heheh mau coba - coba,, suaka penasaran... :D

    ReplyDelete
  13. punya saya ada tiga bagian juga, new post, older post dan home hehe

    ReplyDelete
  14. ohh jadi gini caranya ya bro, gue nayari banget tutorial gini sering liat di sportsatu.com tap dia ganti url tiap pindah.

    ReplyDelete
    Replies
    1. Klo doi make fungsi reload karna beda halaman...
      Khawatir BT nanti pengunjung klo pakai ngeloading lagi Bro...

      Delete
  15. saya pernah juga bikin artikel tiga bagian dan memang menarik untuk menerangkan bagian-bagian posting secara terpisah...tapi script yang dulu saya pergunakan agak ribet, tidak seprti script yang di share pada tutorial ini...saya pelajari dulu agan wahab...dan terima kasih...

    kalau boleh saran, mending area di bawah header blog itu dihapus aja, sehingga tampilan blog lebih simple dan enak kayaknya kalau kita berselancar di blog ini....ini hanya saran ya mas, mohon maaf kalau seandainya saya lancang. makasih lagi. salam sahabat blogger

    ReplyDelete
    Replies
    1. oh yaa...pas masuk melihat tampilan warna background jadi romantis juga gan blognya. heee

      Delete
    2. Silahkan dipelajari Mas...
      Kali aja bisa dimodifikasi biar lebih Ok...

      Nyantai aja Mas..Hal yang seperti itu yang ane butuhkan saran atau kritik buat blog saya...Mungkin nanti kali ya klo saya udah bosan sama tampilan ini...#UdahTerlanjurCinta....hehhehe

      Delete
    3. Gak tau nich lagi pengen aja Mas,,,
      Yang Pink-Pink gimana gitu...
      Wkwkwkkwk...

      Delete
    4. yang pink biasanya penuh cinta mas....kayaknya sih lagi jatuh cinta. asal jangan jatuh dari tangga aja mas.

      Delete
  16. Saya pernah nyari nyari tutorial membuat tombol next page untuk blogspot, tapi yang selalu nemu hanya utk wordpress.
    ini lagi gak nyari ... malah nemu di blog mas wahab saputra ^_^
    ternyata bisa ya maz he ... he ...thanksss
    siap di save dulu dan dicoba nanti :)Cool !!

    ReplyDelete
    Replies
    1. Sama-sama...
      Klo ada kesulitan untuk penerapannya,,ditanyain aja...

      Delete
  17. Itu otomatis ke semua laman artikel ya ? gmana kalau cuma pengen ada 1 laman artikel, bukan smeua laman

    ReplyDelete
    Replies
    1. Ini hanya untuk 1 posting atau laman aja Mas,,,
      Bukan untuk semuanya...

      Delete
  18. Bikin berat loading nggak mas?

    ReplyDelete
    Replies
    1. Sama sekali enggak bikin berat Mas...
      Malahan,,cara ini untuk meringankan loading laman atau posting yang konten atau artikelnya banyak...
      Karena kode hanya dipasang pada postingan atau artikel yang kita ingin bagi jadi tiga bagian,,,bukan dipasang di badan template...
      Bisa lihat demonya Mas...

      Delete
  19. muter-muter di sini, akhirnya baru kecantol sama yang ini..
    tambah berat banyak kah atau sedikti loadingnya klo pakai kode ini :)

    ReplyDelete

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!