Tampilan Homepage Seperti Layar Laptop dan Tab dengan JavaScript

Sebenarnya artikel serupa telah saya tulis beberapa waktu lalu. Tetapi ada beberapa kekurangan dari cara tersebut, yaitu tampilan gambar yang terlihat kurang baik saat blog masih dalam proses tampil sempurna. Maksudnya, pada saat memuat blog, gambar homepage terlihat blur/kabur. Karena sebetulnya cara tersebut dimaksudkan untuk template blog yang menggunakan auto readmore tanpa JavaScript.

Baca artikel ini
Tampilan Postingan Homepage Seperti Layar Laptop dan Tab

Oleh sebab itu, untuk menanggulangi kekurangan tersebut, auto readmorenya saya ganti dengan auto readmore menggunakan JavaScript yang juga menampilkan thumbnail atau gambar.

Bagi yang berminat memperbaiki yang sebelumnya atau hendak membuat yang baru, silahkan ikuti tutorial di berikut ini. Tetapi jangan lupa menyimpan script template blog anda terlebih dahulu guna mengantisipasi jika nanti terjadi error.

Kopi kode di bawah ini dan letakkan di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/* Homepage Layar Laptop */
.post{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0e3NzZ_64StBWb9RRrcCydhvHm4LOnBCpIa2kDigZUuw_OGEjqqpAdWFQCCkxjpuu2hXSAsTft2Nj2koFqWUQeS8QN7-HlgV_SXyPFverKID80XrqEtlp3Pf8JIDitKPkSjLpBGSylMI/s1600/bunground.png) no-repeat; margin: 0 0 30px 50px;width: 320px;height: 260px;overflow: hidden;float: left;positon: relative; padding:0;display:block}
.post h2 {margin:45px 0 30px;padding:0;font-family:&#39;Roboto&#39;, arial, sans-serif;font-size:18px;line-height:1.3em;text-align:center}
.post h2 a{color:#777; text-decoration:none;font-weight:700;text-transform:capitalize}
.post h2 a:hover{color:#66be92;background:#f9f9f9;}
h3.date-header, .postmeta {display:none}
.snippet-wrapper img {margin:10px auto 0}
.mobile-no-img:before {content: &quot;&quot;; display: block;position: absolute;top: 0;left: 0;height: 100%;width: 244px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh34P1MnVCb4pZNsgH4K5_0Krc4bmEo5Se1zCsjtU3JM7I5C1ytJdDwSMl5miAuT3QndvFuDz7WO9d3aqMwqn1hhXVq4qHpVtmm7ayvqRNHAM4RBjVvxwKTWFpjat3f2LbSZKzJ5b9bJEY/s1600/zoom-bg.png) no-repeat scroll center center #222; opacity: 0;visibility: hidden;transition: all 0.25s ease-in-out 0s;}
.mobile-no-img:hover:before {visibility: visible; opacity: 0.8;}
.mobile-no-img {display: block; position: relative;max-width: 240px;margin-left: 38px;}
.mobile-no-img img {box-shadow: 0 0 0 #000;}
.mobile-no-img img {display: block;width: 244px;}
</style>
</b:if>
</b:if>

Tambahkan juga JavaScript di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 0;
summary_img = 0;
img_thumb_height = 153;
img_thumb_width = 244;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-0){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}

function createSummaryAndThumb(d,t){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="text-align:center;margin:0;"><a class="mobile-no-img " href="' + t + '" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Setelah itu, cari kode <article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'> atau kode yang serupa, (yang pasti kode itu terletak setelah kode <b:includable id='post' var='post'>). Letakkan kode berikut ini, tepat di bawah kode <article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='snippet-wrapper' itemprop='description'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
</div>
</b:if>
</b:if>

Setelah itu, simpan template anda. Kemudian refresh homepage blog anda, untuk memastikan apakah berhasil atau tidak.
Semoga tutorial ini bisa dengan mudah diterapkan dan berhasil, wassalam.

Baca Juga: