Cara membuat slider posting atau featured slider , slider atau slide adalah fitur/tampilan yang muncul biasanya di home dan featured atau slider ini bisa memberikan kemudahan bagi pengguna untuk melihat cuplikan judul-judul posting yang sudah di publikasikan dalam situs tersebut.
Tampilan slider slide yang ingin saya bagikan ini adalah slider posting lengkap dengan cuplikan gambar dan cuplikan artikelnya , contohnya seperti gambar di bawah ini
Cara pembuatan slider posting atau featured slide post silahkan ikuti caranya seperti di bawah ini :
1.buka blog (situs) anda
2.lalu login ke akun blog masing-masing
3.masuk ke dashboard blog , lalu pilih template dan klik edit html
4.selanjutnya kopi kode yang di bawah ini dan pastekan di atas kode ]]></b:skin>
#featuredSlider {background:#fff;float:left;margin:0; padding:0 0 7px; width:780px; position:relative;color:#000;border-bottom:0px solid #fff}
#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:23px Oswald;text-shadow:0px 0px 0px #000;}
.featuredTitle a{color:#000000;}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:21px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 10px; 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/AVvXsEiU4PdAfDwGj2bCTGQ6p30JbP3WAZ8T3bspbfwGI_xAE2CCCWVgMAwBkbNgKUEkZbn1YxfSHgtJEVlF3vGwg9593pQB3GBAXONDX71KnQibkF5I3xSfwj-EGtU1q-ivjIluqTd3bcwhZNs/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:0px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvl3Yxq552Q7MrdYYCRXj6ZHFoSBniIoGIWZT69ynNtCDEQv0-ZXCWokaL2IHWNIzm6h-qlmiH9XXqoqcjHo_r80fsIs7M_six2btimSn1x3Kc3O3ahA1SNezaLr-HzRMlSn2xoj7gj_U/s1600/fade.png) repeat-x top;display:block;;font:bold 14px 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:5px;-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#fff}
5.kopi lagi kode yang di bawah ini dan pastekan/letahkan di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.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/AVvXsEhA-GFm9FPsN9kGOZdoFS2wCEX72qZFzUUcrFk9xkMDlZERg6gKWLBQEd18_SZwCKFGzdZi928HPApZiY3EFVRUXQ6Qq9EToj-oeCrZharwYbLz4CZfJX7ZjiVGScC0N1cQ3Eitqs3IUTQ/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>
6.kopi lagi kode yang terakir ini untuk memunculkan layar di blog anda jadi silahkan kopi kode yang di bawah ini dan pastekan atau letahkan di bawah kode <div id='wrapper'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/SIM Keliling?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>
7.ganti kode di atas yang berwarna merah dengan nama label di blog anda masing-masing.
8.selanjutnya simpan template
9.selesai.
Catatan ; sebelum edit template ada baiknya hati-hati dan simpan dulu template sebelum melakukan pengeditan sehingga bisa untuk mengembalikan jika pengeditan nya salah.
Demikian panduan website Cara membuat slider posting , cara membuat slider slide sejenis nya bisa melihat halaman cara membuat slide show
Tampilan slider slide yang ingin saya bagikan ini adalah slider posting lengkap dengan cuplikan gambar dan cuplikan artikelnya , contohnya seperti gambar di bawah ini
Cara pembuatan slider posting atau featured slide post silahkan ikuti caranya seperti di bawah ini :
1.buka blog (situs) anda
2.lalu login ke akun blog masing-masing
3.masuk ke dashboard blog , lalu pilih template dan klik edit html
4.selanjutnya kopi kode yang di bawah ini dan pastekan di atas kode ]]></b:skin>
#featuredSlider {background:#fff;float:left;margin:0; padding:0 0 7px; width:780px; position:relative;color:#000;border-bottom:0px solid #fff}
#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:23px Oswald;text-shadow:0px 0px 0px #000;}
.featuredTitle a{color:#000000;}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:21px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 10px; 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/AVvXsEiU4PdAfDwGj2bCTGQ6p30JbP3WAZ8T3bspbfwGI_xAE2CCCWVgMAwBkbNgKUEkZbn1YxfSHgtJEVlF3vGwg9593pQB3GBAXONDX71KnQibkF5I3xSfwj-EGtU1q-ivjIluqTd3bcwhZNs/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:0px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvl3Yxq552Q7MrdYYCRXj6ZHFoSBniIoGIWZT69ynNtCDEQv0-ZXCWokaL2IHWNIzm6h-qlmiH9XXqoqcjHo_r80fsIs7M_six2btimSn1x3Kc3O3ahA1SNezaLr-HzRMlSn2xoj7gj_U/s1600/fade.png) repeat-x top;display:block;;font:bold 14px 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:5px;-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#fff}
5.kopi lagi kode yang di bawah ini dan pastekan/letahkan di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.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/AVvXsEhA-GFm9FPsN9kGOZdoFS2wCEX72qZFzUUcrFk9xkMDlZERg6gKWLBQEd18_SZwCKFGzdZi928HPApZiY3EFVRUXQ6Qq9EToj-oeCrZharwYbLz4CZfJX7ZjiVGScC0N1cQ3Eitqs3IUTQ/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>
6.kopi lagi kode yang terakir ini untuk memunculkan layar di blog anda jadi silahkan kopi kode yang di bawah ini dan pastekan atau letahkan di bawah kode <div id='wrapper'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/SIM Keliling?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>
7.ganti kode di atas yang berwarna merah dengan nama label di blog anda masing-masing.
8.selanjutnya simpan template
9.selesai.
Catatan ; sebelum edit template ada baiknya hati-hati dan simpan dulu template sebelum melakukan pengeditan sehingga bisa untuk mengembalikan jika pengeditan nya salah.
Demikian panduan website Cara membuat slider posting , cara membuat slider slide sejenis nya bisa melihat halaman cara membuat slide show