Cara Mudah Membuat Auto Paginasi pada Komentar blog

Hanya untuk share barangkali anda membutuhkannya saya akan share mengenai bagaimana cara membuat Paginasi untuk komentar pada blog dengan flatform blogspot manakala jumlah komentar sudah lebih dari 200 kometar.

Paginasi adalah teknik khusus dimana jumlah halaman yang banyak di split atau di bagi-bagi menjadi beberapa halaman dengan tujuan untuk menyajikan navigasi yang mudah untuk pengguna.

Sebenarnya banyak sekali tutorial yang menyajikan cara membuat paginasi untuk berbagai hal, baik itu untuk blog berflatform blogspot maupun untuk wordpress, misalnya paginasi untuk halaman postingan dengan angka atau paginasi halaman dengan menggunakan tombol next dan tombol prev dan masih banyak lagi teknik paginasi lainnya, namun satu barangkali yang jarang saya temukan adalah tutorial membuat paginasi pada komentar blog khusus untuk blog berflatform blogspot yang kebetulan menggunakan komentar embed atau tersemat pada blognya.

Hanya untuk share barangkali anda membutuhkannya saya akan share mengenai bagaimana cara m Cara Mudah Membuat Auto Paginasi pada Komentar blog

Alasan Menggunakan Paginasi Pada Komentar blog?

Paginasi pada komentar blog ini memang saya cari sudah cukup lama, namun baru-baru ini saya temukan caranya, saya mencari teknik ini dikarenakan ada sedikit error pada template yang saya gunakan, awalnya permasalahan ini tidak saya ketahui , saya baru menyadarinya ketika ada beberapa artikel postingan blog yang kebetulan memiliki jumlah komentar lebih dari 200 komentar dan ternyata saya kesulitan melihat komentar lainnya karena kebetulan template blog saya  ternyata tidak memiliki paginasi.

Memang secara default jumlah komentar yang akan ditampilakan di setiap halaman postingan blogspot pada umumnya sampai dengan 200 komentar, akan tetapi jika komentar lebih dari 200 maka tampilan komentar akan di split atau dibagi-bagi dan secara otomatis akan muncul tombol Load more... yang letaknya paling bawah setelah komentar,  tombol tersebut bisa kita klik untuk kita gunakan jika bermaksud ingin menampilkan komentar berikutnya.

 yang menjadi masalah adalah ketika saya bermaksud untuk melihat  komentar berikutnya pada blog saya, untuk tujuan membalas komentar, saya kesulitan karena ternyata tombol Load more... untuk menampilan komentar berikutnya tidak bisa berfungsi sama sekali, saya kurang tau dimana letak kesalahannya, akhirnya saya menemukan solusi dengan membuat paginasi.

Mungkin ada diantara anda yang mengalami hal serupa ketika tombol Load more... pada komentar blog berflatform blogspot milik anda mengalami hal serupa, saya akan coba share sedikit tips untuk membuat paginasi untuk komentar blog yang bisa anda gunakan di blog anda, jangan khawatir meskipun tombol load more... pada komentar blog anda berfungsi dengan baik, teknik ini masih bisa anda gunakan untuk blog anda jika anda memang menghendaki dan ingin menyajikan paginasi untuk komentar blog anda

Cara Membuat Auto Paginasi Pada Komentar Blog berflatform blogspot

Berikut langkah-langkah untuk membuat auto paginasi komentar blogspot yang bisa anda coba pada blog anda:

Langkah #1 - Pastikan Lokasi komentar blog anda tersemat.

Langkah pertama anda harus memastikan setingan komentar pada blogspot anda diseting tersemat atau embed, anda bisa mengaturnya seperti terlihat pada gambar dibawah ini:

a. Masuk ke akun blogspot anda.

b. Pada bilah menu sisi kiri pilih setting atau setelan, kemudian pilih sub menu pos dan Komentar, silahkan lakukan pengaturn dengan memilih tersemat pada pilihan lokasi komentar, seperti terlihat pada gambar dibawah ini:
Hanya untuk share barangkali anda membutuhkannya saya akan share mengenai bagaimana cara m Cara Mudah Membuat Auto Paginasi pada Komentar blog

