Code trình diễn ảnh cực đẹp

Hôm nay mình sẽ giới thiệu các bạn một code trình diễn ảnh cực đẹp

Demo
Code
1. Cho code  sau vào thẻ head
<style type="text/css">

.flashclass{ /*sample CSS class added to image slideshow container*/
width: 200px; /*a width should be defined for transition to work*/
border: 5px solid orange;
padding: 5px;
}

.flashclass img{
border-width: 0;
}

</style>

<script type="text/javascript" src="http://bloggiaovienthaibinh.110mb.com/anh3/transitionshow.js"></script>
2. Code sau cho vào thẻ body ( chỗ nào muốn hiển thị)

<script type="text/javascript">

var flashyshow=new flashyslideshow({ //create instance of slideshow
    wrapperid: "myslideshow", //unique ID for this slideshow
    wrapperclass: "flashclass", //desired CSS class for this slideshow
    imagearray: [
        ["1.jpg", "http://webtruonghoc.oni.cc", "_new", "Thủ thuật blog violet."],
        ["2.jpg", "http://webtruonghoc.oni.cc", "", "Thiết kế web trường học?"],
        ["3.jpg", "http://webtruonghoc.oni.cc", "", "Code cho blog."],
        ["4.jpg", "http://webtruonghoc.oni.cc", "", "Hệ thống tra cứu điểm trường học."]
    ],
    pause: 2000, //pause between content change (millisec)
    transduration: 1000 //duration of transition (affects only IE users)
})

</script>

3.HD
- Các bạn thay link ảnh ,link web khi click vào ảnh và lời giới thiệu về ảnh
        ["1.jpg", "http://webtruonghoc.oni.cc", "_new", "Thủ thuật blog violet."],
        ["2.jpg", "http://webtruonghoc.oni.cc", "", "Thiết kế web trường học?"],
        ["3.jpg", "http://webtruonghoc.oni.cc", "", "Code cho blog."],
        ["4.jpg", "http://webtruonghoc.oni.cc", "", "Hệ thống tra cứu điểm trường học."]
-Muốn nhiều ảnh các lặp lại code trên
Chú ý : Với blog violet thì các bạn cho tất  code trên vào khối chức năng là được
Kích thước anhe lên điểu chính cho cùng kích thước

Xem Chi Tiết »

Posted in: Thủ Thuật blogspot

Code trình diễn ảnh tuyệt đẹp cho vào blog

Hôm nay mình post tặng các bạn code trình diễn ảnh rất đẹp

Demo
http://caobang83.webng.com/slides2/

Code
1.Code sau các bạn cho vào thẻ head nhé

<script type="text/javascript" src="http://caobang83.webng.com/slides2/jquery.js"></script>
    <script type="text/javascript" src="http://caobang83.webng.com/slides2/jquery.nivo.slider.pack.js"></script>
    <link rel="stylesheet" href="http://caobang83.webng.com/slides2/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://caobang83.webng.com/slides2/themes/default.css" type="text/css" media="screen" />

    <style>
    .theme-default #slider, .theme-default #slider img
    {
        top:100px;
        left: 20%;
        width:700px; /* Chiều rộng */
        height:300px; /* Chiều cao */
    }
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-weight:inherit;
        font-style:inherit;
        font-size:100%;
        font-family:inherit;
        vertical-align:baseline;
    }
    body {
        line-height:1;
        color:black;
        background:white;
    }
    table {
        border-collapse:separate;
        border-spacing:0;
    }
    caption, th, td {
        text-align:left;
        font-weight:normal;
    }
    body {
    font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
    color:#333;
    background:#eee;
    }
  
    a, a:visited {
        color:blue;
        text-decoration:none;
    }
    a:hover, a:active {
        color:#000;
        text-decoration:none;
    }

    </style>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
        animSpeed: 1000,// Tốc độ trượt ảnh, quy định 1000 = 1giây
        pauseTime: 3000, // Tốc độ chuyển ảnh A sang ảnh B
        startSlide: 2 // Để ảnh số mấy hiển thị đầu tiên, Ảnh số 1 để startSlide: 0
        });
    });
    </script>

2. Code sau các bạn cho vào thẻ body nhé chôc nào muốn hiển thị

<div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_1.jpg" alt="" title="Điền nội dung vào đây 1" /></a>
                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_2.jpg" alt="" title="Điền nội dung vào đây 2" /></a>
                <a href="http://webtruonghoc.oni.cc><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_3.jpg" alt="" title="Điền nội dung vào đây 3" /></a>

                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_4.jpg" alt="" title="Điền nội dung vào đây 4" /></a>
                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_5.jpg" alt="" title="Điền nội dung vào đây 5" /></a>
            </div>
        </div>

