Dua Cara Gampang Membuat dan Memasang Auto Readmore ( baca Selengkapnya
) Otomatis Tanpa Javascript di Blog Anda disertai Thumbnail Yang Ringan. Banyak sekali macam - macam Auto Readmore yang dapat
kita pasang di blog kita, auto readmore tersebut ada yang menggunakan
java script dan ada yang tidak , atau ada yang default dari blogger
Kali ini saya akan berbagi tentang bagaimana sih , membuat Auto Read
More Thumbnail Yang Ringan Tanpa Disertai Javascript , seperti yang
kita tahu bahwa javascript sangat memengaruhi loading blog kita. Auto
Readmore ini saya ambil dari rich snipet popular post . sehingga auto
readmorenya valid dan fast loading
Cara Membuat Auto Readmore yang masih berupa posting biasa tanpa belom ada readmorenya
Jika template blog Anda masih berupa posting biasa tanpa belom ada readmorenya berikut tutorial lengkap membuat Auto Read More Thumbnail Tanpa Javascript , maka caranya yaitu
- Login Ke Blogger
- Klik Edit Template (Jangan Lupa Back Up dulu)
- Cari kode
]]></b:skin>
- Dengan cara, klik di dalam kotak edit template, lalu tekan CTRL&F bersamaan, Copas kode
]]></b:skin>
di kotak search yang timbul di dalam kotak template. Lalu tekan ENTER. - Copy Css Berikut di atas kode tersebut..
.thumbnail-post {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}
- Setelah itu Cari kode <data:post.body/> yang ke 2 atau 3 atau ke 4
- Dengan cara, klik di dalam kotak edit template, lalu tekan CTRL&F bersamaan, Copas kode
<data:post.body/>
di kotak search yang timbul di dalam kotak template. Lalu tekan ENTER 2 atau 3 atau 4 kali. - Ganti dengan kode ini
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
Keterangan: Thumbnail saya menggunakan
Snippet di ambil dari Referensi pada Popular Post
<data:post.firstImageUrl>
Snippet di ambil dari Referensi pada Popular Post
<data:post.snippet/>
- Langkah Terkahir "Save Template" dan Lihat Hasilnya
Memodifikasi Auto Readmore Yang Sudah Menggunakan Javascript
Cara Yang Kedua Yaitu Apabila Template sobat udah ada auto readmorenya yang menggunakan java script, Anda bisa memodifikasinya pada formulir HTML Template, temukan kode in i:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
Keterangan Jangan lupa untuk menghapus script auto read-more link yang biasanya terletak di atas
</head>
Kalau udah ketemu hapus semua kode tersebut kemudian Anda ganti dengan kode di bawah 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>
- Kemudian Simpan Template dan Lihat Hasilnya
Begitulah 2 Cara Membuat Auto Readmore Valid Tanpa Javascript di Template blog anda
NB :
- Pembaca yang baik selalu meninggalkan komentar
- Copas dari Sumber : http://www.masyadi.com/2014/07/2-cara-membuat-auto-readmore-valid-tanpa-javascript.html
Tidak ada komentar:
Posting Komentar