Tampilan Postingan Homepage Seperti Layar Laptop dan Tab

Tampilan homepage layaknya seperti di dalam layar laptop atau tab biasa kita jumpai pada situs-situs penyedia template. Baik untuk mendownload template gratis ataupun template premium. Dengan model homepage seperti itu akan membuat tampilan situs makin menarik, kredibilitas pemilik situs akan diperhitungkan, serta pengunjung akan lebih merasa nyaman memilih template.

Nah, untuk itu bagi anda yang tertarik membangun situs penyedia template sendiri, dengan memanfaatkan platform blogger.com, dan ingin menerapkan seperti konsep yang saya maksud, maka cara berikut ini bisa anda ikuti.

membuat homepage seperti laptop dan tab

Di bawah ini adalah kode cssnya,
.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:35px 0 30px;padding:0;font-family:'Roboto', 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;}
.snippet-wrapper,h3.date-header, .postmeta {display:none}
.post-thumbnail{text-align:center;margin:0 auto}.post-thumb {margin:10px auto 0;text-align:center;padding:0;}
.post-thumb img{text-align:center;width:244px;height:153px;transition:all .3s ease-in-out;}
.post-thumb img:hover{opacity:0.7;transition:all .3s ease-in-out;}

Kode di atas sesuaikan dengan kode pada template yang anda gunakan.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0e3NzZ_64StBWb9RRrcCydhvHm4LOnBCpIa2kDigZUuw_OGEjqqpAdWFQCCkxjpuu2hXSAsTft2Nj2koFqWUQeS8QN7-HlgV_SXyPFverKID80XrqEtlp3Pf8JIDitKPkSjLpBGSylMI/s1600/bunground.png adalah gambar tab, silahkan ganti dengan url gambar versi anda. Jangan lupa untuk memperhatikan lebar dan tingginya.

Karena konsep ini hanya akan ditampilkan pada halaman homepage saja, maka anda perlu menambahkan tag kondisional seperti ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Nanti kerangkanya akan menjadi seperti di bawah ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>

………..
Disini kode css anda
…………
</style>
</b:if>
</b:if>

Sehingga hasilnya akan seperti ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.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:35px 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;}
.snippet-wrapper,h3.date-header, .postmeta {display:none}
.post-thumbnail{text-align:center;margin:0 auto}.post-thumb {margin:10px auto 0;text-align:center;padding:0;}
.post-thumb img{text-align:center;width:244px;height:153px;transition:all .3s ease-in-out;}
.post-thumb img:hover{opacity:0.7;transition:all .3s ease-in-out;}
</style>
</b:if>
</b:if>

Kopi kode tersebut, dan pastekan di atas kode </head>.

Tag kondisional di atas tidak perlu ditambahkan jika sudah ada pada template anda, langsung masukkan saja kode css pada tag kondisional tersebut.

Baca juga
Tampilan Homepage Seperti Laptop dan Tab dengan JavaScript

Tambahan.

Jika tampilan gampar terlihat blur, anda tampahkan kode JavaScript di bawah ini. Temukan kode </body> lalu letakkan kode di bawah ini tepat di atasnya.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');parent.async = true;
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size);
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('Blog1', 244);
//]]>
</script>
</b:if>

Sekian artikel ini, mudah-mudahan bisa dengan mudah anda terapkan nanti.

Posting Komentar