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(http://1.bp.blogspot.com/-gosVGPiYRtY/VPsgGc4twJI/AAAAAAAADmo/ELdaPXKbOiI/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.
http://1.bp.blogspot.com/-gosVGPiYRtY/VPsgGc4twJI/AAAAAAAADmo/ELdaPXKbOiI/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(http://1.bp.blogspot.com/-gosVGPiYRtY/VPsgGc4twJI/AAAAAAAADmo/ELdaPXKbOiI/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.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Posting Komentar