Home » » Cara Membuat Related Post Dengan Gambar

Cara Membuat Related Post Dengan Gambar

Pada kesempatan kali ini taukahbahwa.blogspot.com akan menyampaikan berita tentang Cara Membuat Related Post Dengan Gambar. Semoga dengan posting Cara Membuat Related Post Dengan Gambar akan menambah wawasan untuk anda pembaca setia taukahbahwa.blogspot.com





Pada artikel yang lalu Tutorial For You pernah share tentang Cara Membuat Related Post, dan pada kesempatan kali ini Tutorial For You mau share tentang Cara Membuat Related Post Dengan Gambar atau artikel terkait dengan image dan kita semua tahu bahwa related post ini merupakan bentuk optimasi sekaligus untuk mempercantik blog.

Berikut ini contoh dari Related Post Dengan Gambar/ artikel yang berhubungan dengan image

Cara Membuat Related Post Dengan Gambar




Bagi yang ingin tahu Cara Membuat Related Post Dengan Gambar ini, yuk kita ikuti langkah berikut ini :

Langkah Cara Membuat Related Post Dengan Gambar

Pergilah ke Dashboard blog kamu, lalu pilih Design, kemudian pilih tab Edit HTML.

Jangan lupa beri tanda contreng pada tulisan Expand Widget Templates.

Selanjutnya cari kode berikut:

</head>

Jika sudah ketemu, letakkan kode script berikut tepat di atas kode </head>


<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts {background:#e6e6e6;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;} #related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;} #related-posts a{background-color:#F4F4EC;border:1px solid #666;color:black;-webkit-box-shadow: inset 0 0 3px #222;-moz-box-shadow: inset 0 0 3px #222;box-shadow: inset 0 0 3px #222;-webkit-border-radius:10px;-moz-border-radius:10px;margin-top:0px;text-align:center;height:180px;} #related-posts a:hover{color:black;background-color:#d4eaf2;-moz-transform: scale(1.3) rotate(-30deg) ;-webkit-transform: scale(1.3) rotate(-30deg) ;-o-transform: scale(1.3) rotate(-30deg) ;-ms-transform: scale(1.2) rotate(-30deg) ;transform: scale(1.3) rotate(-30deg);} #related-posts img:hover {background-color:#d4eaf2;} #related-posts img {display:block;float:center;margin:5px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;border:5px solid #666;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;} </style> <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->


Setelah itu cari kode script

    <div class='post-footer-line post-footer-line-1'>

atau

    <p class='post-footer-line post-footer-line-1'>

Kalau sudah ketemu lalu letakan kode script dibawah ini sesudah kode tadi

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if>&lt;div style=&#39;font-size:10px;margin:8px 0px 3px 0px&#39;&gt;      by : &lt;a href=http://www.tutorial-4u.com/&gt;Tutorial For You&lt;/a&gt;&lt;br /&gt;       &lt;a href=&quot;http://www.tutorial-4u.com/2012/07/cara-membuat-related-post-dengan-gambar.html&quot; target=&quot;blank&quot;&gt;&lt;font color=&quot;blue&quot;&gt;[Get This Widget]&lt;font&gt;&lt;/font&gt;&lt;/font&gt;&lt;/a&gt;&lt;/div&gt; <!-- Related Posts with Thumbnails Code End-->

Setelah selesai, simpan template dan lihat hasilnya.


Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul Cara Membuat Related Post Dengan Gambar. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/cara-membuat-related-post-dengan-gambar.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar