Tiga hari yang kemudian saya memperlihatkan tutorial cara menciptakan dampak animasi salju di blogger, semoga tampilan blog menjadi lebih menarik. Kali ini tak kalah pentingnya dalam menciptakan blog menjadi unik ataupun menarik. Karena pada kesempatan kali ini saya akan memperlihatkan tutorial cara menciptakan pagination di blogger.
Pagination itu sendiri yaitu proses membagi dokumen ke dalam beberapa halaman. Salah satu Website yang menerapkan pagination dalam sebuah artikel yaitu tribunnews. Kamu dapat cek salah satu artikelnya jikalau tidak percaya.
Jika menciptakan pagination di blogger dengan cara yang saya buat, jumlah untuk memperlihatkan pagination pada sebuah artikel tidak terbatas (unlimited). Makara kau dapat memilih sendiri jumlah paginationnya, mau 300 kata di halaman pertama dan 500 kata di halaman kedua, jadi suka-suka kamu.
Bila kau tertarik menciptakan pagination di blogger, perhatikan langkah-langkah berikut ini:
1. Pastikan kau sudah masuk ke akun blogger
2. Kemudian pilih Tema > kemudian klik Edit HTML
3. Selanjutnya silahkan copy aba-aba CSS di bawah ini sempurna di atas aba-aba ]]></b:skin> atau dapat juga di atas </style>
/* Pagination CSS by WarungInter.net */ .post-content{display:none}.warunginternet{font-size:130%;text-align:center} .paging .tombol,.paging:before{font-size:14px;padding:8px 12px} .paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif} .paging .tombol{font-weight:700;background:#d400ff;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important} .tombol.warnet{background:#0ef} .paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #d400ff;color:#d400ff;border-radius:5px;margin-right:10px} @media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}} Baca Juga: Cara Membuat Kolom Komentar Disqus
4. Kemudian masukan aba-aba Javascript di bawah ini sempurna di atas aba-aba </body>
<script style='text/j4vascript'> //<![CDATA[ function get_n(p){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===p)return void 0===o[1]||o[1]}$(document).ready(function(){var p=get_n("p");$(".post-content").hide(),void 0===p?$(".content_1").show():$(".content_"+p).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$("p.paging").append($('<a href="'+t+"?p="+i+'" class="tombol p'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==p&&$(".tombol.n1").toggleClass("warnet"),p==p&&$(".tombol.p"+p).toggleClass("warnet")}); //]]> </script> 5. Buat Postingan Baru > Pilih Mode HTML > Silahkan masukan konten atau artikel yang ingin kau buat di Teks Postingan 1, Teks Postingan 2, Teks Postingan 3 dan seterusnya (Tergantung Jumlah Pagination yang ingin kau tampilkan)
<div class="post-content content_1"> Teks Postingan 1 </div> <div class="post-content content_2"> Teks Postingan 2 </div> <div class="post-content content_3"> Teks Postingan 3 </div>
Note: Jika ingin memesang lebih dari 3, maka buat <div class="post-content content_4"> dan seterusnya
Baca Juga: Cara Menampilkan Profil Author di Postingan Blogger
6. Selanjutnya di bab paling bawah atau terakhir masukan aba-aba berikut ini (pastikan dalam mode HTML)
<div class="warunginternet"><b>HALAMAN SELANJUTNYA:</b></div> <br/><p class='paging'/>
Note: Jika ingin memunculkan tombol pagination secara otomatis di semua artikel, silahkan copy aba-aba di atas sempurna di bawah aba-aba <data:post.body/>. Mungkin kau akan menemui aba-aba menyerupai ini lebih dari satu, silahkan di coba satu-persatu
Pada tampilan demo yang saya berikan, karenanya kurang sesuai pada tombol paginationnya, mungkin alasannya yaitu saya memasangnya di blog safelink, Tapi saat dipasang di blog saya yang satu lagi dengan memakai template viomagz karenanya sesuai.
Itulah cara menciptakan pagination di blogger, cukup gampang kan?. Sekarang blog kau menyerupai mirip tribunnews. Sumber http://www.warunginter.net/
EmoticonEmoticon