Membuat Split Halaman Pada Blogspot (Seperti WordPress)

Diposting pada

Membuat Split Halaman Di Blogspot Seperti WordPress

Membuat Split Halaman Pada Blogspot (Seperti WordPress) – Membuat Split halaman atau biasa kita sebut dengan Membagi halaman di postingan merupakan cara yang cukup efektif untuk meningkatkan jumlah page view. Bila Anda sering mengunjungi situs-situs berita, tentu nya pasti akan melihat bahwa artikel tersebut biasa nya di bagi menjadi beberapa halaman.

Bila Anda pengguna WordPress tentu nya sudah tidak asing lagi bagi Anda untuk mengenal yang satu ini. Karena dari wordpress tersebut sudah menyediakan kode untuk membuat split halaman di postingan. Lalu bagaimana dengan blogspot, apakah bisa kita membuat split halaman atau membagi halaman di postingan seperti pada wordpress? Dan jawaban nya Bisa banget.

Di Artikel kali ini, saya ingin berbagi bagi Anda pengguna blogspot untuk membuat split halaman atau membagi halaman di postingan seperti WordPress. Sebelum nya sedikit saya akan jelaskan manfaat membuat split halaman pada blogspot.

Beberapa manfaat yang kita dapat bila kita menerapkan tutorial ini diantara nya:

  • Halaman akan terlihat lebih rapi, cocok buat Anda yang mempunyai isi artikel yang cukup panjang.
  • Cocok bagi Anda yang mempunyai situs berita atau situs baca komik.
  • Bisa Anda jadikan penanda untuk pengunjung akan melanjutkan membaca nanti nya.
  • Dan tentu nya akan menambahkan jumlah page view, karena terdapat fungsi refresh halaman saat menekan tombol navigasi ke halaman berikut nya.

Pada tampilan split halaman yang kita akan buat ini mempunyai 3 tampilan yang cukup keren. Anda bisa memilih salah satu dari 3 tampilan di bawah ini.

Membuat Split Halaman Pada Blogspot / Membagi halaman di postingan

1. Tampilan Default

Silahkan Anda copy kode CSS dibawah ini, lalu letakan kode tersebut di atas kode </head> pada template Anda.

 <b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Membagi Halaman di Postingan */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}
</style>
</b:if>

Lalu tambahkan kode berikut di atas kode </body> pada template Anda.

 <b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>
//<![CDATA[
function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n("halaman");$(".post-content").hide(),void 0===halaman?$(".content_1").show():$(".content_"+halaman).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?halaman="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==halaman&&$(".buttonar.n1").toggleClass("arlinapage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("arlinapage")});
//]]>
</script>
</b:if>

Selanjut nya Save Template Anda.

Dan untuk kode pemanggilnya silahkan Anda buka editor postingan Anda lalu tambahkan markup dibawah ini pada tab HTML.

 <div class="post-content content_1">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_2">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_3">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_4">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_5">
ISI ARTIKEL DI SINI
</div>

Untuk ISI ARTIKEL DI SINI diganti dengan isi konten postingan dan untuk content_1 sampai content_5 menandakan nomor navigasi dari isi postingan yang ingin dibagi. Untuk menambahkan halaman yang ingin dibagi, cukup ganti angka dari content_5 menjadi content_6 dan seterusnya.

Dan tambahkan kode dibawah ini di akhir postingan Anda.

 <div class="arlinapage">
</div>
<div class="pagearl">
</div>

Bagi Anda yang ingin memunculkan tombol navigasi setiap postingan secara otomatis, silahkan anda copy kode navigasi di atas lalu letakan kode tersebut di bawah kode <data:post.body/>. Contoh nya seperti dibawah ini.

<data:post.body/>
<div class=‘arlinapage’/> <div class=‘pagearl’/>

2. Tampilan Minimalis

Untuk tampilan berikut nya, Anda cukup ganti kode CSS nya saja. Letakan kode CSS dibawah ini di atas kode </head>

 <style type='text/css'>
/* Membagi Halaman di Postingan */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagearl .buttonar{background:#e74c3c;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#c0392b;color:#fff}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:#333;color:#fff}
</style>

3. Tampilan Animasi Gradient

Sama seperti di atas, copy kode CSS dibawah ini dan letakan di atas kode </head>

 <style type='text/css'>
/* Membagi Halaman di Postingan */
@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}
</style>

Itulah Cara Membuat Split Halaman Pada Blogspot / Membagi halaman di postingan yang bisa Anda coba di situs blogspot anda. Bila ada pertanyaan yang menyangkut dari isi artikel ini, silahkan tinggalkan komentar Anda dibawah. Jangan lupa untuk bagikan artikel ini ke teman-teman Anda di Social Media.

Code Script By Arlinadzgn.com

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *