Thứ 628042017

bantintuvan24.7@gmail.com

Quay về Bạn đang ở trang: Home Kiến thức phổ thông Tin học Blog Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot

Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot

Được đăng ngày Chủ nhật, 17 Tháng 5 2015 11:59
loading...

Chia sẻ bài viết của bạn qua:

(Bantintuvan.com)- Chúng ta thường thấy ngoài trang chủ một số trang thiết kế bằng blogspot có những slide bài viết đẹp và được trang trí với một thanh trượt tương đối đẹp, bắt mắt. Cách làm điều này như thế nào?

Bạn cõ thể làm được điều này một cách dễ dàng thông qua các bước sau:

Lưu ý: Nếu bạn nào chưa rành về blogspot thì nên Sao lưu template trước khi tiến hành.

Xem trước bản demo

Bước 1: 

  1. Đăng nhập vào blogger.
  2. Vào Layout> Edit HTML, chọn kiểm tra mở rộng mẫu tiện ích con
  3. Đặt mã code sau đây lên phía trên đoạn trong code blogspot

]]></b:skin>

Code:

 #featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}
 

Bước 2: Đặt mã code sau đây trên </head>
<script>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "misteri";

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<numposts1;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;

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.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 href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; 
document.write(trtd); 
j++;
}}
//]]>
</script>
 

Trong label1 = "misteri"; thay nhãn misteri bằng nhãn của bạn mã code img width = "370" height = "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 </body>
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[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ước 4: Bước cuối cùng, mà là để gọi thanh trượt để nó xuất hiện trên trang đầu của id='main-wrapper'> <div tìm kiếm 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: 
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>
 

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.
 
Cách 2
 
Dán code này vào widget mới

<div style="width: 350px;"><center>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B-0uHUanipfMdVVqb0R2OEFxdkU" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://tuvi.bantintuvan.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
ul.abt-sidebar-slider * {
-moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
ul.abt-sidebar-slider {
height: 500px;
width: 100%;
}
ul.abt-sidebar-slider li {
display: none;
float: left;
height: 24.5%;
overflow: hidden;
padding: 0;
position: absolute;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
left: 0;
top: 50%;
}
ul.abt-sidebar-slider img {
border: 0 none;
height: 100%;
width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
left: 0;
top: 75%;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
left: 0;
top: 25%;
}
ul.abt-sidebar-slider .overlayx {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
border: 4px solid #2E8DCE;
border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
color: white;
font-family: Oswald;
font-size: 25px;
font-weight: 100;
line-height: 1.5em;
margin: 0;
padding: 0 10px;
position: absolute;
top: 25px;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .label_text {
bottom: 10px;
color: white;
font-size: 90%;
left: 10px;
position: absolute;
z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
display: none;
}
.buttons {
margin: 5px 0 0;
}
.buttons a {
display: inline-block;
height: 25px;
position: relative;
text-indent: -9999px;
width: 15px;
}
.buttons a:before {
border-color: transparent #535353 transparent transparent;
border-style: solid;
border-width: 8px 7px;
content: "";
height: 0;
left: 50%;
margin-left: -10px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 0;
}
.buttons a.nextx:before {
border-color: transparent transparent transparent #535353;
margin-left: -3px;
}
.date {
background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
bottom: 93px;
padding: 8px;
position: relative;
right: 6px;
}
#headerbox {
background: #8FB93D;
font-family: Oswald;
padding: 4px;
}
</style>
</center></div>


Xem demo

Chia sẻ bài viết của bạn qua:

loading...
loading...