CHÈN VIDEO CLIP YOUTUBE VÀO KHUNG ẢNH

Bạn có thể dễ dàng chèn video clip YouTube hoặc nhaccuatui vào Blogspot bằng thẻ nhúng của "nó".

Để sinh động cho video clip, dunghennessy chia sẻ với các bạn một số khung ảnh để chèn video clip vào blog khá đẹp mắt. 

Ứng với mỗi mẫu là code để chèn ở phía dưới, các bạn chỉ cần thêm tiện ích HTML hoặc khi đăng bài ở chế độ HTML, các bạn dán code vào và thay đổi đường link màu đỏ là link của video clip hoặc link của nhaccuatui vào là xong...

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnv4V1YTmT2kQiv-83nzROjUn7iEQWWES7nEZlJ0y0-Mv09tFpc-EVnXfPMCU_gMVf9vnLu3WZlnrKZgWQ_SXKjp39isPDjts4IXBVbUf49tLnw0GCZ8zf10SO7M-6v_9IxwO092JTecY/s1600/KhunganhYouTube4.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/9bZkp7q19f0" width="490"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJadrCPVxR3CmraZmwc1MBmqZWCUy47h5snvWr7FKgNy4NWpJl4xJHbqwG1eHDGmpryMIDe8xAeDxWI_rv9J5v9uu4hcAdnJkwSijN9AvwY2qUvYP5sL4Sq3LfLJBqo9Ia4lTVYbMaYHU/s1600/KhunganhYouTube3.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 20px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/bD2aKbYF2MQ" width="510"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYy9aPMYwkv2ZoWUnMmFyDIPz5opE3daYEGuUEPTwngWrrqxaxHZf39_pMMWXLeTiuKsoOmhDyfsg6tNt7QpVwbzcpPc44t-Jj-dmf-U17sU5gMhGqj18CPYULPQPx8Ad2OXXo4wuhlrk/s1600/027.png&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 22px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/34yXOoURyx0" width="500"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Rrn-L75UKiIdv6XKCbnpDD_UTwkGJ_MmUkD6-wC0pVSmx1391MhKGcuSkHcGj3di9Dkp0azpGVpVh1U7PpOrhcJ2zxSNoSGPH5bgwKslgcYR4NyWypCjoxZkfLSHNetlPl-PtBI8M7o/s1600/022.png&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 22px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/D1ccdmaPn-U" width="500"></iframe></div>

<center>
<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp099Lpbv64P1GwRtqiDEmWEKDW99MEpZi1TRODKYNUTRKgsN-8FbV7t34nq5EQxHOCrnrrCHvqdGkXT5uQXzLj0LoA1M-8qHAzhFKSHNk0TJt1NU2zbQCO2O6LXlWB-gIQNhSXdWY2Ms/s1600/KhunganhYouTube1.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 45px 0px 0px 10px; text-align: center; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="290" src="http://www.youtube.com/embed/8q7uEJ62yPo" width="420"></iframe></div>
</center>

<center>
<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGKf-kHUGlc8IUfW-NZne4QDSlFmqtKlcQ-sI5dIsi7r4ODxAaWPVg2pCFb4dRusrbPlXBT_SVWbHmralSgW4YOuHUkk4WLNoF7eMfcYx075beYGKDarU-M92chPVww3gl4JIReQ9tlY/s1600/KhunganhYouTube2.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 35px 0px 0px 10px; text-align: center; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="310" src="http://www.youtube.com/embed/yIPp2e4gCaA" width="478"></iframe></div>
</center>

