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, ‘>’);<br /> $postOutput = substr($post, 0, $imgEnd+1);<br /> $image[$i] = $postOutput;<br /> $start=$imgEnd+1;<br /> <br /> $cleanF = strpos($image[$num],’src=”‘)+5;<br /> $cleanB = strpos($image[$num],’”‘,$cleanF)-$cleanF;<br /> $imgThumb = substr($image[$num],$cleanF,$cleanB);<br /> <br /> }<br /> if(stristr($image[$num],’<img’)) { echo $imgThumb; } $more = 0; } //retreive image ends ?>

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;<br /> margin:5px 5px 0 0;}<br /> <br /> .thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

ekan Update File.. dan silahkan lihat hasilnya..

selamat mencoba

Posted in: Tutorial