Cara Menciptakan Related Post Bergambar (Thumbnails)
Teknik Membuat Related Post Bergambar (Thumbnails) - Sesudah belajar membuat blog niscaya ada berbagai hal yang dapat teman bersahabat lakukan untuk mempercantik blog salah satu nya yaitu membuat related post atau artikle terkait bergambar, relatedpost ini ada majemuk dengan memakai style yang tidak sama-beda salah satunya yaitu related post yang bergambar sehingga tampilan related post ini akan mendukung blog teman bersahabat menjadi lebih cantik. bagi teman bersahabat yang mungkin ingin membandingkan tutorial cara membuat artikel terkait ini tanpa gambar dapat lihat panduannya disini artikel terkait tersebut tampak mudah alasannya spesialuntuk berupa text saja tidak. berupa gambar diberikut yaitu cara membuanya
Teknik Membuat Artikel Terkait melaluiataubersamaini Gambar di bawah postingan
- Silahkan masuk ke bloggger kemudian pilih TEMPLATE dan EDIT TEMPLATE
- Cari arahan </head> dan copy arahan di warna biru bawah ini kemudian letakkan di atas arahan </head> tadi
<!--Related Posts with thumbnails Start--><b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts{float:left;width:auto;}#related-posts a{border-right: 1px dotted #eaeaea;}#related-posts a:hover{background: #f2f2f2;}#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style><script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /></b:if><!--Related Posts with thumbnails End--> Ganti arahan yang berwarna merah dengan diadaptasi dengan blog teman bersahabat ibarat panjang , dan tingginya. - Lalu cari arahan <div class='post-footer-line post-footer-line-1'> sesudah itu copy dan pastekan arahan warna biru di bawah ini di bawah kode <p class='post-footer-line post-footer-line-1'>
<!-- Related Posts with Thumbnails Code Start--> <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><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <!-- Related Posts with Thumbnails Code End--> - Simpan Template
Selamat mencoba artikel terkait dengan gambar nya , biar suka
Komentar
Posting Komentar