Thủ thuật blog sẽ cung cấp cho bạn thêm một hướng dẫn để thực hiện thanh trượt hình ảnh tự động hoặc hình ảnh theo chiều dọc. Slide đơn giản hình ảnh tự động trượt dọc này phù hợp cho blog phim.Trước đây, tôi xin lỗi không thể trả lời tất cả các câu hỏi mà đi bởi vì rất nhiều các hoạt động bên ngoài tôi phải làm. Và tất nhiên tôi cũng đã không thể đáp ứng nhu cầu của những người bạn muốn một mẫu cụ thể hoặc thay đổi mẫu hiện có thành một bản mẫu đó là SEO thân thiện và HTML hợp lệ.
Thanh trượt này là rất đơn giản, cũng như trước đó trượt thanh trượt , thanh trượt ngay cả khi làm việc này tự động dựa trên các bài viết mới nhất và các chuyên mục cụ thể. Để biết thêm chi tiết xin vui lòng click vào giới thiệu ở trên, tôi đặt các thanh trượt trên bên phải có chiều rộng của 300px . Cái nhìn thanh trượt này trông giống như một thanh trượt mà tồn tại trong các mẫu từ thiết kế Ấn Độ như Lasantha sân bay ,Lansindu , Sameera và những người khác, mà còn bao gồm hình ảnh và URL bằng tay. Nếu người dùng của bạn làm mẫu của họ, và muốn thay thế thanh trượt hoạt động tự động, xin vui lòng tham khảo các bước sau đây:
- Sau khi đăng nhập vào Blogger , chọn blog bạn muốn thêm thanh trượt này.
- Sau đó đi đến mẫu >> Chỉnh sửa HTML (đánh dấu vào ô mở rộng mẫu tiện ích )
- Sao lưu hoặc lưu trữ mẫu đầu tiên, nếu bất cứ lúc nào các lỗi có thể được trở lại hình dạng ban đầu của nó.
- Click "Open" và nhập mã sau đây trên mã ]]> :
/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjmEV3PA_OhrtEMBobwsw9PMTwPQaGdc17ClF8DaPAlvMqDFEhYr41Fbs-mYHCMS-EeGxUVZkKAkuV5fAZCLzT2cxo7-tfnplSgxV7WrFatqxVNvOB9NXtBprdF-L9ExKlXujrMAbkHM/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQ5ycsFqflPWGwfi7qanQQx3XW8ILZkuF4kNYpm8uTHfqAofPZEmWUsUWgvYZGG8rMEPkXfS6dxWZIGf8c9En9vS5kp4mB0hSFnhQHP3_KedbATW3khq1rqncCGPNl8FIJIMYXDemp3k/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8wiBNsbpYdgJzaOvUCFsMwfiGW1srqcgtudOtJTEOVHz5nILGIELTPsG9J2ZrqGTV-apiimnxFhZyYs5WfBNb_3iCYdLgddrslm09nG6936Q0usSLqftJONiizeTTkwXa_nDIqfl2k_y8/s1600/uj-opacity-40.png);padding:5px 10px; }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}
- Mã màu đỏ là kích thước của thanh trượt ở trên, cho chiều rộng 300px và chiều cao 400px . Lưu ý tất cả và bạn phải điều chỉnh kích thước của các bên trên mẫu bạn đang sử dụng.
- Vẫn còn trong Edit HTML , vào đoạn mã script sau đây trên > :
- Lưu ý các mã kịch bản đỏ ở đầu trang, nếu mẫu bạn đã cài đặt kịch bản phim nào, các mã kịch bản nên không được bao gồm, chỉ có một jquery hiện trên một mẫu nếu có hai hoặc nhiều hơn sẽ đụng độ và một trong những chức năng của nó không phải là cách .. numposts : 6; là số lượng bài viết xuất hiện trên thanh trượt
- Bây giờ bạn muốn đặt nó, nơi các thanh trượt, nếu bạn muốn đặt trong thanh bên phải ở phía trên như thể hiện trong bản demo. Tìm mã
No comments:
Post a Comment