Solusi Snippet Untuk Homepage yang Muncul Link dan Tampilan Error pada Blogger Terbaru

Pada template Blogger terbaru layout versi 3, dalam sintaks snippet untuk membuat ringkasan postingan pada halaman utama (homepage), sudah tersedia secara default. Parameternya dipanggil dengan kode <b:include cond='data:post' data='post' name='postSnippet'/>.

Masalahnya ialah, jika pada paragraf awal postingan terdapat elemen tag a (link), maka link tersebut muncul juga di snippet/description postingan homepage.

Tidak hanya itu, tag elemen lainnya juga ikut muncul. Seperti tag bold, italic, underline dan lainnya. Dan eksistensinya sangat amat mengganggu tampilan blog.

Ditambah lagi jika snippet ke-crop dan terdapat tag div atau tag lainnya, maka akan membuat berantakan tampilan selanjutnya. Kadang tampilan selanjutnya jadi bold semua, letaknya jadi gak karuan dan lainnya, pokoknya berantakan!

Nah, bagaimana menanggulangi masalah-masalah krusial tersebut, tanpa harus mengubah kode pemanggil parameternya yang seperti di bawah ini?

<b:include cond='data:post' data='post' name='postSnippet'/>

Dan juga masih bisa menggunakan fungsi yang lain, seperti snippet-fade.

Saya punya alternative (mungkin ada cara yang lebih ideal), seperti berikut ini:

1. Menambahkan  parameter baru

        <b:includable id='postSnippet'>
<div class='post-snippet snippet-container r-snippet-container'>
<div class='snippet-item r-snippetized'>
       <b:eval expr='snippet(data:post.body, {length: 212, links: false,linebreaks: false, ellipsis: true}).escaped'/>
  </div>
          <a class='snippet-fade r-snippet-fade hidden' expr:href='data:post.url.canonical.jsonEscaped'/>
    </div>
        </b:includable>

Letakkan kode di atas di bawah kode <b:defaultmarkup type='Common'>

2. Menambahkan CSS berikut

.r-snippetized,.r-snippetized a,.r-snippetized b,.r-snippetized i,.r-snippetized u{
pointer-events: none;
cursor: default;
color:inherit;
font-weight:normal;
font-style:normal;
text-decoration:none
}

Demikian tutorial kali ini,

Selamat mencoba!