Tips Tutorial Home Page Model 1
3. Hapus semua isyarat di dalam <b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isiny...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-home-page-model-1.html
3. Hapus semua isyarat di dalam
4. Pasang script di bawah ini sempurna di atas isyarat
Script di atas berfungsi untuk menciptakan snippet, ubah angka pada isyarat
5. Pasang isyarat CSS berikut sempurna di atas isyarat
6. Pastikan di dalam template sudah terdapat isyarat penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang isyarat berikut di atas isyarat
7. Simpan Tema
Selanjutnya : Cara menciptakan tombol next page dengan angka
<b:includable id='mobile-index-post' var='post'>...</b:includable>
(Hapus isinya saja, kerangkanya jangan). Ganti dengan isyarat 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> <span class='post-timestamp'><i class='fa fa-clock-o'/>&nbsp;<abbr class='published' expr.title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span> <span class='post-labels'><b:if cond='data:post.labels'><i class='fa fa-tag'/>&nbsp;<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if></b:loop></b:if></span> <span class='post-comm'><i class='fa fa-comment'/>&nbsp;<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/></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 isyarat
</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 isyarat
snippet_count
untuk menambah atau mengurangi jumlah abjad dari cuplikan artikel yang ingin ditampilkan.5. Pasang isyarat CSS berikut sempurna di atas isyarat
</head>
<b:if cond='data:blog.pageType not in {"static_page","item","error_page"}'> <style type='text/css'> .post-date {background: rgb(245, 123, 84)} .post-comm {background: rgb(32, 56, 172)} .post-author {background: rgb(122, 195, 235)} .post-labels {background: rgb(123, 50, 40)} .post-timestamp {background: rgb(50, 200, 50)} .post-author a, .post-timestamp a, .post-comm a, .post-labels a{color: white} .jump-link{float:right;padding:5px} .post-author,.post-date,.post-timestamp,.post-labels,.post-comm{display:inline-block;padding:4px;margin:5px 5px 5px 0;font-size:11px;color:white;border-radius:2px} h3.post-title,.post-info{overflow:hidden}.post-info{background:none;vertical-align:baseline;border:0;padding:10px 0;margin:0;color:#999999;}.snippets{text-align:justify;font-size:15px}.blog-pager{clear:both}.Image-thumb{width:35%;height:auto;float:left;padding:0 15px 0 0}.Image-thumb img{width:100%;height:auto} @media screen and (max-width:414px){ .jump-link{float:none}h3.post-title,.post-info,.jump-link{text-align:center}.Image-thumb{float:none;width:100%;padding:0} } </style> </b:if>
6. Pastikan di dalam template sudah terdapat isyarat penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang isyarat berikut di atas isyarat
</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 angka