Langkah #2 - Tempel kode dibawah ini pada template blog anda

Langkah kedua adalah menempel kode-kode dibawah ini di template blog anda, langkah-langkah sebagai berikut:

a. Masuk ke akun blogspot anda

b. Pada bilah menu sisi kiri silahkan anda pilih menu template, kemudian tekan tombol edit HTML untuk menampilkan editor html

c. Tekan CTRL+F untuk menampilkan fasilitas pencarian, kemudian carai kode </head

d. letakn kode CSS dibawah ini tepat diatas kode </head  tersebut:



#commentpaging {
 margin: 0px padding :20px auto;
}
#commentpaging a,#commentpaging span {
background-color:#EA5E00;
margin-right: 3px;
padding:3px 8px;
text-decoration:none;
color:white;
}
#commentpaging a:hover{background-color:#575757;}
#commentpaging span{
background-color:#575757;
}

e. Kemudian Cari rangkaian kode dibawah ini pada template blog anda:
<h3>
      <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> <data:commentLabelPlural/>:      
      </b:if>
    </h3>

Untuk menemukan rangkaian kode diatas Anda bisa mencarinya menggunakan kode data:post.numComments == 1.

jika anda sudah menemukan rangkaian kode diatas letakan kode javascript dibawah ini tepat dibawah rangkaian kode tersebut:

<b:if cond='data:post.numComments &gt;200'>
<script type='text/javascript'>
 //<![CDATA[
 function commentpagination(url, comment) {
  var posturl = url;
  var comment = comment;
var parts = window.location.href;
var pageNo=parseInt(parts.split('=').pop());
  cmpage = Math.ceil(comment / 200);
if(pageNo==1){
document.write('<span><<</span>');
}else{
  document.write('<a  href="' + posturl + '?commentPage=1"><<</a>');
}
  for (var i = 1; i <= cmpage; i++) {
    if(i==pageNo){
document.write('<span>' + i + '</span>');
    }else{
   document.write('<a href="' + posturl + '?commentPage=' + i + '">' + i + '</a>');
}
  }
 if(pageNo==cmpage){
document.write('<span>>></span>');
 }else{
  document.write('<a href="' + posturl + '?commentPage=' + cmpage + '">>></a>');
 }
 }
 //]]>
</script>  
    
<span id='commentpaging'>     
<script type='text/javascript'>commentpagination(&quot;<data:post.url/>&quot;,&quot;<data:post.numComments/>&quot;);
</script>                                     
</span>
</b:if>

f. Jika semuanya sudah anda lakukan, jangan lupa untuk menyimpan template blog anda

Jika anda berhasil maka hasilnya kurang lebih akan seperti tampilan gambar dibawah ini:

Hanya untuk share barangkali anda membutuhkannya saya akan share mengenai bagaimana cara m Cara Mudah Membuat Auto Paginasi pada Komentar blog

Untuk demo anda bisa lihat pada komentar artikel ini

#Catatan:
Paginasi diatas hanya akan muncul secara otomatis ketika jumlah komentar blog anda lebih dari 200 komentar, jika kurang dari 200 maka tidak akan muncul.

Jika Anda ingin menggunakan kode diatas, namun kebetulan  jumlah komentar blog anda masih kurang dari 200, maka untuk melihat hasilnya benar atau tidak anda bisa ubah kode javascript diatas, angka 200 yang saya kasih warna biru diatas, dengan angka 5, namun jika sudah terbukti muncul hasilnya anda harus mengembalikannya ke angka 200.




Barangkali mungkin banyak trik yang bisa anda gunakan, atau mungkin saja di template blog anda sudah secara otomatis muncul paginasi, jika memang belum, anda bisa caba cara diatas.

Demikian artikel tentang  Cara Mudah Membuat Auto Paginasi pada Komentar blog, semoga bermanfaat dan selamat mencoba.

