May 15, 2014

Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss

May 15, 2014

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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

50 comments on Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss

  1. 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 ]]> :)

    ReplyDelete
    Replies
    1. sama-sama.... good luck.....!

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

    ReplyDelete
  3. 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

    ReplyDelete
  4. 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

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

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

      mohon sarannya. tq

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

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

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

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

    ReplyDelete
    Replies
    1. bisa... cari kode "background" di kode-kode featured post......

      Delete
  6. 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

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

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

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

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

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

      Delete
  8. 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 ...

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

    ReplyDelete
    Replies
    1. atur margin, padding, dan floatnya....

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

      Delete
    3. 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.

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

    ReplyDelete
    Replies
    1. alhamdulillah... hari jumat memang penuh berkah.... sukses mas....!

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

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

      Delete
    4. 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.

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

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

      Delete
  11. 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

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

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

    blog saya : tektena.blogspot.com

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

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

    ReplyDelete
  15. 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

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

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

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

    ReplyDelete
  17. 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

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

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

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

      Delete
  19. 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.

    ReplyDelete
    Replies
    1. ketik Featured Post di blog ini atau Featured Post Widget Blogger di Google

      Delete
  20. 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.

    ReplyDelete
    Replies
    1. ketik Featured Post di blog ini atau Featured Post Widget Blogger di Google

      Delete
  21. kala gak ada b skinnya gmn gan.?

    ReplyDelete
  22. Kenapa tidak muncul gambar dan tulisannya? tapi spacenya udh ada. Mohon gimana cara menampilkannya Gan, makadsih sbelumnya.

    ReplyDelete

Contact Form

Name

Email *

Message *