Cara Membagi Postingan Jadi Banyak Halaman
Ini mungkin satu hal yang sering agan-agan alami.Saking asyiknya bikin postingan, agan sampai lupa waktu, lupa makan, lupa "pup" dan lupa-lupa yang lain.
It's Okay... asal jangan lupa pacar, lupa anak, lupa bini aja, sih... apalagi lupa sholat. :)
Tapi,dibanding lupa, lupa, lupa yang diatas, ada "lupa" yang lebih parah yaitu... agan lupa kalau postingan agan sudah panjaaaaaang sekale !.
Akibatnya begitu postingan agan itu di publikasikan, tampilannya mirip sumur angker. Mulur kebawah. Di scroll rasanya nggak habis-habis !.
Kalau Visitor agan ngebaca postingan itu pakai gadget layar lebar misalnya : PC, Laptop, Notebook atau Tablet, mungkin nggak terlalu masalah. Tapi bagaimana kalau lihatnya pakai hape or smartphone ?. Kesanya kayak orang kegenitan, sibuk nyolek-nyolek layar smartphonenya terus. :)
So, what's the solution of this problem ?.
Solusinya gampang, kok... bagi saja postingan agan yang super duper panjang itu jadi beberapa halaman, tetapi tetap dalam lingkup postingan yang sama. Ini yang di dunia koding-mengoding disebut : Post Pagination.
Ada dua keuntungan memakai Post Pagination ini :
- Memberi kenyamanan kepada Visitor blog agan.
- Meningkatkan skor Page View blog agan.
Tapi seperti yang kerap terjadi di dunia nyata, cewek cakep yang sholehah memang susah didapatnya... ups !, maaf, maksud admin, kalau agan mau mengaplikasikan fitur Post Pagination ini, agan memang harus bersedia untuk sedikit ribet.
Pertama-tama agan ikuti dulu urutan kerjanya :
1. Masuk ke Dasbor Blog agan dan klik menu "Template".
2. Berikutnya klik tombol "Edit HTML".
3. Cari tag ]]></b:skin> atau </style> .
4. Sorot dan copy kode CSS dibawah :
.post-pagination{
margin:30px 0 40px 0;
text-align:center;
width:100%
}
.button_1{
border:1px solid #333;
font-weight:900;
margin:0 5px 0 0;padding:1% 2%;
background:#00bfff;
color:#0003!important;
transition:ease .69s!important
}
.button_2,.button_3,.button_4,.button_5,.button_6{
border:1px solid #333;
font-weight:900;
margin:0 5px 0 0;
padding:1% 2%;
background:#fff;
color:#000!important;
transition:ease .69s!important}
.button_1:hover,.button_2:hover,.button_3:hover,.button_4:hover,.button_5:hover,.button_6:hover{
background:none repeat scroll 0 0 #00bfff;
color:#000;
text-decoration:none
}
5. Kemudian paste/salin kode CSS itu tepat sebelum/diatas tag ]]></b:skin> atau </style> tadi.
6. Berikutnya cari tag </body>. Ini berada dibagian paling bawah templat.
7. Sorot dan Copy kode skrip dibawah tepat sebelum/diatas tag </body> tersebut :
<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(".content_4").fadeOut("fast");jQuery(".content_5").fadeOut("fast");jQuery(".content_6").fadeOut("fast");jQuery(this).css("background","#00bfff");jQuery(this).css("color","#000");jQuery(".button_2").css("background","#fff");jQuery(".button_2").css("color","#000");jQuery(".button_3").css("background","#fff");jQuery(".button_3").css("color","#000");jQuery(".button_4").css("background","#fff");jQuery(".button_4").css("color","#000");jQuery(".button_5").css("background","#fff");jQuery(".button_5").css("color","#000");jQuery(".button_6").css("background","#fff");jQuery(".button_6").css("color","#000");return false});jQuery(".button_2").click(function(){jQuery(".content_1").fadeOut("fast");jQuery(".content_2").fadeIn("slow");jQuery(".content_3").fadeOut("fast");jQuery(".content_4").fadeOut("fast");jQuery(".content_5").fadeOut("fast");jQuery(".content_6").fadeOut("fast");jQuery(this).css("background","#00bfff");jQuery(this).css("color","#fff");jQuery(".button_1").css("background","#fff");jQuery(".button_1").css("color","#000");jQuery(".button_3").css("background","#fff");jQuery(".button_3").css("color","#000");jQuery(".button_4").css("background","#fff");jQuery(".button_4").css("color","#000");jQuery(".button_5").css("background","#fff");jQuery(".button_5").css("color","#000");jQuery(".button_6").css("background","#fff");jQuery(".button_6").css("color","#000");return false});jQuery(".button_3").click(function(){jQuery(".content_1").fadeOut("fast");jQuery(".content_2").fadeOut("fast");jQuery(".content_3").fadeIn("slow");jQuery(".content_4").fadeOut("fast");jQuery(".content_5").fadeOut("fast");jQuery(".content_6").fadeOut("fast");jQuery(this).css("background","#00bfff");jQuery(this).css("color","#000");jQuery(".button_1").css("background","#fff");jQuery(".button_1").css("color","#000");jQuery(".button_2").css("background","#fff");jQuery(".button_2").css("color","#000");jQuery(".button_4").css("background","#fff");jQuery(".button_4").css("color","#000");jQuery(".button_5").css("background","#fff");jQuery(".button_5").css("color","#000");jQuery(".button_6").css("background","#fff");jQuery(".button_6").css("color","#000");return false});jQuery(".button_4").click(function(){jQuery(".content_1").fadeOut("fast");jQuery(".content_2").fadeOut("fast");jQuery(".content_3").fadeOut("fast");jQuery(".content_4").fadeIn("slow");jQuery(".content_5").fadeOut("fast");jQuery(".content_6").fadeOut("fast");jQuery(this).css("background","#00bfff");jQuery(this).css("color","#000");jQuery(".button_1").css("background","#fff");jQuery(".button_1").css("color","#000");jQuery(".button_2").css("background","#fff");jQuery(".button_2").css("color","#000");jQuery(".button_3").css("background","#fff");jQuery(".button_3").css("color","#000");jQuery(".button_5").css("background","#fff");jQuery(".button_5").css("color","#000");jQuery(".button_6").css("background","#fff");jQuery(".button_6").css("color","#000");return false});jQuery(".button_5").click(function(){jQuery(".content_1").fadeOut("fast");jQuery(".content_2").fadeOut("fast");jQuery(".content_3").fadeOut("fast");jQuery(".content_4").fadeOut("fast");jQuery(".content_5").fadeIn("slow");jQuery(".content_6").fadeOut("fast");jQuery(this).css("background","#00bfff");jQuery(this).css("color","#000");jQuery(".button_1").css("background","#fff");jQuery(".button_1").css("color","#00");jQuery(".button_2").css("background","#fff");jQuery(".button_2").css("color","#000");jQuery(".button_3").css("background","#fff");jQuery(".button_3").css("color","#000");jQuery(".button_4").css("background","#fff");jQuery(".button_4").css("color","#000");jQuery(".button_6").css("background","#fff");jQuery(".button_6").css("color","#000");return false});jQuery(".button_6").click(function(){jQuery(".content_1").fadeOut("fast");jQuery(".content_2").fadeOut("fast");jQuery(".content_3").fadeOut("fast");jQuery(".content_4").fadeOut("fast");jQuery(".content_5").fadeOut("fast");jQuery(".content_6").fadeIn("slow");jQuery(this).css("background","#00bfff");jQuery(this).css("color","#000");jQuery(".button_1").css("background","#fff");jQuery(".button_1").css("color","#000");jQuery(".button_2").css("background","#fff");jQuery(".button_2").css("color","#000");jQuery(".button_3").css("background","#fff");jQuery(".button_3").css("color","#000");jQuery(".button_4").css("background","#fff");jQuery(".button_4").css("color","#000");jQuery(".button_5").css("background","#fff");jQuery(".button_5").css("color","#000");return false})});</script>
8. Save/simpan.
Kini agan telah memiliki fitur Post Pagination. Langkah selanjutnya adalah modifikasi ketika membuat postingan baru.
Buatlah postingan agan seperti biasanya. Mau sepanjang apapun terserah. Begitu sudah selesai agan perkirakan postingan agan mau dibagi berapa halaman ?. Perlu agan ketahui, maksimal halaman yang bisa dibagi adalah 6 halaman. Jika agan sudah menentukan bakal halaman 1 mulai darimana?, berakhir dimana ?, begitu juga bakal halaman 2,3,4, dst..., maka,
9. Rubahlah mode halaman Entri baru agan dari mode Compose ke mode HTML.
Sekarang perhatikan baik-baik kode HTML dibawah :
<div class="content_1">
ISI HALAMAN 1
</div>
<div class="content_2" style="display: none;">
ISI HALAMAN 2
</div>
<div class="content_3" style="display: none;">
ISI HALAMAN 3
</div>
<div class="content_4" style="display: none;">
ISI HALAMAN 4
</div>
<div class="content_5" style="display: none;">
ISI HALAMAN 5
</div>
<div class="content_6" style="display: none;">
ISI HALAMAN 6
</div>
Sudah faham ?. Nah, kini aplikasinya.
9. Letakan tag pembuka <div class="content_1"> di bagian paling atas halaman Entri baru.
10. Letakan tag penutup </div> di bagian bawah paragraf tulisan agan yang direncanakan akan menjadi ISI HALAMAN 1.
Dengan demikian seluruh tulisan agan yang terletak antara tag pembuka <div class="content_1"> sampai tag penutup </div> akan menjadi konten halaman satu.
11. Letakan tag pembuka <div class="content_2" style="display: none;"> dibawah tag penutup </div> diatas.
12. Letakkan tag penutup </div> di bagian bawah paragraf tulisan agan yang direncanakan akan menjadi ISI HALAMAN 2.
Dengan demikian seluruh tulisan agan yang terletak antara tag pembuka <div class="content_2" style="display: none;"> sampai tag penutup </div> akan menjadi konten halaman dua.
13. Lakukan trik yang sama untuk bakal halaman 3,4,5 dan 6.
Tips : Default Post Pagination ini adalah 6 halaman. Jika postingan agan hanya dibagi 2 halaman, misalnya, maka kode HTML cukup sampai <div class="content_2" style="display: none;">ISI</div>. Begitupun jika hanya dibagi 3, 4 atau 5 halaman, lakukan hal yang sama. Kemudian jika ingin menampilkan seluruh halaman (untuk keperluan editing), rubah tag style="display:none" menjadi style="display:true".
Setelah semua pembagian halaman selesai, maka tinggal menambahkan kode skrip untuk memunculkan fitur Post Pagination ini.
14. Masih dalam mode HTML, copy dan pastekan kode skrip berikut dibagian paling bawah halaman Entri baru.
<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><a class="button_5" href="#">5</a><a class="button_6" href="#">6</a>
</div>
15. Ganti tanda # dengan URL postingan agan. Caranya : Klik menu Link di sidebar halaman Entri baru agan. Copy dan Pastekan Link yang terdapat disana, menggantikan tanda # tersebut.
16. Setelah semua selesai, rubah kembali halaman Entri baru agan dari mode HTML ke mode Compose.
17. Lakukan pengaturan Label, Jadwal, Dekripsi Penelusuran dengan benar kemudian lakukan Pratinjau sebagai Checking terakhir.
18. Jika semuanya beres, berarti postingan agan sudah siap di Publikasikan.
Bagi agan yang ingin tahu seperti apa penampakan Post Pagination ala Masih Newbie, inilah screenshootnya :
Catatan : Jika agan mengaplikasikan fitur Post Pagination ini ada sedikit resiko yang agan alami, yaitu proses loading postingan agan akan sedikt lebih lama dari biasanya. Itu terjadi karena meskipun default URL postingan agan hanya satu, namun dengan mengaplikasikan fitur ini Browser akan menganggapnya ada banyak. Prinsipnya Browser akan merender halaman satu dahulu, baru dilanjutkan ke halaman dua, dst... Halaman postingan 2 s/d 6 baru bisa dibuka setelah seluruh halaman selesai di render (tandanya ikon roda di tab atas berhenti muter-muter).
Sekarang terserah agan mau memakainya atau tidak, kalau admin, sih... suka-suka saja. Soal proses loading postingan yang agak lemot jika memanfaatkan fitur ini bisa diakali dengan memakai templat Fast Loading, kok... :)
Maaf, Hanya komentar relevan yang akan ditampilkan. Komentar sampah atau iklan illegal akan kami hapus. Terima kasih. (Admin)