Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss

Featured Post Thumbnail tanpa Slider
UPDATE: Kode Featured Post Tanpa Slider ala New Johny Wuss RESPONSIVE ada di Bagian Bawah.

POSTING cara membuat Featured Post Tanpa Slider ala New Johny Wuss di blog blogspot ini, CB buat sekaligus menjawab pertanyaan salah satu pengunjung blog ini.

Yang dimaksud Featured Post Tanpa Slider yaitu... ya... tampilan posting teratas di halaman depan blog ini.

Tutorial ini tentu saja sudah dipraktekkan di Template New Johny Wuss. Bahkan, sebelum CB share di sini, cara Membuat Featured Post Tanpa Slider ini sudah CB praktekkan juga di template blog SEO Responsive lainnya.

Kenapa "Tanpa Slider"? Karena CB ngikut pendapat bahwa Slider Tidak Baik buat SEO.

Fungsi utama Featured Post adalah menampilkan posting terbaru dan/atau posting yang kita anggap "Killer Blog Post" di halaman depan (homepage).

Cara Membuat Featured Post di Homepage Blogger

1. Ucapkan basmalah, baca doa dulu biar berhasil
2. Di Dashboard Blog, klik Template > Edit HTML
3. Cari (CTRL+F) kode ]]></b:skin>
4. Copy & Pasta kode berikut ini DI ATAS kode ]]></b:skin>

#featuredpost {background:#000;float:left;margin:10px 10px 20px 10px; padding:0 0 10px;width:97%; position:relative;color:#eee;}
#featuredpost .featured-thumb {float:left; margin:15px; padding:0px;}
#featuredpost .container {height:205px; margin:0 10px 0 0;overflow:hidden; position:relative;font-family: Arial;font-size: 13px;font-style: normal;font-variant: normal;font-weight: normal;line-height: 1.3em;}
.featuredTitle{padding-top:15px;font:17px Oswald;}
.featuredTitle a{color:#f5ff88}
.featuredTitle a:hover{color:#c00}

*** Catatan: Anda bisa mengganti background warna hitam (#000) dengan warna lain. Kode-kodenya ada di Kode Warna HTML

5. Cari kode </head> dan Copy & Paste kode berikut ini DI ATAS kode </head>

<script type='text/javascript'>//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 300;
summaryTitle = 25;
numposts  = 1;

function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    document.write('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
   for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }

  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }

     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
 
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="290" height="180" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></div>';
 document.write(trtd);

 j++;
}
    document.write('</div>')
}

//]]>
</script>

*** Catatan: tulisan yang di-highligt dengan warna merah bisa Anda ganti dengan URL Image versi Anda. Fungsinya sebagai "default image" --akan muncul jika dalam postingan Anda tidak ada gambar.

6. Cari (CTRL+F) kode <div class='main-wrapper'> dan simpan kode berikut ini DI BAWAHNYA atau DI ATAS <b:section class='main' id='main' showaddelement='no'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end .container-->
</div></b:if>
</b:if>

Catatan:  
Kode yang dikasi warna merah adalah untuk memunculkan posting terbaru di Featured Post tanpa Slider. Anda bisa mengubahnya jika memunculkan posting terbaru di label/kategori tertentu. 

Misalnya, yang mau dimunculkan posting terbaru di label "Blogging", maka ganti menjadi /feeds/posts/default/-/Blogging

7. Save Template!

CAUTION!
Pastikan di template blog Anda sudah ada kode jQuery, seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Jika belum ada, pasang kode tersebut di atas kode </head>


UPDATE !!!

Featured Post Tanpa Slider ala New Johny Wuss RESPONSIVE

CSS
Simpan di atas kode ]]></b:skin>

