Trang chủ » Bài trong chuyên mục javascript
 |
| Đưa lên hạ xuống xem trực tiếp tại Demo Blog: Dịch vụ SEO Website |
 |
| Cách tăng Like Page Facebook, link G+ code sử dụng cho blog, Website |
<script>
function popup() {
var url = "http://itviet360.com/";
window.open(url);
popWin = window.open(page,'popWin');
popWin.blur();
window.focus();
}
popup();
</script>
<script>
//Pop-under window- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify page to pop-under
var popunder="http://itviet360.com/"
//specify popunder window features
//set 1 to enable a particular feature, 0 to disable
var winfeatures="width=800,height=510,scrollbars=1,resizable=1,toolbar=1,location=1,menubar=1,status=1,directories=0"
//Pop-under only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause popunder to load every time page is loaded
var once_per_session=0
///No editing beyond here required/////
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadornot(){
if (get_cookie('popunder')==''){
loadpopunder()
document.cookie="popunder=yes"
}
}
function loadpopunder(){
win2=window.open(popunder,"",winfeatures)
win2.blur()
window.focus()
}
if (once_per_session==0)
loadpopunder()
else
loadornot()
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
#bttop{position:fixed;bottom:30px;right:30px;cursor:pointer;display:none;z-index:9999}
#top-arrow{display:block;width:41px;height:40px;background:#111;border:1px solid #000;border-radius:50%;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
#top-arrow::after{content:"";width:0;height:0;position:absolute;top:0;right:13px;border-color:transparent transparent #f1f1f1;border-style:solid;border-width:13px 8px}
#top-arrow:hover{background:#1295C9;border:1px solid #FFFFFF}
</style>
<div id='bttop'><a href='javascript:void(0);' id='top-arrow' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' title='Back-to-Top'/></div>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
<style type="text/css">
.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvMD8ibbHVosMijJe8xaqFIDvo7p-AS3M5JOkFHyAcp6fZyYRRb0Ie-b7CkPDyJ4SGpC8HjgeQyWV5QH2Plrl5vhR7tR6Ge-R57oIpz04krrBnJL4lPzLBOKNbQ1-RPbAO-ADmMvALs0/s1600/paging_btrix_bg2.png) no-repeat;
display: none;
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- Huong dan thu thuat http://itviet360.com -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEKYxbDST7OLEjuTfZ5ISzaeFNQI0O_axz4Qbr00IplxOQ1ubMXvgvv5lAYBP8CKLhduIHfYsWXUuq15JGxZ1zkJPopWTXAqk5iD1A9Y63XlPgkHGHPul2VPYJFQtcw5PQGPlVbqi3otRB/s1600/anh-bia-fb-tinh-yeu-10.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4jnC6K1BbaBpmXAi6jYvlftCr4PxXMOVcCXptZTw_LD13t112K8OmukDxUfj-99p0nRybSnJM3GScgryIYpsRatSJ-6BqB8wFki9yBOPQul314PmqoUZcxP6Rbxk5VW8A_pkRJkJotWU/s1600/anh-bia-fb-tinh-yeu-11.jpg" width='660' alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MwgQIMExreBkP9OQygjr6b_jxT3BguZjQGQA4OxnLmIzi66Uw7tqc4m2ArWGWkZ3tvQxM3YgO4emC5SzEyIyrRgJA8_JSP7mlBQgkkkuGtC5U5iwdoamG2X7w-KgOT3VYlpxCmtrwHLQ/s1600/anh-bia-tinh-yeu-dep-3.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYiyL2rJDX8SnUSIlQuam1tiq1qofzTPSR44hlmaI16lbzUt2y4Y9eLzjjGmON-uC7QrTgffEDQ6zuLcU52ajKtnnWaoepByYbRofVpHG_k-2e8quG2OiMc8Ma7sCZVMJB7Vmp20ngBJYd/s1600/anh-bia-fb-tinh-yeu-1.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging_btrix a").click(function() {
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
<style>
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
a, a:visited {
color:#2d3536;
text-decoration:none;
border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
color:#9e805c;
text-decoration:none;
}
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhSn76H3vP0OAvqDc9rden8JG9kGnH9w8TO5xEBJF8iJhDd_CS6068o0_xg-VpchvWGN-O43jK9OeKuCXjzi_6h9wXatWweRqp_sWmCZAuO9LmvUCXI_XvMliCYqsFXH8sqsK1UoaTKo/s1600/slider.png) no-repeat;
width:494px;
height:310px;
margin:0 auto;
padding-top:23px;
margin-top:50px;
}
#slider {
position:relative;
width:430px;
height:250px;
margin-left:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF09PX4XNiXfUS6lfHG9-2gqqiRQqIT3629FRF8-Ou8P5JNnppnyDP9U9OOQqTE0WotdqR3zx0Be2E4HB37K38vb9YU80QCuElk355VJQRm0sf3zMtyQXs3ZDfNboCjt8OUOJlf-FoqUk/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:163px;
bottom:12px;
background: #000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 3px;
border: 2px solid #CCC;
opacity: 0.7;
z-index: 99;
}
.nivo-controlNav:hover{opacity: 1;}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifm2xJNWUrlFU-pYRI47ubdE5mPmBAlQet4zVDNA9Vv__3qWvjldliZxNEIy1ftTdElzmmDFeiB9aocxHyCt6Xut8MExXqHMq-tfe9UyVr0KUpt5VUeQovffdHUzHSkX7c-L_RxZWGc5s/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:0px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:35px;
height:65px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNhEj8eT8t7SH9-ULDvJsTJLS0FRZ7x7J0UWBPddVTcPxckOwXv4_AC9oLCQ6IxuK-HplBjuNPqVvdHRt7Pwy4wVazXMQ61cN3eHWnBM6ZQP5EigUHJIyGlclO3V1Dy53IvGi9FRGTOc/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-35px 0;
right: -40px;
}
a.nivo-nextNav:hover{right: -41px;}
a.nivo-prevNav {
left:-40px;
}
a.nivo-prevNav:hover{left: -41px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.nivo-directionNav a{top: 40%;}
.clear {
clear:both;
}
</style>
<br />
<div id="wrapper">
<div id="slider-wrapper">
<div class="nivoSlider" id="slider">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhielyT0US_NME0XPlOLGjOs9dOshSwDz-mBm3XqhaDaKwPbZjsSSMLSz0WowVWsfNBodgZ-ph_I3h8yl0tuTpexPmnynREHpCXLAxZb9_pbZIbTHvs4I91dc7t7VEJPpL-iwoKe_HBL_A/s1600/btrix-London_Barrier.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQwm8l_3WJMLrLkloG346cUD1mKEvb1XnxffrKAu0VVab_IgFtZjRCOsNghRe05CCH2nnDV-cIrDwNaJ3Y1oW9B73SNiSFViGto-UR6IHd37hZdLyvMSYKs82OcR-rRN9kD3E0mjweOc/s1600/btrix-sunset.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis84w9syyWwmLJpkSmqO2yD38fVuHFP3OUl68En6Z1f3dxsfX5n2f_Ie3G9MsTM_ma3EEl3Uk2mpf5Jpp8TGB_D9MDTUZp8Of8FBF5uxE5eBFGLDiex6mOd1Np2k97GOrZySUpGFMwtbQ/s1600/btrix-car-wallpapers.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZZ9b8msKtFB7GlrU5HrZ4mg8SsjpFY1txIAD1N9fZ_-pbxC9P5XVYVK-_zcMHrGE_H0B69dXnzvtpd4BbcGe8C8bOsRLlRQNFD5Ple90VuDtUnNJ5fXE2H0D1jITPG0YR5vCk23xmP4/s1600/btrix-spring-nature.jpg" />
</div>
</div>
</div>
<script src="http://bloggertrixcode.googlecode.com/files/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://bloggertrixcode.googlecode.com/files/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({directionNavHide:false});
});
</script>
<style type='text/css'>
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
});
</script>
<ul id="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>
</ul>