jQuery Smooth SlideShow cho Blogger

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 →

Tweet

FOLLOW US →

SHARE 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é..