Beranda > Tips Wordpress > Auto ReadMore Dengan Thumbnail Pada WordPress

Auto ReadMore Dengan Thumbnail Pada WordPress

Akhirnya setelah mencoba berkali-kali script maupun code php untuk membuat auto readmore di blog wordpress, yang awalnya code dari mas deny. Kini saya telah mendapat dan mencoba code php untuk membuat tampilan Auto Readmore versi terbaru dengan gambar Thumbnail .

Kemarin saya udah posting Auto Readmore di Blogspot Banyak yang menanyakan bagimana cara membuat auto readmore dengan thumbnail, tetapi baru kemarin saya mendapat caranya.

Masuk ke dashboard wordpress

Klik Appearence lalu silahkan masuk ke menu editor.

Setelah itu Anda masuk ke functions.php tambakan code berikut :

<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, ‘<img’);
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, ‘<img’, $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, ‘>’);
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;

$cleanF = strpos($image[$num],’src=”‘)+5;
$cleanB = strpos($image[$num],'”‘,$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
if(stristr($image[$num],'<img’)) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

Script ini berguna untuk memanggil url gambar yang terdapat di dalam postingan. lalau tekan Update File untuk menyimpan code tersebut..

Masuk ke index.php, dan cari kode The _content kemudian paste kode ini di atasnya..

<div>

<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”>

<img src=”<?php getImage(‘1’); ?>” height=”150″ width=”150″>

</a>

</div>

Lalu Update File untuk menyimpan.. Selanjutnya gimana lagi ??.. tenang  tinggal satu langkah lagi yaitu Anda masuk ke intinya, agar tampilan Auto Readmore dengan Thumbnail terlihat menarik tentunya Anda harus mengedit Style.CSS . Tambahkan code dibawah ini di style.css

.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px;
margin:5px 5px 0 0;}

.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

Tekan Update File.. dan silahkan lihat hasilnya..

selamat mencoba

Thanks to : Jurug

  1. Juni 8, 2010 pukul 1:11 am

    wah langsung error mas, oh ya untuk ngatasin biar kalau ada yang error bisa tetep edit gimana mas?

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: