Hello sobat ketemu lagi :D , sekarang Saya akan memberikan tutorial
Cara membuat auto readmore tampilan Grid di Blogspot
Oke Langsung Saja Ke Tahap Pemasangan:
1.Login ke Blogger Kalian.
2.Cari kode
"</b:skin> atau </style>" jika sudah ketemu masukkan kode CSS di bawah ini tepat di bawah
"</b:skin> atau </style>".
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.thumbnail-post {width:100%; height:200px; margin:0px 10px 0px 0px;border-bottom:2px solid #000;border-top:2px solid blue}
.thumbnail-post:hover{opacity:1; -moz-transform:scale(.8);-webkit-transform:scale(.8);transform:scale(.8)}
.post-outer{width:331px;height:250px;display:inline-block;float:left;position:relative;border:1px solid #f2f2f2;margin:5px 4px;}
.judulhome{color:white;text-align:center;width:100%;background:rgb(191, 191, 191);opacity:1.5;padding:10px 0px;}
.judulhome a{text-decoration:none;color:white}
.post-snippet{display:none}
</style></b:if></b:if>
Jika sudah , kalian cari kode
<b:includable id='post' var='post'>.....</b:includable> Jika sudah ketemu ganti semua dengan kode di bawah ini.
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<b:if cond='data:blog.pageType == "item"'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
</b:if>
<div class='judulhome'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a></div>
<div class='post-snippet'>
<data:post.snippet/>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<!-- POST-FOOTER 2 -->
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</div>
</div>
</b:includable>
Lalu save. dan lihat hasilnya
Jika kurang pas atur kembali CSS diatas seperti width/height .
oke cukup sampe disini dulu ajhh .. "SELAMAT MENCOBA"
Jika ada pertanyaan silahkan tanyakan di komentar.
