Ini cara buat Artikel terkait dengan Trumbail Gambar ( sudah saya Racik sendiri ) : ditaro di atas head Ton
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { margin: 1px 0px !important; background-color: #FFFFFF; background-image: -moz-linear-gradient(#FFFFFF, #FFFFFF); background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF)); background-image: -webkit-linear-gradient(#FFFFFF, #FFFFFF); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#FFFFFF, #FFFFFF); background-image: linear-gradient(#FFFFFF, #FFFFFF); height: 300px; width:570px!important; padding: 0px !important; box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important; border-radius: 5px 5px 5px 5px; } #related-posts h2{ margin: 0px !important; padding: 10px !important; color: rgb(255, 255, 255); font-weight: normal; color: black;text-transform: capitalize; background-color: rgb(18, 18, 18); border-bottom: 1px solid rgb(0, 0, 0); border-top-right-radius: 5px; border-top-left-radius: 5px; background-color: #111; background-image: -moz-linear-gradient(#FFFFFF, #FFFFFF); background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF)); background-image: -webkit-linear-gradient(#FFFFFF, #FFFFFF); background-image: -o-linear-gradient(#FFFFFF, #FFFFFF); background-image: -ms-linear-gradient(#FFFFFF, #FFFFFF); background-image: linear-gradient(#FFFFFF, #FFFFFF); text-decoration:none!important; } #related-posts a{ font-weight:bold!important; color: black; font-family: arial!important; border-right:0px!important; margin: 10px 0px 10px 10px !important; } #related-posts a:hover{ border-right:0px!important; margin: 10px 0px 10px 10px !important; background:none!important; text-decoration:underline!important; } #related-posts img{ border: 1px solid #666 !important; padding: 1px !important; width: 100px !important; height: 90px !important; margin-right: 15px !important; overflow: hidden; background:#444!important; } #related-posts img:hover{ opacity:0.5; } #attb{ font-size:5px!important; padding-top:200px; padding-bottom:5px; padding-left:560px; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlZEV0_8e-o2gk_B5bcrQopsik-nccVcE7wEmVJwChUgwGRWmK5CNUFPcnFdLkGdKTHTcoQMuc9yFnACmXMVrFvnMNYC04VggTvT9hZ7hHq6GDG8XUx4nSmwuPKahlPLmhtHSosLyMLto/s1600/no_image.jpg"; var maxresults=4; var splittercolor="#DDDDDD"; var relatedpoststitle="Artikel Terkait:"; </script> <script src='https://related-posts-atb-brandnew.googlecode.com/files/related%20posts%20js.js' type='text/javascript'/></b:if>
Dan yang ini di bawah post.body ( untuk mengatur letaknya saja ) bukan setingannya.
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script><div id='attb' align='bottom-right'><a href=""></a></div></div></b:if>
atau kunjungi link berikut jika kurang paham ton
http://farespo.blogspot.com/2013/06/cara-membuat-artikel-terkait-related-post-dengan-thumbnail-gambar.html
Sukses terus..!!!!
0 komentar:
Posting Komentar