Cara Membuat Snippet Homepage Pada Halaman Depan di Blog

Snippet adalah ringkasan kata atau deskripsi singkat sebuah artikel yang muncul pada halaman utama atau depan (homepage) blog. Snippet homepage umumnya tampil diikuti dengan fitur auto read more. Penggunaan auto read more ini berfungsi untuk memotong atau memperpendek artikel yang dimunculkan pada bagian halaman depan (homepage) dari suatu blog. Jadi, halaman depan blog Anda nantinya hanya akan menampilkan gambar thumbnail dan beberapa teks cuplikan awal artikel saja dengan jumlah karakter atau kata yang bisa diatur sesuai keinginan Anda.

Snippet hompage sangatlah penting bagi suatu blog karena memungkinkan pengunjung blog dapat mengetahui dengan cepat pesan atau isi dari sebuah artikel yang dibagikan dalam blog tersebut. Saat ini mungkin hampir semua pemilik blog menggunakan snippet homepage yang disertai auto read more pada blog mereka untuk memaksimalkan kinerja blog. Jadi, snippet homepage bukan semata-mata merupakan deskripsi singkat yang mewakili sebuah artikel, tapi juga semacam memberikan akses read otomatis untuk pengunjung dengan sekali klik.
Untuk template yang disediakan oleh Blogger sendiri berbeda-beda, ada yang memberikan pengaturan untuk snippet homepage dan ada juga yang tidak. Di sisi lain, mungkin beberapa template hanya bisa membuat tampilan yang menampilkan thumbnail gambar saja tanpa snippet homepage.

Nah, maka dari itu untuk tutorial sekarang kami akan berbagi cara membuat snippet homepage pada halaman depan blog yakni Blogger menggunakan kode pemograman. Cara ini juga bisa Anda gunakan sebagai solusi mengatasi template Blogger yang snippet homepagenya hilang atau tidak muncul. Anda dapat mengatur sendiri jumlah karakter atau kata pada snippet homepage sesuai keinginan Anda. Baik, mari mulai tutorial kali ini, simak cara-caranya dengan baik dan lakukan secara berurutan.

Baca Juga : 7 Aplikasi yang Bisa Menjawab Soal Bahasa Inggris dengan Cara Di foto

Cara Membuat Snippet Homepage Pada Halaman Depan Di Blog

Cara Membuat Snippet Homepage Pada Halaman Depan di Blog
Cara Membuat Snippet Homepage Pada Halaman Depan di Blog

1. Langkah pertama sudah pasti silahkan masuk ke dashboard akun Blogger Anda dan masuk ke menu “Template” atau “Tema”.
2. Langkah kedua, silahkan cari dua kode yang berbeda berikut ini menggunakan shortcut Ctrl+F.
<data:post.snippet/>
<div class=’post-snippet’><data:post.snippet/></div>
3. Jika sudah ketemu, ganti kedua kode tersebut dengan kode dibawah ini :
<div expr:id=’&quot;summary&quot; + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’>
createSnippet(&quot;summary<data:post.id/>&quot;);
</script>
4. Selanjutnya, silahkan cari kode </head> atau &lt;/head&gt;&lt;!–<head/>–&gt;.
5. Copy kode JavaScript dibawah ini dan letakan tepat di atas kode tadi.
<script type=’text/javascript’>
snippet_count = 180;
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf(“<“)!=-1)
{
var snippet = strx.split(“<“);
for(var i=0;i<snippet.length;i++){
if(snippet[i].indexOf(“>”)!=-1){
snippet[i] = snippet[i].substring(snippet[i].indexOf(“>”)+1,snippet[i].length);
}
}
strx = snippet.join(“”);
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+’…’;
}
function createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = ‘<div class=”snippets”>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}
//]]>
</script>
Keterangan :
Ganti angka pada kode snippet_count = 180; dengan jumlah karakter yang Anda ingin tampilkan di snippet homepage blog Anda.

6. Simpan dan lihat hasilnya.

Begitulah kira-kira cara membuat snippet homepage pada halaman depan atau utama di sebuah blog. Menambahkan snippet homepage ke blog Anda dapat menjadikan tampilan blog Anda terlihat semakin rapi. Fitur auto read more otomatis yang diikutsertakan dalam pemasangan snippet homepage juga akan lebih menarik rasa penasaran pengunjung blog Anda agar nantinya mau membaca seluruh isi artikel. Semoga bermanfaat dan selamat mencoba!

Baca Juga : 7 Aplikasi Mind Mapping Online untuk Memudahkan Proses Evaluasi

Previous Post
Next Post
Bagikan:

Tinggalkan Balasan

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