Hướng dẫn làm Slide đẹp cho blogger làm bằng jquery

posted in: Thủ thuật Blogspot | 0

Có rất nhiều bạn đam mê làm Blog nhằm chia sẻ những kiến thức, tâm sự, thủ thuật của mình tới bạn đọc hoặc cũng có một số bạn làm việc trực tiếp trên blog do đặc thù của công việc. Dù với mục đích nào đi chăng nữa thì bạn vẫn luôn muốn tìm và edit cho Blog của mình thật bắt mắt, khoa học và hướng tới người dùng. Trong bài viết này chúng tôi sẽ chia sẻ tới bạn đọc cách làm Slide đẹp cho blogger làm bằng jquery cực đẹp, cực độc và ấn tượng.

Để 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.

<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(https://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(https://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(https://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(https://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(https://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(https://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 đó:

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>

>>> Gợi ý Google:
tạo slide ảnh có nhạc
tạo slide ảnh trực tuyến
tạo slide ảnh mien phi
tạo slide ảnh chuyên nghiệp
cách tạo slide ảnh
phần mềm tạo slide ảnh
tạo slide ảnh bằng jquery
tạo slide ảnh trong powerpoint

Bình luận