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 The Simple Theme, yaitu modifikasi Template Johny Ribet yang masih sedang CB modifikasi.
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).
Tahapan Membuat Featured Post Tanpa Slider ala New Johny Wuss
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 .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 src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BdGbO7fds8wAtn-hb9ixJ0Pes4-8e_uiC0YkThMIS1yH-r20uDEiQajCrzZgN-NGPOsM4XLQMsEDof3Vo8z9xLxzd78ZyPZ9xl9kEBnjt-yABhWINsnq9i2Ipw0b93M8wiSQ6N2pc-E/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">')
Baca Juga
- Cara Membuat Recent Posts, Recent Comments, Most Commented, dan Random Posts
- Cara Memasang Blogger Chat Widget untuk Toko Online
- Algoritma Terbaru Google 2015: MobileGeddon
- Mempercantik Tampilan Numbered List Posting Blog
- Cara Mengubah Warna Judul Blog
- Cara Memunculkan Jumlah Komentar Lebih dari 200 di Posting Blog
- Mengatasi Reply Comment (Balas Komentar) Tidak Berfungsi di Blogger
- Cara Termudah Membuat Tabber Tab di Sidebar Blogger
- Cara Setting SEO Dashboard Blogger ala Contoh Blog
- Cara Membuat Contact Form di Halaman Statis Blog
- Cara Membuat Daftar Isi Blog Berdasarkan Label Pilihan Sendiri
- Inilah Modifikasi Terbaru Template Blog Johny Wuss Responsive!
- New Johny Wuss V3 - Template Blog SEO Fast Responsive Terbaru 2015
- Template Blog New Johny Wuss V2 versi Modifikasi
- Contoh Blog Keren dan SEO Ini Pake Template New Johny Wuss V2
- New Johny Wuss V2 - Template Blog SEO Fast Responsif
- Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss
- Rahasia SEO Template Johny Wuss: Judul Posting Tag H1
- New Johny Wuss - SEO Fast Responsive Blogger Template
- Dapatkan Uang dari Video yang Anda Upload di Akun Youtube Anda
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.url == data:blog.homepageUrl'>
<div id='featuredpost'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</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.