Cara Membuat Tampilan Home Page Blog menjadi Grid

Cara Membuat Tampilan Home Page Blog menjadi Grid

Jalak Ikal 22 September 0 komentar Read
Cara Mudah membuat Tampilan depan Blog atau Home Page Menjadi Grid - Mungkin andapun pernah melihat Tampilan Blog yang dimana Tampilan depan nya di bagi menjadi kotak-kotak tidak lagi memanjang

Dan Tidak sedikit pula para Blogger yang merubah tampilan Homa Page nya menjadi tampilan grid,hal itu di lakukan selain untuk mempercantik tampilan blog khusus nya di bagian depan atau Home Page Juga untuk meringankan Loading Blog tersebut
Tetapi disini saya bukan berbagi trik bagaimana cara untuk membuat Loading Blog menjadi ringan melainkan untuk membuat tampilan HomePage nya menjadi Tampilan Grid atau disebut juga dengan Kotak-kotak

Cara Membuat Home Page Blog menjadi tampilan Grid atau Kotak

Untuk membuat Tampilan Home Page menjadi Grid sangatlah mudah dan andapun tidak perlu untuk meng otak atik kode yang berada di bagian template sobat,untuk membuat tampilan Grid sobat hanya perlu mengikuti langkah-langkah nya di bawah ini
  • Silahkan Sobat Masuk ke bagian akun Blogger Sobat
  • Lalu kemudian silahkan sobat pilih Blog milik anda
  • Setelah itu silahkan anda klik Tema > Edit Html
  • Setelah berada di bagian edit HTML silahkan sobat cari kode </head> lalu letakan kode berikut sebelum kode tersebut
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> var thumbnail_mode = &quot;yes&quot; ; summary_noimg = 400; summary_img = 300; img_thumb_height = 130; img_thumb_width = 220; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary} //]]> </script> <style type='text/css'> .post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;} .post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;} .post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;} .post-footer {margin-top:30px;height:20px;} .post-labels {display:none;} .mobile .post {width:auto;height:auto;} .mobile .post-body {height:auto;} .more {float:right;background:#52e052;color:#000!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;} .more:hover {background:#ff0000;color:#fff!important;text-decoration:none!important;} </style> </b:if> </b:if>
  • Setelah itu Silahkan anda klik Save Template dan lihat Hasil nya
Nah itulah cara membuat Tampilan depan Home Page Blog menjadi tampilan Grid atau kotak kotak,semoga artikel ini bisa membantu sobat semua selamat mencoba.

Posted by Jalak Ikal, Published at 22 September and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi

ggggggggg