Cara Mengubah Tampilan Homepage Statis Menjadi Grid Pada Blog | Tutorial Lengkap

Cara Mengubah Tampilan Homepage Statis Menjadi Grid Pada Blog

Cara Mengubah Tampilan Homepage Statis Menjadi Grid Pada Blog
Perbedaan Tampilan Statis Dan Grid
Cara Membuat Tampilan Homepage Blogspot Dari Statis Menjadi Grid Style. Secara default tampilan artikel pada homepage blogspot adalah berbentuk statis alias vertikal, Namun kita juga dapat melakukan kustomisasi tampilan tersebut menjadi tampilan grid atau kotak secara horizontal. Untuk lebih jelasnya silahkan ikuti tutorial berikut ini

Zona Internetku September 09, 2018

Baca jua :

Cara Membuat Auto Readmore Keren Otomatis

Cara Mengubah Tampilan Homepage Blogspot Statis Menjadi Grid Style

1. Masuk ke dalam menu "Tema" dan klik "Edit HTML"

2. Letakkan kode berikut ini di atas kode tag </head>

			<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;archive&quot;'> <style type='text/css'> .post-outer{float:left;width:calc(50% - 2px);height:210px;margin:4px 1px} div.post-body{padding:5px} .post.hentry{border:1px solid red;margin:4px} .post-title a,.post-title{font-size:20px;text-decoration:none;color:#f8695e;height:47px;overflow:hidden;display:block} .thumbnail-post{width:100%;height:140px;display:block;margin:0} </style> </b:if>
3. Kemudian cari kode <data:post.body/> yang ada di dalam <b:includable id='post' var='post'>...</b:includable> dan ganti kode tersebut dengan kode berikut

			<b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <b:if cond='data:blog.pageType != &quot;item&quot;'>     <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' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>     </b:if>   </b:if> </b:if>

Setelah itu simpan perubahan tema tersebut dan lihatlah hasilnya

Baca jua :

Cara Membuat Template Blog Dari Awal

Cara Membuat Menu Navigasi Dropdown Sederhana

Template Professional Absolute Grid Style For Blogspot Itu tadi tutorial singkat mengenai Cara Membuat Tampilan Homepage Statis Menjadi Grid Pada Blog yang dapat saya sampaikan, semoga bermanfaat

Komentar

Postingan populer dari blog ini

4 Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android | Tutorial Lengkap

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop | Tutorial Lengkap