Monday, August 8, 2011

Menampilkan Related Post Tanpa Plugin

Salah satu cara untuk meningkatkan page view yaitu dengan menambahkan link terkait dengan isi sebuah postingan yang bisa dilakukan secara manual atau secara otomatis baik menggunakan plugin atau tanpa plugin. Cara ini biasa disebut dengan istilah Menampilkan Related Post atau posting terkait berdasarkan kesamaan tema atau topik bahasan. Untuk WordPress dikelompokan berdasarkan Category atau Tag yang sama. Dengan cara ini akan lebih memberikan kesempatan bagi pengunjung untuk lebih mengeksplorasi dan menemukan lebih banyak informasi.

Link internally ke postingan dalam blog juga akan membantu meningkatkan ranking blog anda dan akan membantu meningkatkan traffic, sebab jika orang yang datang ke blog anda sudah tidak ada pilihan lagi untuk dilihat maka mereka akan pergi. Ketika anda menawarkan sebuah link ke postingan anda yang lain ada kemungkinan mereka akan klik link anda dan pengunjung akan tetap di blog anda lebih lama.

Untuk WordPress, khususnya yang self hosting cara menampilkan related post bisa memanfaatkan plugin yang cukup banyak jumlahnya. Di antara plugin yang pernah saya gunakan yaitu, Related Posts by Category atau Yet Another Related Posts Plugin. Namun kurang lebih 3 bulan ini saya sudah tidak menggunakan plugin tersebut. Sebagai gantinya saya menggunakan kode di bawah ini untuk menampilkan related post (tanpa plugin), yang saya tempatkan di file single.php.

<strong>Artikel Yang Mungkin Berkaitan :</strong>
<?php $this_post = $post;$category = get_the_category(); $category = $category[0]; $category = $category->cat_ID;$posts = get_posts('numberposts=11&offset=0&orderby=rand&order=DESC&category='.$category);$count = 0;foreach ( $posts as $post ) {if ( $post->ID == $this_post->ID || $count == 10) {unset($posts[$count]);}else{$count ++;}}?>
<?php if ( $posts ) : ?><div><blockquote>
<ol>
<?php foreach ( $posts as $post ) : ?>
<li><a href="<?php the_permalink() ?>" target="_blank"><?php if ( get_the_title() ){ the_title(); } else { echo "Tidak ada artikel terkait"; } ?></a></li>
<?php endforeach // $posts as $post ?>
</ol></blockquote></div>
<?php endif // $posts ?>
<?php $post = $this_post;unset($this_post);?> 
Kode di atas akan menampilkan artikel-artikel yang berhubungan berdasarkan kategori. Jumlah artikel yang ingin ditampilkan bisa ditentutan sesuai selera penggunanya. Contoh, settingan kode di atas akan menampilkan 10 artikel atau postingan berdasarkan kategori yang sama.

Untuk mempercantik tampilan seperti settingan padding, margin dan border kebetulan saya memanfaatkankan <blockquote> yang sudah saya modifikasi dan list style menggunakan nomor <ol>. Jika tidak suka silahkan hapus kode <blockquote> dan </blockquote>, atau bisa memodifikasinya dengan div style atau div class dengan mengedit file CSS untuk mengatur tampilan seperti padding, margin, font, border bahkan hover juga bisa anda customisasi sesuai selera.

Jika menginginkan berdasarkan Tag bisa menggunakan kode berikut ini : 
<h4>Related Post : </h4>
<ul>
<?php
//menampilkan 5 judul postingan terkait berdasarkan tag yang digunakan
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>5,
'caller_get_posts'=>1 );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; }} ?>
</ul> 

Update WordPress 3.2.1

WordPress baru saja merilis versi 3.2 pada tanggal 4 Juli yang lalu. Dan belum genap 2 minggu kini sudah keluar lagi WordPress 3.2.1. Wah bikin repot aja nih wordpress, lama-lama jadi bikin sewot nih. Semenjak versi 3 perasaan sering banget update sampai gak kehitung jumlahnya dan berani taruhan setelah ini juga pasti akan ada update lagi. Dan benar seperti komentar Bang Hendro Prayitno di postingan sebelumnya Update WordPress 3.2 :

“Ah wordpress bikin cape..karena sistemnya update bukan versi .. kl drupal itu versi .. wp benar2 bikin cape .. gua tungguin aja .. males ngapdate, paling bulan depan ada lagi tuh tingkahnya .. bagus sih phpnya di update .. tapi dah males aja mendingan nungguin lagi aja deh, ntar juga muncul lagi ..“

Ya begitulah wordpress heeee … karena dia open source barangkali dan makin populer jadi banyak yang develop habis itu jika ditemukan ada bug atau kekurangan dan ketemu solusinya biasanya update lagi Update lagi, mungkin begini ini yang sering bikin repot penggunanya. Inilah kelebihan wordpress sekaligus kekurangannya, dengan adanya update ini berarti ada temuan/masalah/bug yang perlu diperbaiki supaya kinerjanya semakin powerfull dan aman walaupun sebenarnya ternyata masih banyak juga bug yang ada di dalamnya. Untuk bug yang ditemukan memang nampaknya selalu ada saja di setiap versi, entahlah apakah ini sengaja dibiarkan supaya pemakai dituntut kreatif karena open source atau memang terlewat (tapi kayaknya gak mungkin mereka gak tahu hal ini).

Kekurangannya yaaa jadi bikin capek penggunanya untuk melakukan update apalagi jika wordpress yang digunakan sudah dicustom seperti punya saya ini termasuk beberapa blog punya temen saya yakin juga sudah dicustom, walhasil kalau mau update harus dicustom dulu secara manual satu persatu sebelum diupload ke server. Tapi untungnya untuk Update WordPress 3.2.1 ini sifatnya hanya tambalan (update minor) atau perbaikan pada beberapa fitur seperti ; perbaikan masalah ketidak cocokan beberapa server terkait dengan fungsi JSON, perbaikan desain dashboard dan theme Twenty Eleven (default Theme WordPress 3.2).

Karena kebetulan daftar file yang masuk dalam revisi tidak ada file yang perlu saya custom, maka update yang saya lakukan hanyalah mereplace/menimpa file-file yang masuk dalam daftar revisi dengan file-file yang baru, kecuali file yang ada di folder wp-content/themes/twentyeleven, karena saya tidak menggunakannya.

Berikut ini daftar nama-nama file yang direvisi :
wp-includes/post-template.php
wp-includes/compat.php
wp-includes/version.php
wp-includes/script-loader.php
wp-includes/class-json.php
wp-includes/nav-menu.php
wp-content/themes/twentyeleven/content-aside.php
wp-content/themes/twentyeleven/style.css
wp-content/themes/twentyeleven/content-link.php
wp-content/themes/twentyeleven/content.php
wp-content/themes/twentyeleven/content-image.php
wp-content/themes/twentyeleven/content-status.php
wp-content/themes/twentyeleven/content-quote.php
wp-content/themes/twentyeleven/screenshot.png
wp-content/themes/twentyeleven/inc/theme-options.php
wp-content/themes/twentyeleven/editor-style.css
readme.html
wp-admin/includes/update-core.php
wp-admin/includes/nav-menu.php
wp-admin/js/wp-fullscreen.js
wp-admin/js/wp-fullscreen.dev.js
wp-admin/css/press-this.css
wp-admin/css/dashboard.dev.css
wp-admin/css/install.css
wp-admin/css/global-rtl.dev.css
wp-admin/css/wp-admin.css
wp-admin/css/media.dev.css
wp-admin/css/global.dev.css
wp-admin/css/login.dev.css
wp-admin/css/dashboard.css
wp-admin/css/wp-admin-rtl.dev.css
wp-admin/css/global-rtl.css
wp-admin/css/press-this.dev.css
wp-admin/css/media.css
wp-admin/css/install.dev.css
wp-admin/css/wp-admin.dev.css
wp-admin/css/global.css
wp-admin/css/login.css
wp-admin/css/wp-admin-rtl.css 

Membuat Mini Post atau Mini Artikel diBlogger

Sudah lama juga ya gak nulis tutorial, abis bingung mo nulis apalagi karena hampir semua tutorial blogger sudah saya bahas semua di blog ini. Nah tadi barusan ingat kalo beberapa waktu lalu banyak yang nanyain saya gimana cara menampilkan posting berbeda untuk setiap label tertentu? mungkin rekan yang sering berkunjung ke zoomtemplate.com sudah mengerti maksud saya ya, kalo belum silahkan lihat contohnya dengan mengklik link Older Posts sampai ketemu perbedaannya. Atau bisa lihat contohnya di http://tweets.o-om.com


