Widget Thumbnail Auto Readmore untuk Blog

Tata letak default Blogger untuk posting terbaru di homepage membuat loading blog lebih lama. Kalian sendiri bisa chek waktu loading blog kalian dengan auto readmore widget dengan bawaan blog, dan coba bandingkan.

saya sendiri sudah mencoba menggunakan script dengan bobot yang paling ringan sehingga akan membuat blog dimuat lebih cepat. nah yang paling menarik widget ini  telah ditambahkan efek gambar melayang  saat mengeklik thumbnail untuk membuka pos.

yuhh langsung sikat saja.

Widget Thumbnail Auto Readmore untuk Blogger
Cari kode ]]></b:skin> dan letakkan kode di bawah ini sebelum ]]></b:skin>

/* Setting Thumbnails width */
.pthumbnail{width:100%; height:auto; 
display:block; margin:0 0 10px; 
transition: all 0.3s ease-in-out 0s; }
img:hover.pthumbnail{opacity:.8;}

Selanjutnya cari kode <data:post.body/>
ganti kode tersebut dengan Javascript berikut

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
function penit(e,d){var c=750;var a=true; if(a==true&&e==""){e}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"/s")+'" class="pthumbnail"/>';if(e!=""){return image_tag}};
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(penit(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>
<div class='item-snippet'><data:post.snippet/></div>
</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>

Simpan dan lihat hasilnya

Share this with short URL:

Artikel Menarik Lainya:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser