Cara mudah membuat halaman terkait bergambar - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Cara mudah membuat halaman terkait bergambar, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blogging, Artikel css, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara mudah membuat halaman terkait bergambar
link : Cara mudah membuat halaman terkait bergambar

Cara mudah membuat halaman terkait bergambar

 Halo sobat webdesign,berikut admin akan bagikan cara memasang halaman terkait dengan artikel pada postingan blog/website.fungsi halaman terkait antara lain, mempermudah pengunjung blog untuk menavigasi postingan yang terkait erat dengan sebuah judul posting.sedangkan supaya mudah pengunjung menemukan artikel yang berhubungan,biasanya kita akan memberikan related post menggunakan berbagai macam modifikasi,seperti dengan tampilan bergambar,memberi tag tertentu supaya mempermudah menemukan yang di cari.

 Langsung saja admin akan bagikan script memasang artikel terkait atau Related post,pertama seperti biasa buka Html,lalu cari </head>,setelah itu paste kode di bawah,tepat di atas </head>
<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:4px solid #f2f2f2;width:100px;height:100px;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:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /></b:if>
pada bagian width:100px;height:100px,adalah ukuran panjang dan tinggi gambar yang akan terkonversi secara otomatis,sobat bisa mengubahnya semisal menjadi width:50px;height:50px,sekarang kita lanjutan lagi.sobat webdesign cari lagi kode <div class='post-footer'>,jika sudah ketemu,selanjutnya sobat copas kode di bawah di atas kode <div class='post-footer'> tadi.
<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> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'></b:if>
sobat bisa ubah bagian max-results=5,yang berarti related post atau post terkait akan menampilan jumlah post dengan jumlah 5,dan untuk mengubah Related post menjadi,seperti contoh Artikel terkait,berita terkait lainya,atau pun post terkait sobat ubah pada bagian <b>Related Posts:
semoga yang admin bagikan bisa bermanfaat salam belajar.

Demikianlah Artikel Cara mudah membuat halaman terkait bergambar

Sekianlah artikel Cara mudah membuat halaman terkait bergambar kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara mudah membuat halaman terkait bergambar dengan alamat link https://dev-create.blogspot.com/2016/06/cara-mudah-membuat-halaman-terkait.html