Cara Membuat Featured Post Thumnail Berganti Postingan
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 bagian bawah kanan. Jika anda melihat gambar diatas adalah hanya sebagai pemanis dan pelengkap saja gambarnya hehe. Sumber Source Kode Medienfreunde. Oke langsung 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 kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></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/AVvXsEivxZoKwfA_xiPDgujENhckIVYWXlI9SgBPYa8b4YTkQGv5FJgX8QhvUzHwUgY73ZTyYsfTmTgx8g55_BivnEiwfClvNKYzj5GysZM6ebyRieEUKQFBA29rLCDx8kKA5iJJktN8KU-D8_U/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/AVvXsEhwtNLUpv8x4Aq0Aq8eikztab1m2JbyPtNGx9OhZESxdnck3Sts8JeaHFGc1mGpyJrZHqfFVgW_mVzzWJrDJaI_kMVkwkSEEQlq7FD3aBEHko6NAusXDSYToC0ygHXF6aDhrP427ZJIj28/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 kode </head>
4. Copy & Paste kode berikut ini,dan Letakkan diatas kode </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/AVvXsEjvherON0zpFQRssJT9F1VoHmylfVBNTTvNIveNN07nDdWYjRkJzLuSjGcUWlGaagLyBOAdPnkGLdlQArsfyswng46S_0MjkD10bkEDG9v1FfczSI1lz2mQ42emDyilKXhzE8buU6j0B9M/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 adalah 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 kode <div id='main-wrapper'> atau <div class='main-wrapper'> atau <div class='outer-wrapper'>
6. Copy & Paste kode berikut ini, dan Letakkan dibawah kode 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 saya 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, jika 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
Related Post
jadi eror blongku gara gara, skrip yg km posting itu
ReplyDelete