3. Hapus semua arahan di dalam
4. Pasang script di bawah ini sempurna di atas arahan
Script di atas berfungsi untuk menciptakan snippet, ubah angka pada arahan
5. Pasang arahan CSS berikut sempurna di atas arahan
6. Pastikan di dalam template sudah terdapat arahan penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang arahan berikut di atas arahan
7. Simpan Tema
Selanjutnya : Cara menciptakan tombol next page dengan nomor 1 2 3
<b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isinya saja, kerangkanya jangan). Kemudian ganti dengan arahan 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, 200, "4:3") : 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/s200/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'/>&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'/>&nbsp;<data:post.dateHeader/></span> </div> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'> <div class='post-body entry-content' expr:id='"summary" + data:post.id' itemprop='articleBody'> <b:if cond='data:post.snippet'> <data:post.body/> </b:if> </div> </div> <script type='text/javascript'> createSnippet("summary<data:post.id/>");</script> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'> <data:post.jumpText/> </a> </div> <div style='clear:both;'/> </div>
4. Pasang script di bawah ini sempurna di atas arahan
</head> <script type='text/javascript'> snippet_count = 200; //<![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 arahan
snippet_count untuk menambah atau mengurangi jumlah huruf dari cuplikan artikel yang ingin ditampilkan.5. Pasang arahan CSS berikut sempurna di atas arahan
</head> <b:if cond='data:blog.pageType not in {"static_page","item","error_page"}'> <style type='text/css'> .Image-thumb{float:left;width:30%;height:auto;margin:5px 15px 0 0;padding:0} .Image-thumb img{width:100%;height:auto} .snippets{font-size:15px;text-align:justify} .post-info{font-size:11px;margin:5px 0 0 0} .post-info,h3.post-title{overflow:hidden} .jump-link{float:right;padding:5px 0} .post-author,.post-date{display:inline-block;padding:4px} @media screen and (max-width:414px){ .Image-thumb{margin:5px 10px 0 0} } </style> </b:if> 6. Pastikan di dalam template sudah terdapat arahan penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang arahan berikut di atas arahan
</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 tombol next page dengan nomor 1 2 3