3.Hướng dẫn
-Các bạn chỉnh sửa phần in đậm ở code 1 còn lại để nguyên
-Các bạn thay đổi link liên kết ,link ảnh , nội dung ở code 2

Xem Chi Tiết »

Posted in: Thủ Thuật

Hình nền cho từng thành phần của blog

Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).

Template theo mặc định bao gồm 4 thành phần chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả hai), footer (thành phần dưới cùng).

Hình 2. Layout

Hình 1. Mô hình hiển thị

Làm sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com, bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.

A. Thành phần Header
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

B. Thành phần Main
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

C. Thành phần Sidebar
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

D. Thành phần Footer
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:

background-image:url(http://www.vidu.com/hinh.jpg);

Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:

#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Cách chèn tương tự cho các thành phần khác.

Kích thước hình nền cho từng thành phần

Tùy theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng nhỏ càng tốt.

Ví dụ thành phần main và sidebar sẽ kéo dài hoặc thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar. Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:

background-repeat: repeat-y;

Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:

background-position: center center;

Lưu ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.

Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background

Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:

background:#ffffff;

Chúc bạn thành công!

Xem Chi Tiết »

Posted in: Thủ Thuật blogspot

Vài lưu ý về sử dụng hình nền

Kết quả thống kê từ công cụ tìm kiếm cho thấy nhiều bạn đọc quan tâm đến hình nền cho blog của mình. Vì vậy tôi quyết định viết thêm một số bài liên quan đến sử dụng hình nền. Ở bài viết này, chúng ta sẽ lưu ý một số điều về việc sử dụng hình nền.

Kích thước của hình nền thiết kế

Một blog đẹp hẳn phải có một hình nền đẹp, kết hợp màu sắc, kiểu chữ cộng với cách bố trí giao diện hợp lý. Muốn có một hình nền theo phong cách “không đụng hàng” bạn phải tự thiết kế cho mình. Các chương trình xử lý đồ họa như Adobe Photoshop, Google Picasa,… giúp bạn thực hiện việc này. Vậy kích thước cho hình nền bao nhiêu?

Kích thước ngang của blog
Đăng nhập vào blogger.com, chọn layout ->Edit HTML (Trên Template) và kéo thanh trượt để tìm outer-wrapper.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 883px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Đây là kích thước chiều ngang (width) của blog, đơn vị tính px (pixel). Chiều dọc không bị giới hạn. Tất cả theo mặc định. Tất nhiên không ai cấm bạn thay đổi. Phụ thuộc vào cách trình bày và giao diện theo template, bạn có thể thay đổi width cho template 2 cột bằng 800, hay 1024 cho 3 cột trở lên.

Để hình nền hiển thị, bạn phải chèn đoạn mã hướng dẫn bên dưới vào vị trí bên dưới.

background-image:url(http://www.vidu.com/hinh.jpg);

Vị trí chèn:

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
background:#ffffff; 
background-image:url(http://www.vidu.com/hinh.jpg);
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Hãy thay http://www.vidu.com/hinh.jpg (liên kết đến hình nền của bạn), như: http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/ttcbloggerbg1.jpg


Theo tôi, một trong ba cách dùng hình nền như sau có thể được sử dụng.

Cách 1. Dùng các ảnh có kích thước màn hình chuẩn (ngang x dọc) như: 800 x 600, 1024 x 768, …Hình nền sẽ bao phủ toàn bộ blog. Và đoạn mã sau dành cho cách này:

background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center center;


Giải thích:
background-repeat: no-repeat; (hình nền bao phủ hết trang nên chúng ta không cần để nó lặp lại) background-attachment:fixed; (cố định hình nền ở một vị trí nhất định)
background-position:center center;(canh giữa ngang và dọc cho trang)


Cách 2. Hình nền có kích thước không theo màn hình chuẩn. 

Trường hợp 1: Bạn sử dụng ảnh có width bằng kích thước ngang của màn hình chuẩn, ví dụ: 1024, 800,…
Và đoạn mã này phù hợp cho bạn:

background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: repeat-y;
background-position:center center;


Giải thích:
background-repeat: repeat-y; (hình nền lặp lại theo chiều dọc phủ đầy trang)
background-position:center center;(canh giữa ngang và dọc cho trang)

Trường hợp 2: Bạn sử dụng ảnh có width không bằng kích thước ngang của màn hình chuẩn. Và đoạn mã này phù hợp cho bạn:


background-image: url(http://www.vidu.com/hinh.jpg);
background-position:center center;


Giải thích:
background-position:center center;(canh giữa ngang và dọc cho trang)
Hình ảnh sẽ lặp phủ đầy trang, theo mặc định.

Trường hợp 3. Tối ưu trường hợp 2, ảnh nền của bạn dùng có kích thước dài rộng bằng nhau.Hãy tưởng tượng những viên gạch lót nền có hoa văn giống nhau và gắn kết với nhau hoàn chỉnh bộ nền nhà. Bạn chỉ cần là một viên gạch để làm hình nền, viên gạch này sẽ lặp lại và bao phủ hết màn hình. Ví dụ: 20x20, 50 x 50, …Đoạn mã tương tự như trên.

Bài viết sau tôi sẽ hướng dẫn dùng hình nền cho từng thành phần riêng rẻ, và bài viết tiếp đó hướng dẫn hình nền cong góc của mỗi thành phần. Mời bạn đón đọc.

Chúc một tuần học tập và làm việc hiệu quả!

Xem Chi Tiết »

Posted in: Thủ Thuật blogspot

Hình nền cho blog

Nhiều bạn hỏi tôi chèn hình nền như thế nào? Cách dưới đây tôi hướng dẫn bạn chèn hình nền vào blog. Trước tiên bạn phải có hình nền sẳn. Nếu bạn là dân chuyên về đồ họa, có thể design cho mình một cái tùy thích. Thông thường bạn có thể chọn hình nền có kích thước nhỏ lặp lại hay một hình đầy đủ toàn màn hình. Theo thống kê, kích thước màn hình 1024x728 được dùng nhiều nhất. Bạn có thể download gói wallpaper 3D chứa nhều ảnh rất đẹp với kích thước này, sau đó đưa GooglePages hay các trang chia sẻ ảnh để lấy liên kết.


NỀN MÀU

Bạn có thể đổi màu nền cho blog bằng cách vào Template | Fonts and Color. Trong khung nhỏ phía bên trái, bạn chọn Page Background Color và chọn màu mình muốn.

Bạn có thể sửa lại màu nền trong đây nếu bạn biết mã màu.

background-color:#E31122;

HÌNH NỀN CHO HEADER (Xem chi tiết).

HÌNH NỀN CHO SIDEBAR

Để chèn hình nền cho sidebar bạn vào Template | Edit HTML, kéo thanh trượt xuống phía dưới tìm cho được đoạn mã và chèn bên như bên dưới:

#sidebar-wrapper {
 background-image: url(LIÊN KẾT ĐẾN HÌNH ẢNH);

Trong đó LIÊN KẾT ĐẾN HÌNH ẢNH phải là liên kết đến hình ảnh. Có dạng như: http://www.vidu.com/hinh.jpg

Click SAVE CHANGES để lưu lại. Nếu blog bạn có nhiều sidebar-wrapper, bạn cũng làm tương tự.

HÌNH NỀN CHO MAIN

Tương tự như vậy bạn có thể chèn hình nền cho main-wrapper phía dưới dòng.

#main-wrapper {

HÌNH NỀN CHO TOÀN BỘ TRANG

Tương tự nhưng bạn chèn phía dưới.

body {

HÌNH ẢNH LẶP

Theo mặc định, hình nền của bạn sẽ bị lặp lại tùy thuộc vào kích cở hình cũng như cách bố trí trang và ký tự có trên blog của bạn. Nếu hình ảnh bạn dùng có kích thước nhỏ, cần lặp lại để phủ đầy trang thì quả là tuyệt. Còn ảnh kích thước lớn, không muốn lặp lại thì sao? Bạn chỉ việc thêm đoạn mã này phía dưới dòng liên kết đến ảnh.

background-repeat: no-repeat;

VỊ TRÍ HÌNH NỀN

Nếu bạn cần điều chỉnh vị trí hình nền hãy sử dụng đoạn mã này bên dưới các đoạn mã trên.

background-position: Y X;

Hãy tưởng tượng hệ tọa độ OXY, trong đó:

Y: trục tung, canh dọc.
X: trục hoành, canh ngang.

Giá trị của nó là:

Y: top, center, bottom (đầu, giữa, cuối)
X: left, center, right (trái, giữa, phải)


Ví dụ:

Bạn muốn hình nền nằm phía dưới, góc trái: background-position: bottom left;
Bạn muốn hình nền canh giữa trên: background-position: center center;

CỐ ĐỊNH HÌNH NỀN

Để cố định hình nền bạn đặt dòng sau phía dưới đoạn mã liên kết đến ảnh.

background-attachment: fixed;

TẤT CẢ TRONG MỘT

body {
background-color: #E31122;
background-image: url(LIÊN KẾT ĐẾN HÌNH ẢNH);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Hãy xem blog của tôi như là kết quả hiển thị.

Xem Chi Tiết »

Posted in: Thủ Thuật blogspot