Membuat Auto Readmore Valid Tanpa Javascript + Gambar Thumbnail Di Blog

Cara Membuat Auto Readmore Valid Tanpa Javascript di Blog - Auto readmore atau disebut juga dengan istilah baca selengkapnya sering kita jumpai di blogspot/blogger. Pada tutorial blog kini ini aku akan bagikan arahan auto readmore tanpa javascript valid html dengan thumbnail yang ringan loadingnya. Memasang auto readmore di homepage blog menyerupai yang anda lihat di blog halaman depan blog tentu saja akan menciptakan artikel blog makin rapi dan memudahkan pembaca blog untuk melihat hompage blog tanpa harus scroll ke bawah alasannya artikel di halaman depan sudah dipendekkan dengan memasang auto readmore.

Cara memasang auto readmore ringan tanpa Javascript di blog disertai gambar/thumbnail ini sangat mudah. Biasanya auto readmore yang memakai JS (javascript) akan besar lengan berkuasa ke loading blog semakin berat, untuk itulah auto readmore yang disarankan yaitu auto readmore yang ringan untuk blog anda.

Baca juga : Memasang Widget Berlangganan FeedBurner di Bawah Postingan Blog

Nah kini simak bagaimana cara menciptakan auto readmore valid tanpa javascript di blog disertai gambar dan loading ringan.
1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F, cari arahan ]]></b:skin> dan letakkan arahan berikut diatasnya

.thumbnail-post {
width:160px;
height:120px;
float:left;
margin:0px 10px 0px 0px;
}

4. Selanjutnya silahkan cari arahan <data:post.body/> yang ke 2 atau 3 kemudian ganti arahan tersebut dengan arahan di bawah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlg2oi4vY8Eqhamf1Ra2hYnaf_G3SaE_akw3ibBCshSVWFnz1fck8EyCWL92UCybSSKGQi4CUwYWW2B675CtlEWSMo4mAk4GdTILFPhV3Iv2VXB650mVLBFbbIy_bcxcFcGy1j9sG8-Km2/s1600/picture_not_available.png'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='rm-button-wrap'>
      <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    </div>
  </b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>

5. Selesai dan simpan

Demikianlah tips membuat auto readmore valid tanpa memakai Javascript, silahkan copas kodenya dan supaya tutorial ini bermanfaat.

0 Response to "Membuat Auto Readmore Valid Tanpa Javascript + Gambar Thumbnail Di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel