Cara Membuat Auto Readmore Valid Tanpa Javascript di blog - Hallo sahabat iPLANET POST, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Auto Readmore Valid Tanpa Javascript di blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Auto Readmore Valid Tanpa Javascript di blog
link : Cara Membuat Auto Readmore Valid Tanpa Javascript di blog

Cara Membuat Auto Readmore Valid Tanpa Javascript di blog

2 Cara Gampang Membuat dan Memasang Auto Readmore Otomatis Tanpa Javascript di Blog - Auto Readmore ini dibuat dengan tambahan thumbnail gambar yang ringan di homepage blog. Auto Readmore sendiri banyak sekali macam-macamnya ada yang berbentuk javascript dalam penerapannya dan juga tersedia juga untuk default blogger.

Baca Juga :
Cara Membuat Related Post Otomatis di Postingan Blog
Mendaftarkan Blog ke Google News
Membuat Video Youtube Responsive di Blog

Dan dikesempatan hari ini Mas Yoga berbagi ilmu baru yaitu membuat Auto Readmore tanpa Javascript. Sobat sudah tahu sendiri kan dengan kegunaan Javascript di blog? seperti yang kita ketahui, bahwa javascript sendiri sangat mempengaruhi loading blog kita.

Sobat jangan khawatir, Auto Readmore ini Mas Yoga buat dengan rich snipet popular post, jadi sobat tidak usah khawatir karena fitur itu sendiri valid bagi blog dan fast loading tentunya.

Biasanya dalam membuat sebuah blog baru, template blogger belum menyediakan fitur Auto Readmore. Jadi sebelum menuju tutorial ini dari postingan ini. Diharuskan membuat Auto Readmore dulu sebelum melanjutkan langkah selanjutnya.

Cara Membuat Auto Readmore yang belum ada readmorenya dan masih berupa postingan biasa diblog.

Jika template blog sobat masih berupa postingan biasa dan belum ada readmorenya berikut tutorial lengkap membuat Auto Readmore Thumbnail no Javascript yang Mas Yoga bagikan untuk sobat.

➤ Login ke Akun Blogger sobat.
➤ Klik menu Template, kemudian klik edit template.
➤ Cari kode ]]></b:skin>.
➤ Copy pastekan CSS dibawah ini kedalam template sobat.

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

➤ Setelah itu cari kode <data:post.body/> yang ke 2 ataupun yang ke 3 bisa juga yang ke 4, gantilah kode tersebut kode dibawah 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='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></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> 

Keterangan : Thumbnail saya menggunakan <data:post.firstImageUrl>Snippet di ambil dari Referensi pada Popular Post <data:post.snippet/>

➤ Langkah terakhir Save Template sobat. Selesai,
Bagaimana sobat, apakah berhasil? jika masih gagal, lakukan kembali dengan teliti. Langkah selanjutnya yaitu Memodifikasi Auto Readmore sebelumnya yang kita buat tanpa menggunakan Javascript.

Memodifikasi Auto Readmore yang sudah dibuat Tanpa Javascript

Langkah kedua yaitu Apabila Template sobat sudah dipasang Auto Readmore. Langkah selanjutnya memodifikasinya Tanpa Javascript, agar lebih valid dan Fast Loading.

➤ Menuju ke Edit Template, kemudian temukan kode Javascript dibawah 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> 

Keterangan : Jangan lupa untuk menghapus script auto read-more link yang biasanya terletak di atas </head>.

Kalau sudah ketemu semua kode Javascript dia atas. Gantilah semua kode tersebut dengan kode dibawah ini.

 <b:if cond="data:post.firstImageUrl">
  <a expr:href="data:post.url">
<img class="thumbnail-post" expr:src="data:post.firstImageUrl" expr:title="data:post.title" /></a>
<b:else>
  <a expr:href="data:post.url">
<img class="thumbnail-post" src="http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg" expr:title="data:post.title" /></a>
  </b:else>
</b:if>
<div class='post-snippet'>
  <data:post.snippet/>
</div> 

➤ Langkah terakhir simpan template, dan lihat hasilnya sobat.

Jika nanti sobat ada kesulitan dalam mengikuti tutorial di atas. Jangan lupa untuk bertanya di kotak komentar, nanti Mas Yoga akan sebisanya membantu sobat.

Tutoril Membuat Auto Readmore no Javacript cukup untuk hari, Semoga tutorial blogging ini bermanfaat buat sobat.

Terima Kasih dan Sampai Jumpa. Tunggu updetan Tutorial Blogging selanjutnya.

Demikianlah Artikel Cara Membuat Auto Readmore Valid Tanpa Javascript di blog

Sekianlah artikel Cara Membuat Auto Readmore Valid Tanpa Javascript di blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Auto Readmore Valid Tanpa Javascript di blog dengan alamat link https://iplanetpost.blogspot.com/2016/11/cara-membuat-auto-readmore-valid-tanpa.html

Tweet