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

Thứ Năm, 19 tháng 9, 2013

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

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/AVvXsEhZnO5kWqgvRDb97A2xu3IC1K10t9Fr7J-cYhxqW5eACVrfWWhq8jqyM-tlzGPf7NrpkvFhpWxA2M_R5KywpVnAE9cdxPgrzgfgKcq1ZbBOniH5XEiI0ijqcww1bmyZvTF2mG3Up_Y8Z4AG/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/AVvXsEiq9FE1GRc6xcO-OYt1MAH6NuJb74muu9pxY4cslGr9Xushz9QCwpQ7hbZiucMvPbYZhJdNj6YQTaiqe0XlsFY9a9KI6fmc7H0UA3Ke9AJOdKdFMsM1BLi015xbhrzgs9WZli_iq69g3DHI/&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;Thủ.Thuật.Blogspot&quot;;
                      </script>
                      <script src='http://www.vietcons.info/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.vietcons.info/feeds/posts/default/-/nhãn muốn hiển thị?orderby=updated&amp;alt=json-in-script&amp;callback=slidesharestyle1' type='text/javascript'/>

Bước 4 : Chúc Bạn Thành Công.

Share 123.

PhumyGroup.com

Thứ Năm, 19 tháng 9, 2013

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:

Đăng nhận xét