Copas 5menit: Artikel Terkait Dengan Gambar Berjalan ( Related Post )

Begadang Lagi Begadang Lagi Huuft...Baiklah Langsung Saja Tutorial Blog Kali ini Untuk teman-teman yang sudah memakai thumbnail related post (artikel terkait bergambar) atau Tutorial Cara membuat widget Artikel Terkait Dengan Gambar Berjalan ( Related Post ) ini tentu akan lebih bagus kelihatannya dari pada related post / artikel terkait dengan mengunakan teks saja. Selain mempunya thumbnail atau gambar, related post / artikel terkait ini mampu atau bisa berjalan. Namun kekurangannya adalah yaitu memakan banyak tempat di halaman blog. Maka dari itu, kebanyakan blog yang ane kunjungi meminimalkan jumlah Artikel Blog tersebut, apalagi dengan ukuran halaman posting yang sempit. Maka dari itu untuk memaksimalkannya yaitu dengan alternatif marquee (berjalan). Teman-teman bisa lihat related post yang ane pakai sekarang ini.
Posting Blog Andalan Saya Cara Instal Ulang Windows Xp Lewat Usb :D

Untuk membuat Thumbnail Related Posts ini agar bisa ditampilkan dengan jumlah yang banyak yaitu dengan metode Marquee, silahkan ikuti beberapa cara dibawah ini :

    Pertama, masuk dulu ke halaman Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
    Cari kode ini <p><data:post.body/></p>
   Kemudian Letakkan kode Dibawah ini dibawahnya


<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
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, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</head>

Setelah sobat terapkan poin pertama diatas, sekarang silakan cari code ini :

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

Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas :

<b:if cond="data:blog.pageType == "item"">
</b:if>
<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=12"" type="text/javascript">
</b:if></b:loop>
<h3>

<b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</b:if></b:loop></div>
<div style="clear: both;">

<b:if cond="data:blog.url == data:blog.homepageUrl"><b:if cond="data:post.isFirstPost">
<a href="http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html" style="display: none;">Thumbnail Related Post</a>
<a href="http://www.bloggerplugins.org/" style="display: none;">blogger tutorials</a>
</b:if>
</b:if>
</div>

Untuk menampilkan jumlah postingan, sobat bisa merubah code yang berwarna merah.
Simpan dan lihat hasilnya.
Sebelumnya Anda Harus Memperhatikan Cara Membuat Posting Terbaru Dan Gambar
Juga Lihat Postingan Saya Tentang Cara Pasang Link Otomatis Di Blog

Dan Untuk Mendapatkan Backlink Gratis Lihat Juga Postingan Yang Satu Yaitu Gratis Link Dalam Posting Blog

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Tuesday, November 2, 2010

Artikel Terkait Dengan Gambar Berjalan ( Related Post )