tRikSonic
Tema

5 cara mengatur snippet artikel pada blogger - Blogger Tutorial

Terakhir diperbarui : 30 Juli 2019 - 01.59

Tutorial kali ini adalah cara mengatur potongan artikel atau snippet artikel pada blogger. Mengatur snippet artikel blogger dapat dilakukan dengan berbagai cara, baik tanpa javascipt ataupun tidak

Disini saya akan menjabarkan bagaimana cara membuat snippet sebuah artikel atau ringkasan artikel hanya dengan tag xml yang sudah disediakan oleh blogger lengkap dengan pengaturannya.

Jadi dengan menggunakan ringkasan sebuah artikel dapat menghemat penggunaan HTML pada view-source baik itu pada homepage, halaman pencarian, ataupun halaman label

Mengatur Snippet Artikel Blogger - Blogger Tutorial

Data XML

Berikut data xml yang dapat digunakan untuk membuat snippet artikel :

  1. data:post.snippet
  2. data:post.longSnippet
  3. data:post.snippets.short
  4. data:post.snippets.long
  5. data:post.body [snippet]

Mari Kita bahas dan pelajari data-data diatas.

data:post.snippet

data:post.snippet dapat digunakan untuk membuat sebuah ringkasan sebuah artikel.
Sebenarnya data data:post.snippet diperuntukan pada widget popular post, tapi bisa dimanfaatkan untuk membuat sebuah ringkasan artikel :

Cara penerapan :

<div class="...">
  <data:post.snippet/>
</div>

Keterangan :

  • Minimal widget Versi 1
  • Minimal layout Versi 1 atau 2
  • Maksimal karakter 140, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html dan ganti baris
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class="...">
  <b:eval expr='snippet(data:post.snippet, {length: 140})'/>
</div>
Silahkan ganti nilai 140 dengan yang diinginkan : 1-140

data:post.longSnippet

Cara penerapan :

<div class="...">
  <data:post.longSnippet/>
</div>

Keterangan :

  • Minimal widget versi 1
  • Minimal layout versi 1 atau 2
  • Maksimal karakter 1000, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class="...">
  <b:eval expr='snippet(data:post.longSnippet, {length: 1000})'/>
</div>
Silahkan ganti nilai 1000 dengan yang diinginkan : 1-1000

data:post.snippets.short

data:post.snippets.short dapat digunakan untuk membuat sebuah ringkasan pendek sebuah artikel.

Cara Penerapan

<div class="...">
  <data:post.snippets.short/>
</div>

Keterangan :

  • Minimal widget Versi 2
  • Minimal layout Versi 3
  • Maksimal karakter 100, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html dan ganti baris
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class="...">
  <b:eval expr='snippet(data:post.snippets.short, {length: 100})'/>
</div>
Silahkan ganti nilai 100 dengan yang diinginkan : 1-100

data:post.snippets.long

Cara Penerapan

<div class="...">
  <data:post.snippets.long/>
</div>

Keterangan :

  • Minimal widget Versi 2
  • Minimal layout Versi 3
  • Maksimal karakter 1000, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html dan ganti baris
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class="...">
  <b:eval expr='snippet(data:post.snippets.long, {length: 1000})'/>
</div>
Silahkan ganti nilai 1000 dengan yang diinginkan : 1-1000

data:post.body [snippet]

Cara Penerapan

<div class="...">
<b:eval expr='data:post.body snippet { 
    length: 300, 
    links: true, 
    linebreaks: true, 
    ellipsis: true }'/>
</div>

Keterangan :

  • Minimal widget Versi 2
  • Minimal layout Versi 3
  • Maksimal karakter tidak ada, menyusaikan dengan jumlah karakter artikel
  • Minimal karakter terserah anda
  • Mengandung tag html tertentu
  • Mengandung ganti baris jika diinginkan

