Related Post Anitoki Versi Blogger
Tutorial kali ini ane akan membagikan Bagaimana Cara Membuat Related Post Anitoki Versi Blogger, artikel ini ane buat dengan beberapa fitur mirip responsive dan sudah otomatis, tutorial ini dapat diibaratkan makanan cepat saji, sebab kau tinggal pasang eksklusif jadi.
Fungsi related post yaitu untuk mempermudah pengunjung blog melihat artikel atau isi blog tanpa harus kembali kehalaman awal. Related post blogger mempunyai banyak model, mirip memakai related post thumbnail, related post simple, related post blogger ditengah post. Related Post Anitoki Versi Blogger mempunyai model yang beda dari blog yang lain, sebab artikel ini ane edit sendiri. Ok kita mulai saja tutorial ini.
- Buka Blogger > Tema > Edit HTML, Cari <b:includable id='postQuickEdit' var='post'>...</b:includable>
- Simpan HTML berikut dibawahnya
- Contohnya Cek gambar dibawah ini
- Kemudian simpan HTML berikut untuk menampilkannya
- Kalian dapat simpan diantara <b:includable id='post' var='post'>...</b:includable>, lebih tepatnya dibawah share button atau ganti related post blogger kalian.
- Cari </body> atau <!--</body>--></body>, simpan javascript berikut diatasnya, jikalau sudah save Tema.
<b:includable id='related-post_arlethdesign' var='post'> <style>/*<![CDATA[*/ /* Related Post Anitoki Versi Blogger by Arlethdesign =================================================== */ #related-postz{background:#fefefe;margin:5px auto;clear:both;overflow:hidden;padding:10px;} #related-postz .rel-left{float:left;width:49.5%;overflow:hidden} #related-postz .rel-left .rel-left-img{float:left;overflow:hidden;margin-right:10px} #related-postz .rel-left .rel-left-img img{height:171px;max-width:116px;border:1px solid #ccc;} #related-postz .rel-left-inf{overflow:hidden} #related-postz .rel-left-inf span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:.3em 0;line-height:21px;} #related-postz .rel-left-inf p{margin:auto;font-size:12px;white-space:normal} #related-postz .rel-right{float:right;width:49.5%;} #related-postz .rel-right ul,#related-post .rel-right li{list-style:none!important} #related-postz .rel-right ul{margin:auto;padding:0} #related-postz .rel-right li{margin:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px solid #ccc;} #related-postz .rel-right li a{color:#333;overflow:hidden;text-overflow:ellipsis;display:block;padding:6.7px 6px;background:#f1f1f1;font-weight:500;font-size:12px;text-decoration:none;} #related-postz .rel-right li a:hover{background:#2693f1;color:#fff;transition:.2s linear;-moz-transition:.2s linear;-webkit-transition:.2s linear;} #related-postz .rel-right li{display: block;} @media screen and (max-width:640px){ #related-postz .rel-left,#related-postz .rel-right{float:none;width:auto;} #related-postz:before{content:'Related Post';font-weight:700;font-size:15px;margin-bottom:13px;padding-bottom:5px;display:block;text-align:center;border-bottom:2px solid #333} #related-postz .rel-left-inf p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;}} /*]]>*/</style> <div id='related-postz'> <div class='rel-left'> <b:if cond='data:post.thumbnailUrl'> <div class='rel-left-img'> <a expr:href='data:post.url'> <img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 190, "1:1")'/> </a> </div> <b:else/> <b:if cond='data:post.firstImageUrl'> <div class='rel-left-img'> <a expr:href='data:post.url'> <img expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/> </a> </div> <b:else/> <div class='rel-left-img'> <a expr:href='data:post.url'> <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjehKhidmiPlifnosT2hoJbtiF0ge-KBGuH7RiF16jdLf9_kfhabm8aljS3Rvllb5BPOo3BNl9Hltzcjt8XG5FR4vbB-JGL8WRwm7whYvjTRk-Zxj2qJBPk8YTlGTapVeow-wUutxd-pMEJ/w110-c-h190/no-thumbnail.png'/> </a> </div> </b:if> </b:if> <div class='rel-left-inf'> <span><b>Tag :</b> <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if></span> <span><b>Sinopsis :</b><p><data:post.snippet/></p></span> </div> </div> <div class='rel-right'> <script type="text/javascript">//<![CDATA[ var max_posts=5;var readpost=true;function reading_post(e){for(var d=0;d<max_posts;d++){var f=e.feed.entry[d];var c=f.title.$t;var b;if(d==e.feed.entry.length){break}for(var a=0;a<f.link.length;a++){if(f.link[a].rel=="alternate"){b=f.link[a].href;break}}c=c.link(b);if(readpost){document.write("<li>")}document.write(c)}if(readpost){document.write("</li>")}}; //]]></script> <ul><b:loop index='x' values='data:post.labels' var='label'><b:if cond='data:x==0'> <script type='text/javascript' expr:src='"/feeds/posts/default/-/" + data:label.name + "?orderby=published&alt=json-in-script&callback=reading_post&max-results=5"'></script></b:if> </b:loop></ul> </div> </div> </b:includable>
<b:include cond='data:blog.pageType in {"item"}' data='post' name='related-post_arlethdesign'/> <div class='clear'/><b:if cond='data:blog.pageType in {"item"}'> <script type='text/javascript'>//<![CDATA[ $(document).ready(function() {$('#related-postz .rel-left .rel-left-img img').attr('src', function(i, src) {return src.replace( 'w190-h190-p-k-no-nu', 'w115-h170-p-k-no-nu' );});}); //]]></script> </b:if>Ok sekian tutorial Cara Membuat Related Post Anitoki Versi Blogger, jangan lupa untuk bertanya dan tinggalkan komentar, terima kasih.