Beranda » HTML » Auto readmore thumbnail tanpa javascript

Auto readmore thumbnail tanpa javascript

Auto readmore thumbnail tanpa javascript

Biasanya saat melihat posring di halaman depan atau homepage, halaman label blog (secara kolektif, jenis halaman index) pos tidak akan ditampilkan dalam baris lama yang panjang. Kali saya akan meringkas dan membuat tampilan summary post blog anda berbeda seperti gambar diatas. Artikel ini akan memandu Anda bagaimana meringkas sebuah artikel di homepage secara otomatis menjadi dua kolom paralel tidak menggunakan javarscripts.

Beberapa keuntungan

1. Tidak mempengaruhi kecepatan blog dibandingkan javarscrips karena membantu mempercepat blog dengan gambar thumbnail miniatur.
2. Terdiri dari dua-kolom layout selaras.
3. Gambar thumbnail dan judul posting + deskripsi pada baris yang sama. Ukuran gambar thumbnail hingga 72x72.
4. Uraian ditampilkan dalam kode CSS.

Cara membuat summary post ini

1. Masuk ke akun Blogger Anda
2. Dalam bentuk (Template)
3. Pilih HTML editing (Edit HTML)
4. Cari tags ]]></ b:skin> (Tip: Klik pada lokasi dalam kotak untuk mengedit HTML untuk menggunakan bar pencarian inline)

- Paste kode berikut di bawah tag ]]></b:skin>.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px &#39;Arial&#39;, serif;margin:1.0em 0 .75em;line-height:1.3em;}
.post-snippet:before{content:attr(data-snippet);}
h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none}
.post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:45.8%;height:95px;}
.post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma}
.post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left}
.post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56}
</style>
</b:if></b:if>

5. Cari kode berikut:

<data:post.body/>

- Ganti kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='post-snippet' expr:data-snippet='data:post.snippet'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <data:post.body/>
</b:if>
</b:if>

6 - Cari kode di bawah ini (terletak tepat di atas kode pada langkah 5)

<h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>

- Ganti dengan:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
   <b:else/>
    <img alt='no image' class='post-thumbnails' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfWAirU9cOiAvNOonq5y9bwyR2z16YSQIwvDrXku4Nia4aLwqV6zHkEnTrkJiNRP_a1FWQBhxcfDwa-V4ADwqMmmuKmNerx5c3G2CjH8xstPLBtJokYlfdI2iE_IV6jt4foNfwzxyR7ZBC/' width='72px'/>
   </b:if>
   </b:if>   
</b:if>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>

7 - Simpan template dan lihat hasilnya dihalaman depan.

Jangan lupa untuk merubah jumlah posting summary blog anda dengan jumlah genap agar tampilan sempurna.

Untuk teman yang sudah merubah summary postnya dengan javascript silahkan bisa dengan mudah merubahnya. Pada formulir HTML Temlpate, temukan kode ini:

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

- Lalu ganti dengan langkah 6 diatas, jangan lupa hapus javascriptnya diatas <head> biasanya.

Semoga berguna dan bermanfaat, pertanyaan bisa ditulis di komentar...

Auto readmore thumbnail tanpa javascript

Belum ada tanggapan untuk "Auto readmore thumbnail tanpa javascript"

Post a Comment