Saturday, November 5, 2016
Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih
Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih

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 1Pastikan 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:
4.
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>
.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.
Demikian Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih. Sekali lagi, tulisan pendek lebih baik dan lebih menarik dibaca ketimbang tulisan panjang.
Kita bisa juga sih membagi postingan panjang itu menjadi beberapa bagian secara tersendiri. Maksudnya, ditulis di beberapa posting. Misalnya menggunakan judul (Bagian 1), (Bagian 2), dan seterusnya.
Tapi cara yang sekarang kita bicarakan ini lebih populer dan ngetrend di sejumlah portal berita seperti detik.com dan situs berita lainnya.
Selamat mencoba dan happy blogging! Jangan lupa selalu berusaha memposting konten berkualitas alias memperhatikan aspek USABILITY bagi pengunjung blog Anda.
123
Available link for download