#featuredpost{background:#f5f5dc;float:left;margin:10px 5px 5px;padding:0 0 10px;width:97%;position:relative;color:#2b2b2b}
#featuredpost .featured-thumb{float:left;margin:15px;padding:0;width:290px;height:180px}
#featuredpost .featured-thumb img{width:100%;height:100%}
#featuredpost .container{height:205px;margin:0 10px 0 0;overflow:hidden;position:relative}
.featuredTitle{padding-top:15px;font:20px Oswald}
.featuredTitle a{color:#555}
.featuredTitle a:hover{color:#48d}
@media screen and (max-width:600px){
#featuredpost{background:#f5f5dc;float:left;margin:15px;padding:5px 0;width:93%;position:relative;color:#2b2b2b}
#featuredpost .container{height:auto;margin:15px;overflow:hidden;position:relative;width:93%;padding:0}
#featuredpost .featured-thumb{float:left;margin:0 0 10px;padding:0;width:100%}
}

HTML
Simpan di bawah kode <div class='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default/-/Featured?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
<!--end .container-->
</div></b:if>

JAVASCRIPT
Simpan di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 270;
summaryTitle = 25;
numposts  =1;
function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    document.write('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
   for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     postdate = entry.published.$t;
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src="",a); c = s.indexOf(""",b+5); d = s.substr(b+5,c-b-5);
 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="290" height="180" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></div>';
 document.write(trtd);
 j++;
}
    document.write('</div>')
}
//]]>
</script>

Demikian cara membuat Featured Post tanpa Slider ala New Johny Wuss. Semoga berhasil and... Happy Blogging! (http://www.contohblog.com).*

49 Komentar untuk "Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss"

makasih banyak gan :)

udah beberapa kali saya nanya2 tentang desain2 blog.cuma agan yang cepat responnya :)

sekali lagi makasih gan...
oia gan ada yg kurang gan ]]> :)

sama-sama.... good luck.....!

ini yang jadi koreksi dari rekan master bloger untuk blog saya,,saya pelajari dulu gan terimaksih infonya,,,,

Gan, feature post nya sudah muncul tapi backgroundnya sampe ke bawah yah? bagian posting blog nya jadi muncul background. Popular post saya kok gak muncul yah?
Mohon bantuannya yah

blog saya: http://blogherbalhwi.blogspot.com/

terima kasih

Terima kasih tipsnya. saya sudah berhasil membuat featured postnya tapi kenapa backgroundnya muncul sampai posting yah? trs popular post tidak muncul artikelnya.
Mohon sarannya yah. tq

blog saya: http://blogherbalhwi.blogspot.com

itu dobel featured postnya....! Kalo template New Johny Wuss gak usah dipasang lagi, sudah ada kaya blog CB ini.........

Tapi sebelumnya, klo gak dipasang malah gak muncul featured post nya
kayak di blog percobaan saya di http://infoherbalhwi.blogspot.com

mohon sarannya. tq

Silakan baca dan ikuti panduannya di sini >
http://newjohnywuss.blogspot.com/2014/03/new-johny-wuss-seo-fast-and-responsive.html

Thanks Infonya. yang double sudah saya hapus. sekarang sudah bisa. Tq for the fast respon

sama-sama, CB sudah "intip" blognya, oke, good and good luck....!

gan, kalau backgroundnya diganti Image. Bisa ga ya kira2?

bisa... cari kode "background" di kode-kode featured post......

permisi mas, numpang tanya, sebelumnya salam kenal, begini mas saya memakai template ini untuk blog saya. saya ada masalah dikit mas, ketika saya mau masang iklan di samping kanan artikel kok nggak bisa bisa ya mohon bagaimana cara membuatnya kususnya di template new jhony wuss ini. terima kasih. blog saya yulieono.blogspot.com

kode html iklannya di-pars dulu di sini:
www.blogcrowds.com/resources/parse_html.php

untuk kode html iklannya udah saya parse mas, yang saya bingungkan di mana letak nempati kodenya udah saya coba masukkan di atas atau di bawah p data:posts.body p tapi malah postingan saya kebawah semua.sedangkan iklannya di atas postingan. mohon bantuannya mas.

http://contohblognih.blogspot.com/2013/10/Iklan-Adsense-di-Awal-Posting-Blog.html

jadinya kok begini ya mas http://yulieono.blogspot.com/2014/05/cara-blog-di-cintai-pengunjung.html

kode iklannya pake yg 300 pixel, gambar posting tempatkan di alinea ketiga atau keempat.......

maksutnya gambar postingan saya di usahakan jangan di awal paragraf pertama ya mas, oke saya cobanya dulu mas. ( kalau perlu gambarnya saya hilangin dulu coba mas ) penasaran saya ...

mas kalo iklannya numpuk ke tulisan artikel gimana mas, ada solusi kah ?

atur margin, padding, dan floatnya....

aduh mas, gak jadi jadi. nyerah sementara saya mas.

sebetulnya template blog bisa nggak mas postingan sebelah kanan di pasang iklan 160 x 600 kayak di detik itu mas. thanks
ngebet banget nih mas saya pengen bisa hehehe.

alhamdulilah mas sudah ketemu. terima kasih banyak mas, berkah sholat jumat aamiin

alhamdulillah... hari jumat memang penuh berkah.... sukses mas....!

Aamiin, thanks mas, tapi ada lagi mas yang mau saya tanyakan di template Resent Post, Label Post trus, Rondom Post itu kan di template panjenengan ada broder tapi punya saya kok cuma tulisan aja, border nya ga muncul, seting nya di mana mas.

Simpan Widgetnya di "Add Widget" yang kedua di sidebar "Layout".
"Add Widget" yang pertama buat wdget berupa kode HTML/Javascrip aja.......

oh maksud saya yang itu lo mas misal; di tamplate mas sebelah kanan judulnya: Terpopuler Pekan Ini, nah judulnya itu kan di kotak i dengan warna biru tua kan, kalau di tempat saya ga bisa keluar mas, cuma tulisan biasa trus backgroundnya putih menyatu sama templatenya, cuntoh punya saya, saya tulis popular posts njenengan lihat kan gak ada kotaknya.

iya simpannya di area widget yang kedua.....

sekarang saya mau nyoba nempatin iklan GA nya di bawah postingan seperti punya mas, semoga panduannya ada di blog ini, langsur meluncur saya cari ...

malam gan cb.saya pengguna template Johny wuss
mau tanya jika di featured post saya mau ditampilkan 1 postingan full, (tampilannya sama seperti tampilan saat postingan di buka)

bisa ga? caranya gmn ya?
trims ya

aneh-aneh aja....... pake aja template bawaan blogger kalo gitu......
Coba ubah summaryPost = 300; jadi summaryPost = 0; atau summaryPost = [jumlah karakter posting];

alhamdulillah.. sukses mengembalikan default ke featured post.. makasih mas

blog saya : tektena.blogspot.com

Seting Site feed - Allow Blog Feed menjadi FULL, kalau SHORT, munculnya NO Image

terima kasih infonya masbro..
saya termasuk salah satu yg menggunakan template dari mastemplate.com
yg ingin saya tanyakan kenapa di postingan saya sekarang di "latest post" nya tidak mau muncul thumbnail nya ya?
padahal sbelum2nya bisa
mohon pencerahannya masbro
salam

Silakan simak:
http://contohblognih.blogspot.com/2014/03/Mengatasi-Gambar-Image-Thumbnail-yang-Tidak-Muncul-di-Blog.html

gan mastah cb numpang tanya dan mohon bantuannya mastah...saya memakai template FreshLife V3 Responsive Blogger Template nah templater tersebut ada featured articles diatas postingan blog kalau dilihat dari demo nya featured articles nya berfungsi kenapa saya kagak bisa berfungsi ya..udah coba dengan cara yang disarankan oleh pemilik namun tidak secara mendetail maklum yang desain orang luar. mungkin mastah bisa bantu saya..btw templatenya bagus mastah...mohon bantuan cek 5caraku.blogspot dot com

di gadget "Featured Articles" tinggal masukkan nama Label yang akan dimunculkan di sana, misalnya Tips, di bagian "Content"

sebelumnya terima kasih sudah mau ditanggapi masalah saya mastah namun sesuai yang mastah intruksikan tetap tidak muncul featured articles nya..maklum saya newbie gan mastah baru 3 bulanan

Bang CB, Ini udah sy praktekin tapi kok gak keluar ya gambarnya, cuman hitam doang,... mohon pencerahannya,..

Thanks gan atas artikelnya, sangat bermanfaat :D
Oiya, ane mau tanya dong gan, kok featured post di blog ane ga muncul gambarnya? ane pake template NJW V3

ikuti panduan di blog demo

Mas, setelah diterapkan, ini kok H2-post (judul artikel) malah jatuh ke bawah ya? Jauh banget, dari sini ke wonogiri :D

mendingan, daripada aceh - papua, kan lebih jauh :)
itu kode yang dipasang di NJW Series... works semua

Tapi gak work di CB style.
Kayanya bahannya beda mas, bukan NJW.
Kayanya sih :D

Gan numpang nanya, bagaimana cara membuat featured post seperti di blo CB ini.? ukurannya kecil, terus disampingnya ada tiga postingan yang tampil. Terus di bawahnya ada tampilan postingan berjejer lagi. Gimana caranya membuat tampilan seperti tersebut gan? Saya juga make template New Johny Wuss.

Mas CB Blogger, kalo Featured Post kayak template "CB Magazine" atau template "Seo Beast"
Gimana cara buatnya? Berkenankah berbagi ilmu nya featured post seperti itu. Thanks.

ketik Featured Post di blog ini atau Featured Post Widget Blogger di Google

ketik Featured Post di blog ini atau Featured Post Widget Blogger di Google

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *