August 16, 2014

Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog

August 16, 2014

Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog
TULISAN atau posting panjang di blog blogspot (long blog post), bisa dibagi menjadi dua-tiga atau lebih bagian (halaman, page), tanpa harus mengubah permalinknya. Kita nanti tambahkan "Page 2" atau "Next Page" di tiap bagian akhir tulisan yang dipenggal itu.

Isu yang dalam bahasa Inggis disebut "Split lengthy blogger post into multiple pages" bukan hal asing bagi pengguna blog selfhosting Wordpress karena ada pluginnya: Splitter. Plugin WP ini "Automatically split a post into pages by adding a `nextpage` tag, with html validity maintenance" (secara otomatis membagi posting kedalam beberapa bagian (halaman) dengan menambahkan tag "nextpage" dalam kode html.)

Nah, bagaiman dengan blogspot? Tidak ada widget instant ataupun plugin. Blogger juga "gak ngajarin" tuh soal ini. Tapi, CB menemukan isu "split long blog post" untuk blogger ini di Rushly Written dan Tripo Soft.

DEMO POSTING YANG DIBAGI 3 HALAMAN

Namun, sebelumnya harap diingat, "blog posts split" atau pembagian posting menjadi dua halaman atau lebih ini tidak berpengaruh pada Pageviews. Artinya, tidak menambah jumlah Pageview. Sebabnya, url atau permalinknya sama.

Ini dia Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog


1. Pisahkan atau bagi posting Anda kedalam DIV atau SPAN dan tambahkan "class attribute" di dalamnya. Contohnya seperti di bawah ini. Ini contoh posting yang dibagi tiga bagian/halaman. Dilakukan di Mode HTML.

<div class="content_1">
    //Bagian pertama posting di sini!
</div>
<div class="content_2" style="display:none;">
    //Bagian kedua posting di sini!
</div>
<div class="content_3" style="display:none;">
    //Bagian ketiga posting di sini!
</div>

2. COPAS kode berikut ini di bawah kode di atas.

//When users click on these buttons, let's bring them to corresponding pages
<p style="font-weight:bold;">Pages: 
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="button_3"> 3</a></p>

3. COPAS juga kode berikut ini di bawah kode no. 2. Perhatikan catatan yang ada setelah kode yang warna merah!


//add jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script> //Jika di template blog Anda sudah ada kode yang seperti ini maka gak usah lagi ditambahkan

<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').show('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').show('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').show('slow');
return false;
});
});
</script>


Bingung? Ini dia Video Tutorial


Posting cara memotong, memenggal, atau membangi posting panjang menjadi beberapa bagian/halaman ini "sekadar" menjawab pertanyaan yang masuk di kotak komentar posting "Cara membuat link Internal".

CB sudah mempraktekkan tutorial ini (Lihat DEMO). Silakan Anda coba juga dan "laporkan" hasilnya di sini. Good Luck and Happy Blogging!

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

12 comments on Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog

  1. tq ya gan infonya. segera di praktekan

    ReplyDelete
  2. Untuk mmbgi artikel post di wp bisa jg kok tnpa plugin

    ReplyDelete
    Replies
    1. harusnya dan pastinya bisa, googling aja ya :)

      Delete
  3. langsung diterapkan untuk blogku yang mati ide.. :)

    ReplyDelete
  4. infonya sangat menarik..
    mantap..
    salam sukses..

    ReplyDelete
  5. terima kasih buanyak atas infonya... seneng banget :)

    ReplyDelete
  6. Kalau gak menambah page views, agak mubazir donk ya buat pembaca yg harus meload beberapa kali halaman, ngabisin kuota pembaca :D

    ReplyDelete
  7. Kalo yg bisa menambah pageviews atau ketika klik tombol 2 3 terus browser me reload ulang, itu gimana gan? Ada yg bisa kasih link tutorialnya gak

    ReplyDelete
  8. Ini work gan???

    Saya sangat berharap kode diatas work.

    Btw thanks untuk tutorialnya.

    Akan saya terapkan diblog saya.

    ReplyDelete
  9. Egois ni blog, masak naruh link langsung deteksi spam, memangnya apa pengaruhnya atau ente kerugian apa dengan komentar yang menyisipkan link. lalu apa keuntungannya jika mereka menaruh link. Jika mau berbagi, silahkan berbagi dengan lapang dada. wkwk... tribun news

    ReplyDelete
  10. Pake video aja tutorial nya bang

    ReplyDelete

Contact Form

Name

Email *

Message *