Home Page Model 2

Baca Juga

3. Hapus semua instruksi di dalam <b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isinya saja, kerangkanya jangan). Lalu ganti dengan instruksi berikut.

<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>                   <div class='Image-thumb'>                     <b:if cond='data:post.thumbnailUrl'>                       <b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 350, &quot;4:3&quot;) : data:post.thumbnail' var='image_bro'><img expr:alt='data:post.title' expr:src='data:image_bro'/></b:with>                       <b:else/>                       <img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuTbmdWcqEM0rSkufbfSpmK2Pq1Qmx0r_MvgOvJWoZz7ydXx_uZ8EC5FpVfmRrrdhsYU5Fd7ZaqF7rRW7lM58uGh24XTeQrLFhyphenhyphene5HxG3ZcgeQacuhzeZCHAaGXPcPl1Z7eU26FQhtxo/s320/no-image.PNG'/>                     </b:if>                   </div>                   <a expr:href='data:post.url'>                     <h3 class='post-title entry-title' itemprop='name'>                       <data:post.title/>                     </h3>                   </a>                   <div class='post-info'>                     <span class='post-author'><i class='fa fa-user'/>&amp;nbsp;<b:if cond='data:post.authorProfileUrl'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a><b:else/><data:post.author/></b:if></span>                     <span class='post-date'><i class='fa fa-calendar'/>&amp;nbsp;<data:post.dateHeader/></span>                   </div>                   <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'> <div class='post-body entry-content' expr:id='&quot;summary&quot; + data:post.id' itemprop='articleBody'> <b:if cond='data:post.snippet'>   <data:post.body/>   </b:if>                   </div>                   </div>  <script type='text/javascript'>                             createSnippet(&quot;summary<data:post.id/>&quot;);</script>                   <div class='jump-link'>                     <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>                       <data:post.jumpText/>                     </a>                   </div>                   <div style='clear:both;'/>                 </div>

4. Pasang instruksi script di bawah ini sempurna di atas instruksi </head>

    <script type='text/javascript'> snippet_count = 170; //<![CDATA[ function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i} //]]>     </script>

Script di atas berfungsi untuk menciptakan snippet, ubah angka pada instruksi snippet_count untuk menambah atau mengurangi jumlah abjad dari cuplikan artikel yang ingin ditampilkan.

5. Pasang instruksi CSS berikut sempurna di atas instruksi </head>

  <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;,&quot;error_page&quot;}'>     <style type='text/css'>       .Image-thumb{padding:0;margin:0 auto;}       .Image-thumb img{width:100%;height:auto}       .post-info,.jump-link{padding:10px 0}.post-author,.post-date{background:#dddddd;border-radius:2px;padding:4px;margin:5px 5px 5px 0;display:inline-block}.post-info, h3.post-title{overflow:hidden}.blog-pager{clear:both}.post-info{box-sizing:border-box}       .post-info, h3.post-title, .jump-link{text-align:center}.snippets{text-align:justify} .post{background:none;position:relative;margin:0 0 20px;padding:0 10px 10px 10px;height:auto;width:50%;float:left;overflow:hidden;transition:all .4s ease-in-out;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} @media screen and (max-width:414px){         .post{width:100%;padding:0}       }       </style>     </b:if>

6. Pastikan di dalam template sudah terdapat instruksi penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang instruksi berikut di atas instruksi </body>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

7. Simpan Tema

Selanjutnya : Cara menciptakan sajian blogspot (PageList) Responsive dropdown