Kemarin ada teman yang meminta via email untuk dibuatkan sebuah slider otomatis untuk toko online yang dikelolanya. Bisnis jualan barang atau jasa dengan memanfaatkan fasilitas internet sekarang lagi ngetrend, dan permintaan untuk membuat sebuah template toko online pun juga banyak, tapi kok susah banget ya? Saya tidak akan membahas itu sekarang, saya akan mencoba untuk memenuhi permintaan dengan membuat sebuah Featured Slider sederhana dengan tambahan paginasi berupa deretan gambar kecil dibawah summary atau ringkasan artikel. Prinsip kerja dari slider ini sama dengan slider yang ada pada template Johny Bingung, disini saya hanya modifikasi background dan menambahkan logo shopping pada bagian bawah gambar.
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>
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);
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);
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 anda sudah terdapat jQuery.min.js meskipun 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.
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
S atu lagi tutorial blog yang gampang sekali untuk teman-teman praktikkan di blog masing-masing. Yaitu membuat tulisan berkedip atau blink text. Ini bukan sulap atau trik yang luar biasa, tapi saya sangat tertarik dengan blog yang ada tulisan berkedip-kedip di dalamnya. Setelah mempelajari triknya, saya pun posting artikel cara membuat teks berkedip atau bahasa inggris bilang blink text . Sebenarnya ada gunanya juga membuat blink text ini. Yang pasti, pengunjung blog akan terbawa dan terpancing untuk mengklik teks tersebut. Atau paling tidak semakin terfokus ke arah tulisan yang berkedip itu. Di bawah ini adalah contoh dari blink text : "Jangan diklik, karena ini sangat berbahaya bagi kesehatan anda" Jika temen-temen tertarik ingin membuatnya, atau mungkin ada yang sudah tahu malah. Baiklah bagi teman-teman yang belum tahu dapat mengikuti cara ini. Saya bilang ini sangat gampang tidak perlu edit HTML <blink> Tulis kalimat temen-temen di sini </blink> Nan...
Tips Seo Untuk Blogger. Solusi Seo Agar Blog Selalu Update - Pada saat kita mengalami stuck atau hilang ide menulis kita masih punya beberapa pilihan untuk tetap mengupdate blog. Bagi yang blognya cuman satu sih kaga apa tapi kalau blognya lebih dari satu itu yang membuat terkadang kita kehabisan ide menulis. Contohnya saya yang memiliki lebih dari satu blog jadi harus pintar-pintarlah dalam mencari ide menulis. Kalau saya pribadi biasanya sering baca buku atau melihat-lihat tayangan televisi atau membaca berita di media sosial kesemuannya tersebut bisa kita bikin ide untuk menulis. Nah lalu Bagaimana Cara Agar Blog Selalu Update ? atau Bagaimana Mengatasi Kekurangan Ide Menulis Pada Blogger ?. Berikut ini adalah beberapa alternatif yang bisa kita gunakan untuk mengatasi kejenuhan dalam ngeblog karena kekurangan ide menulis atau faktor kesibukan.Sebelumnya kalian semua bisa membuka artikel-artikel saya terdahulu sebagai sarana perbandingan: Apa Manfaat Blog Dummy Bagi S...
S etelah kita membuat reply pada kotak komentar , langkah selanjutnya adalah membedakan komentar pemilik blog dengan komentar pengunjung. Untuk membedakan komentar pemilik blog dengan komentar pengunjung bisa dengan latar belakang warna, latar belakang gambar, garis pembatas komentar, membedakan jenis huruf atau kotak komentar yang dibuat agak menjorok ke dalam. Istilah yang sering dipakai oleh orang Inggris sana adalah Highlight author comments , artinya menyorot komentar pemilik blog, kalau orang Indonesia bilang membedakan tampilan komentar pemilik blog , kira-kira begitulah. Manfaatnya tentu saja ada, membedakan komentar pemilik blog dan pengunjung pasti membantu pembaca mengetahui bahwa anda telah memberi tanggapan atas komentar yang masuk dari pengunjung blog anda. Secara default pada template blogger kita tidak dapat melihat perbedaan antara komentar pengunjung serta tanggapan dari yang punya blog. Semuanya disama ratakan oleh blogger. Agar lebih jelas apa itu Highlig...
Comments
Post a Comment