Blog iTapuih.com

Kilas Balik Blogger Indonesia Selengkapnya
Home
Tutorial Blog

Cara Membuat Postingan Blog dengan Laman Berbeda

Tutorial kali ini saya akan share tentang cara membuat postingan article dengan laman yang berbeda. Jadi begini, sobat ingin menampilkan 3 Post dalam satu Laman, tapi untuk laman 2 dan 3 bisa di lihat hanya dengan mengklik angka 1,2 atau 3. Masih bingung ya, silahkan lihat demo di bawah ini untuk lebih jelasnya.
Tutorial Blogger

Cara Membuat Postingan Blog dengan Laman Berbeda

Cara Membuat Postingan Blog dengan Laman Berbeda
demo

Untuk menggunakannya masukkan kode berikut ke dalam postingan sobat(Ingat pilih HTML bukan COMPOSE.
<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>

Catatan Penting

1. Sobat sudah meletakkan jquery plugin pada template blog sobat, kalo belum silahkan di pasang terlebih dahulu, dengan cara cari kode <head> dan letakkan kode di bawah ini tepat di bawah kode <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
2. Silahkan isi content article sobat pada Add content here dan letakkan URL link postingan sobat pada tanda #.

3. Jika semua petunjuk di atas sudah di terapkan silahkan di Publish postingannya.