3/1/11

<p>Kali ini kita belajar pulak buat Related Post bergambar yang boleh bergerak,Anda boleh melihat contoh Related Post <span class="Apple-style-span" style="color: blue;"><a href="http://myseksiblog.blogspot.com/">DISINI</a></span>? banyak dan kelebihannya pula dapat memaparkan seberapa banyak posting yang berkaitan dan ditambah pula dengan elemen bergerak dan sudah tentu ia akan menarik para pembaca anda.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Y0kuyyR21cNC6bTkSpMbBrSJLutW9m-njTrQVRD8Wp3oliPYSP45Qoar9shNFCuTbj3I5GKFfZikgeg162v4gU_URgm530HbYO30c_91t4gvyRS0SZjRk7xLexBAUQMs2KL8jhnS6Tm4/s1600/johanrakyatblogspot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Y0kuyyR21cNC6bTkSpMbBrSJLutW9m-njTrQVRD8Wp3oliPYSP45Qoar9shNFCuTbj3I5GKFfZikgeg162v4gU_URgm530HbYO30c_91t4gvyRS0SZjRk7xLexBAUQMs2KL8jhnS6Tm4/s640/johanrakyatblogspot.jpg" width="500" /></a></div>
 Dan sekarang kita akan cuba untuk membuat " Moving Related Thumnail Post " dan caranya mudah sahaja Seperti posting saya sebelum ini <a href="http://johanrakyat.blogspot.com/2011/01/related-posts-selain-linkwithin-cara.html">DISINI</a>:

Sila ikuti langkah dibawah ini.<br />
<br />
 * Klik Dashboard - Layout - Page Elements - edit HTML -Tandakan Expand Widget Templates<br />
<br />
 Seterusnya cari kod </head> setelah anda menjumpainya sila Copy dan Pastekan Kod dibawah ini diatas kod </head>

<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"></span><br />
<blockquote>
<br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<style type="text/css"><br />
#related-posts {<br />
float:center;<br />
text-transform:none;<br />
height:100%;<br />
min-height:100%;<br />
padding-top:5px;<br />
padding-left:5px;<br />
}<br />
#related-posts h2{<br />
font-size: 1.6em;<br />
font-weight: bold;<br />
color: black;<br />
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />
margin-bottom: 0.75em;<br />
margin-top: 0em;<br />
padding-top: 0em;<br />
}<br />
#related-posts a{<br />
color:black;<br />
}<br />
#related-posts a:hover{<br />
color:black;<br />
}<br />
#related-posts a:hover {<br />
background-color:#d4eaf2;<br />
}<br />
</style><br />
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/><br />
</b:if><br />
</blockquote>
<span class="fullpost">
</span></div>
<br />
Dan sekarang Cari Kod ini:

<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"></span><br />
<blockquote>
<span class="fullpost"><div class='post-footer-line post-footer-line-1'> </span></blockquote>
<span class="fullpost">
</span></div>
<br />
atau (jika kod diatas tidak dijumpai sila cari kod yang dibawah ini)
<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"></span><br />
<blockquote>
<span class="fullpost"><p class='post-footer-line post-footer-line-1'> </span></blockquote>
<span class="fullpost">
</span></div>
<br />
Dan setelah itu Copy dan Paste kod dibawah ini. (Dibawah <p class='post-footer-line post-footer-line-1'>)

<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"></span><br />
<blockquote>
<br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast != &quot;true&quot;'><br />
</b:if><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<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=12&quot;'
 type='text/javascript'/></b:if></b:loop><br />
<h3><b>Related Posts</b></h3><br />
<marquee
 align='center' behavior='alternate' direction='left' 
onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' 
width='100%'><br />
<script type='text/javascript'><br />
var currentposturl=&quot;<data:post.url/>&quot;;<br />
var maxresults=<span class="Apple-style-span" style="color: red;">10</span>;<br />
var relatedpoststitle=&quot;&quot;;<br />
removeRelatedDuplicates_thumbs();<br />
printRelatedLabels_thumbs();<br />
</script></marquee><br />
</div><div style='clear:both'/><br />
</b:if><br />
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br />
</b:if><br />
</b:if><br />
</blockquote>
<span class="fullpost">
</span></div>
*gantikan nombor berwarna merah kepada seberapa banyak yang anda inginkan.<br />
 contoh 20 untuk 20 related post.<br />
 dah kemudian save kan,simple ajer..</p>

Kali ini kita belajar pulak buat Related Post bergambar yang boleh bergerak,Anda boleh melihat contoh Related Post DISINI ? banyak dan keleb...

<p><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJNFm7d_Twh31bvEW6ECZK8u0PNoQZcby1wROcxBMPxX-00Ex9kOlSRdbMo8AE4orWH-pkEh1506_fDYC8kLzWmjYvgesG34sloLRUr4DNLIIw5sGmPcE-7WP49EGyJOQzPejyw8mF-bwY/s1600/joahnt.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJNFm7d_Twh31bvEW6ECZK8u0PNoQZcby1wROcxBMPxX-00Ex9kOlSRdbMo8AE4orWH-pkEh1506_fDYC8kLzWmjYvgesG34sloLRUr4DNLIIw5sGmPcE-7WP49EGyJOQzPejyw8mF-bwY/s320/joahnt.jpg" width="320" /></a></div>
<div style="text-align: center;">
<i>Contoh:: Klik Gambar Untuk <span style="color: red;">Demo</span></i></div>
<br />
<br />
Bagaimana memasang script ini?<br />
<br />
1. Pergi ke Dashboard Blogger, Teruskan ke tab Design, kemudian Edit HTML.<br />
2, Tambah kod ini sebelum kod :- <span style="color: red;"><body></span><br />
<span style="color: red;"> </span>

<br />
<div style="border: 1px inset rgb(108, 122, 125); color: blue; margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><br />
<style type="text/css"><br />
    /* jQuery lightBox plugin - Gallery style */<br />
    #gallery {<br />
        background-color: #444;<br />
        padding: 10px;<br />
        width: 520px;<br />
    }<br />
    #gallery ul { list-style: none; }<br />
    #gallery ul li { display: inline; }<br />
    #gallery ul img {<br />
        border: 5px solid #3e3e3e;<br />
        border-width: 5px 5px 20px;<br />
    }<br />
    #gallery ul a:hover img {<br />
        border: 5px solid #fff;<br />
        border-width: 5px 5px 20px;<br />
        color: #fff;<br />
    }<br />
    #gallery ul a:hover { color: #fff; }<br />
    </style><br />
<br />
<br />
<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/><br />
<link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/><br />
<br />
<span style="color: blue;"><script type="text/javascript"></span><br />
<span style="color: blue;">$(function() {</span><br />
<span style="color: blue;">$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();</span><br />
<span style="color: blue;">});</span><br />
<span style="color: blue;"></script></span></blockquote>
</span></div>
<br />
3.Klik save<br />
<br />
p/s:- Gambar hanya support,JPG,jpeg,png,gif ////Sila refer <a href="http://simplexdesign.blogspot.com/2011/01/jquery-lightbox-working-in-blogger.html" style="color: red;">disini</a><span style="color: red;"> </span>jka ada masalah<br />
Sumber:-simplexdesign</p>

Contoh:: Klik Gambar Untuk Demo Bagaimana memasang script ini? 1. Pergi ke Dashboard Blogger, Teruskan ke tab Design, kemudian Edit ...

Johan Rakyat

Related Post bergambar yang boleh bergerak

Cara Membuat Auto Lightbox untuk semua gambar