Penjelasan :

  • length : jumlah karakter yang ingin ditampilkan
  • links : menentukan apakah sebuah link/url (<a>...</a>) ditampilkan pada snippet.
    Nilai yang bisa berikan :
    true : jika ingin ditampilkan
    false : jika tidak
  • linebreaks menentukan apakah ganti baris (<br/>) diperlukan atau tidak.
    Nilai yang bisa berikan :
    true : jika baris ganti(line break) diinginkan
    false : jika tidak
  • ellipsis menentukan apakah tanda 3 poin ekspansi (...) ingin ditampilkan atau tidak
    Nilai yang bisa berikan :
    true : jika ya
    false : jika tidak
  • Tag HTML yang akan tampil adalah sbb:
    • <b>...</b>
    • <i>...</i>
    • <u>...</u>
    • <strong>...</strong>
    • <em>...</em>
    • <strike>....</strike>
    • <s>....</s>
    • <del>...</del>
    • ...
    Apakah bisa dihapus/dihilangkan, tidak bisa, hanya system blogger yang dapat berubahnya.
Selamat berkreasi dan semoga bermanfaat

22 komentar

Dewangga Setiawan
Dewangga Setiawan9/05/2018ReplyBalas Komentar ini
aku udah terapin gan cuma kok jadi ada kata - kata terakhir yang kena potong contoh "dimana" malah jadi "dima.."

bisa gak supaya pas pengaturannya pas kata terakhir lengkap "dimana"

thank you sebelumnya
Adi Jaya
Adi Jaya9/06/2018
setau saya gak bisa mas [maaf jika salah], jika attribute length ditulis, otomatis akan menghitung jumlah karakter di artikel yang dibuat, baik teks || angka || symbol dan lain lain

solusinya dengan menambahkan element pembias teks pada bagian akhir dengan memainkan css, seperti yang dipakai thema blogger yang baru.

Contoh yang saya pakai seperti ini :

