Cách tạo slideshow bài viết mới cho blogspot
– Như các bạn đã biết và thấy bất cứ mã nguồn nào từ wordpress, bo-blog, joomla đến blogspot đều tích hợp thêm chức năng slide ảnh cho t rang chủ. Làm blog của bạn càng sinh động và đẹp mắt với người dùng hơn. Bài viết này sẽ hướng dẫn các bạn cách tạo slideshow để cập nhập bài viết mới ra ngoài trang chủ cho blogspot.
Các bạn có thể xem demo slideshow bài viết mới của blogspot tại đây
– Dưới đây là các bước tiến hành tạo slider cho blogspot, các bạn lưu ý nên sao lưu template weblog spot lại rồi hãy tiến hành để đề phòng lỗi nhé.
Bước 1:
– Đăng nhập vào blogger với tài khoản của bạn
– Sau đó nhấp vào structure> Edit HTML, chọn kiểm tra mở rộng mẫu tiện ích con
-Đặt mã code sau đây trên ]]></b:pores and skin>
[html] #featuredmargin-bottom:8px
.sliderwrapperposition: relative;overflow: hidden;peak: 240px
.sliderwrapper .contentdivvisibility: hidden;position: absolute;left: zero;high: zero;padding: 0px;peak: one hundred%;
.paginationtextual content-align: left;padding:8px 0px
.pagination afont-size:11px;shade:#fff;padding: 3px 6px;heritage:#1b75d6
.pagination a:hover, .pagination a.selectedcolour:#dedde5;heritage-colour:#535352
.featuredPostwidth:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;shade:#dedde5;position:absolute;backside:0
.featuredPost acolour:#fff
.featuredPost a:hovercoloration:#dedde5
.featuredPost h2margin:zero;font-measurement:12px;line-top:1
.featuredPost spanfont-size:10px
.featuredPost pfont-dimension:11px [/html]
Bước 2: Đặt mã code sau đây trên
<script>
//<![CDATA[
/* Script from: blogspot */
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = actual;
aBold = true;
summaryPost = a hundred;
numposts1 = 5;
label1 = "misteri";
operate removeHtmlTag(strx,chop)var s=strx.split("<");for(var i=0;i<s.size;i++)if(s[i].indexOf(">")!=-1)s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)s=s.subscribe to("");s=s.substring(0,chop-1);return s
operate showrecentposts1(json)j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=zero;i<numposts1;i++)var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)destroy;for(var ok=zero;k<entry.link.length;ok++)if(entry.hyperlink[k].rel=='alternate')posturl=entry.hyperlink[k].href;destroyfor(var ok=zero;ok<entry.hyperlink.size;ok++)if(entry.link[k].rel=='replies'&&entry.hyperlink[k].kind=='text/html')pcm=entry.hyperlink[k].title.split("")[0];smash
if ("content material" in entry)
var postcontent = entry.content material.$t;
else
if ("abstract" in entry)
var postcontent = entry.abstract.$t;
else var postcontent = "";
postdate = entry.printed.$t;
if(j>imgr.length-1) j=zero;
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;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.break up("-")[2].substring(zero,2);var m=postdate.cut up("-")[1];var y=postdate.cut up("-")[0];for(var u2=zero;u2<month.size;u2++)if(parseInt(m)==month[u2])m=month2[u2];spoil;
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div category="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" type="alignnone" src="'+img[i]+'"/></a><div category="sliderPostInfo"></div></div><div classification="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
file.write(trtd);
j++;
//]]>
</script>
Trong label1 = “misteri”; thay nhãn misteri bằng nhãn của bạn
mã code img width = “370” top = “240” là các thanh trượt chiều rộng và chiều cao, điều chỉnh mẫu của bạn.
Bước 3: Đặt mã code sau đây trên
<script src='https://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init(
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //legitimate values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "subsequent" hyperlinks. Set to "" to cover.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: operate(previndex, curindex) //experience handler fired whenever script modifications slide
//previndex holds index of ultimate slide viewed b4 current (1=1st slide, 2nd=2nd and so on)
//curindex holds index of presently proven slide (1=1st slide, 2nd=2nd and so on)
)
//]]>
</script>
Bước 4: Bước cuối cùng, là để gọi thanh trượt để nó xuất helloện trên trang đầu của identification=’major-wrapper’> của bạn nếu bạn muốn có một thanh trượt xuất hiện trên wrapper chính như trong bản demo, và đặt đoạn code sau vào phía dưới:
[php]<b:if cond=’data:weblog.pageType == &quot;index&quot;’>
<div id=’featured’>
<div class=’sliderwrapper’ identification=’slider1’>
<script>
report.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=printed&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
<div type=’pagination’ identification=’paginate-slider1’>
</div>
</div>
</b:if>[/php]
Bước 5: Bước cuối cùng save / lưu mẫu, tạo ra thanh trượt hình ảnh dựa trên một danh mục cụ thể được hoàn tất.
Lưu ý:
– Ở Bước 2 trong phần code có 1 url http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+picture.jpg =>> Đây là hyperlink ảnh hiện thị khi bài viết không có ảnh
– Ở Bước 3 trong phần code có đường dẫn file js http://dl.dropbox.com/u/12924430/contentslider.js => đây là đoạn js chạy slider
Để đề phòng link die mình có đính kèm hyperlink obtain nếu các bạn muốn dùng hyperlink riêng thì tải về.
(No Ratings Yet)
Loading...