<center>
<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIO9PjVLZW6gpuSLFGRcUfVfAFAauOMC25885626SdwnA31fzDY5-_g7D_BNf6r-0PCeF8I1eAaxT-eSy9sOUvd5RUWAnMZrwYsTkrsBLXQa7_hdPMLukCsLGwFcClthVHDha7RYmm5nY/s1600/KhunganhYouTube5.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 50px 0px 0px 10px; text-align: center; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="280" src="http://www.youtube.com/embed/9UaV28sZSHo" width="385"></iframe></div>
</center>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzwl-92RQ_cvcWWyXZ-HUVJX0wBKkC0pjZhHrPTZEz7SzYxOm1QrAujW1I17YaWB6O7zaYPlDXLR8kjvmihCTjpIDz71E_bjTLtgmFuVwbR116j0Rgk7NKQla4UJRo1FsTiRIRGC8Dz54/s1600/KhunganhYouTube10.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.nhaccuatui.com/l/Np3Vy9HQfYcN" width="490"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLJ-s-TG5ZUavEeFikkh0f8KqQPgTyvXbAHWjumF2yRoV1lmH67incwRXAfdWDm9ehoJ8ygEiR_mktI3C5UA6zYb9cEWdISjeIdFShHKT8tgVJA9_KCeqFtBRIv4d7Qiwv06Tu_ZbpLw4/s1600/KhunganhYouTube13.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.nhaccuatui.com/l/6mEaer4TUAwo" width="490"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpemj_XW2l_le04d7rbJd71lzx1DYJxhDdGFTdSm2XGLH7JEMWsYybeAs7fUhQBAKok7wIt9gClGRKnQl12y9wFIh3v5N8O5dRGt72BY9JXlEQcLlQVtMZr-ccDOjWdgIrKA2qzPtj3Ls/s1600/KhunganhYouTube7.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/YsxhMowa4Jk?list=PLdxOde34DsAmiTScm6YmuqdRtSKgeayIJ" width="490"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFk1IgSKavY1aysRdBYfTKCkqd0lCxcFdv519zlaiPSjqU8qlsmnfpJ2aXEOuXd7Z3GvzBCZnwIyO7d9nkkQEoaounbGDbvFuY5_7md4KGuTVxi8ADf57ba-FIyyqGMb9qoMTP3zTOl0/s1600/KhunganhYouTube6.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/YWbgU0NeCa8" width="490"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrSN0nfIfSf-_Ms59efLGJTJ6CqEcnyrlQI29qY2Ts9xjKoqSi3kza5ECpo2BoyZvmZy6y43Cmm5ddo6YUgVIaICTvW9rCBOMa3G231BsD-StKjI3Ek8eoaLwN5czIGCPFs1B5faZzXt0/s1600/KhunganhYouTube9.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/6hFPJX4aU0E" width="490"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOiCbsS8iu5ye7OBnU-hChoTro26YM4A1x21hQH_xcweeLMg5Dp7Y6WCj7e-eO5ed_Tik5VFSS0zzK2aw8wZceCdsCVUi3i4D-vKke3Ff88ccoyId5GB2CeZOUlVhSISOE3K8lv-Tezy4/s1600/KhunganhYouTube8.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/4NazR1EBnDI" width="490"></iframe></div>

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbwHrUqcSwi6alFw5MOPS3ONyqfslwlEgnoRDmF1Yoo9B450uGFL8ZZ722Y2yWimSod9PWeBWR_BuWCmyjHtwM8IMAg18tLKPrVrJMgb6Vu7o1rkSojyJ_IbRkaBpaIQkvdl0jmOpe7g/s1600/KhunganhYouTube12.gif&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 30px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="340" src="http://www.youtube.com/embed/MRUT3h5Tk90" width="490"></iframe></div>

Read more

TẠO SLIDESHOW (Kiểu 5)

Với kiểu 5 này, các ảnh lần lượt trình diễn với hiệu ứng thu nhỏ và phóng to rất đẹp mắt.
Ở mỗi ảnh bạn cũng có thể ghi vài dòng chú thích cho ảnh.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<center>

<style>           

.textboxstyle {

font-family:Arial;

font-size:16pt;

color:black;

text-align:center;

vertical-align:top;

}

.textboxbackgroundstyle {

background-color:white;

padding:5px;

/* rounded corners for Firefox */

-moz-border-radius-topleft: 15px;

-moz-border-radius-bottomright: 15px;

/* rounded corners for for Safari and Chrome */

-webkit-border-top-left-radius: 15px;

-webkit-border-bottom-right-radius: 15px;

/* rounded corners for Opera */

border-top-left-radius: 15px;

border-bottom-right-radius: 15px;

}

.curveandshadowstyle {

/* shadow and rounded corners for Firefox */

-moz-box-shadow: 5px 5px 8px #818181;

-moz-border-radius-topleft: 25px;

-moz-border-radius-bottomright: 25px;

/* shadow and rounded corners for Safari and Chrome */

-webkit-box-shadow: 5px 5px 8px #818181;

-webkit-border-top-left-radius: 25px;

-webkit-border-bottom-right-radius: 25px;

/* shadow and rounded corners for Opera */

box-shadow: 5px 5px 5px #818181;

border-top-left-radius: 25px;

border-bottom-right-radius: 25px;

/* shadow for Internet Explorer */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');

border-style:solid;

border-width:1px;

border-color:white;

}

</style>

<!----------------------------------------->

<!-- STYLE-CONFIGURATION STOPS HERE -->

<!----------------------------------------->

           

<script>

var imgurl= new Array()

var message= new Array()

var thislink= new Array()

/////////////////////////////////////////////////

// SCRIPT-CONFIGURATION STARTS HERE

/////////////////////////////////////////////////

// Các link ảnh theo thứ tự