<div class='ts-snippet-text'>
<b:eval expr='data:post.snippets.long'/>
<span class='snippet-fade'/>
</div>
Adi Jaya
Adi Jaya9/06/2018
/*css */
.ts-snippet-text {
height: 85px;
overflow: hidden;
position: relative; /* wajib */
}
.snippet-fade {
background: rgba(255,255,255,.36);
background: -webkit-linear-gradient(right,#ffffff 0,#ffffff 20%,rgba(255,255,255,0) 100%);
background: linear-gradient(to left,#ffffff 0,#ffffff 20%,rgba(255,255,255,0) 100%);
color: #b7b7b7;
box-sizing: border-box;
position: absolute;
width: 40px; /* sesuaikan lagi */
bottom: 6px; /* sesuaikan lagi */
right: 0; /* sesuaikan lagi */
vertical-align: middle;
}
Adi Jaya
Adi Jaya9/06/2018
.snippet-fade:after {
float: right; /* sesuaikan lagi */
content: " ..."; /* sesuaikan lagi */
}
Jabbar Bie
Jabbar Bie10/28/2018ReplyBalas Komentar ini
gan itu udah ane coba.. tapi gambar thumbnailnya kok gk muncul ya ? apa cuma text aja.. terus gmn kalau mau sekalian nampilin img thumbnail ?
Adi Jaya
Adi Jaya10/31/2018
Jelas gak tempil gan...
tutorial ini hanya untuk mengatur potongan artikel saja...
untuk menampilkan thumbnail bisa pakai ini [kembangkan lagi]:
<b:if cond='data:post.thumbnailUrl'>
<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 250, "2:1") : data:post.thumbnail' var='thumb'>
<img expr:alt='...' expr:src='data:thumb' expr:title='...'/>
</b:with>
<b:else/>
<!--No image code -->

</b:if>


sufyan Yaan
sufyan Yaan3/31/2019ReplyBalas Komentar ini
Gan, mantap. Tapi saya kepingin mengatur jarak satu snippet ke snippet lain tidak terlalu renggang pada template terbaru (contempo) sampai sekarang saya belum menemukan triknya
Adi Jaya
Adi Jaya4/01/2019
Inspeksi aja elemen nya mas, [f12] pada browser..
mungkin bisa ditambahkan margin atau padding pada css nya

[margin-bottom] [padding-bottom]
Loker Sumatera
Loker Sumatera1/25/2020ReplyBalas Komentar ini
untuk memunculkan elemen ol/ ul gimana ya bos?
Adi Jaya
Adi Jaya1/26/2020
mungkin bisa pakai data:post.hasJumpLink

Contoh :

<b:if cond='....'>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<!-- Auto snippet -->
</b:if>
<b:else/>
<!-- full post here -->
</b:if>
Adi Jaya
Adi Jaya1/26/2020
code diatas memanfaatkan Jump break pada wysiwyg editor blogger
Riyu Pratama
Riyu Pratama2/15/2020ReplyBalas Komentar ini
Supaya biar merubah text bold menjadi text biasa gimana bos? Jadi di snippets isinya text normal semua
Adi Jaya
Adi Jaya2/17/2020
Coba liat bagian keterangan pada artikelnya mas..
atau alternative bisa pakai css

contoh :
/* xxx = induk element */
.xxx b, .xxx strong {
font-weight: normal;
}
badboy
badboy6/21/2020ReplyBalas Komentar ini
gan kok yang data:post.body snippet ngak bisa full ya padahal udah sesuai syarat versi,,, ada trik lain kah
Adi Jaya
Adi Jaya6/22/2020
Pastikan mas penulisan kode data:post.body sesuai dengan variable nya misal depault adalah post, dan lihat lagi apakah masih ada didalam ruang lingkup widget yang bisa menggunakan data:post.body atau cek lagi widget dan layout versinya.
badboy
badboy6/24/2020
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='2.5' expr:dir='data:blog.languageDirection' lang='id' xml:lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> udah mas udah coba otak atik ngak bisa mak padahal kalau bisa mau pake template amp biar ngak edit posting
Nashrullah Ali Fauzi
Nashrullah Ali Fauzi1/12/2021ReplyBalas Komentar ini
Hai Mas Adi, show more show les ini basicnya gimana ya?
Adi Jaya
Adi Jaya1/13/2021
Itu Basicnya hanya menggunakan CSS.

Dengan memanfaatkan css :checked, :not(:checked) dan ::after

dan html input type checkbox dan html label

Lihat Demo ini agar penggunaannya tepat. maksudnya jika browser tak support dengan metode CSS, maka konten akan tetap terlihat

DEMO https://jsfiddle.net/
samarindacit.blogspot.com
samarindacit.blogspot.com12/07/2021ReplyBalas Komentar ini
Hallo mas, apa bisa snippet diatur yang muncul hanya kata-kata setelah break yang kita berikan. Saya contohkan seperti ini:

Header1
Wow ini adalah kalimat pertama
Wow ini adalah kalimat kedua
Lorem ipsum (Saya ingin snippetnya muncul dari sini, sedangkan kalimat diatasnya tidak)

Jadi intinya, saya ingin Lorem ipsum yang keluar pertama sebagai snippet di homepage, sedangkan kalimat diatasnya tidak. Apa bisa mas?

Mudah-mudahan mengerti apa yang saya maksud.
Terimakasih mas sebelumnya.



Adi Jaya
Adi Jaya12/09/2021
kalau pakai xml blogger sepertinya gak bisa mas.
alternatifnya dengan menggunakan JavaScript atau menggunakan CSS.

Ada alternatif menggunakan [Linebreak di editor postingan] dan XML Blogger yaitu :
data:post.hasJumpLink nanti masnya bisa menggunakn javascript atau css untuk mengaturnya

Contoh :
<b:if cond='data:post.hasJumpLink'>
<!-- kode jika Readmore dengan Linebreak -->
<data:post.body/>
<b:else/>
<!-- snippet otomatis disini -->
</b:if>
Miss Lirik
Miss Lirik11/02/2022ReplyBalas Komentar ini
Cara mengatasi double spasi di teks snippet nya gimana kak ? tulisannya renggang-renggang soalnya ?
Ahmad Shah Laupa
Ahmad Shah Laupa12/12/2023ReplyBalas Komentar ini
Mantap
Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.