Cara membuat tampilan beranda blog di blogsopt menjadi Grid

 Halo kawan webdesign and Apk android,kali ini admin akan berbagi tutorial membuat beranda pada blog yang menggunakan Blogspot menjadi Grid beserta gambar serta responsive,dan jika sobat sedang mencari tutorial tersebut ,dan menemukan blog kami ,admin ucapkan terima kasih.

 Berikut langkah yang akan kita lakukan ,seperti pada judul ,Untuk pertama buka Blog sobat dulu lalu masuk Tema ,dan edit bagian Edit Html.Dan untuk mempercepat pencarian ,tekan pada Keyboard CTRL + F.

 Dan masukkan kode </head> di kolom pencarian tersebut,selanjutnya tekan Enter.Setelah ketemu selanjutnya kita masukkan kode di bawah ini ,tepat di atas kode </head> tadi.


<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>

 Setelah itu masih ada tahap lagi yang akan kita lakukan ,kita cari <data:post.body/> dan cari yang nomor dua,aatau nomor tiga dari deretan yang di tampilkan,karena biasanya kurang pas ,jadi cari yang pas,baru kita terapkan.selanjutnya hapus kode di atas  (<data:post.body/>) dan ganti dengan kode di bawah ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>

        <div expr:id='&quot;summary&quot; + data:post.id'>

            <data:post.body/>

        </div>

        <script 
type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>

        <b:if cond='data:post.allowComments'>

            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

                <data:post.numComments/>

            </a>

        </b:if>

    </b:if>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

    <data:post.body/>

</b:if>

 Berikutnya ,karena kode di atas tadi belum ada CSSnya ,sekarang kita tambahkan kode di bawah ini ,taruh di atas kode <head/> (posisi terserah sobat

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType!= &quot;item&quot;'>

<style>

#blog-pager {

clear: both;

position: absolute;

bottom: 0px;

left: 0px;

}

.blog-feeds {

display: none;

}

.post {

height: auto;

width: 100%;

padding: 0px !important;

margin: 0px 0px 30px;

display: inline-block;

text-decoration: none;

}

h3.post-title a{

font-size: 95%;

font-family: &#39;Open Sans Condensed&#39;, sans-serif;

text-transform: uppercase;

padding: 0px;

color: #fff;

text-shadow: 3px 2px 2px #222;

font-weight: bold;

}

h3.post-title, .comments h4 {

margin: 0px !important;

text-align: center;

padding: 10px 0px;

position: absolute;

top: 10px;

width: 100%;

z-index: 200;

}

.post-header {

display: none;

}

.date-header {

visibility: hidden;

height: 0px !important;

width: 0px !important;

padding: 0px !important;

margin: 0px !important;

}

.posts-thumb {

width: 100%;

height: auto;

overflow: hidden;

clear: both;

}

.post-body {

overflow: hidden;

position:relative;     

}

.post-body a {

text-decoration: none;

}

.post-body img {

display: block;

width: auto;

height: auto;

max-width: 100%;

max-height: none;

min-width: 100%;

min-height: auto;

margin: 0px;

padding: 0;

border: none;

outline: none;

position: relative;

}

.post-summary-text {

cursor: pointer;

background-color: rgba(44, 77, 163, 0.8);

color:#fff;

font-size:120%!important;

font-family: &#39;Open Sans Condensed&#39;, sans-serif;

clear:both;

overflow:hidden;

padding:25% 10% 0%;

left: 0;

position: absolute;

text-align: center;

vertical-align: bottom;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);

top: 0;

transform: scale(1);

opacity: 0;

z-index: 10;

height: 100%;

transition: all 300ms ease-out 0s;

}

.post-summary-text:hover {

opacity: 1;

}

.post-footer {

display: none;

}

a.comment-bubble {

color: #fff;

text-decoration: none;

font-size: 120%;

right: 5px;

z-index: 222;

position: absolute;

top: 5px;

text-shadow: 1px 2px 1px #333;

font-family: &#39;Open Sans Condensed&#39;, sans-serif;

}

a.comment-bubble:before {

content: url(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);

}

.main-inner .column-center-inner {

-moz-column-count: 3;

-moz-column-gap: 1px;

-webkit-column-count: 3;

-webkit-column-gap: 1px;

column-count: 3;

column-gap: 1px;

width: 100%;

padding: 0px !important;

}

</style></b:if></b:if>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

 Demikian kawan cara membuat tampilan beranda blog pada blogspot menjadi Grid,semoga bermanfaat,dan yang ingin menambahkan silahkan di kolom komentar.

Baca juga artikel lainnya