Kemarin saya telah pernah menshare sebuah artikel tentang Bagaimana Cara Membuat Simple Slider Otomatis Gambar Vertikal kali ini juga saya ingin memposting sebuah artikel yang berhubungan tentang cara membuat slider,tetapi ini sedikit berbeda sobat. dikarenakan ini hanya untuk template Online saja.
Baiklah langsung saja pada cara pembuatannya :
Langkah pertama
- Kita harus membuat satu widget di bawah header untuk meletakkan slider nantinya. Login keblogger dengan akun Anda
- Setelah masuk ke dashboard, pilih blog yang mau dipasang slider.
- Kemudian pilih template >> Edit HTM, jangan lupa centang dulu kotak expand widget template.
- Backup dulu template untuk berjaga-jaga jika nanti terjadi kesalahan dalam pengeditan. Kemudian masukkan kode berikut ini diatas ]]></b:skin>
/* Slide Content ----------------------------------------------- */ .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;} .slide {color: #666666;line-height: 1.3em;} .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} .slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} .slide .widget {margin:0px 0px 6px 0px;} - Kemudian untuk memanggil widget agar muncul di layout, letakkan kode berikut di atas <div id='main-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slide-wrapper'> <b:section class='slide' id='slide' preferred='yes'/> </div> </b:if> - Lalu save template, sekarang anda masuk ke layout dulu, lihat dibagian bawah header apa sudah ada satu widget kosong seperti pada gambar di bawah?
Jika pada template Anda sudah terdapat satu kolom kosong yang ada di
bawah header seperti gambar diatas, untuk langkah pertama tinggalkan
saja, langsung pada langkah kedua
Langkah kedua
Masih pada posisi Edit HTML masukan kode dibawah ini diatas ]]></b:skin>
.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlUNlfS7gzsKyDsg3e1vX42aSUw8ALFWrhXIqLdtSqwPizbsYVxhjAFBpPQ_uGzfuiRndcPeHLKMHRUf0sFEdUTIv4G_eIacFIrKFAKuiZbUL2vmt-VwVODMkY2mSLV9F7MTN8u6DqA96/s1600/shadow1.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpcKVUrXkz0yNSLduYk0lSPBqzYaN0p0yIb1UK26jsFeJCpCES2sj_5yAwYkkznCFhUKmqz96rVMxreIN3YeLbuBpLdBaFYDcqXMQxh0pSiZwGSn0K0JR2mGjA1CubFyqARGUGmGOIUHq/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgloVT8QzBfpeOHb01CrFK7nGZengVJNNaI27qwPaKgBcWEVbFRCepWQe7PCFbswoqc2eydX51gCZeeD8I8_jV_uxs1uVHvVIJ4Sbx_izmUS4HH2gF_UVgCRPans4x_OmpK25CCs59Gbq/s1600/order.png) no-repeat 0 0; position:absolute; font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}
Ukuran 950px diatas menunjukkan lebar slider, dan 325px adalah tinggi slider. Silahkan sesuaikan dengan ukuran template Anda.
2. Setelah langkah diatas, masukkan kode berikut diatas kode </head>
Perhatikan kode warna merah diatas jika pada template anda sudah terdapat jQuery.min.jsmeskipun serinya berbeda, Anda tidak perlu memasukkan script warna merah itu lagi. Cukup satu jQuery.min untuk satu template jika ada dua, kemungkinan akan bentrok dan slidernya tidak jalan.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/112241212156/slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHiqXyRpo9ysEquAc7IPKBeKQIoFhWODljHoQpbhQZtkir6A-uhQgaqeG4YssDpQGp-cf4IEHwOoMoRfU8uDzToOi6D5s2rktC8AFhA93votWcM7T-HwSoJ-lyuynyTdk28MQe5AUzDE/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 400;
summaryTitle = 25;
numposts2 = 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 showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts2 ; 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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'... <a href="'+posturl+'" class="meta-more">View Detail </a></p></div><p class="order"><a href="'+posturl+'">order!</a></p></div>';
document.write(trtd);
j++;
}
}
function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts2 ; 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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
document.write(trtd);
j++;
}
}
//]]>
</script>
3. Selanjutnya perhatikan kode script pada langkah pertama untuk nomer 5 diatas, ganti semua dengan kode dibawah ini :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title='feature content slider' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
<div class='shadow'/>
- Setelah itu save template dan masuk ke layout akan nampak seperti pada gambar dibawah ini :
- Kemudian klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :
Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan. - Terakhir save, dan lihat pada blog Anda sudah terpasang slider menarik.
Segitu dulu ya tutorial membuat featured slider sederhana untuk toko
online, maaf kalau tulisan saya acak-acakan karena lagi sedih, pasti
diantara teman-teman banyak yang mengikuti berita di media banyak korban
yang belum ditemukan akibat jatuhnya pesawat Sukhoi meskipun tidak ada
keluarga saya yang ikut dalam penerbangan tersebut, tapi saya prihatin
dengan banyaknya kejadian pesawat jatuh di negeri ini, kenapa ya?
Disamping itu saya juga sedih Adsense saya hari ini kena banned...
duuhhh lebay banget somprettt. Jika masih ada yang kurang jelas dalam
penjelasan diatas tinggalkan pesan di kotak komentar. Selamat mencoba
dan semoga bermanfaat.
Title: Cara Membuat Slider Otomatis Toko OnlinePosted by:
Published :2013-06-22T17:48:00+07:00
Terimakasih banyak karena sobat telah membaca artikel Cara Membuat Slider Otomatis Toko Online. Sobat bisa bookmark halaman ini dengan URL http://inzonatio.blogspot.com/2013/06/cara-membuat-slider-otomatis-toko-online.html. Jika ingin memposting ulang artikel ini harap untuk mencantumkan link sumber.
0 komentar:
tolong berikan Komentar Anda dengan Pantas dan Layak dikonsumsi oleh Publik.
Catatan:
• No Sara
• Spam dan Sejenisnya
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode, gunakan tag <i rel="code">... KODE ...</i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">... KODE ...</i>
• Untuk menyisipkan catatan, gunakan [catatan].. TEKS ... [/catatan]
• Untuk menyisipkan gambar, gunakan [img]URL GAMBAR [/img]
Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode HTMLDaftar IsiHOME