Solusi Snippet Untuk Homepage Yang Muncul Link Dan Tampilan Error Pada Blogger Terbaru

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

Masalahnya ialah, jikalau 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 jikalau snippet ke-crop dan terdapat tag div atau tag lainnya, maka akan menciptakan awut-awutan 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 isyarat pemanggil parameternya yang ibarat di bawah ini?

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

Dan juga masih sanggup memakai fungsi yang lain, ibarat snippet-fade.

Saya punya alternative (mungkin ada cara yang lebih ideal), ibarat 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 isyarat di atas di bawah isyarat <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!

Advertisement