Tips Tutorial Home Page Model 2
3. Hapus semua instruksi di dalam <b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isi...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-home-page-model-2.html
3. Hapus semua instruksi di dalam
4. Pasang instruksi script di bawah ini sempurna di atas instruksi
Script di atas berfungsi untuk menciptakan snippet, ubah angka pada instruksi
5. Pasang instruksi CSS berikut sempurna di atas instruksi
6. Pastikan di dalam template sudah terdapat instruksi penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang instruksi berikut di atas instruksi
7. Simpan Tema
Selanjutnya : Cara menciptakan hidangan blogspot (PageList) Responsive dropdown
<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, "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/AVvXsEhVCT7Mukp-3y-zDhYe4G3E6tvRN4LnIeQb6Ujjmk6K_SjQhatEKrqYv9rSz22-OzV1kD8KVfPcPlvC-j73HPFFApt4-GjqDqIolKp0zG77TCunHsr3ydg7Z5iIrSgnAYDDz_ZzMzEzQNc/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'/>&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 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 {"static_page","item","error_page"}'> <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 hidangan blogspot (PageList) Responsive dropdown