Cara Membuat Tampilan Halaman Depan Blog Menjadi Grid

adscblog

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.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 02 Mei and have 0 komentar