I have a friend who is asking to be made via email an automatic slider for the online store dikelolanya. Business
selling goods or services by making use of internet facilities now
again ngetrend, and request to make a template online store, but also a
lot of kok susah banget ya? I won't go
into it now, I will try to meet the demand by creating a Featured Slider
is simple with the addition of paginated incomprehensible thumbnail
under summary or summary of the article. The principle of work of this slider is similar to the slider on the template Johny Confused, here is my only modification background and add a logo at the bottom of the image of shopping center.
Well get on with it in the way of its production:
The first step
The second step
DEMO
Well get on with it in the way of its production:
The first step
- We should make a widget below the header to put the slider later. Login to blogger with your account
- After signing in to the dashboard, select blogs that want to set a slider.
- Then select the template >> Edit the HTM, don't forget the check first box expand widget templates.
- Backup first just in case if template error occurred in later edits. Then insert the following code above ]] > </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.3 em;}
- 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.3 em;}
- slide {widget..margin:0px 0px 6px 0px;}
- Then to call the widget that appears in layout, place the following code in the < div id = ' main-wrapper ' >
- < b:if = cond' the data: url = blog. = data: homepageUrl ' blog.>
- < div id =' slide-wrapper '>
- < b:section class =' slide show ' id =' slide ' preferred =' yes '/>
- </div>
- </b:if>
- Then save the template, now you get into a layout first, see what is on the bottom of the header, there is one empty widget like in the picture below?
If You are already on the
template, there is one empty column lies underneath the header like the
image above, the first step is to leave it, directly on the second step
The second step
- Still in a position to Edit HTML code below input above ]] > </b:skin>
. shadow {width:950px; height: 39px; background: # 9a315a72b7a608febd4b756a82f413e1042a269e74867f03a3c90f87786b29ae65538058991fb6234653d34dd921d5932c7c704d51cb53efa001de92b84352b22a0ea90eb65fa941ec90d93d29f4e07c3d3b93e7972dca8b0d3930c0d24e483ecbab135567ceb713235dd1f582b8a9ec7758d05be90634092eb986211876ee43e26d405fcf5fe83bdece54dc364a32a2c53fab5e72734b9a3ad7683acb4bbbf3d360e68b4a60c7a7125c5fd6256be7cb8e1de738609c5f89b4c107e20797eeee0d71dd98fab0466ee783a41a47c1f3827f81900b4285feb1447b5e12e9156394efa07f558a5f08ca34d6bd2615c7baacf6257a4f7f7460e569ae9155e90dda83bb0f32bbe6fac5ff1ed5652cc48a449b4579c9a34ee3ec7b5032b3774ec11ec4173cbdc103346580074445031dc74224316839c86b190400735d261c64c5975a449c297b4f317695efc22dc9a7182a78ff4b32487999f689581769a63c0ab0256b288c8649ad0819d3320838507f0bbc20a24c0ad231fcb176ad068542489e07032ce154375992b818b773e576f6fb4f7d9732ca3097d16fd683d0125d2076384fdf8c39e26769d144bb04b08bfce77ae03009e41f6bd8b2ee321846ab47b17194868f8eea525d4228a46ed508916ac67ed0c59ee028161e607a161e61a0 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJgkQgsMzxmqzQa6eHLAsEWxC_5nWGoiphpaoTFNhEGL7xqQCPTiZbqnAMoQgFyC_mPyCdd2P5odSIOubrqK2f4wBABaR1FKJSdng1HUkDkWGRzSpUe401xgvNObdv_i4AFxLgxsjztB2/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/AVvXsEhywWl9mODlXdKGH1e7gtZ2lgiYxKXNvZnIg3QuDlJfbp1tfz-OELfuuWGkoGkdzOBDoe_I6w5qld7bsD9ZAch-Hq4C6yM8prn8NX-RnkykfToVo2kZBObA_110CAZ-CtRm8Ufl77wq4ZR1/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/AVvXsEjWzwH_Us4M7_otQB9oRT1D-NtEwIrtXnGx1a2mFke9eV-8IMkKbfOSjuARX2H3h1We2yipMTc_v7W0KlBNbS_i-ldf3_YWOxUjiEy1706Lq6B5aPJuMBHy2jicPAQ5vIwFCiW4XuH7xAEV/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 langkah diatas, masukkan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrY7GGrFKMuSnnpoMrbu8dU8I_V0kExL-LsKta6GeluJV1dZjO8BNM6Wuquhd6tesw5jPwdVNIw_LPJByUCvBi2zoYyR5q7eP43JkoCSpk3Efik4oBld1x1iqhhHCiu7Gh-EauHlXis8/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 ("\" + 5 ", b); 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 = "66" height = "65" title = "our product" alt = "our product" class = "featured_thumb" src = "' + img [i] + '" >/</a></ul> ';
document.write (trtd);
j++;
}
}
//]]>
</script>Take note of the color code Red above if your template already exists at jQuery.min.js though different series, you don't need to include the script color Red again. Pretty one jQuery min for one template. If there are two, are likely to clash and slidernya no way. - The next note on the script code is the first step to number 5 above, replace all the code below:
<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: & quot; & quot; markup,//Valid values: & quot; # increment & quot;, & quot; the markup & quot;, [& quot; and & quot; label1, label2 & quot; & quot;, etc]
nextprev: [& quot; & quot;, & quot; and & quot;],//labels for & quot; prev & quot; and & quot; next & quot; links. Set to & quot; & quot; to hide.
revealtype: click & & quot; quot;,//Behavior of the pagination links to reveal the slides: & quot; click & quot; or & quot; and & quot; mouseover
enablefade: [true, 0.2],//[true/false, fadedegree]
autorotate: [0, 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 '/> - After that save the template and into the layout will look like in the picture below:
- Then click Edit on the widget featured content slider, after a new window open insert or type a label that would like to display on the slider, see figure below:
From the picture above I put Electronic label that will appear on the slider, you can replace the appropriate desires.
- Last save, and look at the blog You've plugged attract slider.
First
Yes make much for tutorial featured slider simple to shop online, sorry
if my writing desultory because more sad, certainly among the many
friends who follow the news in the media a lot of victims who have not
found due to the fall of the Sukhoi aircraft, although none of my family
who participated in the flight, but I am concerned with the number of
occurrences of the aircraft crashed in the country, why don't ya? Beside that, I am also sad today my Adsense got banned ... lebay banget somprettt duuhhh. If there is still a lack of clarity in the explanation above, leave a message in the comment box. Good luck and hopefully useful