imgurl[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMHDJwJm0QZUa7m_HD5agiVQ6Re3ON7rakDObqV-udCTeLGsjRWI73WSDkW6tSRXHEJI-EgJ-75ghaiZPxsIvd9RBseq_ndLtTrAp46_6FulcySf93l_5JqfIychurxnWJY7KehZ1-Hi1/s1600/0003.gif"

imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhP7zxT4aO7AQP74QwFQpx_6GsFyNvGRq7wqpy_mPFFqyyhNk1QP3Ig2VdmEIyeKzwZji_ys3bxBRV0R58Uq8R05cPKJNUOzPH3QESvWpVOkTQ6PdP14RmjoHxCQ0bsJqpEIaRD7h099Y/s1600/0008.gif"

imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgceRY7CeZ6xwdRZjR2fpWyVu06XyGFuverAhWMq1a8ZeMv5eWFk1rQNTSD8EKercypIz7NJULKTE2WC8KIXBpmX325vWk91k8jhKbccG0UDlXhoapAifU2XyzsiUakJZoKGr_Pu17FUQoV/s1600/0009.gif"

imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWZVyR-32Wx0ldzeEQ8ZhCs1jKxfSztb9hqD1cnmhVKf8mav2R_Stpl7s7l1RdVxK6HeWW72nz55GdWR9IVH76_yZgW3TrrGzEkjP0-Mgj_PGlQjg-yuPMjIn05iwTDMwIBjSU734vkDV/s1600/0019.gif"

imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm0UlYIeTswYTWNOsQ8ZMyECRL6_uchJA7_wWEce08iGiM1Fog5KWfNLa00W2yiwJZLXfUmeOQDjB1aDSh7fkDosYKnnKDWeleCUM9BtIAMLlaCOsjESUtttXFOfgN4B83eL0odrwV4-vx/s1600/0027.gif"

imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FaKG7jKKJyfiEjw0o_lf2U9huGgn_I8IFbWjiol7H4sDha0RbNc9O8Q-hrO5g_7LQYFp_CxMvsTWoWqOvn8jaF-zBoQWkhdEetp7pW6tmDVURLCJPq1C3hnscy7lLuSQ-o6Jw6BzJ1T9/s1600/0048.gif"

imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAztxy6cSNehpSyS8qMMY8i2PZzLM2S9pry4QOpSExpDNaWVn1IMdqhDAAdBZSvWMCLYRlutGnID3F_xqToDyYFW_9763ycvwvFyWZTHo0JAq70FhiniwnU4Zsi4HuZUCUNywSBOmdHQo0/s1600/0050.gif"

imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNeRki2WcpsEWxJ6qvzBoy184d_UT4nMhyyUWjRboaR4OaFeJIeTwJbxiXpk3hdCT9DNqcHJiNR9-RR39brjmoQ2JowaToHQISB-JTbPi9zBd4aBWsv1Mp-AYZjbYOzg9XcT0YPWokNFc/s1600/0059.gif"

imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVnDNrgNFNp6KwkTaAsg5aJuZusH_gMZgjUSyECM6Swf8ex8GuZv38FJLmdP0wbn57JhyphenhyphenQY8z1-OiCAPNF4iCSEO8b_tlj9VojAsjqJZ-0xUA5953EHJjNdU9qUUOd5DzbO_8uNdehP11/s1600/0062.gif"

imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTK_0y6hCcsxVzeeoEJ5F8ijmrXIFlmbUemtd4mR_ncHEOSEheMppMOPMHLKP3Q0409jHqtCemjH1c_c27MtL8B_se3EjLeQk9ikmmb5PZyehr68iT7-ePPckeNhjJQMkGp5sc0smq_GtH/s1600/0069.gif"

// Ghi chú cho ảnh

message[0]="Welcome to my Blog"

message[1]="dunghennessy"

message[2]="Cám ơn các bạn đã ghé tham quan"

message[3]="Chúc các bạn luôn vui khoẻ"

// set the links corresponding to the images above (no more no less than the images above)

// Nếu muốn đặt liên kết thì thay dấu # bằng link mình muốn liên kết đến

thislink[0]="#"

thislink[1]="#"

thislink[2]="#"

thislink[3]="#"

// Chiều rộng của ảnh (pixel)

var imgwidth=240

// Chiều cao của ảnh (pixel)

var imgheight=320

// set stillstand of picture (seconds)

var stillstand=2.5

// set opacity-strength (transparency-effect). Values may range from 1 to 100

var opacitystrength=60

/////////////////////////////////////////////////

// SCRIPT-CONFIGURATION STOPS HERE

/////////////////////////////////////////////////

// Do not edit below this line

var tmr

var step=10

var i=imgwidth

var i_imgurl=0

stillstand*=1000

var preloadedimages=new Array()

for (iii=0;iii<imgurl.length;iii++){

            preloadedimages[iii]=new Image()

            preloadedimages[iii].src=imgurl[iii]

}

function shrinkpic() {

            document.getElementById("textbox").innerHTML=""

            if (i>0) {

                        i-=step

                        document.getElementById("picdiv").style.width=i+"px"

                        document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"

                        document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"

                        document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"

                        tmr=setTimeout("shrinkpic()",20)

            }

            else {

                        i_imgurl++

                        if (i_imgurl>=imgurl.length) {

                                    i_imgurl=0

                        }

                        document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"

                        i=1

                        tmr=setTimeout("enlargepic()",20)

            }

}

function enlargepic() {

            if (i<=imgwidth) {

                        i+=step

                        document.getElementById("picdiv").style.width=i+"px"

                        document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"

                        document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"

                        document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"

                        tmr=setTimeout("enlargepic()",20)

            }

            else {

                        i=imgwidth

                        showmessage()

            }

}

function showmessage() {

            document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'

            tmr=setTimeout("shrinkpic()",stillstand)

}

function gotothislink(){

            document.location.href=thislink[i_imgurl]

}

document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')

document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')

document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')

document.write('</div>')

window.onload=shrinkpic

</script></center>

<!-- END OF THE CODE FOR THE CSS-3-SLIDESHOW-->

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này

imgurl[n+1]="Link ảnh"

Dán tiếp xuống phía dưới các link ảnh, trong đó n là số thứ tự cuối cùng của ảnh. Ví dụ ở code trên tôi có SlideShow gồm tất cả 10 ảnh được đánh số từ 0 - 9, nếu thêm một ảnh nữa thì ảnh cuối cùng của tôi là 10 thì SlideShow sẽ có tất cả 11 ảnh...thì code sẽ giống như vầy:
.......................

imgurl[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMHDJwJm0QZUa7m_HD5agiVQ6Re3ON7rakDObqV-udCTeLGsjRWI73WSDkW6tSRXHEJI-EgJ-75ghaiZPxsIvd9RBseq_ndLtTrAp46_6FulcySf93l_5JqfIychurxnWJY7KehZ1-Hi1/s1600/0003.gif"

imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhP7zxT4aO7AQP74QwFQpx_6GsFyNvGRq7wqpy_mPFFqyyhNk1QP3Ig2VdmEIyeKzwZji_ys3bxBRV0R58Uq8R05cPKJNUOzPH3QESvWpVOkTQ6PdP14RmjoHxCQ0bsJqpEIaRD7h099Y/s1600/0008.gif"

imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgceRY7CeZ6xwdRZjR2fpWyVu06XyGFuverAhWMq1a8ZeMv5eWFk1rQNTSD8EKercypIz7NJULKTE2WC8KIXBpmX325vWk91k8jhKbccG0UDlXhoapAifU2XyzsiUakJZoKGr_Pu17FUQoV/s1600/0009.gif"

imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWZVyR-32Wx0ldzeEQ8ZhCs1jKxfSztb9hqD1cnmhVKf8mav2R_Stpl7s7l1RdVxK6HeWW72nz55GdWR9IVH76_yZgW3TrrGzEkjP0-Mgj_PGlQjg-yuPMjIn05iwTDMwIBjSU734vkDV/s1600/0019.gif"

imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm0UlYIeTswYTWNOsQ8ZMyECRL6_uchJA7_wWEce08iGiM1Fog5KWfNLa00W2yiwJZLXfUmeOQDjB1aDSh7fkDosYKnnKDWeleCUM9BtIAMLlaCOsjESUtttXFOfgN4B83eL0odrwV4-vx/s1600/0027.gif"

imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FaKG7jKKJyfiEjw0o_lf2U9huGgn_I8IFbWjiol7H4sDha0RbNc9O8Q-hrO5g_7LQYFp_CxMvsTWoWqOvn8jaF-zBoQWkhdEetp7pW6tmDVURLCJPq1C3hnscy7lLuSQ-o6Jw6BzJ1T9/s1600/0048.gif"

imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAztxy6cSNehpSyS8qMMY8i2PZzLM2S9pry4QOpSExpDNaWVn1IMdqhDAAdBZSvWMCLYRlutGnID3F_xqToDyYFW_9763ycvwvFyWZTHo0JAq70FhiniwnU4Zsi4HuZUCUNywSBOmdHQo0/s1600/0050.gif"

imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNeRki2WcpsEWxJ6qvzBoy184d_UT4nMhyyUWjRboaR4OaFeJIeTwJbxiXpk3hdCT9DNqcHJiNR9-RR39brjmoQ2JowaToHQISB-JTbPi9zBd4aBWsv1Mp-AYZjbYOzg9XcT0YPWokNFc/s1600/0059.gif"

imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVnDNrgNFNp6KwkTaAsg5aJuZusH_gMZgjUSyECM6Swf8ex8GuZv38FJLmdP0wbn57JhyphenhyphenQY8z1-OiCAPNF4iCSEO8b_tlj9VojAsjqJZ-0xUA5953EHJjNdU9qUUOd5DzbO_8uNdehP11/s1600/0062.gif"

imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTK_0y6hCcsxVzeeoEJ5F8ijmrXIFlmbUemtd4mR_ncHEOSEheMppMOPMHLKP3Q0409jHqtCemjH1c_c27MtL8B_se3EjLeQk9ikmmb5PZyehr68iT7-ePPckeNhjJQMkGp5sc0smq_GtH/s1600/0069.gif"
imgurl[10]="Link ảnh"

.........................
Dòng lệnh màu xanh là dòng lệnh mới thêm.

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước và thay đổi kích thước của khung trình chiếu bằng với kích thước của ảnh....

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

Read more

TẠO SLIDESHOW ẢNH (Kiểu 4)

Với kiểu 4 này, các ảnh sẽ được xếp lại khá gọn, khi muốn xem ảnh nào, các bạn rê chuột vào ảnh, ảnh sẽ tự động "bung" ra kèm theo những dòng chú thích cho ảnh...

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<link href="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/haccordion.css" rel="stylesheet" type="text/css"></link></div>
<div style="text-align: justify;">
<script src="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/dunghennessyslideshow.js" type="text/javascript">
</script></div>
<div style="text-align: justify;">
<script src="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/slideshow.js" type="text/javascript">
<font size="5">
/***********************************************
* Mời các bạn ghé tham quan và ủng hộ dunghennessy tại địa chỉ
http://www.dunghennessy.blogspot.com
***********************************************/
</font>
</script></div>

<style type="text/css">
#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightgreen;
}
</style>

<script type="text/javascript">
haccordion.setup({
 accordionid: 'hc1', //main accordion div id
 paneldimensions: {peekw:'50px', fullw:'500px', h:'158px'},
 selectedli: [0, true], //[selectedli_index, persiststate_bool]
 collapsecurrent: false//<- No comma following very last setting!
})
</script>
<div class="haccordion" id="hc1">

<ul>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW17ZDxGC0nwmjIPeCbmjBdf5B8WG2x93ZypfPNXO81ejqpsEO7xVxcJgu6h_UX3l_s-iYaf91721b1rNlgzUoYSmGZC5L1s2K_ynnDubifJACsJgLaUTpya7n32Qsvy4fMS_3UD_gSn8/s1600/0006.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Đây là một trong những ảnh động về chủ đề "Các loại chim", bạn sẽ tìm thấy nhiều ảnh đẹp hơn tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-cac-loai-chim.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCwlaXox2ybM98NHeAv9qq-XFBgDk5iiD62I2esa-4lubOVTKJy75y3nYZti9OsagXlmu0EwVjGLb9dL9bGXFtOPXAmUq3IBp-2opOHpDv5flHSFmkupi4slAZYG2aY13JxJZYdadllQcp/s1600/0202.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động với chủ đề "I LOVE YOU", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="http://anhdepblog.blogspot.com/2012/04/anh-ong-i-love-you.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQ-KEZ_Fu9x_9xwgBmKAcGgVWpkL6D9THJmIegpOGtwC-z3D8Lkift3EyPH9Qa9LENyHUawXQObci-GWwGQoreWtTdBQOfqN9MUPHa_wkRaDFLGr_jfoGanGmikQYwXBdAbFDqvru1rXI/s1600/0004.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Tiếp theo, đây là một những ảnh động với chủ đề "Xe Ôtô", các bạn sẽ tìm thấy nhiều ảnh động xe ôtô tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-xe-hoi.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtucVUGCrCmBxH7mLrR6-Kixq7iX1h3sljfMnAGyKcr1C_pXNvgJyR2mdPKH6Exx1gDhCfNEMm6fdok_5H_8mjKnK4-LO2jaSOWwCgemR4GpZR0os3bIqe93dtDT4DMeZPNWtG8kZWS_Q5/s1600/0027.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động về chủ đề "Chiến binh và vũ khí", các bạn cũng dễ dàng tìm thấy những ảnh khác tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-chien-binh-va-vu-khi.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBl0H5wDY3Kkbtcu0sjW5_dGtbyvhP1XI0RZ4hrwb7Uy2PbXyiOfVZjhAAsiBBcOABXlehUSgHCgyOK33_bZ6W32FWzFtBN-ukXnWR2t4F671mLEMb13pTsUHvkRALyERVOavB8Mnn40/s1600/0023.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là ảnh động với chủ đề "Thánh giá và Chúa GiêSu", các bạn có thể tìm được nhiều ảnh khác tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-chua-gie-su-va-thanh-gia.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuhh2_jPmDcIfG54mw-JIwFZ6ofy5UeUIFBmn-H4orMJE31EA1qxVJAmuhwuy0xpvrmmQUKQWLF26l8wqFKIz2cZxOWCw-EPrzxQRfkNTwqGdtEjHecI4wELoaX9MQ45-N4I7oIGIxnn4/s1600/0026.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động với chủ đề "Báo và Sư Tử", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="http://anhdepblog.blogspot.com/2012/04/bao-su-tu.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
</ul>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó:
* Fullw: độ rộng của slideshow
* h: Chiều cao của slideshow
* Background: màu nền của Slideshow
* Img src: Link của ảnh
* Height: chiều cao của mỗi ảnh
* Width: Độ rộng của mỗi ảnh
* a herf: Địa chỉ link liên kết.
sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này

<li>
  <div class="hpanel">
<img src="Link ảnh" style="float: left; height: 320px; padding-right: 8px; width: 240px;" />Còn đây là một trong những ảnh động với chủ đề "Báo và Sư Tử", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="Link liên kết"> anhdepblog.blogspot.com.</a>
  </div>
</li>

Dán trên dòng lệnh </ul> (màu xanh) gần cuối dòng.

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

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

Read more

TẠO SLIDESHOW ẢNH (Kiểu 3)

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY), kiểu 2 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 3).

