Membagi Postingan pada Blog pada satu halaman

Agar Para pengunjung Blog anda dapat mudah membaca deskripsi dari postingan yang anda tulis, juga untuk meningkatkan trafic SEO (Search Engine Optimization). Pada postingan kali ini saya akan membagikan beberapa tips untuk membagi postingan pada Blogger. Tutorial yang saya bagikan kali ini dengan menambahkan fitur Pembagi halaman Blog Split Page & Tab View.

• Split Page
• Tab View

Cara Memasang Split Page Pada Postingan Blog

Split Page digunakan untuk membagi halaman pada membagi artikel panjang pada blogspot menjadi beberapa halaman  postingan. Split Page biasanya digunakan pada situs yang mempunyai deskripsi tulisan yang panjang, agar para pengunjung dapat dengan mudah membaca artikel yang anda buat.

untuk contoh blog yang sudah menggunakan Split Page bisa dilihat di Link

Berikut Langkah-langkah untuk membuat Split Page :

1. Apabila Blog yang anda gunakan telah terpasang jquery (versi apa pun bisa), jika belum terpasang atau ingin mengupdate jquery terbaru, silahkan tambahkan kode script Jquery yang menggunakan update terbaru. Pasang di atas kode </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

2. Selanjutnya untuk menambahkan pembagi halaman / Split Page pada artikel Blog, pada setiap postingan yang akan anda buat copy paste kode di bawah ini.

 <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">
Isi Deskripsi Postingan bagian 1 disini
</div>
<div class="content_2" style="display: none;">
Isi Deskripsi Postingan bagian 2 disini
</div>
<div class="content_3" style="display: none;">
Isi Deskripsi Postingan bagian 3 disini
</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> 

3. Setelah Script Kode ditambahkan, Ganti Isi Deskripsi Postingan bagian disini sesuai deskripsi artikel yang anda inginkan. Dengan Panduan tutorial ini anda juga bisa memodifikasi untuk menambahkan atau mengurangi jumlah halaman.
4. Apabila Split Page tidak dapat berfungsi, cara mengatasinya dengan menghapus URL ID blogger yang menempel pada class="button seperti pada contoh gambar di berikut ini.

Cara Memasang Tab View Pada Postingan Blog

 
Tab View digunakan untuk pemisah kontent yang berbeda dalam satu postingan. Tab View biasanya digunakan pada situs download seperti  Software, Game, Video, Tutorial. Tab View berikut ini dibuat menggunakan script dari CSS, HTML, dan Jquery.

untuk contoh blog yang sudah menggunakan Tab View bisa dilihat di Link

Berikut Langkah-langkah untuk membuat Tab View :
1. Apabila Blog yang anda gunakan telah terpasang jquery (versi apa pun boleh), jika belum terpasang atau ingin mengupdate jquery terbaru, silahkan letakkan script Jquery yang menggunakan update terbaru. Pasang di atas kode </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

2. Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>.

.tabs{width:100%;display:inline-block}
.tab-links:after{display:block;clear:both;content:''}
.tab-links li{margin:0 5px;float:left;list-style:none}
.tab-links a{padding:9px 15px;display:inline-block;border-radius:3px 3px 0 0;background:#7FB5DA;font-size:16px;font-weight:600;color:#4c4c4c;transition:all linear 0.15s}
.tab-links a:hover{background:#a7cce5;text-decoration:none}
li.active a,li.active a:hover{background:#fff;color:#4c4c4c}
.tab-content{padding:15px;border-radius:3px;box-shadow:-1px 1px 1px rgba(0,0,0,0.15);background:#fff}
.tab{display:none}
.tab.active{display:block} 

3. Letakkan script berikut di atas kode </body>.

<script type='text/javascript'>
jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
         // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
        jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);  
         // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
         e.preventDefault();
    });
});
</script>

4. Apabila sudah ditambahkan, klik save. 

Sekarang Blog anda memiliki fitur tab view. Untuk memunculkan tab view pada postingan blog anda silahkan ikuti tutorial pemasangannya pada postingan.

Memunculkan Tab View Pada Postingan

1. Siapkan artikel post yang akan dipasangi tab view lalu ubah post dari Compose ke HTML.
2. Letakkan kode Tab View berikut kedalam postingan tersebut.

 <div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
<li><a href="#tab3">Tab #3</a></li>
<li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>
Tab #1 Isi Judul Konten anda disini !</p>
<p>
Isi Deskripsi Konten Anda disini  ...!!</p>
</div>
<div id="tab2" class="tab">
<p>
Tab #2 Isi Judul Konten anda disini !</p>
<p>
Isi Deskripsi Konten Anda disini  ...!!</p>
</div>
<div id="tab3" class="tab">
<p>
Tab #3 Isi Judul Konten anda disini !</p>
<p>
Isi Deskripsi Konten Anda disini  ...!!</p>
</div>
<div id="tab4" class="tab">
<p>
Tab #4 Isi Judul Konten anda disini !</p>
<p>
Isi Deskripsi Konten Anda disini  ...!!</p>
</div>
</div> 

• ➠Silahkan ganti tulisan Tab #1, Tab #2, Tab #3 dan Tab #4 sesuai judul tab yang diharapkan.
• ➠Ganti Isi Deskripsi Konten Anda disini  ...!! dengan isi konten yang di harapkan, seperti profil, about, Tabel, Screenshot, Link dan sebagainya.

3. Silahkan edit isi kontent dari tab view tersebut lalu klik Publikasikan dan selesai.
4. Anda juga dapat menambahkan banyak Tab atau juga bisa mengurangi Tab pada postingan.
5. Apabila Tab view tidak dapat berfungsi, cara mengatasinya dengan menghapus URL ID blogger yang menempel pada kolom tab seperti pada contoh gambar di berikut ini

Anda juga bisa mengubah warna background atau text  menggunakan kode warna pada link HTML Color Code & Name.