Sidebar Các bài viết với CSS và jQuery

Trước đây tôi đã phân bổ cho bài nổi bật như thế này, nhưng được đặt trên đầu trang của bài viết. Trong khi các bài đặc trưng là phải được đặt trên thanh bên. 
Các kịch bản mà tôi sử dụng trên một hơi khác nhau để nó có thể được sử dụng trên thanh bên. . Bởi vì thường khi được đặt trên thanh bên không chỉ dành cho các bài báo gần đây, nhưng cũng đến nhãn đặc biệt 
Đối với những người bạn của những người quan tâm để cài đặt một blog bạn có thể làm theo các bước sau:

Thêm tiện ích HTML và script Các bài viết

1. Trên bảng điều khiển chọn Layout / Layout và sau đó nhấn vào Add a Gadget mà tồn tại trong sidebar
2. Sau đó di chuyển xuống để tìm các HTML / JavaScript và nhấp vào nút thêm góc hiện tại
3. Sau đó, Nhập đoạn mã sau:
   

   <style scoped="" type="text/css">
   ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
   ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
   ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
   ul.rcentside{width:100%;height:500px}
   ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
   ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
   ul.rcentside img{border:0;width:100%;height:100%}
   ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
   ul.rcentside li:nth-child(2){left:0;top:50%}
   ul.rcentside li:nth-child(3){left:50.5%;top:50%}
   ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
   ul.rcentside  .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
   ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZTMokPkQlE-Iv0Wa2vgFTU3tuCqR5GWu8ctZdHSaRyc3YhsuTsKAc1Kl2M2Nnp2hCDL5Q0YNyedyYLvqoaJ4Nais2-6SJ_pqVxgG0fMXy12xuaXiJXaJeImoLfmnZY4ltGNfWdmsPPE/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
   ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
   ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
   ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
   ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
   ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
   ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
   ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
   .buttons{margin:5px 0 0}
   .buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
   .buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
   .buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
   </style>
   <div id="featuredpostside"></div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
   <script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>
   <script type='text/javascript'>
   //<![CDATA[
   FeaturedPostSide({
   blogURL "http://www.veggiesnfruitsjuiceplus.com/"
   MaxPost:8,
   idcontaint:"#featuredpostside",
   ImageSize:300,
   interval:5000,
   autoplay:true,
   tagName:false
   });
   //]]>
   </script>

   NB: On line 29 là liên kết jQuery thư viện script. Nếu có một mẫu hiện có xin vui lòng xóa mã này.Bởi vì việc lắp đặt nhiều hơn 1 jQuery thư viện có thể thực hiện sai sót.
4. Nhấn Save

Tùy chọn

Miêu tả

blogURL

Điền với link blog của bạn ví dụ như http:// www.veggiesnfruitsjuiceplus.com/

MaxPost

Số Maksumal của bài viết / bài viết mà bạn muốn hiển thị

idcontaint

ID sẽ hiển thị một slideshow

ImageSize

kích thước của hình ảnh bạn muốn hiển thị

khoảng thời gian

Hiện doanh thu của các slide. đơn vị trong mili giây

autoplay

Nếu bạn muốn hiển thị các slide mà di chuyển tự động: tùy chọn để đúng hay sai

pBlank

Hình ảnh sao lưu nếu bài viết không có bản vẽ

MonthNames

Viết tên của tháng. Mặc định như thế này: MonthNames: ["January", "tháng hai", "Mar", "Tháng tư", "May", "June", "Tháng bảy", "Tháng Tám", "September", "Tháng Mười", "November" "Tháng mười hai"]

TagName

Nếu bạn muốn hiển thị bài viết dựa trên các thẻ / nhãn, ví dụ, các tag bloggersau đó được viết như thế này: tagname: "blogger"