Mini Post atau Mini Artikel ini sebenarnya cara lain menampilkan berita singkat dimana style post yang ditampilkan akan berbeda dengan posting sebenarnya. Minipost ini akan tampil sesuai dengan label atau kategori khusus..jadi untuk menampilkan setiap Mini post kita hanya cukup menentukan labelnya saja. Sebenarnya cara membuat mini post ini saya temukan dari salah satu blogger quiterandom.com silahkan dipelajari disana bila ingin lebih jelasnya :)


1. Masukan kode dibawah ini dalam deretan kode CSS


.minipost.home {background: #fff; font: normal 12px 'Arial', sans-serif; padding: 5px;border:1px solid #c0c0c0}
.minipost.home .date {color: #000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.home .body {padding: 5px 0;}
.minipost.home .meta a {color: #990000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.item {background: transparent;}
.minipost.item .date {margin:1.5em 0 .75em; font:normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:#999999;}
.minipost.item .title {margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:#cc6600;}




2. Kemudian cari kode <b:loop values='data:posts' var='post'> lanjutkan lagi dengan memasukan kode warna pink yang pertama. Kalo sudah masukan lagi kode warna pink yang kedua dibawah kode <b:include data='post' name='post'/>



<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != &quot;minipost&quot;'>


<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>


<b:else/>
<b:include data='post' name='minipost'/>
</b:if>
</b:if>
</b:loop>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>




3. Langkah ke tiga cari kode berikut <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> Kemudian sisipkan semua kode dibawah ini dibawah kode diatas



<b:includable id='minipost' var='top'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='minipost home'>
<div class='date'><data:post.dateHeader/></div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<div class='meta'>
<a expr:href='data:post.url'>Read More</a> |
<a expr:href='data:post.url + &quot;#comments&quot;'><data:post.numComments/> comments</a>
<b:include data='post' name='postQuickEdit'/>
</div>
</div>

<b:else/>

<div class='minipost item'>
<div class='date'><data:post.dateHeader/></div>
<div class='title'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<b:include data='post' name='postQuickEdit'/>
</div>
</b:if>

</b:includable>



4. Buat satu postingan dengan label "minipost", silahkan dicoba aja dulu :)
 
 
 

Cara pasang Auto Read More terbaru (Part 2)

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

 
 
Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)


<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>


OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.


Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.


Langsung copy paste aja kode dibawah ini:


<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah


<data:post.body/>



Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini



<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


silahkan disimpan dan lihat hasilnya :)


Keterangan:

*var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
*summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
*summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
*img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
*img_thumb_width = 120; (Thumbnail 'lebar dalam piksel) 
 
 

Membuat RSS Feed Untuk Website Yang Tidak Mendukung Feed

Website standar atau jadul biasanya tanpa dukungan Rss Feed, ini berbeda jika kita menggunakan platform blog seperti Blogger, Wodpress dan platform lainya yang memang sudah terlebih dahulu tertanam sindikasi Rss Feed. Keutamaan Rss Feed tidak lain adalah sebagai cara termudah agar pembaca (subscriber) feed via online dapat mengetahui update terbaru pada suatu situs, selain itu tentu saja peran Rss Feed sangatlah besar bagi spider search engine agar dapat mengindex semua halaman Website.

Tutorial kali ini saya akan menunjukan bagaimana mudahnya membuat Rss Feed dengan cepat tanpa harus menggunakan software tertentu atau tanpa harus menulis baris kode XML yang bikin kita pusing.

Tutorial Membuat Feed dengan Goolge Reader:

Langkah I:

1. Silahkan kunjungi Google Reader, login seperti biasa.

2. Tuju ke Notes
 
 
3. Arahkan mouse ke button Note In Reader, lalu drag and drop button tersebut dengan cara menahan klik dan arahan ke tab bookmark website rekan (dalam contoh saya menggunakan browser Flock)
 
 
Link Google reader yang sudah tersimpan dalam Bookmark
 
 
 
4. Sekarang buka website rekan yang ingin ditambahkan RSS Feed, Contoh disini saya menggunakan Premium template.

5. Blok sebagian tulisan yang menurut rekan penting, mulai dari title dan deskripsi singkat. Lalu klik Note in Reader yang ada dalam Bookmark
 
 
 
6. Akan muncul Dialog Box Google Reader disebelah kanan.

7. Disini silahkan hilangkan tanda Check untuk Add to shared items, Masukan nama Tag utama kedalam Add Tags (contoh: Zoom Premium), dan pastikan rekan menggunakan tag yang sama untuk setiap halaman yang akan rekan buat Feednya.
 
 
9. Klik tombol Post Items


Langkah II:

1. Tuju ke menu Settings, lalu klik Reader Settings
 
 

2. Pilih Tab Folder and Tags

3. Akan tampil nama tag yang sudah rekan buat, jangan lupa set feed berwarna abu-abu (private) ke Public

4. jangan lupa catat / copy alamat linknya.



Langkah III:

Langkah membuat feed sudah hampir selesai, sekarang kita membakar link Feed yang sudah rekan copy tadi dengan Feedburner. Maaf saya tidak menjelaskan panjang lebar tentang pendaftaran Feedburner, disini saya anggap rekan sudah mengerti caranya :)


Langkah Terakhir:

Agar website langsung support Rss Feed, rekan hanya perlu menambambahkan kode di bawah ini kedalam website. Letakan diantara Tag <Head> </Head>


<link rel="alternate" type="application/rss+xml" title="Title website" href="http://feeds2.feedburner.com/feedburnerID" />

Note: Jika rekan ingin menambahkan Feed untuk halaman yang baru, rekan dapat dengan mudah mendistribusikannya melalui RSS feed dengan hanya mengulangi Langkah I
 
 
 

Cara Pasang Total Posts dan Total Comments

Sebenarnya cara pasang Total Posting dan Total komentar untuk Blogger ini sudah banyak juga yang mengetahuinya, berhubung banyak rekan yang selalu menanyakannya, ya sudah sekalian aja ya tulis caranya, yah itung2 melengkapi tutorial yang ada :)

Total Posts : 536
Total Comments : 39699


Untuk cara memasangnya sangat mudah, rekan tinggal copy-paste aja langsung script code dibawah dan jangan lupa merubah alamat blog yang ditandai dengan warna merah.

Script untuk Total Posts


<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http:/
/namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

Script untuk Total Comments


<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
 
 
 

Thumbnail Related Posts with Marquee (Berjalan)

Bagi anda yang sudah menggunakan atau ingin menggunakan Thumbnail Related Posts (artikel terkait bergambar), tentu akan lebih tertarik menggunakannya, karen tampilannya cukup menarik dengan adanya gambar, namun ada sedikit kekurangan dari tool yang satu ini, yaitu memakan banyak tempat di halaman blog. Maka dari itu, kebanyakan blog yang saya kunjungi meminimalkan jumlah related post tersebut, apalagi dengan ukuran halaman posting yang sempit. Maka dari itu untuk memaksimalkannya yaitu dengan alternatif marquee(berjalan).


Nah, untuk contoh Thumbnail Related Posting menggunakan metode Marquee ini bisa sobat lihat disini.
 
 
 
Pada postingan sebelumnya sudah dipaparkan cara membuat Related Posts + Thumbnail, sobat bisa menerapkan terlebih dahulu tutorial Thumbnail Related Postsnya disini, namun cukup terapkan Code CSSnya saja (Script code yg pertama)

Untuk membuat Thumbnail Related Posts ini agar bisa ditampilkan dengan jumlah yang banyak yaitu dengan metode Marquee, ada sedikit perubahan yang akan dilakukan pada script code yang kedua.


Nah, untuk memulainya :
 
1. Silakan lihat cara membuat Thumbnail related posts disini (Cukup terapkan code CSSnya saja/ code yang pertama)

2. 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'>


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


<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
<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=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<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>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->



- Untuk menampilkan jumlah postingan, sobat bisa merubah code yang berwarna merah
- Untuk mengganti title, sobat bisa merubah code yang berwarna biru


4. Simpan dan lihat hasilnya

Selamat berkreasi, Semoga bermanfaat
Thanx buat O-Om yang sudah menampilkan artikel ini, sukses buat semuanya
 
Penulis: G E O R G E O U Z | serba-seru.blogspot.com