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, Bung Edi.
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 {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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<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/AVvXsEjUntwJDNlopTTPPoNxtwidJNZz74WwSOC9VQmatY55Jw4Zj7m9-SNYXhcJw63sZu15HUiYk5Au-J_KQpQDlfqFVOdU5-PkSYgHjIosjTcf9rptMTl19a4BXFIH5SRneknJvBhKbP9mAVs/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>
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 != "item"'>
<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>
Misalnya, yang mau dimunculkan posting terbaru di label "Blogging", maka ganti menjadi /feeds/posts/default/-/Blogging
7. Save Template!
Demikian cara membuat Featured Post tanpa Slider ala New Johny Wuss. Semoga berhasil and... Happy Blogging!
.png "New Johny Wuss V2 - Template Blog SEO Fast Responsif")
