thumbnail
Blogging tutorial

Cara Membagi Postingan Menjadi 2 Halaman di Blogspot

Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog

Cara membagi postingan menjadi 2 halaman di Blogspot | Terkadang jika mengunjungi situs-situs berita kita ambil contoh di kompas.com atau kompasiana, disana terdapat postingan yang dipisahkan menjadi 2 halaman. Menarik bukan? ^_^

Jika kita memakai platform wordpress, memang terdapat plugin yang bisa membagi postingan menjadi 2 halaman atau lebih. Di blogspot pun juga bisa. Namun mungkin hasilnya akan sedikit berbeda. Perbedaannya adalah, jika kita memakai plugin di wordpress, maka url yang muncul akan tetap alias sama antara halaman satu dengan yang lainnya. Namun di blogspot tidak. Mau tahu? Coba aja sendiri, hehehehhe.. :D.

Lalu apakah berpengaruh terhadap SEO? Mmm,, saya kira tidak. Maksudnya tidak tahu, hahahhaa... tapi mungkin tidak berpengaruh, toh yang dicari pembaca adalah konten, bukan yang lain. Jika kita mempunyai konten yang unik dan kita mensharenya ke media sosial, lalu pengunjung tertarik untuk membaca, walaupun blog itu mempunyai postingan yang dipisah menjadi 2 atau tidak, saya kira pengunjung tidak memikirkan hal seperti itu, yang penting mereka membaca. Udah, titik.

Karena menurut saya, SEO atau tidak SEO untuk mesin pencari google adalah tingkat kepopuleran suatu web. Semakin sering di update, semakin memiliki konten banyak dan unik, maka pengunjung akan semakin banyak, dan google pun akan melirik. ;)

Cara Membagi Postingan Menjadi 2 Halaman di Blogspot


Cara Membagi Postingan Menjadi 2 Halaman di Blogspot

Baiklah, bagi anda yang penasaran bagaimana Cara Membagi Postingan Menjadi 2 Halaman di Blogspot, simak tutorial berikut ini.

1. Langkah awal adalah membuka blogger.com dan masuk ke akun anda.
2. Buat postingan baru, namun kali ini kita membuatnya dengan HTML bukan Compose!!!.
Lihat di atas sebelah kiri Judul waktu pertama kali anda akan membuat postingan di blogger.
3. Kemudian pastekan kode dibawah ini.

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

Tulisan Bagian 1 di Sini!

</div>

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

Tulisan Bagian 2 di Sini!

</div>

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

Tulisan Bagian 3 di Sini!

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

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

3. Tuliskan postingan anda di kode warna merah.
4. Kalau sudah selesai silakan "Publish" postingan anda.

Keterangan :
Kode diatas adalah untuk membuat postingan menjadi 3 halaman. Untuk 2 halaman posting silakan hapus kode

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

Tulisan Bagian 3 di Sini!

</div>

dan juga kode

<a class="button_3" href="#">3</a>

Demikian tutorial membuat postingan blogspot menjadi 2 halaman atau lebih, semoga bermanfaat. Terima kasih telah membaca postingan ini, Wassalam.

Cara Membagi Postingan Menjadi 2 Halaman di Blogspot