Cara Membuat Auto Read More Grid Style untuk Blog Foto & Video

Romeltea | Follow @romel_tea

Cara Membuat Auto Read More Grid Style untuk Blog Foto, Video, dan Blog Toko Online.

DESAIN atau tampilan blog halaman depan berupa Grid Style cocok buat blog foto atau video, juga bisa untuk blog toko online (e-commerce berbasis blogger).

Tampilannya di halaman depan dan halaman label kira-kira seperti ini jadinya.

Cara Membuat Auto Read More Grid Style untuk Blog Foto & Video

Mari langsung saja kita buat.

1. Simpan kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <style type='text/css'>
 .date-outer .post-outer {width:50%;height:500px;float:left;margin:20px 1% 0px 1%;}
 .date-outer .post-outer .post-body {font-family:Helvetica, Arial;font-size:13px;}
 .date-outer .post-header {margin:0px;}
 .date-outer .post-outer h2.exe_post_TITLE {margin:0px;font-size:18px;font-family:fantasy;font-weight:normal;}
 .date-outer .post-outer h2.exe_post_TITLE a:hover{text-decoration:underline;}
 .date-outer .post-outer img.exe_post_IMG {margin-right:10px;float:left;width:100%;}
 .date-outer .post-outer .exe_post_Desc {font-size:12px;padding: 10px;display: block;}
 .date-outer .post-outer .post-footer {text-align:left;display:block;padding:10px;font-size:11px;}
 .exe_readmore {color:#333333;font-size:13px;font-weight:700;text-transform:uppercase;position:relative;right:0px;float:right;padding:5px;}
 .exe_readmore:hover {background:#333333;color:#ffffff;}
 .post-title, .jump-link {display:none;}
 </style>
 <script type='text/javascript'>
 var exe_summary_count = 250;
 var exe_img_height = 150;
 var exe_img_width = 200;
 var exe_defaultImg = "https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg";
 </script>
 <script type='text/javascript'>
 // Grid Style V2-Optimized Blogger Posts
 // Code Written By EXEIdeas (www.exeideas.com)
 // Copyright 2014. All Right Reserved.
 //<![CDATA[
var _0x8936=["\x3C","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x63\x68\x61\x72\x41\x74","\x20","\x2E\x2E\x2E","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x49\x56\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x77\x69\x64\x74\x68\x3D\x22","\x70\x78\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22","\x70\x78\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x49\x4D\x47\x22\x2F\x3E","\x3C\x68\x32\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x54\x49\x54\x4C\x45\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x32\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x65\x73\x63\x22\x3E\x3C\x73\x70\x61\x6E\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E"];function removeHtmlTag(_0xbb2bx2,_0xbb2bx3){if(_0xbb2bx2[_0x8936[1]](_0x8936[0])!=-1){var _0xbb2bx4=_0xbb2bx2[_0x8936[2]](_0x8936[0]);for(var _0xbb2bx5=0;_0xbb2bx5<_0xbb2bx4[_0x8936[3]];_0xbb2bx5++){if(_0xbb2bx4[_0xbb2bx5][_0x8936[1]](_0x8936[4])!=-1){_0xbb2bx4[_0xbb2bx5]=_0xbb2bx4[_0xbb2bx5][_0x8936[5]](_0xbb2bx4[_0xbb2bx5][_0x8936[1]](_0x8936[4])+1,_0xbb2bx4[_0xbb2bx5][_0x8936[3]]);} ;} ;_0xbb2bx2=_0xbb2bx4[_0x8936[7]](_0x8936[6]);} ;_0xbb2bx3=(_0xbb2bx3<_0xbb2bx2[_0x8936[3]]-1)?_0xbb2bx3:_0xbb2bx2[_0x8936[3]]-2;while(_0xbb2bx2[_0x8936[8]](_0xbb2bx3-1)!=_0x8936[9]&&_0xbb2bx2[_0x8936[1]](_0x8936[9],_0xbb2bx3)!=-1){_0xbb2bx3++;} ;_0xbb2bx2=_0xbb2bx2[_0x8936[5]](0,_0xbb2bx3-1);return _0xbb2bx2+_0x8936[10];} ;function EXEcreateSummaryAndThumb(_0xbb2bx7,_0xbb2bx8,_0xbb2bx9,_0xbb2bxa){var _0xbb2bxb=document[_0x8936[11]](_0xbb2bx7);var _0xbb2bxc=_0x8936[12]+_0xbb2bxa+_0x8936[13]+exe_img_width+_0x8936[14]+exe_img_height+_0x8936[15];var _0xbb2bxd=exe_summary_count;var _0xbb2bxe=_0xbb2bxc+_0x8936[16]+_0xbb2bx9+_0x8936[17]+_0xbb2bx8+_0x8936[18]+removeHtmlTag(_0xbb2bxb[_0x8936[19]],_0xbb2bxd)+_0x8936[20];_0xbb2bxb[_0x8936[19]]=_0xbb2bxe;} ;
 //]]>
 </script>
 </b:if>
 </b:if>

2. Ganti kode <data:post.body/> yang kedua --dan ketiga (jika ada) dengan kode ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<b:if cond='data:post.thumbnailUrl'>
<script type='text/javascript'> EXEcreateSummaryAndThumb(&quot;summary<data:post.id/>&quot;, &quot;<data:post.title/>&quot;, &quot;<data:post.url/>&quot;, &quot;<data:post.thumbnailUrl/>&quot;); </script>
<b:else/>
<script type='text/javascript'> EXEcreateSummaryAndThumb(&quot;summary<data:post.id/>&quot;, &quot;<data:post.title/>&quot;, &quot;<data:post.url/>&quot;, exe_defaultImg); </script>
</b:if>
<script type='text/javascript'>
//<![CDATA[
var _0x4f05=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x6C\x65\x6E\x67\x74\x68","\x73\x72\x63","\x2F\x73","\x2D\x63","\x72\x65\x70\x6C\x61\x63\x65","\x42\x6C\x6F\x67\x31"];function resizeThumb(_0x6ad0x2,_0x6ad0x3,_0x6ad0x4){var _0x6ad0x5=document[_0x4f05[0]](_0x6ad0x2),_0x6ad0x6=_0x6ad0x5[_0x4f05[2]](_0x4f05[1]);for(var _0x6ad0x7=0;_0x6ad0x7<_0x6ad0x6[_0x4f05[3]];_0x6ad0x7++){_0x6ad0x6[_0x6ad0x7][_0x4f05[4]]=_0x6ad0x6[_0x6ad0x7][_0x4f05[4]][_0x4f05[7]](/\/s72\-c/,_0x4f05[5]+_0x6ad0x3+_0x4f05[6]);} ;} ;resizeThumb(_0x4f05[8],exe_img_width);//]]>
</script>
<a class='exe_readmore' expr:href='data:post.url'>Read More...</a>
</b:if>
</b:if>


3. Save!

Beres. Mudah 'kan?

Sumber

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Cara Membuat Auto Read More Grid Style untuk Blog Foto & Video

Post a Comment

No Spam, Please!