Cara Membuat Read More Di Blog Tanpa Java Script

Asalamualaikum  !!!! Pada kesempatan ini saya admin Blog "Kumpulan Tutorial" akan membagikan Tips dan Trick "CARA MEMBUAT READMORE DI BLOG TANPA JAVASCRIPT"  tanpa javascript dikarenakan kalau menggunakan JavaScript Google tidak akan menyukainya,entah kenapa pasti alasanya banyak yan aku tahu dari berbagai sumber.

Kalian Tentu tahu Tampilan blog ini pada awalnyakan??? ya,tidak ada read more sayapun baru tahu saat saya keliling keliling google , memang waktu pertama mencoba sangat susah tapi pada akhirnya saat mau berputus asa jadi bisa ! oke saya tidak mau basa basi lagi langsung ke step pertama.

1. Login ke blogger
2. Pilih Blog >> Template >> Edit HTML
Untuk berjaga jaga,Backup dulu templatenya, Klik Cadangkan/Pulihkan >> Unduh Template

 

3. Cari Kode  <data:post.body/> Menggunakan CTRL+F 

 4. Karena kita menemukan 3 Kode, pilih yang Terakhir,yang dibawahnya ada </b:if>

5. Ganti kode <data:post.body/> 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;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<data:post.snippet/>
</b:if>
</b:if>
</b:if>

6. Cari Kode <b:if cond='data:post.thumbnailUrl'> dan dibawahnya ada <a expr:name='data:post.id'/>

Lalu ganti dengan Kode Dibawah ini :

<b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:if cond='data:post.firstImageUrl'>
              <div class='ptmb'>
                <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' height='120px' width='200px'/></a></div>
</b:if></b:if>

7. Simpan Template anda

Sebenarnya sudah selesai,tapi agar readmorenya tampak lebih  indah, bisa kita mempercantik dengan style, mau tahu caranya???? 

1. Di kolom template Cari kode </head> lalu Tempatkan Kode dibawah ini diatas </head>

<style type='text/css'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
.post-footer,.jump-link,.feed-links{
      display:none
}
 
.ptmb{
      float:left;
      border:1px solid #ddd;
      -moz-box-shadow:1px 1px 5px rgba(1,1,1,.1);
      -webkit-box-shadow:1px 1px 5px rgba(1,1,1,.1);
      box-shadow:1px 1px 5px rgba(1,1,1,.1);
      margin:0 12px 5px 0;
      padding:6px
}
 
h2.date-header{
      margin:.2em 0 .4em
}
 
.post h3 a:hover {
color: #cccccc;
-moz-transition: color .45s linear;
-webkit-transition: color .45s linear;
transition: color .45s linear;
}
 
.post{
      padding-bottom:.4em;
      border-bottom:1px solid #ddd;
      margin:.5em 0 1em
}
    .post-header{margin:0 0 10px;}
 
.post:hover{
      border-bottom:1px solid #bbb
}
 
.post-body{
      line-height:1.3em;
      margin:0 0 .15em
}
 
#blog-pager{
      width:98%;
      float:left;
      margin:6px 0 1px;
      padding:8px 0
}
</b:if>
</style>

Nah sekarang coba simpan template yang sudah kita edit dan lihat blog kalian sekarang seperti apa. Jika kurang sesuai dengan selera coba edit kode terakhir di atas ini dan preview secara bertahap hasilnya. jika bingung ya itu derita kita hehee,.. ya coba buat latian aja lah.

Cukup Sekian postingan saya hari ini,semoga bermanfaat untuk anda semua, Wasalamualaikum :)

Sumber Post

 

Posted by Unknown on Rabu, 06 November 2013 - Rating: 4.5

Title : Cara Membuat Read More Di Blog Tanpa Java Script
Description : Asalamualaikum  !!!! Pada kesempatan ini saya admin Blog "Kumpulan Tutorial" akan membagikan Tips dan Trick "CARA MEMBUAT R...

Tweet