Ở kiểu 3 này, các ảnh này sẽ được trình diễn "chạy" từ trên xuống hoặc từ dưới lên, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<div class="content"><div class="panel"><div class="panel-content" id="sidebar_download" style="display: block"><center><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="up" scrolldelay="10" hight="150" valign="baseline" width="240" height="400">
<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/05/anh-ong-cac-loai-chim.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wrhrq1At3h0v0Jj3y8gC-neSM-oiKRZ49WZFstoxwRiBj2XFQEcqHDe7W26nuVPcjXZiEYbUjmsOsAYf6Il36xXvFPVn47fPYS6w7l8sC5LqwEYZ9n-HZ2h9lo1obLO7tMazsPanDtM/s1600/0004.gif" width="240" height="320"title="Các loại chim" /></a></div>
<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/05/anh-ong-ghe-thuyen.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlDRlJ_Nz6yQH1vm0cdoxhnNsDA1VV9VeR8pMTyPLUgvAzvjh48W9c2Nl0n4XUb8PecXLyn0_nBlH-3Dk_YyV5LUgGroYr2-DuJwbYyL83Tm6bLgBoHuAA_MxaDtc0CTyejtE9GRv-Wk0/s1600/0002.gif" width="240" height="320"title="Ảnh động ghe thuyền" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/anh-ong-con-ca.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOiJxih6Bw0pQoAGoWV42K0uTa468bRRcLdb0sA_ocr5AZqg-xIp1GbWpzLn4VHZ5FXio_D7Pebcr1e1GdfnHWv9D20GCNg8Y6r8qSgCnrA-t7KrfNxQm3HfBPH1IZES2wErGJJYya6yls/s1600/0024.gif" width="240" height="320"title="Ảnh động cá các loại" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/bao-su-tu.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuhh2_jPmDcIfG54mw-JIwFZ6ofy5UeUIFBmn-H4orMJE31EA1qxVJAmuhwuy0xpvrmmQUKQWLF26l8wqFKIz2cZxOWCw-EPrzxQRfkNTwqGdtEjHecI4wELoaX9MQ45-N4I7oIGIxnn4/s1600/0026.gif" width="240" height="320"title="Ảnh động báo và Sư tử" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/anh-ong-trai-tim-phan-2.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZEXAa8q2NvTPvnw8EiQZMsxrWo1CWqb5-fb7LNWokwCrn5iNS9ruI3pBWaPltezP1yH0A5Coa8k3lws_WGNLODuH7xMXwBYSKEhfPhTgBfkhKPZm-MjsY7OSBQwkDhSFzROc-ujnoPg/s1600/0179.gif" width="240" height="320"title="Ảnh động trái tim" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/background-hoa-van.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8tOwTp8rvyx6wjZKIw4xr-3W0brLN0l9_TlMWvv6BoGX0iZFBw6W3Xaf1DoA1HGPhgu7WxdNyp1h2pp0Q-lV1yqbtR2XZr-QjEq2Aj63EqhJslynY84wmNCxGkpzCyOowUoD6QmM0l8/s1600/0008.gif" width="240" height="320"title="Background hoa văn" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/anh-ong-ngon-nen.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5uOndQjnkLKWmiqQGsV26bJ93DBO8bo1LZAFBoZPdQrFO5_-ouh1i4K59XtZY20gxeVdHR1NWeilPVowblPya5nKwJdeR-c7DmSwjDDoR8Me6VCGaMZrsxsKwoG56i_m72eC9oJ-V83Q/s1600/0042.gif" width="240" height="320"title="Ảnh động ngọn nến" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/anh-ong-cac-loai-hoa.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhROBk75EGVrJN3p_QSBdYXk3rTe4IDTYm7kFgKCBqQOC5YIc8EpyLMSKG-ZZZ6O6-3iaIbj3GM6i4c23k6TgzE05kBcnjXomCmemhBncprw2wEpl1evrGwWeLPRNVcuVUWqMOhNNIBFUEO/s1600/0037.gif" width="240" height="320"title="Các loại hoa đẹp" /></a></div>

