Cài đặt Auto Slideshow CoinSlider trong Blogger / Blogspot - Blogger Tips, Widget, Template


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

Thêm các tiện ích HTML Blog bài viết ở trên

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 CoinSlider Slideshow

  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">
    #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>
    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
  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' 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 != &quot;&quot;'>
        <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>>
  3. Nhấn Save

Tùy chọn
Miêu tả
url_blog
Đ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ị
cmtext
Nếu có một bài viết bình luận
ImageSize
kích thước của hình ảnh bạn muốn hiển thị
SumChars
Số lượng các ký tự mà bạn muốn xuất hiện trong phần tóm tắt
NoCmtext
Bài viết nếu không có ý kiến.
pBlank
Hình ảnh sao lưu nếu bài viết không có bản vẽ
MonthNames
Các định dạng của văn bản trong tên của tháng.
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"
width
Chiều rộng của các slideshow.
height
chiều cao của các slideshow.
SPW
Số lượng các hộp vào chiều rộng (số cột)
SPH
Số lượng các hộp trên cao (số lượng tuyệt đối của các hàng)
delay
Slide thay đổi thời gian
sDelay
thay đổi thời gian để các hộp trên slide có hiệu lực (SPW và SPH)
opacity
Mức Tranfaransi (0-1)
titleSpeed
Thời gian cho các hiệu ứng trên các tiêu đề mục
effect
Loại có hiệu lực tại thời điểm chuyển các slide. Tùy chọn: "ngẫu nhiên", "xoáy", "mưa", "thẳng".
navigation
Nếu bạn muốn hiển thị các giá trị chuyển hướng: đúng hay sai
links
Nếu bạn muốn kích hoạt các liên kết đến hình ảnh. Giá trị: đúng hay sai
hoverPause
Dừng trượt nếu không có con chuột vào nó.
prevText
Bài viết trước
nextText
Bài viết kế tiếp

1 comments:

 
Top