Cara Buat "Related Post" v5

Related Post v5 Lebih Menarik Dan Unik Dengan Efek Berputar Dan Border Corner Membuatkan Related Post Ini Lebih Menarik Perhatian Pelawat Blog Anda.


1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Cari Kode </head>
4.Copy Kode Dibawah Dan Pastekan Diatas 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/AVvXsEg7eHOXhqJNS4vngOdEUUF3oRW4pOAUzVv3IyTyi9nn6h8oTuKF4SxYSMuVT7vXrJmpcLnSw_0dyUHQeLoQ5EwpLsOI9I1AUcqUKN6LylLmAch5LbRhNKDSey5GQu40Y-1BfSuKR9WOtKc/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-->

5.Cari Kode <div class='post-footer-line post-footer-line-1'> Atau Kode  <p class='post-footer-line post-footer-line-1'>
6.Copy Kode Dibawah Dan Pastekan Selepas Kode Diatas

                                                                                                                                                                     <!-- 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;&quot; target=&quot;blank&quot;&gt;&lt;font color=&quot;blue&quot;&gt;[]&lt;font&gt;&lt;/font&gt;&lt;/font&gt;&lt;/a&gt;&lt;/div&gt; <!-- Related Posts with Thumbnails Code End-->

Siap!!! Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.