21:00 - 17/06/2013

Tạo Slide bài viết mới cho blogspot phong cách lạ cho blogspot/blogger

    [tintuc]
    Hôm nay Hồ Hoàng Thái IT HUBT sẽ chia sẻ cho các bạn cách tạo 1 Slide bài viết mới nhất cho blogspot
    Cái này dc chia sẻ và test trên chính http://hohoangthai.cntt.in
    Nên bạn đọc có thể xem trước.


    Cách thực hiện: Rất đơn giản
    Thêm 1 widget HTML/Javascript và coppy đoạn code bên dưới vào là đã ok rồi
    Chú ý: thay địa chỉ và thông số màu đỏ bên dưới cho phù hợp với Web của bạn nhé


    <div align="left">
    <style type="text/css">
    #slidearea {
    height: 230px;
    overflow: hidden;
    margin: 0px 00px 0 0px;
    position: relative;
    width: 520px;
    background: #810302;
    }
    #gallerycover {
    overflow: hidden;
    width: 520px;
    padding-top: 10px;
    }
    .mygallery {
    overflow: hidden;
    visibility: visible;
    position: relative; z-index: 2;
    left: 0px;
    width: 900px;
    }
    .mygallery ul {
    margin:0;
    padding:0;
    position: relative;
    list-style-type: none;
    z-index: 1;
    width: 2700px;
    left: -1620px;
    }
    .mygallery ul li {
    overflow: hidden;
    float: right;
    width: 180px;
    height: 210px;
    }
    .mytext {
    position: relative;
    margin: 0 5px 0 5px;
    width: 170px;
    height: 210px;
    display: inline;
    float: left;
    color: #C4C4C4;
    }
    .mytext p {
    padding: 0 0;
    font-size: 12px;
    line-height: 20px;
    width: 170px;
    }
    .mytext h2 {
    padding: 5px 0;
    color: black;
    width: 170px;
    font-size: 14px;
    font-weight: bold;
    }
    .mytext h2 a:link, .mytext h2 a:visited {
    color: #E6EE08;
    text-decoration: none;
    outline: none;
    }
    .mytext h2 a:hover {color:#888;}
    img.sidim {
    width: 170px;
    height: 100px;
    }
    .prevb {
    float: left;
    width: 15px;
    height: 27px;
    z-index: 200;
    background: url(https://lh3.googleusercontent.com/-Psd66b6X9ec/UPlvQs0LBtI/AAAAAAAAC-M/0O1h_nE37zw/s35/prev%2520%25281%2529%2520copy.png)!important;
    position: absolute;
    left: 5px;
    bottom: 110px;
    }
    .nextb {
    float: right;
    width: 20px;
    height: 35px;
    z-index: 200;
    background: url(https://lh3.googleusercontent.com/-aY2u0peR7YU/UPlvQgRfzMI/AAAAAAAAC-I/nYq2GDeNZMc/s35/next%2520copy.png)!important;
    position: absolute;
    right: 5px;
    bottom: 110px;
    display: block;
    }
    </style>

    <script src="http://hohoangthai12.googlecode.com/files/slide-mygallery.js" type="text/javascript"></script>

    <script stype="text/javascript">
    var $jx = jQuery.noConflict();
    $jx(function() {
    $jx(".mygallery").jCarouselLite({
    btnNext: ".nextb",
    btnPrev: ".prevb",
    visible: 5,
    auto: 3000,
    speed: 1000,
    easing: "backout"
    });
    });
    </script>

    <div id="slidearea">
    <div id="gallerycover">
    <div class="mygallery">
    <ul>
    <script type="text/javascript">
    var mode = "all";
    var g_numposts = 10;
    var g_numcontents = 15;
    var g_label="dien ten nhan cua ban";
    var homepage="http://hohoangthai.blogspot.com";
    </script>

    <script src="http://hohoangthai12.googlecode.com/files/feed-mygallery.js" type="text/javascript"></script>
    </ul>

    <div class="clear"></div>
    </div>
    </div>
    <a class="prevb" href="#"></a>
    <a class="nextb" href="#"></a>
    </div></div>

    [/tintuc]

Bình luận & Góp ý

0 nhận xét:

Đăng nhận xét