</marquee></center> </div></div></div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (link ảnh), màu xanh (link liên kết), màu vàng (độ rộng và chiều cao của ảnh), title (chú thích cho ảnh) theo ý thích của mình, muốn ảnh chạy từ trên xuống thay chữ "up" thành chữ "down", sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
<div><a target="_blank" href="Link liên kết"> <img border="1" src="Link ảnh" width="240" height="320"title="Các loại hoa đẹp" /></a></div>

Dán trên dòng lệnh: </marquee></center> </div></div></div>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

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

Read more

TẠO CHÚ THÍCH CHO ẢNH (Kiểu 2)

Trước đây, tôi có chia sẻ với các bạn cách tạo chú thích cho ảnh (Xem TẠI ĐÂY). Hôm nay, tiếp tục tôi chia sẻ thêm cho các bạn cách tạo chú thích cho ảnh (kiểu 2).

Cũng giống như kiểu 1, khi bạn rê chuột vào ảnh thì lập tức sẽ xuất hiện một bảng chú thích khá đẹp nhưng khác ở kiểu 1 là bảng chú thích này sẽ được trượt từ bên phải của hình ảnh ra phía ngoài. Khi bạn rê chuột ra ngoài ảnh thì bảng ghi chú sẽ được ẩn vào trong ảnh.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
.imagepluscontainer{
position: relative;
z-index: 1;
}

