Selasa, 16 Juli 2013

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbULLdHdAPOx6NNuhyphenhyphenZhfRiCsEgu_dYC0zuD_DGyPGAYsMdKA3K7vqFSzCA_IBM9Yn2fTYnbfSR_ngO3NRgIPj-Lk9Q7cx7qOr5rQ9e44cQkORQrNRzYidmzwveG7gBZ-6RdyHg5yfQg/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.
Posted by dan ipul climber On 05.44 No comments

0 komentar:

Posting Komentar

Daftar Isi Per-Label

Free Music Online
Free Music Online

free music at divine-music.info
  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

Blog Archive

Free INDONESIA Cursors at www.totallyfreecursors.com

    Blogger news

    ANAK DUNIA

    Blogger templates

    Blogroll

    Flag Counter