Cara Membuat Multiple Pages di Postingan Artikel Blog dengan Navigasi - Pastinya kalian pernah melihat sebuah postingan artikel yang dibuat multiple pages atau postingan artikel yang dibagi menjadi beberapa halaman. Namun kebanyakan anda lihat di website yang menggunakan wordpress. Nah lalu apakah di blogger bisa buat postingan multiple pages . Nah kesempatan kali ini saya akan berbagi Cara Membuat Multiple Pages Pada Sebuah Artikel Blog dengan Navigasi di Blogger. Perlu diketahui, meskipun satu postingan dibagi menjadi beberapa halaman, tapi sebenarnya itu tidak membuat halaman yang baru, dan halaman tidak perlu di load berkali-kali atau menuju halaman baru untuk membaca artikel kelanjutannya. Fungsi dari membuat postingan multiple pages adalah jika kalian membuat artikel terlalu panjang dan agar loading halaman tersebut tidak terlalu lama maka ini salah satu solusinya, yaitu dengan membuat artikel tersebut terbagi menjadi beberapa halaman, misal dengan navigasi angka 1-3. Langsung saja simak langkah-langkanya berikut ini.
Cara Membuat Multiple Pages Pada Sebuah Artikel Blog dengan Navigasi
1. Pertama, masuklah ke akun blogger kalian dan masuk ke bagian template Edit Html
2. Kopikan code berikut ini tepat diatas kode </head> lalu simpan.
2. Kopikan code berikut ini tepat diatas kode </head> lalu simpan.
Code Script:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script
src='https://cdn.rawgit.com/KingKecil/File-JS/master/multitab.js'
type='text/javascript'></script>
<style>
.post-pagination { margin:40px auto; text-align:center; width:100%;
float:left; }
.button_1,.button_2,.button_3,.button_4 { border:2px solid #f4655f;
font-weight:900; padding:6px 10px; color:#f4655f; transition:ease 0.69s
!important; }
.button_1:hover,.button_2:hover,.button_3:hover,.button_4:hover { background:none repeat
scroll 0 0 #f4655f; color:#fff; text-decoration:none; }
</style>
NB: Apabila kode <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> sudah ada, tidak perlu ditambahkan lagi.
3. Kemudiah mulailah buat sebuah postingan, dan masuk ke mode HTML salin dan pastekan kode berikut ini.
Code Script:
<div class="content_1">
Masukan artikel kamu 1
</div>
<div class="content_2" style="display: none;">
Masukan artikel kamu 2
</div>
<div class="content_3" style="display: none;">
Masukan artikel kamu 3
</div>
<div class="content_4" style="display: none;">
Masukan artikel kamu 4
</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>
<a class="button_4" href="#">4</a>
</div>
5. Sebelum dipublish silahkan pratinjau terlebih dahulu, jika sudah benar dan selesai silahkan dipublish dan lihat hasilnya.
Keterangan: Kode yang diberi warna merah, ganti tulisan dengan postingan artikel kamu dan yang harus di ingat anda hanya bisa membagikan postingan anda hanya empat saja. Nanti postingan kamu akan terbagi menjadi empat halaman dalam satu postingan.
Jika di WordPress.com. Cara Membuat Multiple Pages cukup mudah. Tinggal menambahkan kode didalam bagian tulisan yang ingin dipotong. Kodenya adalah: <!–nextpage–>
Demikian tutorial mengenai Cara Membuat Multiple Pages Pada Sebuah Artikel Blog dengan Navigasi, semoga dapat bermanfaat bagi semua blogger, dan selamat mencoba !
1 Komentar untuk "Cara Membuat Multiple Pages di Postingan Artikel Blog dengan Navigasi"
Jejak