jQuery Smooth SlideShow cho Blogger

Thứ Tư, 2 tháng 12, 2015

jQuery Smooth SlideShow cho Blogger

Nguyễn Đạt KhánhThứ Tư, tháng 12 02, 2015 Facebook Comment Không có nhận xét nào

jQuery Smooth SlideShow như một bộ trình diễn các hình ảnh sưu tập trên một khung nhìn, tất cả các hình ảnh lần lượt được Slide trong bộ sưu tập. Trình thiết kế jQuery cũng rất dễ dàng thực hện với bộ Source Code của My BloggerTrix. Chỉ cần bạn chép vào trong các Widget HTML/JavaScrip, Widget nầy được thiết kế sẳn trong ứng dung Blogger của Google.

Các bước thực hiện như sau:

1. Mỡ ứng dung Blogger trên Google.
2. Chọn vào mục "Layout" .
3. Click Add Gadget và chọn 'HTML/Javascript. Chép dán mã Code sau đây vào khung Text Box..

Bạn có thể thay đổi hình ảnh bằng cách thay đổi các URL của hình ảnh bạn có thể thay đổi mô tả hình ảnh bằng cách thay đổi màu chữ đỏ. Bây giờ bạn Save 'HTML / Javascript'.Bạn đã hoàn thành. Hy vọng điều này jQuery sẽ làm nổi bật SlideShow giúp để cho blog của bạn hấp dẫn hơn.

Trong bài viết này sẽ giải thích làm như thế nào để thêm jQuery slideshow vào trong blogger của bạn. bạn có thể Add slideshow nầy lên tới trên bài viết của bạn.

Demo

Sau đây là các bước thực hiện:

1. Truy cập vào Blogger Account và Click drop down.

2. Vào chọn "Layout" giống như sau.

3. Click Add Gadget và chọn 'HTML/Javascript

4. Chép Source code dưới đây vào trong khung soạn thảo Text của HTML/JavaScrip.

<style>
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
}
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
table {
 border-collapse:separate;
 border-spacing:0;
}
caption, th, td {
 text-align:left;
 font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content:"";
}
blockquote, q {
 quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
 display: block;
}
a, a:visited {
 color:#2d3536;
 text-decoration:none;
 border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
 color:#9e805c;
 text-decoration:none;
}
#slider-wrapper {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcfG1-ldywjZZDHSoJVhb_zLynOurxkGyDBYW-zKY6P3ELFMdIZ-h6NUzWpfwyIgHX0holB5lesSgqlEoPCIO3WqEhdMdDfggP2qNVY9muTyudoB4ZcVQMXVvehFJvsk3sWsLR0-Iq30/s1600/slider.png) no-repeat;
    width:494px;
    height:310px;
    margin:0 auto;
    padding-top:23px;
    margin-top:50px;
}

#slider {
 position:relative;
    width:430px;
    height:250px;
    margin-left:32px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cp4qprb1FBWVgRDYxPKA3DF3zGzuc2I6gR8M_d-df3qBy9-Luzfdg3UZZrTu79QAfaIo44YI4xhkxfslCKHW7OUSSrPbvk5SULVjFxkRWQ0Ecm9_jji6Z0vm61xs9ZsBHL1wf20TTs0/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}
#slider a {
 border:0;
 display:block;
}

.nivo-controlNav {
 position:absolute;
 left:163px;
 bottom:12px;
 background: #000000;
 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 3px;
    border: 2px solid #CCC;
    opacity: 0.7;
    z-index: 99;
 }
 .nivo-controlNav:hover{opacity: 1;}
 
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTX96kW7Amfao6LV3ilDuxcOdoBk8UlES3H2yZdsQieLlQKqeaXvdhTaR-AQ2ZPBaGGRSXbmlm96Z0MGAq_xOd4wlJk-XxZSDxSeKqPgohM3OnDLNkZq85Gb7SHDCUypKNsdrpdjRWWk/s1600/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:0px;
 float:left;
}
.nivo-controlNav a.active {
 background-position:0 -22px;
}

.nivo-directionNav a {
 display:block;
 width:35px;
 height:65px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpY_spLnGhGj_OhtHhmagus0dY0JSLeuZ9h1NHSK9TskTC_25I5djpwnv69lYmTIrmdc_5rYqcOOgkJ2En33Zs326abwUlmwlxS9pXwxMmFm7qt_4UZncpr0iiEXVx7l5y3lo771fklYU/s1600/arrows.png) no-repeat;
 text-indent:-9999px;
 border:0;
}
a.nivo-nextNav {
 background-position:-35px 0;
 right: -40px;
}
a.nivo-nextNav:hover{right: -41px;}

a.nivo-prevNav {
 left:-40px;
}
a.nivo-prevNav:hover{left: -41px;}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
.nivo-directionNav a{top: 40%;}

.clear {
 clear:both;
}
</style>

    <br />
<div id="wrapper">
<div id="slider-wrapper">
<div class="nivoSlider" id="slider">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsXdQP3Mk9CuqX__Tq5doecr0A1a8tPCKWtdp8_FsjaESDJXRH_IKKGZbZ85kRZi75hW0PPCM70nNin3BE8Xs5mS_DDPd1FLd2XwghT0nbC4ck73g8l8TrEODrpxsNv6x17asxMBlEw-k/s1600/btrix-London_Barrier.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtxd_mCR6Xe7hyphenhyphens9BJjS8YIDd41flhKEubrOeqiaGtVWk2DCiO4X4eznjWzxKriMSM7qmBtNRz0Gw31T1GdY5Zrd8uJ7q4X_B7Zbzifb0xwDxBOzS6OYia80SvZM9mv1d2-30JP0v4rY/s1600/btrix-sunset.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhqr-7V_6HSkX1zjAnsTHGmWJqVbJcvha_jYvHmsZkyXeiIqjHecoon8jPcnqBerf42ASBynS8S9xNLUdnrglZvRJRPmZlybjiLWPemefnPlH8o8CC6toRb2shIGnYLPi_-BajH5Jei8/s1600/btrix-car-wallpapers.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7ZLrMZGL4cBK1BykuhPXDDcu4kTHelS6oiQxkJksN8W24vzmLv6Uc9gSNHq44ZqxzTpFfhgaa2j1SIjMqqkOGclViHpNMwErBCwbCm3Q2BLIwNBAED-MzuDfeSkUyqNHQ4QekVi14Zg/s1600/btrix-spring-nature.jpg" />
</div>
</div>
</div>

<script src="http://bloggertrixcode.googlecode.com/files/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://bloggertrixcode.googlecode.com/files/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({directionNavHide:false});
    });
    </script>

Bạn có thể thay địa chỉ URLs cho các Images ở các hàng chữ màu đỏ. Hoàn tất, Save nó lại, thử nghiệm kết quả bằng cách cho Blogspot hoạt động là xong.
Nguồn tham khảo My BloggerTricks

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..

Từ khóa : Blogger Account,

Share:

LIKE and Share this article: :

Nguyễn Đạt Khánh | Thứ Tư, tháng 12 02, 2015 | Thủ thuật Blogger | Widget

Được viết bởi Khánh Nguyễn

Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.

Nơi truy cập vào Nick của Tôi trên mạng: