JumpLink Post Tanpa JavaScript

Jump Link / Read More Tanpa JavaScript

Tentu Anda tahu script read more otomatis bukan? Sejauh ini, kami menggunakan otomatis readmore dilengkapi dengan java script. Jadi, read more yang ber java script tentu saja membuat sedikit pengaruh pada halaman loading blog Anda. Nah sekarang, ada trik blogger baru untuk desain blog Anda, bagaimana membuat ringkasan posting dengan thumbnail tanpa java script. Trik ini saya pelajari dari hasil surfing saya di internet. Karena trik ini hanya menggunakan murni seratus persen kode HMTL dengan sedikit sentuhan css yang dapat mengurangi beban pada halaman blog. Saya akan memberitahu Anda bagaimana cara menggunakannya trik tersebut.

1. Login di Blogger.com pergi ke Template/Rancangan > Edit HTML (Expand Template Widget)
2. Cari kode berikut (biar cepat dalam mencari tekan Ctrl+F)
   

   <data:post.body/>

   Ganti kode tesebut dengan kode dibawah ini
   

       <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
               <data:post.body/>
         <b:else/>
         <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:if cond='data:post.snippet'>
             <b:if cond='data:post.thumbnailUrl'>
                 <div class='Image thumb'>
                   <img expr:src='data:post.thumbnailUrl'/>
                 </div>
             </b:if>
               <data:post.snippet/>
       <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
         <div class='jump-link' style='float:right'>
           <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
         </div>
       </b:if>
             <b:else/>
               <data:post.body/>
             </b:if>
         <b:else/>
         <data:post.body/>
         </b:if>
       </b:if>

3. Langkah berikutnya, Anda perlu menambahkan beberapa kode CSS, yang ditempatkan di atas atau sebelum kode ]]></ b: skin>

   .thumb img {
   float: left;
   margin: 0 10px 10px 0;
   }

4. Terahkir Klik Save Template

Read more »