jquery featured slider สวยๆ จากเว็บ http://allmysteryworld.blogspot.com
โดยหลัการ เป็นการแสดงบทความ อัตโนมัติ จาก label หรือ ป้ายกำกับ
ขั้นตอนการติดตั้ง
ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ แม่แบบ >> แก้ไข HTML
ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ
ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>
/*---------------------------------------------------------------------------------*/
/* /Features Slider - There are two featured slider in */
/*---------------------------------------------------------------------------------*/
#featuredContent {
background:#343434;
border:1px solid #3D3D3D;
float:left;
width:650px;
margin:5px 5px 5px 5px;
display:inline;
}
#featured-slider {
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 650px; /*width of featured content slider*/
height: 300px;
}
#featured-slider .sliderPostInfo { /* Post title and if enabled excerpt wrapper for featured slider */
position:absolute;
bottom:0px;
width:650px;
min-height:100px;
height: auto !important; /* IE6 Min height hack */
height: 100px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSoMYAbafpvacCc2nN6ED2XZWvsGCDK9nJvDpUJEPdOzhB02uCG3_zPmkzvipq3wZt0Kow5H4bx250F2RVkrN2N0gYNSIboPNvROhzvd7VLhGUXSrGLpQbZ6OAQWn4LPmQfdI_d-0Z_-I2/s1600/bgtransparent.png);
}
#featured-slider .sliderPostInfo p { /* Post excerpt style on featured slider */
color:#fff;
font-size:1.1em;
padding:3px 5px 5px 6px;
}
#featured-slider .contentdiv{ /* do not change the name of class - The size of contentdiv is 495x270 (after excluding padding value) */
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
}
#paginate-featured-slider{ /* do not change the name of class - used to wrap thumbnails for featured area */
display:block;
padding:0 0 5px 10px;
margin-bottom:10px;
}
#paginate-featured-slider ul {
width:620px;
padding-bottom:0;
list-style: none;
}
#paginate-featured-slider ul li {
display: inline;
width:75px;
float:left;
margin-left:0;
padding:0 0 0 0;
margin-right:9px;
margin-bottom:3px;
}
#paginate-featured-slider img{
padding-top:5px;
background: #343434;
}
#paginate-featured-slider a img{
border-top:4px solid #fff;
box-shadow: 2px 2px 2px #211c18;
}
#paginate-featured-slider a:hover img, #paginate-featured-slider a.selected img{
border-top:4px solid #cd1713;
box-shadow: 5px 5px 5px #211c18;
}
/* // Features Slider */
.featuredPost2 { /*Posts displayed below the featured section */
padding-top:5px;
padding-bottom:5px;
}
.featuredPost2Meta {
clear:both;
display:block;
font-style:italic;
font-size:.8em;
padding-top:3px;
padding-bottom:5px;
border-bottom:1px solid #efefef;
}
.featuredPost2Meta a{
color:#CB6F00;
}
.featuredPost2Meta a:hover {
text-decoration:underline;
}
.featuredTitle a { color:#CB6F00; margin-left: 10px ; line-height:1.25; font-family:Arial,serif; font-size:18px; font-weight:bold; }
.featuredTitle a:hover { color:#CB6F00; }
ขั้นที่ 2 ติดตั้ง Javascript (jQuery)
ให้คุณค้นหาโค้ด </head> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด </head>
<script src='https://sites.google.com/site/siani3d99/home/code/jquery-v1.7.1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/siani3d99/home/code/jquery-hover-effect.js'/>
<script src='https://sites.google.com/site/siani3d99/home/code/template-jCarouselLite.js' type='text/javascript'/>
<script src='https://sites.google.com/site/siani3d99/home/code/template-jqueryslidemenu.js' type='text/javascript'/>
<script src='https://sites.google.com/site/siani3d99/home/code/template-contentslider.js'/>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts8 = 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 showsliderA(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts8; 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"><a href="'+posturl+'"><img width="650" height="300" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}
}
function showsliderB(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts8; 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 = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);
j++;
}
}
</script>
ขั้นที่ 3 ติดตั้ง HTML ตำแหน่ง slideshow ที่ต้องการแสดง
โดยแก้ไขา่วนของ label (ป้ายกำกับของบทความที่จะแสดง)<div id='featuredContent'>
<div class="sliderwrapper" id="featured-slider">
<script>
document.write("<script src=\"/feeds/posts/default/-/label?max-results="+numposts8+"&orderby=published&alt=json-in-script&callback=showsliderA\"><\/script>");
</script>
</div>
<div id="paginate-featured-slider">
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/label?max-results="+numposts8+"&orderby=published&alt=json-in-script&callback=showsliderB\"><\/script>");
</script>
</ul>
<div class="clear"/>
</div>
<!-- End of featured slider -->
<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: "mouseover", //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>
<!-- Entries below the featured section -->
</div>
<!-- Enf of featuredContent -->
ตัวอย่าง
.png)
ไม่มีความคิดเห็น: