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.

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/AVvXsEjLfctIxgMRPJKvGLdg3JKNSWEyF4qA4sew-dfNcolsZNVI40vbWN13VlbmnxGmURgk6yESmyCgNORspBAVOSPuopzhYFmCE0_iYq6OkhJ7J6f_7NPpoon6-s6b8UFPnv9nrsCg86ebnDyk/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/AVvXsEhTcvtkVex4IZYAhcBRYgDux4wwVPSjxcWYsMSHjKlp_tp3g1vAMj0c9hBssKmz2GXgYftdwVKCfkT0AGR8sCa7c5zH73QkSTOOvHE7bHChWRWfPSIEvIysS6od4hdXXS3_FCKT5nqsmoj6/&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

Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free

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

Không có nhận xét nào:

Tag liên kết

Xem nhiều

Bài mới nhất

Blog

Hướng dẫn quản trị

Mẫu blog mới

Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free

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

Bài viết liên quan:

Không có nhận xét nào:

Tag liên kết

Xem nhiều

Bài mới nhất

Blog

Hướng dẫn quản trị

Mẫu blog mới