.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{
position: absolute;
width: 95%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: yellow; /* Màu chữ text của bảng chủ thích */
-moz-border-radius: 16 16 8px 8px;
-webkit-border-radius: 16 16 16px 16px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white; /* Màu chữ text có gắn liên kết */
}

.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}

.imagepluscontainer div.rightslide{
width: 150px; /* Độ rộng của bảng ghi chú */
top:15px;
right:0;
left:auto;
bottom:auto;
padding-left:30px;
-moz-border-radius: 0 16px 16px 0;
-webkit-border-radius: 0 16px 16px 0;
border-radius: 0 16px 16px 0;
}

.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
</style>

<div class="imagepluscontainer" style="height: 320px; left: 10px; width: 240px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzBgZCLpeBoAwiV47GDG0uUQMCyC1k6OVBhX7P8ei8UJ_jabolwbAd6Y1MAANgBmz6imvv4MQuCNPgYtHsIBeTjavTUv-BI315TwhYCUa3MRbTbm8fhYi-NGRCM1AMX9axBUoC-9mkSPc/s1600/0037.gif" />
<div class="desc rightslide">
Nội dung của bảng chú thích<a href="http://anhdepblog.blogspot.com/2012/03/anh-ong-thac-nuoc.html">VÀO ĐÂY</a> Nội dung của bảng chú thích</div>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (kích thước của bảng ghi chú, màu chữ...) và màu xanh (link ảnh, nội dung bảng ghi chú...) theo ý thích của mình, sau cùng bấm Lưu lại là xong.


