Coinslider một slideshow làm với jQuery rằng có một hiệu ứng chuyển cảnh thú vị. Hiệu ứng chuyển tiếp mà tồn tại trong slideshow này cụ thể là xoáy, mưa, thẳng. Bởi vì hiệu quả là không quá nhiều mà slideshow này chỉ có kích thước (12KB).
Nhìn vào cấu trúc của HTML để tạo slideshow này không phải là quá phức tạp. Vì vậy, tôi đã cố gắng để làm cho nó trong autoslideshow phiên bản (kết hợp với các blogger thức ăn). Tốt cho những người bạn của những người muốn cài đặt một blog, bạn có thể làm theo các bước dưới đây. Trong khi quan tâm đến phiên bản hướng dẫn có thể được đọc diwebsitenya workshop.rs.
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ó:
- Trên bảng điều khiển chọn Template và sau đó nhấp vào Chỉnh sửa HTML
- 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 '>. - Nhấn Save
Thêm tiện ích HTML và script CoinSlider Slideshow
- 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
- 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
- Sau đó, Nhập đoạn mã sau:
NB: On line 17 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<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
var AutoCoinConfig = {
url_blog: "http://mkr-site.blogspot.com",
MaxPost: 7,
cmtext: "Komentar",
MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
NoCmtext : "Belum Ada Komentar",
imageSize :500,
SumChars : 100,
tagName:false,
width: 500,
height: 250,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true,
prevText: 'prev',
nextText: 'next'
};
</script>
<script src="https://ivyth.googlecode.com/svn/js/autocoin.min.js" type="text/javascript"></script> - 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
- 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
- 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' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable></b:widget>> - Nhấn Save
0 on: "Cài đặt Auto Slideshow CoinSlider trong Blogger / Blogspot"