Mengenal Nama Komponen Halaman blog untuk pemula

Dalam sebuah halaman blog pada umumnya terdapat elemen atau komponen atau bagian-bagian yang menyusun tampilan halaman blog, elemen-elemen tersebut dikenal juga dengan nama widget, fungsinya adalah untuk mendukung halaman blog agar menjadi lebih lengkap dan kaya akan fitur.

Keberadaan komponen pada halaman blog biasanya lebih ditujukan sebagai navigasi, pelengkap dan memperindah tampilan halaman blog itu sendiri, agar pengunjung lebih mudah berinteraksi dan lebih betah dengan halaman blog yang bersangkutan.

Untuk pemula pengetahuan mengenai nama komponen dalam halaman blog sangat penting sekali untuk diketahui, karena dengan mengetahui nama komponen yang menyusun halaman blog akan lebih memudahkan mereka untuk melakukan modifikasi (bungkar pasang) atau menambahkan komponen yang diinginkan pada halaman blog miliknya.

Dalam sebuah halaman blog pada umumnya terdapat elemen atau komponen atau bagian Mengenal Nama Komponen Halaman blog untuk pemula


Kabar baiknya saat ini banyak sekali blog-blog yang menyajikan tutorial atau panduan yang memberi petunjuk bagaimana untuk memodifikasi atau menambahkan elemen-elemen penting yang terdapat dalam halaman blog, hampir setiap komponen yang kita inginkan sudah tersedia tutorialnya tinggal kita pilih mana yang menurut kita baik.

Sayangnya Untuk pemula yang baru menggeluti dunia blog terkadang merasa kesulitan ketika mereka berniat ingin memodifikasi komponen yang terdapat dalam halaman blog miliknya, mereka kesulitan untuk mencari di mesin pencari google tentang totirial tentang komponen yang mereka inginkan, karena terkendala dengan pengetahuan nama komponen yang mereka tidak tau namanya, sehingga tidak menemukan tutiral yang tepat.

Di artikel kali ini saya akan coba jelaskan nama bagian komponen atau elemen yang terdapat dalam sebuah halaman blog yang bisa dibongkar pasang dan dimodifikasi agar anda mengenal namanya dan mengetahui bentuknya serta fungsinya, sehingga akan memudahkan anda mencari tutorial dimesin pencari mengenai komponen yang dimaksud.

Inilah Nama Komponen Asing dalam Halaman blog yang harus anda kenal.

1. Breadcrumb

Apa itu breadcrumb?, saya yakin jika anda pemula di dunia blog maka kata breadcrumb akan sedikit asing ditelinga anda, begitu juga dengan saya pribadi ketika baru mengenal dunia blog dan website, saya merasa kebingungan ketika pertama kali membaca dan mendengar istilah breadcrumb, istilahnya saja baru saya dengar apalagi bentuk dan fungsinya saya tidak tau. tapi seiring waktu akhirnya tau juga.

Breadcrumb adalah komponen navigasi yang terdapat di halaman situs atau blog yang fungsinya sebagai petunjuk bagi pengunjung blog yang memberikan informasi mengenai kategori artikel yang mereka baca. Keberadaan elemen breadcrumb pada sebuah halaman blog biasanya akan memudahkan pengunjung untuk menelusuri halaman sejenis yang sedang dibacanya serta mereka mengetahui lokasi halaman yang sedang dibaca.

Dan breadcrumb juga biasanya ditampilkan oleh mesin pencari di halaman pencarian untuk melengkapi relevansi judul ketika judul artkel ditemukan di hasil pencarian.

Contoh elemen breadcrumb seperti gambar di bawah ini:

Dalam sebuah halaman blog pada umumnya terdapat elemen atau komponen atau bagian Mengenal Nama Komponen Halaman blog untuk pemula
Breadcrumb

Lokasi breadcrumb biasanya diletakan di atas judul artikel postingan, ada juga yang diletakan di bawahnya, seperti pada gambar diatas, dengan adanya breadcrumb anda bisa mengetahui bahwa judul yang anda baca berkategori blogger tips.

