natinedJs ⓚ 2020 Membuat artikel di blog tentunya kita seperti melihat daftar artikel yang bersusun ke bawah. Sama halnya dengan web site umumnya semua artikel dibuat bersusun ke bawah. Misalnya, kita bisa melihat beberapa situs lowongan kerja, tentunya semua artikelnya berkaitan dengan lowongan kerja dibuat bersusun ke bawah. Bila situs atau blog tersebut tidak bertema tunggal artinya salah satu page yang akan di list tersebut ada judul yang mendekati tapi bukan dengan konten yang sama. Salah satu contohnya dalam sebuah halaman tentang lowongan kerja tapi disalah satu artikelnya bukan lowongan melainkan tutorial-tutorial mencari kerja. Disini kita akan menemukan jawabannya.
Separator istilah html yang digunakan untuk memisah, sedangkan divider merupakan pembagi. Keduanya mempunyai kemiripan tapi tidak sama Fungsi penggunaannya juga berbeda. Separator dan divider ini akan dibuat dalam elemen divisi panel. Bagian tersebut diisi sesuai dengan kebutuhan penggunaan. Misalnya mengubah warna separator, mengubah bentuk atau mengubah ukuran.
Menggunakan element separator :
div menunjukkan division atau bagian dimana generik konten yang dapat digunakan sebagai kontainer atau penampung untuk membuat grup beberapa elemen menjadi satu. Eleman dalam html tersebut adalah separator. Setelah di running akan memperlihatkan garis pembatas antara artikel kecil pertama dengan yang kedua. Terlihat seperti contoh dibawah ini.
MICRO ARTIKEL 1
MIKRO ARTIKEL 2
Menggunakan element separator :
div menunjukkan division atau bagian dimana generik konten yang dapat digunakan sebagai kontainer atau penampung untuk membuat grup beberapa elemen menjadi satu. Eleman dalam html tersebut adalah separator. Setelah di running akan memperlihatkan garis pembatas antara artikel kecil pertama dengan yang kedua. Terlihat seperti contoh dibawah ini.
MICRO ARTIKEL 1
MIKRO ARTIKEL 2
Susunan micro artikel dengan separator banyak digunakan developer job seeker atau situs lowongan kerja. Dapat kita lihat di jobstreet, dan atau jobsdb. Dengan menggunakan separator tersebut kita dapat membuat satu post atau page dimana dalam separator tersebut terdapat beberapa artikel yang mempunyai keterkaitan. Dan disetiap garis besarnya terdapat url yang dapat divisit pengunjung untuk melihat lebih banyak tentang isi konten.
Membuat Multiple Page
Pernah melihat situs dengan multiple page?. Situs dengan multiple page rata-rata digunakan situs-situs media online atau berita online. Salah satunya tribun.com. Bila membaca salah satu berita pada situs tersebut pastinya disajikan dengan angka ditengah atau di kanan bawah untuk melanjutkan membaca artikel berikutnya.
Pembagian halaman tersebut layaknya link url yang diklik. Namun, perbedaannya pada multiple page tidak perlu load data baru. Artikel tersebut langsung muncul pada saat kita klik nomor berikutnya. Karena dalam html multiple page terdapat jangka waktu transisi dalam html kodenya seperti ini transition:ease 0.69s !important;. Reader akan merasa terbantu untuk melihat artikel per nomor karena bila artikel panjang dibaca dengan versi mobile pengguna harus menyorot artikel tersebut sampai ke bawah sekali.
Bagaimana cara Membuat Multiple Page? Langkahnya sebagai berikut;
- Langkah pertama masuk ke edit HTML theme di pengaturan blog.
- Cari kode <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> pada bagian </head>.. Bila kode tersebut sudah tersedia di edit HTML theme tidak perlu di ubah lagi.
Beberapa desain pada HTML diatas dapat dirubah sesuai dengan keinginan dan dari sisi visibility postingan. Mengubah desain tombol bobot huruf menjadi 700, menggubah lapisan pada separator menjadi 4 px dan mengubah warna tombol dari warna hitam menjadi abu-abu. Dapat juga mengubah waktu transisi dari 0,69 menjadi 1 detik. Tergantung pilihan pengguna.
Selesai untuk proses edit HTML. Post pagination sudah dapat terbentuk dalam proses pembuatan multiple page.
Cara membuat artikel multiple page. Create artikel tersebut sudah mudah dilakukan karena dasanya di awal tadi sudah terdapat post pagination umtuk membuat multiple page. Langkahnya adalah dengan paste kode berikut di dalam edit HTML postingan.
Masukan artikel 1
Tampilan pada postingan akan seperti diatas. Tinggal mengubah masukkan artikel pertama, kedua dan ketiga. Apakah hanya tiga artikel saja, sedangkan artikel yang akan dipecah ada 4 atau lima. Tidak bisa dibuat sebanyak mungkin. Caranya copy anchor class 1 atau 2 atau 3 dan kemudian ubah dengan button ke 4 dan anchor class ke 4.
#tutorial
Masukan artikel 1
Masukan artikel 2
Masukan artikel 3
Tampilan pada postingan akan seperti diatas. Tinggal mengubah masukkan artikel pertama, kedua dan ketiga. Apakah hanya tiga artikel saja, sedangkan artikel yang akan dipecah ada 4 atau lima. Tidak bisa dibuat sebanyak mungkin. Caranya copy anchor class 1 atau 2 atau 3 dan kemudian ubah dengan button ke 4 dan anchor class ke 4.
#tutorial
Tags
Infopedia