Slide đẹp cho blogger làm bằng jquery | Diễn đàn thủ thuật | Thủ thuật tin học |Forum chia sẻ và trao đổi thủ thuật

Slide đẹp cho blogger làm bằng jquery

Thảo luận trong 'Thảo luận và chia sẻ lập trình' bắt đầu bởi diendanthuthuat, 2 Tháng tư 2015.

Lượt xem: 198

  1. Đăng ngày 2 Tháng tư 2015 #1

    diendanthuthuat

    Administrator

    Số bài viết: 1,354
    Đã được thích: 4
    Điểm thành tích: 60
    Giới tính: Nam
    Cách làm Slide đẹp cho blogger,Làm side blogspot bằng Jquery - Để trang trí blogger cũng khá là đẹp, nội dung của đoạn code này là mình sưu tầm trên mạng nếu các bạn có thắc mắc gì về code thì mình không hỗ trợ nhé, và dưới đây là các sử dụng.
    [IMG]
    Các bạn chỉ cần paste đoạn code sau vào vị trí muốn hiển thị (đối với Blogger thì các bạn tạo 1 tiện ích HTML/JavaScript rồi paste code vào):
    HTML:
    <script src='https://dl.dropboxusercontent.com/s/oh0lfkwxmyysjwi/dt-jquery-latest.js?dl=1&token_hash=AAFpXu6eB7mglmP90ExvK8wdehlml72XBazpBf7hFizb8Q'></script>
    <script src='https://dl.dropboxusercontent.com/s/4mcw85gb2zqsfm3/dt-slider-jquery.js?dl=1&token_hash=AAFp-t9rXALpZ-lS5o_X6v8GktDsSAFS74Od4paSQTpoWA' type='text/javascript'></script>
    <script src='https://dl.dropboxusercontent.com/s/iz64wp1bd66lpea/mycarousel.js?dl=1&token_hash=AAEy02HniPBcp0cJZ4ULRoqHscx9T-AeTcjdkHcq35ZIFw' type='text/javascript'></script>
      <style>
     
    .jcarousel-skin-tango .jcarousel-container {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      border-radius: 10px;
        background: #F0F6F9;
     
    }
     
    .jcarousel-skin-tango .jcarousel-direction-rtl {
        direction: rtl;
    }
     
    .jcarousel-skin-tango .jcarousel-container-horizontal {
      width:425px;
        padding: 20px 40px;
    }
     
    .jcarousel-skin-tango .jcarousel-container-vertical {
        width: 75px;
        height: 245px;
        padding: 40px 20px;
    }
     
    .jcarousel-skin-tango .jcarousel-clip {
        overflow: hidden;
    }
     
    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width:  425px;
        height: 75px;
    }
     
    .jcarousel-skin-tango .jcarousel-clip-vertical {
        width:  75px;
        height: 245px;
    }
     
    .jcarousel-skin-tango .jcarousel-item {
        width: 75px;
        height: 75px;
    }
     
    .jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-left: 0;
        margin-right: 10px;
    }
     
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
        margin-left: 10px;
        margin-right: 0;
    }
     
    .jcarousel-skin-tango .jcarousel-item-vertical {
        margin-bottom: 10px;
    }
     
    .jcarousel-skin-tango .jcarousel-item-placeholder {
        background: #fff;
        color: #000;
    }
     
    /**
    *  Horizontal Buttons
    */
    .jcarousel-skin-tango .jcarousel-next-horizontal {
        position: absolute;
        top: 43px;
        right: 5px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://2.bp.blogspot.com/-TbG7ZYx5mkc/T-7bOLnpI0I/AAAAAAAABEc/B4a5RpozhZg/s660/next-horizontal.png) no-repeat 0 0;
    }
     
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
        left: 5px;
        right: auto;
        background-image: url(http://2.bp.blogspot.com/-TbG7ZYx5mkc/T-7bOLnpI0I/AAAAAAAABEc/B4a5RpozhZg/s660/next-horizontal.png);
    }
     
    .jcarousel-skin-tango .jcarousel-next-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
        background-position: -32px 0;
    }
     
    .jcarousel-skin-tango .jcarousel-next-horizontal:active {
        background-position: -64px 0;
    }
     
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }
     
    .jcarousel-skin-tango .jcarousel-prev-horizontal {
        position: absolute;
        top: 43px;
        left: 5px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://4.bp.blogspot.com/-7wZdaq0F550/T-7baFpHfRI/AAAAAAAABEo/G3KQsNb2mCA/s660/prev-horizontal.png) no-repeat 0 0;
    }
     
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
        left: auto;
        right: 5px;
        background-image: url(http://2.bp.blogspot.com/-TbG7ZYx5mkc/T-7bOLnpI0I/AAAAAAAABEc/B4a5RpozhZg/s660/next-horizontal.png);
    }
     
    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
        background-position: -32px 0;
    }
     
    .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
        background-position: -64px 0;
    }
     
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }
     
    /**
    *  Vertical Buttons
    */
    .jcarousel-skin-tango .jcarousel-next-vertical {
        position: absolute;
        bottom: 5px;
        left: 43px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://2.bp.blogspot.com/-TbG7ZYx5mkc/T-7bOLnpI0I/AAAAAAAABEc/B4a5RpozhZg/s660/next-horizontal.png) no-repeat 0 0;
    }
     
    .jcarousel-skin-tango .jcarousel-next-vertical:hover,
    .jcarousel-skin-tango .jcarousel-next-vertical:focus {
        background-position: 0 -32px;
    }
     
    .jcarousel-skin-tango .jcarousel-next-vertical:active {
        background-position: 0 -64px;
    }
     
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
        cursor: default;
        background-position: 0 -96px;
    }
     
    .jcarousel-skin-tango .jcarousel-prev-vertical {
        position: absolute;
        top: 5px;
        left: 43px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://4.bp.blogspot.com/-7wZdaq0F550/T-7baFpHfRI/AAAAAAAABEo/G3KQsNb2mCA/s660/prev-horizontal.png) no-repeat 0 0;
    }
     
    .jcarousel-skin-tango .jcarousel-prev-vertical:hover,
    .jcarousel-skin-tango .jcarousel-prev-vertical:focus {
        background-position: 0 -32px;
    }
     
    .jcarousel-skin-tango .jcarousel-prev-vertical:active {
        background-position: 0 -64px;
    }
     
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
        cursor: default;
        background-position: 0 -96px;
    }
     
      </style>
     
      <ul id="mycarousel">
     
    &lt;li&gt;&lt;a href="<b>Page URL</b>"&gt;&lt;img src="<b>IMAGE URL</b>" width="75" height="75" alt="<b>Description</b>" /&gt;&lt;/a&gt;&lt;/li&gt;
     
    &lt;li&gt;&lt;a href="<b>Page URL</b>"&gt;&lt;img src="<b>IMAGE URL</b>" width="75" height="75" alt="<b>Description</b>" /&gt;&lt;/a&gt;&lt;/li&gt;
     
    &lt;li&gt;&lt;a href="<b>Page URL</b>"&gt;&lt;img src="<b>IMAGE URL</b>" width="75" height="75" alt="<b>Description</b>" /&gt;&lt;/a&gt;&lt;/li&gt;
     
    &lt;li&gt;&lt;a href="<b>Page URL</b>"&gt;&lt;img src="<b>IMAGE URL</b>" width="75" height="75" alt="<b>Description</b>" /&gt;&lt;/a&gt;&lt;/li&gt;
     
    &lt;li&gt;&lt;a href="<b>Page URL</b>"&gt;&lt;img src="<b>IMAGE URL</b>" width="75" height="75" alt="<b>Description</b>" /&gt;&lt;/a&gt;&lt;/li&gt;
     
      &lt;/ul&gt;
    Trong đó :
    Trong đó:
    Page URL: Link sẽ được trỏ đến khi click vào ảnh.
    IMAGE URL: Link ảnh.
    Description: Mô tả ảnh.
    425px: Chiều rộng widget – các bạn có thể thay đổi cho phù hợp với trang.
    Để thêm một ảnh, các bạn chỉ cần thêm đoạn code sau vào trước dòng màu xanh và làm tương tự:
    <li><a href=”Page URL“><img src=”IMAGE URL” width=”75″ height=”75″ alt=”Description” /></a></li>

    Liên kết : Mua cặp da nam công sở mẫu mã đẹp tại Hà Nội

Chia sẻ trang này