Jika anda ingin menambajkan breadcrumb pada halaman blog anda, maka anda bisa mencari tutorialnya di google dengan mengetikan kata kunci "Cara menambahkan breadcrumb di blogspot" atau kata kunci lainnya yang menggunakan kata breadcrumb.

2. Paginasi Halaman 

Apa itu paginasi halaman?, paginasi halaman adalah elemen yang berfungsi untuk membagi-bagi halaman yang sangat panjang kedalam beberapa halaman. agar lebih memudahkan user untuk loncat atau kembali ke halaman yang diinginkan.

di halaman blog baik blog berflatform blogspot ataupun blog wordpress dan juga blog lainnya, paginasi halaman terkadang sering digunakan di halaman homepage atau halaman index blog yang bersangkutan sehingga setiap artikel akan memiliki halaman sendiri-sendiri biasanya dengan tombol < prev 1,2,3....dst next >.

Contoh bentuk elemen paginasi halaman terlihat seperti gambar di bawah ini:


Dalam sebuah halaman blog pada umumnya terdapat elemen atau komponen atau bagian Mengenal Nama Komponen Halaman blog untuk pemula
Page pagination

Biasanya lokasinya diletakan di akhir halaman yang bersangkutan.

Jika anda ingin menambahkan elemen di atas pada halalaman utama blog anda dan anda merasa kesulitan dan tidak tau cara membuatnya, maka anda bisa mencari tutorial di google dengan mengetikan kata kunci "Cara membuat paginasi halaman di blogspot", atau kata kunci lainnya yang berkaitan dengan nama "Paginasi halaman". akan banyak sekali tutorial tentang cara membuat paginasi halaman yang bisa anda pilih.

Paginasi halaman juga bisa digunakan untuk membagi komentar blog yang jumlahnya banyak, jika komentar lebih dari 200 maka secara otomatis akan muncul paginasi halaman, untuk membuatnya silahkan baca: Cara membuat autopaginasi pada komentar blog

3. Auto Readmore

Apa itu auto readmore? anda pasti bingung dengan istilah tersebut jika anda pemula di dunia blogging, Anda mungkin pernah mengalami kasus "saya ingin membuat seperti bentuk ini tapi saya tidak tau namanya apa yang harus saya cari di google", kurang lebih mungkin seperti itu, anda sudah melihat bentuknya tapi anda tidak tau namanya.

Auto radmore adalah tombol atau link yang biasanya bertulisakan "Read More...", atau "Lanjutkan Membaca..."  atau "Baca Selengkapnya..." atau "Continue reading..." dan tulisan serupa lainnya, yang  ada pada sebuah halaman blog yang digunakan untuk memotong artikel panjang secara automatis agar tampil beberapa paragraf saja dan disampingnya dilengkapi dengan tombol autoreadmore, dan jika pengunjung ingin membac artikel tersebut secara keseluruhan, maka pengunjung tinggal mengklik tombol autoreadmore tersebut.

Contoh tampilan elemen auto readmore seperti gambar di bawah ini: 

Dalam sebuah halaman blog pada umumnya terdapat elemen atau komponen atau bagian Mengenal Nama Komponen Halaman blog untuk pemula
Auto readmore

Auto readmore biasanya disajikan di halaman homepage blog, untuk menampilkan artiekl setiap judul hanya sebagian paragraf saja seperti contoh gambar di atas.

Template bawaan blogspot atau beberapa template lainnya terkadang belum dilengkapi dengan auto readmore akibatnya di halaman homepage setiap judul artikel akan menampilkan isi artikel keseluruhan, tentu jika terlalu banyak, loading akan cukup berat.

Jika pada halaman homepage atau index blog anda ingin dilengkapi dengan autoreadmore, anda bisa cari tutorialnya di google menggunakan kata kunci "Cara membuat auto readmore di blogspot" atau kata kunci lainnya yang berkaitan dengan "auto readmore".

4. Tombol Back to Top (Tombol Scroll ke atas)

