Cara Membuat Slide Otomatis Untuk Toko Online

RealFact- Bisnis online, sebuah rangkain kata yang sudah tidak asing lagi bagi para Netter. Keberadaannya hampir mewarnai seluruh situs internet yang ada di dunia maya. Bisnis online juga telah membuat Ownernya menjadi orang kaya raya. Bagi teman-teman facebooker mania pasti tahu Mark Zuckenberg, pemuda Amerika yang berhasil menciptakan situs jejaring sosial tersebut dan telah membuatnya kaya raya. Mark Zuckenberg adalah sebagian kecil dari sekian banyak pebisnis online yang mampu mendulang kekayaan dari dunia maya.

Di Indonesia kita juga tahu beberapa orang yang telah mencapai sukses dalam bidang ini seperti Mas Medy Agintha misalnya atau Habibie Hafsyah yang berhasil mendobrak bisnis online dan mencapai kesuksesan di tengah-tengah keterbatasan fisik yang dia miliki. Ooops.... Ini mau membahas bikin slide untuk Toko Online atau Biografi Netpreneur..? Hehehe.. Cuman prolog aja kok biar Sohib semua makin bersemangat untuk tetap eksis di dunia internet aja kok... khususnya di dunia Blogging

Sederetan kisah sukses di atas tentunya tak lepas dari kreatifitas mereka terhadap bisnis online yang mereka tekuni. Untuk itu dalam Trik Blogger kali ini saya persembahkan bagi teman-teman yang sedang mempunyai "semangat 45" untuk mempercantik blog toko online-nya, yaitu tentang cara membuat Slider untuk memajang produk yang Sohib jual secara online. Yakin deh... tampilan Blog Sohib bakal semakin ganteng.

Trik ini Saya peroleh dari Blog penyedia template http://creatingwebsite-maskolis.blogspot.com yang banyak di kenal oleh para Blogger. Template-templatenya memang wow... cucok deh buat Sohib semua yang sedang gandrung dengan Blog bertema Magazine atau toko online. Sebetulnya Sohib bisa ikuti tutorialnya dari Blog tersebut, namun kareana Eyang Google menuntun Sohib ke Expresi Jaman ya ikutin aja disini, hehe.. Isinya sama kok, hasilnya juga dijamin gak bakalan beda.

Fungsi Slide Toko Online
Slide ini akan berfungsi sebagai sarana untuk memajang produk-produk yang di anggap sebagai produk baru atau produk yang ingin ditampilkan pada bagian atas agar lebih dikenal oleh calon konsumen, bisa berupa produk unggulan, produk terbaru atau produk yang belum laku (heheehe... ketawa nyengir) biar di ketahui oleh konsumen. Gambar produk akan berganti secara otomatis sesuai jumlah produk yang Sohib ingin tampilkan. Bagaimana menarik bukan...? Mantap deh pokoknya. Untuk Demonya Sohib bisa klik disini atau lihat gambar di bawah ini:

DEMO

Tutorial Cara Pembuatannya
Untuk pemasangan di Blog silahkan ikutin caranya berikut ini:

Langkah Awal

Log In ke Blog yang sudah di sediakan dengan akun Sohib tentunya, Untuk menanamkan Slide ini harus di buat widget terlebih dahulu di bawah header (kolom tunggal) yang akan berfungsi untuk meletakkan Slider ini
Masuk ke dashboard dan pilih Blog yang akan dipasang Slide
Pilih template, dan klik pada box Edit HTML, sebelum melakukan pengeditan Centang dulu kotak kecil di samping kiri expand widget template
Back up template untuk jaga-jaga jika terjadi kesalahan dalam dalam pengeditan, agar template bisa di kembalikan seperti semula
Cari kode: ]]></b:skin> untuk mempermudah pencariannya silahkan tekan Ctrl+F
Setelah ketemu script ]]></b:skin> letakkan Script di bawah ini di atas kode ]]></b:skin>

view plainprint?

/* 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;}

7. Kemudian untuk memanggil widget agar muncul di layout, letakkan kode berikut di atas <div id='main-wrapper'>

view plainprint?

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
</div>
</b:if>

8. Setelah kode-kode tersebut di masukkan ke dalam template langkah selanjutnya adalah simpan dulu dengan klik pada Simpan Template pada pojok kanan bawah. Setelah itu kembali pada tata letak, jika tidak terjadi kesalahan maka di bawah Header sudah bertambah satu kolom seperti gambar di bawah ini

Jika kolom di bawah header sudah muncul silahkan lanjutkan dengan langkah kedua yaitu:

Pilih template, dan klik pada box Edit HTML, sebelum melakukan pengeditan Centang dulu kotak kecil di samping kiri expand widget template
Back up template untuk jaga-jaga jika terjadi kesalahan dalam dalam pengeditan, agar template bisa di kembalikan seperti semula
Cari kode: ]]></b:skin> untuk mempermudah pencariannya silahkan tekan Ctrl+F
Setelah ketemu script ]]></b:skin> letakkan Script di bawah ini di atas kode ]]></b:skin>

.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeZoXny2q8a2Yfdf5HjlYJs5EcgOI4E65jt5T45fxItiZxHwQRiUP0x-etst-UmCyj7yNL97oa059i_VJlkSdesu-itdEP0NbirzmhuDG__nkWr7G8OXb8z-1algrfl51wYPWrrEr8t2u/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/AVvXsEhL0-bZP3-QjClbFBw6J0TVRFq62ILPPwSLnxo9AjF4RxzQRYa0MclyySWgrL4hpXZTHn6-3-GHmju3iX_UUs7QaxFLgJzEJaLixbfW1zovyXyBh9SF8a-M7lIFdeH2dAJt-8OPngdlAV2K/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/AVvXsEiKViug7AukU8FZy6rBhpGTLiF6iB2X288WNDPndy0t0-SldVqicigME_LkaiWe2Ax1B2E1llKVo8X7lq5Up-mbO2FxijTnSe3DxuYlpEgp3ptHH2rhJkKNdmqEhUNwFX5bAwCzKIuJ_AAK/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.

Setelah beres langkah tersebut di atas, tekan Ctrl+F untuk menemukan kode </head> dan letakkan kode di bawah ini 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://kauman.googlecode.com/files/slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlGthhcpv1V_1uM1Uh5so83raAXpnNTNYf21yB6yyB-SSaFZOLiDHpWjke7OpQV88QI3UFuK5hq_VCd962PjdiPCMI2Asma2_-4b6LbYBvOvf0kqa05iujvaejTSKkwetyfCN7VmL2AFA/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>

Perhatikan kode warna merah diatas jika pada template Sohib sudah terdapat jQuery.min.js meskipun serinya berbeda, Sohib 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.

Selanjutnya perhatikan kode script pada langkah pertama untuk nomer 7 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 :

Pada gambar di atas di masukkan label Electronic, Sohib dapat menggantinya sesuai dengan label yang di inginkan. Slider akan memuat gambar beserta potongan deskripsi gambar yang Sohib posting

Langkah terakhir adalah klik Simpan Template

Sohib Semua sudah mempunyai Slide otomatis pada Blog toko online sahib

Akhirnya selesai juga tutorial cara membuat Slide untuk toko online. Jika ada pertanyaan silahkan tulis pada kolom komentar

Popular Posts

Cara Membuat Slide Otomatis Untuk Toko Online

0 comments:

Post a Comment

Popular Posts

Labels

Arsip Blog