* Chú ý ở mục height (chiều cao) và Width (chiều rộng): đây là kích cỡ thật của ảnh, ví dụ ảnh có kích thước như sau: 240x320 thì mục width phải là 240px và height phải là 320px (bạn không thể đặt theo ý mình được)

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

Read more

TẠO SLIDESHOW ẢNH (Kiểu 2)

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 2).

Ở kiểu 2 này, các ảnh này sẽ được trình diễn "chạy" từ bên phải qua bên trái, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script type="text/javascript">
//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[1]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[2]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[3]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[4]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó sliderwidth (Độ rộng của Slidershow) sliderheight (Chiều cao của Slidershow) sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
leftrightslide[n+1]='<a href="địa chỉ liên kết"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'.
Trong đó n là số thứ tự của ảnh cuối cùng...

Dán tiếp phía dưới theo thứ tự tăng dần

Ví dụ: ở đoạn code trên Slideshow sẽ có tất cả 5 ảnh được tính từ số 0 đến số 4, bây giờ tôi muốn slideshow có tất cả 10 ảnh thì code sẽ giống như vầy:
 <script type="text/javascript">
..............................
..............................
leftrightslide[0]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[1]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[2]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[3]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[4]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[5]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[6]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[7]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[8]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[9]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'

...............................
..............................
</script>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

Read more

HÌNH ẢNH "BAY" TRÊN NỀN BLOG

Để "trang hoàng" cho blog thêm đẹp, bạn có thể dùng thủ thuật này gắn các hình ảnh, các Icon, Avatar, Favicon, Logo hoặc những biểu tượng "độc quyền" của mình lên trên nền blog. Các hình ảnh này luôn luôn xuất hiện trên toàn bộ blog và "nó" sẽ chạy theo khi bạn kéo thanh trượt lên xuống...Đặc biệt hơn là khi bạn click chuột vào các hình ảnh này, "nó" sẽ dẫn bạn đến các trang liên kết mà bạn đã định trước (dùng để quảng cáo, blog liên kết...)

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/bichay/bongbongj1.js"> </script>
<script type="text/javascript">

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage1=new Chip("flyimage1",47,68);
 flyimage2=new Chip("flyimage2",47,68);
 flyimage3=new Chip("flyimage3",47,68);


movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script>


<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;">
<a href="http://dunghennessy.blogspot.com"><img src="Link ảnh 1" border="0" /></a>
</div><div id="flyimage2" style="position:absolute; left: -500px; width:47; height:68;">
<a href="http://dungheineken.blogspot.com"><img src="Link ảnh 2" border="0" /></a>
</div><div id="flyimage3" style="position:absolute; left: -500px; width:47; height:68;">
<a href="http://anhdepblog.blogspot.com"><img src="Link ảnh 3" border="0" /></a>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

Read more

TẠO SLIDESHOW ẢNH (Kiểu 1)

Thủ thuật này sẽ giúp bạn có được một Slideshow ảnh trên Web/Blog để bạn khoe những hình ảnh đẹp của bạn, người thân và gia đình...

Các ảnh sẽ được thay đổi theo thời gian do bạn định trước, khi click vào một ảnh "nó" sẽ dẫn bạn đến trang liên kết do bạn chỉ định (dùng để quảng cáo, blog liên kết....)

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<center><script language="JavaScript1.1">
<!--
//Visit http://www.dunghennessy.blogspot.com for this script
//specify interval between slide (in mili seconds)
var slidespeed=3000 //thời gian chuyển ảnh 1000=1s
//specify images
var slideimages=new Array("link ảnh 1","link ảnh 2","link ảnh cuối cùng")
//specify corresponding links
var slidelinks=new Array("http://www.dunghennessy.blogspot.com","http://dungheineken.blogspot.com","http://www.anhdepblog.blogspot.com") //các link liên kết theo thứ tự

var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
window.location=slidelinks[whichlink]
}

//-->
</script>
<a href="javascript:gotoshow()"><img border="0" name="slide" src="photo1.jpg" style="filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1);" /></a>

<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()

//-->
</script></center>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này (có dấu phẩy phía sau):
"link ảnh",
Dán phía trước dòng lệnh "link ảnh cuối cùng"

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

Read more

TẠO CHÚ THÍCH CHO ẢNH (Kiểu 1)

Để minh hoạ cho bài viết, các bạn thường hay gắn các hình ảnh và những lời chú thích cho "nó".

Với thủ thuật dưới đây, khi bạn rê chuột vào ảnh thì lập tức sẽ xuất hiện một bảng chú thích khá đẹp được trượt từ trên hình ảnh xuống phía dưới.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
.imagepluscontainer{
position: relative;
z-index: 1;
}

.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{
position: absolute;
width: 95%; /* Độ rộng của bảng chú thích */
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* Độ trong suốt của bảng chú thích */
color: Yellow; /* Màu chữ */
-moz-border-radius: 12px 12px 12px 12px; /* Kích thước bo tròn cho bảng chú thích */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white; /* Màu chữ của link liên kết */
}

.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}
</style>

<div class="imagepluscontainer" style="height: 320px; width: 240px; z-index: 2;">
<img src="Link ảnh" />
<div class="desc">
Nhập lời chú thích tại đây <a href="http://anhdepblog.blogspot.com/2012/04/anh-ong-mat-troi-mat-trang-va-trai-at.html">TẠI ĐÂY</a> Chúc các bạn vui vẻ.</div>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ để cho phù hợp với ảnh, sau cùng bấm Lưu lại là xong.


* Chú ý ở mục height (chiều cao) và Width (chiều rộng): đây là kích cỡ thật của ảnh, ví dụ ảnh có kích thước như sau: 240x320 thì mục width phải là 240px và height phải là 320px (bạn không thể đặt theo ý mình được)

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

Read more

TẠO LOGO TRỰC TUYẾN (Phần 3)

Trước đây, tôi có chia sẻ với các bạn một trang tạo Logo (Phần 2) Xem TẠI ĐÂY.

Tiếp hôm nay, tôi xin chia sẻ thêm cho các bạn một trang tạo Logo trực tuyến cũng khá đẹp với nhiều mẫu mã có sẳn để bạn tha hồ lựa chọn...

Tại trang này, bạn có thể add các dòng chữ hoặc tên Blog của mình vào các hình ảnh lạ mắt.

Dưới đây là một vài mẫu tôi làm từ trang dịch vụ này, mời các bạn tham khảo:

Còn nhiều mẫu khá đẹp đang chờ các bạn khám phá. Nếu các bạn quan tâm thì bấm vào thẻ phía dưới:

Xem hướng dẫn và tạo Logo

Chúc các bạn có một Logo đẹp cho blog của mình

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

Read more