Sebagian halaman blog terkadang ada yang dilengkapi dengan sebuah tombol, biasanya letakanya di samping kanan, dan jika tombol tersebut anda klik maka halaman yang sedang anda lihat akan scroll ke atas.

Di awal saya sulit sekali menemukan tutorial untuk membuat tombol seperti itu karena tidak tau nama komponennya apa, sehingga ketika melakukan pencarian di google pun sulit karena tidak tau kata kunci apa yang harus digunakan.

Tombol tersebut saya menyebutnya sebagai Tombol Back to Top atau ada juga yang menyebutnya dengan tombol bottom up / bottom down, tombol back page up, tombol return to top dan istilah lainnya, namun intinya fungsinya sama.

C ontoh tampilan tombol back to top seperti terlihat pada gambar di bawah ini:

Tombol Back to top


Pada halaman blog yang memasang komponen tombol back-to top, tombol tersebut biasanya muncul jika artikel panjang dan anda ada di bagian bawah artikel, dan ketika diklik halaman akan melakukan scroll ke atas.

Jika anda ingin melengkapi halaman artikel blog anda dengan tombol seperti itu anda bisa membacanya di artikel ini:
Cara Membuat tombol back to top dengan efek lengkap
Lengkap dengan efek-efek yang beraneka ragam.

5. Pesan Kotak Komentar blog

Elemen pesan kotak komentar adalah, pesan yang terdapat di atas kotak komentar blog, kotak pesan ini biasanya akan muncul di atas kotak komentar setiap kali pengunjung blog berkomentar.

Tapilan kotak komentar pada blogspot seperti terlihat pada gambar di bawah ini:

Dalam sebuah halaman blog pada umumnya terdapat elemen atau komponen atau bagian Mengenal Nama Komponen Halaman blog untuk pemula
Kotak komentar bawaan blogspot biasanya tidak memiliki warna, tapi sebenarnya bisa kita modifikasi yang misalnya seperti tampilan diatas.

Silahkan cari saja di google dengan kata kunci "memodifikasi tampilan kotak komentar blog" atau kata kunci lainya sesuai yang anda inginkan dengan "kotak komentar blog"

6. Related Post (artikel terkait)

Related post adalah komponen atau widget yang menampilkan judul-judl artikel yang berkaitan dengan artikel postingan yang sedang dibaca, pada umumnya letaknya di bagian bawah artikel, fungsinya untuk meningkatkan pageview dan sebagai navigasi untuk pengunjung atau pembaca blog agar mereka lebih mudah untuk menemukan artikel terkait yang diminati.

Secara default template blog bawaan blogspot tidak menampilkan widget related post namun kita bisa menambahkannya jika mau, dan kita bisa memodifikasinya sesuai dengan tampilan yang diinginkan.

Ada banyak sekali macam-macam tampilan widget related post yang bisa digunakan, salah satu contoh dari tampilan related post terlihat seperti pada gambar di bawah ini:

Dalam sebuah halaman blog pada umumnya terdapat elemen atau komponen atau bagian Mengenal Nama Komponen Halaman blog untuk pemula


Penutup:

Sebenarnya ada banyak sekali komponen atau elemen widget blogspot yang bisa kita gunakan, tidak bisa saya bahas satu per satu, beberapa komponen diatas, saya rasa komponen yang jarang sekali diketahui namanya terutama untuk pemula, karena saya dulu pertama kali mengenal dunia blog sulit sekali mengetahui nama-nama komponen yang saya uraikan diatas.

Mudah mudahan artikel tentang Mengenal Nama Komponen Pada Halaman blog untuk pemula, di atas bisa membantu anda mengetahui komponen blog yang tadinya anda tidak tau menjadi tau sehingga akan memudahkan anda manakala ingin menambahkan, membongka pasang atau momodifikasi komponen di atas pada template blog anda.

Jika anda memiliki pertanyaan seputar komponen widget blog yang belum anda kenal, silahkan layangkan pertanyaan anda dalam komentar, siapa tau saya atau blog lainnya bisa membantu.