Các bài nổi bật với CSS và jQuery

Thiết kế hấp dẫn trên blog có thể làm cho người đọc cảm thấy thoải mái trong việc thưởng thức đọc bạn phục vụ. Nhiều blogger để thêm tính năng cho blog của mình. Có những tính năng thường được đặc trưng bài tính năng. 
Cũng thời gian này tôi sẽ chia sẻ bài nổi bật trong đó có một cái nhìn khác hơn bình thường. Điều này đặc trưng màn hình hiển thị của CSS pseudo thứ n-con để thiết lập chiều rộng của mỗi zoom. 
Các bài như tôi áp dụng các mẫu MyTimeLine. Khái niệm này như là một hình ảnh đặc trưng bài barikut:

Đố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:

Hiển thị Thêm một tiện ích trên blog bài viết

Nếu blog của bạn đã không xuất hiện nút / ghi thêm các tiện ích trên Blog bài viết theo các bước sau để hiển thị nó:

1. Trên bảng điều khiển chọn Template và sau đó nhấp vào Chỉnh sửa HTML
2. Sau đó tìm các mã <b: section class = 'chính' id = 'chính' showaddelement = "no"> sau đó thay thế fox showaddelement là yes để nó trở nên như thế này <b: section class = 'chính' id = 'chính' showaddelement = ' yes '> 
   NB: Để tạo thuận lợi cho báo chí tìm kiếm Ctrl + F trên bàn phím của bạn và viết <b: section class =' chính 'id =' chính 'showaddelement =' no '>.
3. Nhấn Save

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 trên Blog Post Area
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">
   #slides * {- MOZ-box-sizing: hộp biên giới; -webkit-box-sizing: hộp biên giới; hộp-sizing: hộp khẩu}
   #slides ul, # slide li {padding: 0; margin: 0; list-style: none; position: relative}
   #slides ul {height: 250px}
   li #slides {width: 49,9%; height: 100%; position: absolute; display: none}
   #slides li: nth-con (1), #slides li: nth-con (2), #slides li: nth-con (3), #slides li: nth-con (4) {display: block}
   #slides li: nth-con (1) {left: 0; top: 0}
   #slides li: nth-con (2) {left: 50,1%; width: 24,8%; chiều cao: 49,8%}
   #slides li: nth-con (3) {left: 75,2%; width: 24,8%; chiều cao: 49,8%}
   #slides li: nth-con (4) {left: 50,1%; top: 50,2%; chiều cao: 49,9%}
   #slides một {display: block; width: 100%; height: 100%; overflow: hidden}
   #slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
   #slides 50%; background-repeat: repeat-x; border: rắn # 0097BD 4px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px}
   #slides h4 {position: absolute; bottom: 30px; margin: 0; font-size: 18px; font-family: Georgia, Times, "Times New Roman"; left: 0; padding: 0 10px; color: white; z Index: 3; line-height: 20px; font-weight: normal}
   #slides li: nth-con (2) h4, # slide li: nth-con (3) h4 {font-size: 13px; line-height: 15px}
   #slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
   #slides li: nth-con (2) .autname, # slide li: nth-con (3) .autname {display: none}
   #slides .overlayx, # slide li {-webkit-chuyển tiếp: tất cả .4s dễ dàng-trong-ra; -moz-chuyển tiếp: tất cả .4s dễ dàng-trong-ra; -o-chuyển tiếp: tất cả .4s dễ dàng-trong-out ; -ms-chuyển tiếp: tất cả .4s dễ dàng-trong-ra; chuyển tiếp: tất cả .4s dễ dàng-trong-out}
   #slides li: hover {.overlayx -ms-filter: "progid: DXImageTransform.Microsoft Alpha (Opacity = 10)."; filter: alpha (opacity = 10); - KHTML-opacity: 0.1; -moz-opacity: 0.1 ; opacity: 0.1}
   #buttons {margin: 5px 0 0}
   #buttons một {display: inline-block; văn bản indent: -9999px; width: 15px; height: 25px; position: relative}
   #buttons một :: before {content: ""; width: 0; height: 0; border-width: 8px 7px; border-style: solid; border-color: transparent minh bạch minh bạch # 535 353; position: absolute; top: 50 %; margin-top: -8px; margin-left: -10px; left: 50%}
   #buttons một # nextx :: trước khi {border-color: bạch bạch bạch # 535 353; margin-left: -3px}
   phương tiện truyền thông chỉ có màn hình và (max-width: 600px) {
     #slides ul {height: 600px}
     #slides li: nth-con (1) {width: 100%; chiều cao: 49,8%}
     #slides li: nth-con (2) {top: 50,2%; chiều cao: 24,8%; left: 0; width: 49,8%}
     #slides li: nth-con (3) {left: 50,2%; top: 50,2%; width: 49,8%; chiều cao: 24,8%}
     #slides li: nth-con (4) {left: 0; top: 75,3%; chiều cao: 24,8%; width: 100%}
   }
   </ Style>
   <div id = "featuredpost"> </ 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/featuredpost.min.js" type = "text / javascript"> </ script>
   <script type = 'text / javascript'>
   // <! [CDATA [
   $ (Document) .ready (function () {
   FeaturedPost ({
   blogURL "http://mkr-site.blogspot.com"
   MaxPost: 8
   idcontaint: "# featuredpost"
   ImageSize: 300,
   khoảng: 5000,
   autoplay: đúng,
   TagName: false
   });
   });
   //]]>
   </ Script>

   NB: On line 24 là mã cho đáp ứng. Mã đường khi màn hình hiển thị màn hình nhỏ hơn 600px. nếu bạn không muốn bao gồm các chức năng đáp ứng vui lòng loại bỏ các dòng mã 24-30. 
   Trên dòng 33 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ể làm cho các lỗi
4. Nhấn Save

Gadget quấn Conditional HTML Tag

Nếu các bước trên là hơn bây giờ tiện ích giai đoạn đóng gói với các thẻ có điều kiện để quản lý bất cứ nơi nào, trình chiếu này sẽ được hiển thị. 
Ví dụ, một tiện ích mà chỉ muốn thể hiện sân trước / hiên như sau

1. Trên bảng điều khiển chọn Template và sau đó nhấp vào Chỉnh sửa HTML và kiểm tra trên Expand Widget Templates
2. Sau đó tìm các mã <b: section class = 'chính' id = 'chính' showaddelement = 'yes'>, có trước đây đã được thêm vào các widget HTML nó sẽ hiển thị các loại phụ tùng của HTML với id HTMLxx. (Xx: widget số HTML) 
   Ví dụ tùng HTML với id HTML5 Tôi sẽ thêm tags kiện thì chỉ có trên trang đầu / hiên 
   Sau đó, nó sẽ được như thế này:
   

   <b: widget id = 'HTML5'Đã bị khoá =' false 'title =' 'type =' HTML '>
   <b: includable id = 'chính'>
   <b: if cond = 'data: blog.url == các dữ liệu: blog.homepageUrl'> 
     <! - Chỉ hiển thị tiêu đề nếu đó là một không trống ->
     <b: if cond = 'data: các title = & quot; & quot;'>
       <h2 class = "title"> <data: Tiêu đề /> </ h2>
     </ B: if>
     <div class = 'widget nội dung ">
       <data: Nội dung />
     </ Div>
   
     <b: include name = 'QuickEdit' />
   </ B: if>
   </ B: includable>
   </ B: widget>

3. 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: //mkr-site.blogspot.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"