Baca Juga :
Namun, Featured Post kali ini : Postingan nya berganti-ganti. Penasaran ya? Jangan kemana-mana dulu. Featured Post kali ini Berganti-ganti Postingan dengan Tombol Readmore di bab bawah kanan. Jika anda melihat gambar diatas yaitu hanya sebagai pemanis dan suplemen saja gambarnya hehe. Sumber Source Kode Medienfreunde. Oke pribadi saja kita praktekan.
Cara Membuat Featured Post Thumnail Berganti Postingan
Cara Pertama :
1. Buka Blogger - Kemudian Login dengan Akun Anda.
2. Dashboard - Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan isyarat ]]></b:skin> atau </style>
2. Copy & Paste isyarat berikut ini, dan Letakkan diatas isyarat ]]></b:skin> atau </style>
#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3} #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;} #featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;} .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;} .featuredTitle a{color:#f7441a} .featuredTitle a:hover{color:#000} .navigation {position:relative;bottom:23px;float:right;overflow:hidden;} ul.pagination {list-style-type:none; margin:0 auto; padding:0;} ul.pagination a { float:left; margin:0 5px; display:inline; } ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil8mPAWQMZRpFUy3yl7Bo4CslO3Fwly9x8FfzV0mLLUeqr1BlTVjb7exASnzfiyqCbvynPguqj9Lax0CW7hIsViZeCXhixWG0hoKKZeT3xg3_3PiwYi8E03SOxP9wvq_TEdWa65Uh5XIc/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; } ul.pagination a:hover { background-position:0 -12px; } ul.pagination a:hover { background-position:0 -12px; } ul.pagination a.activeSlide { background-position:0 -12px } a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKX6eSG-NPEUjQR3dPGYHoelAh-ZBYp8KS_uOwYFGBKcHajDpk165Anxh_hWFEOJKuG1Ad_nNtdWrMhkzE20UXh9Tdomsh6r80iRkBB9fVF2La91HLjRWXJSCphNUUfN79VAlRucKL7j4/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px; border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);} a.readmore:hover {color:#ff0}Kode yang berwarna Merah, Sesuaikan dengan Ukuran Lebar Template anda.
width:640px; dan height:226px;
3. Temukan isyarat </head>
4. Copy & Paste isyarat berikut ini,dan Letakkan diatas isyarat </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/maycyberdownload/maycyber-script/slide-show-maycyber.js' type='text/javascript'/> <script src='https://sites.google.com/site/maycyberdownload/maycyber-script/maycyber-slideshow-featured.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2andiSX92Qo-eCFwhX6Z3kSkCkvYdT304r9-WsALAxVoYKoeWHlTBfpYDBXjaKb2LW8Xbu2G38rrYEUY8wSzBm_yP5frZYdhik0tXruRFrWLa1FWtEuwAxpVYKVLFKjwn-xtPdgZSIAQ/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 150; summaryTitle = 25; numposts = 7; 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="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more »</a></div>'; document.write(trtd); j++; } document.write('</div>') } //]]> </script>JQuery1.7.2 Bila di blog anda sudah terpasang JQuery 1.7.2 sebaiknya tidak usah dipasang lagi.
numposts = 7; Menampilkan Postingan Berapa postingan. 7 yaitu Artikel yang ingin di postingkan.
width="340" Lebar pada Blog anda. Sesuaikan dengan Lebar Blog anda.
height="212" Ketinggian. Sesuaikan dengan Lebar dan Ketingian Featured Post nya.
Terakhir
5. Temukan isyarat <div id='main-wrapper'> atau <div class='main-wrapper'> atau <div class='outer-wrapper'>
6. Copy & Paste isyarat berikut ini, dan Letakkan dibawah isyarat yang disebutin diatas.
<b:if cond='data:blog.pageType != "item"'> <div id='featuredSlider'> <div class='container'> <script> document.write(" <script src=\"/feeds/posts/default/-/Tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script> <div class='navigation'> <ul class='pagination'/> <script> $('.slides').cycle({ fx: 'fade', speed: 'slow', timeout: 3000, pager: '.pagination' }); </script> </div> </div> <!--end .container--> </div> </b:if>feeds/posts/default/-/Tips?max-results : Tips Merupakan Label yang aku gunakan. Ganti dengan Label yang anda ingin postingan. Artinya menampilkan Artikel per/label.
Bisa diubah dengan :
/feeds/posts/default/?max-results=& Menampilkan semua postingan. Tanpa Label atau Kategori.
7. Terakhir, Simpan Template!
Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, lihatlah home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Featured Post Thumnail Berganti Postingan
