Đăng bởi Huy Tập lúc 28/07/2013 0

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(http://2.bp.blogspot.com/-LCwoDTIMkV0/UZH_sLftbUI/AAAAAAAAVHc/NrO7qV4i1GM/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;http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg&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

Tags:

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

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Người theo dõi

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn
Hoc Wordpress Online