Cara Membuat Featured Post Otomatis Fast Loading (Tanpa Slider)
02.13 / Unknown / Blog Cantik,
Mas Gugu -- Apakah manfaat memasang Featured Post Otomatis Fast Loading ini? Seperti kebanyakan kasus yang dialami para blogger, memasang Slider bergerak selain membuat blog menjadi berat ternyata sangat berpengaruh terhadap SEO. Jika anda memasang Slider Google akan membutuhkan waktu lama untuk melacak blog anda, jika waktu pelacakannya tidak sempurna maka artikel/ postingan pada blog anda tidak akan terdeteksi di pencarian Google.
Jika pada postingan template blogger sebelumnya menggunakan slider bergerak yang elegan pada Template Wasiwa namun terasa berat. Nahh...untuk mengatasi hal itulah, Featured Post Otomatis Fast Loading ini harus anda pasang untuk menggantikan slider agar blog anda tetap cantik. Silahkan ikuti caranya di bawah ini:
Langkah 1: Pasang Kode CSS
Langkah pertama yang harus dilakukan adalah memasang CSS pada template blogspot anda. Silahkan anda pergi ke Blogger => Template => Edit HTML. Klik disembarang tempat pada kode HTML tersebut, kemudian tekan "Ctrl + F" pada keyboard komputer/ laptop anda, lalu copy kode ini ]></b:skin> dan pastekan pada pencarian (Lihat Gambar di atas). Setelah ketemu, copy semua kode CSS di bawah ini kemudian pastekan kode
tersebut di atas kode ]></b:skin>
/*Slider Dimulai */
#featuredSlider {background:#156515;float:left;margin:0px 0px 0px 10px; padding:0 0 0px;width:99%;position:relative;color:#fff;}
#featuredSlider .featured-thumb {float:left; margin:7px; padding:0px;width:300px;height:200px;}
#featuredSlider .container {height:179px; margin:0 3px 0 0;overflow:hidden; position:relative;font-family: Arial;font-size: 13px;line-height: 1.3em;}
.featuredTitle{padding-top:15px;font:18px Oswald;font-weight:500}
.featuredTitle a{color:#F9FF06}
.featuredTitle a:hover{color:#00FDFF}
@media screen and (max-width:600px) {
#featuredSlider{width:92%}
#featuredSlider .featured-thumb {width:100%;height:auto;margin: 0px 0px 10px;}
#featuredSlider .container {height:auto;margin:15px;}}
Langkah 2: Pasang Kode Script
Setelah memasang CSS, silahkan anda pasang kode script berikut ini. Sebelum memasang silahkan anda tekan lagi "Ctrl + F" lalu copy kode ini </head> dan pastekan pada pencarian (Lihat Gambar di atas). Setelah ketemu, copy semua kode script di bawah ini lalu pastekan di atas kode </head>
<!-- script featured post start -->
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5PD32Gn7u_f-J7Zd5DCppC21SZ9Wpewb3D9KV7TEkkY57rIM57FKcM-_J4ZPKuVjRLUEn7lk0mnnEA2tPIHtV_brn5I8sgopBc0QPJbmMHMdxcfZpQFKLfJTz7CzWm4Zj14agr2P1mAA/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 160;
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="100%" height="165px" 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>
<!-- end script featured post -->
Langkah 3: Penempatan Slider
Langkah berikutnya adalah meletakkan slider. Silahkan anda tekan lagi "Ctrl + F" kemudia copy kode ini <div class='main-wrapper'> lalu pastekan pada pencarian (Lihat Gambar di atas). Setelah ketemu, copy semua kode di bawah ini lalu pastekan di bawah kode <div class='main-wrapper'> Kemudian Save/ Simpan. dan lihat hasilnya.
<!-- featured post start -->
<b:if cond='data:blog.isMobileRequest == "false"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+3+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
</div>
</b:if>
</b:if>
<!-- end featured post -->
Jika ada yang ingin ditanyakan seputar artikel ini Cara Membuat Featured Post Otomatis Fast Loading (Tanpa Slider), silahkan komentar saja melalui kotak koment yang berada di bawah. Semoga bermanfaat bagi pembaca. Terimakasih...
http://masgugu.blogspot.co.id/2015/12/cara-membuat-featured-post-otomatis.html
0 Response to "Cara Membuat Featured Post Otomatis di Blog"
Post a Comment