Home › Desain Blog

October 21, 2014

Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih

October 21, 2014

Membagi Tulisan Panjang Jadi Dua Bagian Blog

POSTING atau tulisan panjang di blog akan sangat menyiksa pembaca. Melelahkan mata. Tulisan panjang bisa dibagi menjadi dua bagian (halaman/page) atau lebih. Simak saja detik.com, khususnya detikSport, yang demen banget membagi tulisan panjangannya menjadi beberapa bagian.

Selain memudahkan dan "memanjakan" pembaca, tulisan pendek lebih mudah dipahami, dimengerti, lebih menarik dibaca, dan... bisa meningkatkan pageviews lho!

Sebelumnya, CB sudah berbagi tentang hal ini di posting Cara Membagi Tulisan Panjang Menjadi Dua Bagian di Blog. Namun, itu cara yang rumit.

Kali ini CB berbagi cara yang jauh lebih simple dan mudah yang didapat di All Blogger Trick. Demonya atau contohnya, ya... seperti posting ini! Tuh di bawah ada angka 1,2, dan 3. Cek aja!

Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih

Langkah 1
Pastikan dulu di template Anda ada kode JQuery seperti kode berikut ini:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Jika tidak ada, ya... masukkan dong! Copas kode tersebut di bawah kode <head> di template Anda. Caranya:

1. Klik menu "Template" > "Edit HTML"
2. Cari (Ctrl+F) kode <head>
3. Copas kode jquery tersebut di bawahnya.

Langkah 2
1. Klik "New Post" (Entry Baru)
2. Klik mode "HTML"
3. Copy + Paste kode berikut 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">

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>

4.

1 2 3

Tags : Desain Blog

CB Blogger

Recommended Posts

3 comments on Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih

Oktavia lee10/24/2014 10:59 PM
Nice mas, jadi tau sekarang, maaf oot nih, gmna caranya mas ,pas di hompage tampilan populer post sedikit tp pas di buka post yg di baca, populer postnya jadi byk...
ReplyDelete
Replies
Soeara Rakjat2/27/2017 9:08 AM
Kode head itu ada berapa min, saya sudah coba tempep di kode head pembuka, tapi tdk berfungsi. Waktu menpublis artikelnya pake mode compose atau html? Thnkd
ReplyDelete
Replies

Subscribe to: Post Comments (Atom)