» » Tạo slider bài viết mới nhất đẹp và chuyên nghiệp

Tạo slider bài viết mới nhất đẹp và chuyên nghiệp

Có khá nhiều kiểu slider bài viết mới đẹp mà share123.vn đã giới thiệu ở các lần trước như kiểu slider bài viết mới giống yahoo, kiểu slider dạng chuyển bài tự động như luubuttuoixanh.com đang sử dụng, hay kiểu Slider Recent Posts cho Blogger này cũng khá chuyên nghiệp, giờ mình giới thiệu tiêps một kiểu slider bài viết mới cho blogspot, website khá hay và đặc biệt nó load cực nhanh, slider này mình đang áp dụng cho share123.vn.
slider bài viết mới nhất đẹp và chuyên nghiệp
Demo Slide viết mới nhất

Cách làm:
Bước 1: Đăng nhập Blogger => Mẫu => Chỉnh sửa HTML => Ctrl+F (Nội tuyến) => tìm ]]></b:skin>
Paste đoạn code sau vào trước ]]></b:skin> /* KHUNG SLIDE */
ul li
{
list-style-type:none;
}
.style-slideshare1
{
margin-left:5px;
}
.style-slideshare1 a
{
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSXnrTWHecZfZrW7IJqjeN8xyRv5G017UID3JLgwtnU-71JyDCLBEXY1AymdcPSqcEahPy-dMrJIDRriJYSFuSAGAZSVWj_8GsYSXpvsBK5UzJsOQwBWedTBw5lWouHkzHEy7znwKEO4/s1600/icon-slideshare.png) no-repeat -3px 10px;
padding: 9px 0px 6px 15px;
height: 30px;
overflow: hidden;
text-decoration:none;
color:black !important;
}
.style-slideshare1 a:hover
{
color:#7CBB00 !important;
}
.khungslideshare
{
width:970px; height:370px; overflow:hidden; background:White;font-size:12px;
}
.khungslideshare-trai
{
width:330px; height:370px; overflow:hidden;background:white;border:1px solid #e0e0e0; float:left
}
.khungslideshare-trai img
{
width:330px; height:370px
}
.khungslideshare-trai-opa
{
max-height:88px; min-height:88px; width:285px; background:rgba(0,0,0,0.4); margin-top:-120px; z-index:0; position:relative; margin-left:10px; padding-top:10px; padding-left:10px; padding-right:10px; border-left:4px solid #7CBB00; overflow:hidden;
}
.khungslideshare-trai-opa a
{
background:#7CBB00;padding:3px; color:white; font-weight:200; text-transform:uppercase; font-size:15px; text-decoration:none !important; line-height:37px;
}
.khungslideshare-trai-opa a:hover
{
color:white!important;
}
.khungslideshare-trai-content
{
border-right:2px solid #7CBB00; font-size:14px; padding-top:5px; color:black!important; width:265px; height:28px; background:rgba(255,255,255,0.9); padding:5px; padding-left:10px; margin-top:7px; overflow:hidden; font-family:v
}
.khungslideshare-opa1
{
height:30px; overflow:hidden;
}
.khungslideshare-opa1:hover
{
margin-bottom:200px;
 overflow:hidden;
height:70px;
}
.khungslideshare-opa1 a:hover
{
margin-top:10px;
margin-bottom:200px;
line-height:40px;
}
.khungslideshare-opa1:hover
{
height:100px !imporant;
}
.khungslideshare-giua
{width:220px; height:370px; overflow:hidden; float:left; border-right:1px solid #e0e0e0;
}
.khungslideshare-giua1
{
width:220px; height:185px; overflow:hidden;
}
.khungslideshare-giua1 img
{width:220px; height:185px;overflow:hidden;

box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;

border: 1px solid #ccc;
}
.khung-giua1-trong
{border-top:2px solid #7CBB00; height:40px; width:210px;overflow:hidden; background:#232323;z-index:1; margin-top:-50px; position:relative;padding:6px;
}
.khung-giua1-trong a
{
color:white;text-decoration:none;
}
.khung-giua1-trong a:hover
{
color:white !important;
text-decoration:none;
}
.khungslideshare-phai
{
width:210px; height:370px;overflow:hidden; float:left; border-right:1px solid #e0e0e0;
}
.khung-phai-tren
{
width:210px; height:230px; overflow:hidden; border-bottom:1px solid #e0e0e0;
}
.khung-phai-tren img
{
width:210px; height:230px;
}
.khung-phai-content
{
height:64px; width:200px; overflow:hidden; background:rgba(0,0,0,0.4); margin-top:-80px; z-index:0; position:relative; margin-left:0px; padding-top:7px; padding-left:10px; padding-right:10px; border-left:4px solid #7CBB00;
}
.khung-phai-content a
{
background:#7CBB00;padding:5px; line-height:30px; color:white; font-weight:200; text-transform:uppercase; font-size:12px; text-decoration:none !important;
}
.khung-phai-content a:hover
{
color:white!important;
}
.khung-phai-duoi
{
padding-left:0px;border-right:1px solid #7CBB00; border-bottom:1px solid #7CBB00; width:209px; height:138px; overflow:hidden;
} Bước 2: Tương tự tìm </head> và paste đoạn code sau vào trước </head><!--JS SLIDER -->
 <script>
      //<![CDATA[
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 slidesharestyle1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
document.write('');
   for (var i = 0; i < numposts; 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="'+cmcolor+'">('+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 = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
if ((i == 0)) {
    var trtd = '<div class="khungslideshare-trai"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khungslideshare-trai-opa"><div class="khungslideshare-opa1"><a href="' + posturl + '" target ="_top">' + posttitle + '</a><a href="' + posturl + '" target ="_top">...</a></div><div class="khungslideshare-trai-content">' + removeHtmlTag(postcontent, 70) + '</div></div></div>';
    document.write(trtd);
}
if (i == 1) {
    var trtd = '<div class="khungslideshare-giua"><div class="khungslideshare-giua1"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khung-giua1-trong"><a href="' + posturl + '" target ="_top">' + posttitle + '</a> </div></div>';
    document.write(trtd);
}
if (i == 2) {
    var trtd = '<div class="khungslideshare-giua1"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khung-giua1-trong"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></div></div></div>';
    document.write(trtd);
}
if (i == 3) {
    var trtd = '<div class="khungslideshare-phai"><div class="khung-phai-tren"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khung-phai-content"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></div></div>';
    document.write(trtd);
}
if (i == 4) {
    var trtd = '<div class="khung-phai-duoi"><div class="style-slideshare1"><a href="' + posturl + '" target ="_top">' + posttitle + '</a>';
    document.write(trtd);
}
if (i == 5) {
    var trtd = '<a href="' + posturl + '" target ="_top">' + posttitle + '</a>';
    document.write(trtd);
}
if (i == 6) {
    var trtd = '<a href="' + posturl + '" target ="_top">' + posttitle + '</a></div></div></div>';
    document.write(trtd);
}
 j++;
}
document.write('');
}
//]]>
</script>
<!--END--> Bước 3: Bạn chèn đoạn code dưới đây vào sau thẻ <body> chèn vào vị trí bạn muốn hiển thị (Ví dụ ở dưới id Menu ), hoặc có thể cho vào 1 widget bất kỳ mà bạn muốn hiển thị <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <div class='khungslideshare'>
<script type='text/javascript'>
                        document.write(rdlabels[index]);
                      </script>
                      <script language='JavaScript'>
                        imgr = new Array();
                        imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndgALM7vNV2KME3EKsQRc_gSjEseRKmTkOLFoLRj5TQ8oJzhwc9YhSJqJlwEAZzI8z1Z18BLw6SGN_WmwV_TUrcSxVq6RffbyLwDnGsz1Js_hKkDEHKBNI9FAo4Ercj2-QSFnD7oF7dw/&quot;;
                        showRandomImg = true;
                        aBold = false;
                        summaryPost = 0; //số ký tự của bài viết hiển thị (bài tóm tắt)
                        sumPost = 0;
                        numposts = 7; //số bài được hiển thị
                        label = &quot;Đời-sống&quot;;
                      </script>
                      <script src='http://www.share123.vn/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=slidesharestyle1' type='text/javascript'/>
</div>
     </b:if> Lưu lại là xong .
Ở đây bạn nào không muốn hiển thị bài mới cho toàn trang blog mà muốn hiển thị cho một nhãn bất kỳ thì tùy chỉnh thế này đoạn script thành thế này:  <script src='http://www.share123.vn/feeds/posts/default/-/nhãn muốn hiển thị?orderby=updated&amp;alt=json-in-script&amp;callback=slidesharestyle1' type='text/javascript'/> Thay Share123.vn thành link blog của bạn.
Chúc bạn thành công
Xem Thêm :
Share this product :
Nhãn:

Đăng nhận xét


Địa chỉ: Số 12A, lô HH04, Khu Đô Thị Việt Hưng, Long Biên, HN
Hotline: 0988 227 905 - Email: nguyenhuytap@gmail.com
Copyright © 2013. Share123.vn - Kho giao diện web đẹp - All Rights Reserved
Proudly powered by Share123.vn