Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss RESPONSIVE




Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss RESPONSIVE
Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss RESPONSIVE ? Hallo rekan blogger selamat sore, kembali lagi saya akan share cara membuat Featured Post Tanpa Slider ala New Johny Wuss di blog blogger.

Apakah anda sudah tau apa itu Feature post, jika anda belum tau maka simak penjelasan singkat di bawah ini. Featured Post adalah artikel atau postingan tertentu yang sengaja dipilih untuk di munculkan di hompage depan baik itu letaknya di atas tengah, kiri kanan dan bawah. Biasanya artikel yang dipilih adalah artikel paling penting dari blog anda.

Dan widget semacam ini mudah saja kita buat sendiri menggunakan widget HTML yang sudah ada di blogspot, namun pastinya kita  harus mengerti juga dasar-dasar dari kode HTML dan CSS untuk membuatnya. Untuk manfaat dari widget featured posts salah satunya adalah mempermudah pemilik blog untuk menampilkan artikel penting pada blognya tanpa harus mengerti html ataupun css.

Feature post yang saya bagikan ini adalah Feature post dari template New Johny Wuss. Sebelum saya share artikel cara Membuat Featured Post Tanpa Slider ini sudah saya praktekkan juga di template blog milik mizipediacom ini, tetapi sudah banyak saya edit kembali letak dan posisi tulisan, ukuran gambar, lebar dan lainya. 

Mungkin sebagian rekan blogger ada yang mengatakan, mengapa harus Tanpa Slider"? Nah tau kah anda menurut dari pendapat rekan-rekan blogger 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).

Bagaiamana anda tertarik untuk mencobanya, jika jawaban anda ia, maka bisa anda ikuti langkah-langkah di bawah ini dengan dengann
Jangan Lupa backup dulu template anda, agar jika terjadi sesuatu yang tidak di inginkan maka anda dengan mudah mengembalikan template anda seperti semula. karena jika anda yang masih pemula tentu pasti anda kebingungan juga cara penerapannya atau peletakan kode-kode di bawah ini ke dalam template milik anda.

Membuat Featured Post Tanpa Slide

1. Pertama pastikan anda sudah masuk di dasbhormilik anda sendiri.
2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode seperti ini ]]></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}
Anda bisa mengganti background warna hijau #000; dengan warna lain. Kode-kodenya ada di Kode WarnaHTML.
4. Selanjutnya anda cari kode </head> jika sudah ketemu anda Copy & Paste kode berikut ini 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>
Tulisan yang di-highligt dengan warna ungu bisa Anda ganti dengan URL Image versi Anda. Fungsinya adalah sebagai "default image" --akan muncul jika dalam postingan Anda tidak ada gambar.
5. Lalu anda cari kode <div class='main-wrapper'> cara cepat (CTRL+F) dan simpan kode berikut ini di bawahnya atau di atas kode <b:section class='main' id='main' showaddelement='no'> atau bisa anda letakan di mana anda suka menurut selera masing-masing pada blog anda
<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>
Kode yang dikasi warna hijau adalah untuk memunculkan posting terbaru di Featured Post tanpa Slider. Anda bisa mengubahnya jika memunculkan posting terbaru di label/kategori tertentu.
Contohnya, yang mau dimunculkan posting terbaru di label "Asus", maka tambahakan saja nama lebel postingan anda menjadi /feeds/posts/default/-/Asus/

6. Jika sudah selesai anda bisa klik save template dan lihat hasilnya.
Oya sampai lupa Pastikan di template blog Anda sudah ada kode jQuery, seperti di bawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

misalkan kode di JS tersebut belum belum ada di template anda, maka pasang kode tersebut di atas kode </head>

Update Terbaru
# CSS
1. Cara nya masuk seperti langkah pada no satu di atas untuk menyimpan kode di bawah ini. Anda cari kode seperti ini  ]]></b:skin> Dan simpan di atas kode tersebut
#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
2. Anda cari kode <div class='main-wrapper'> dan simpan di atas kode tersebut.
<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>
8. Selanjutnya anda cari kode </head> salin kode di bawah ini dan 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>
8. Terakhir baca bismillah dan berdoa semoga bisa berhasil , kemudian klik save.

Demikian penjelasan pada sore ini, selamat mencoba dan semoga berhasil. Salam Blogger

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect