itviet3601: javascript

Hiển thị các bài đăng có nhãn javascript. Hiển thị tất cả bài đăng

Thứ Hai, 21 tháng 4, 2014

Hướng dẫn code quảng cáo đứng & trượt dọc 2 bên trang Web

Sau khi đọc bài viết Code Popup quảng cáo tổng hợp tại ITViet360 thì nhiều bạn có nhu cầu và hỏi thêm dạng code quảng cáo đứng hoặc trượt dọc 2 bên trang Web. Với code quảng cáo trượt dọc 2 bên Website sẽ gây được sự chú ý lớn.
Ở bài viết này ITViet360 sẽ giới thiệu với bạn 2 loại quảng cáo 2 bên được dùng thông dụng nhất hiện nay. Và cách thêm chúng như thế nào?

Đối với Blogspot
- Bạn chỉ cần dán code vào 1 tiện ích HTML/Javascript/
Đối với Website
- Bạn thêm code vào nằm trong thẻ <body> ... </body> là được
1. Code quản cáo đứng dọc cố định 2 bên trang Website.
Demo tại Blog: Dịch vụ SEO Web hàng đầu
chi tiết

»» read more

Thứ Hai, 21 tháng 10, 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:

chi tiết

»» read more

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

»» read more

Thứ Hai, 7 tháng 10, 2013

Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot

Đối với Slider thì việc sử dụng làm điểm nhấn cho blog, website là điều cần thiết. 1 Slide đẹp và mượt mà luôn được người dùng hướng tới. Bài viết này itviet360 chia sẻ với bạn code và cách làm thêm 1 Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot cũng như trên website khác

DEMO
chi tiết

»» read more

Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot

DEMO
chi tiết

»» read more

Thứ Ba, 1 tháng 10, 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

chi tiết

»» read more

Thứ Sáu, 2 tháng 8, 2013

Tạo banner quảng cáo hiển thị luôn phiên cho Blogspot, Web

Làm thế nào để hiển thị quảng cáo gọn nhẹ mà chứa được nhiều quảng cáo? Hướng dẫn cho mình cách tạo quảng cáo hiển thị thay phiên nhau trên Website, Blogspot...
- Hiển thị quảng cáo luôn phiên nhau là 1 điều Hợp lý đối với Website, Blog nào còn ít chỗ trống. Bài viết này itviet360 giới thiệu tới các bạn Code Javascript cho quảng cáo của bạn trở nên gọn nhẹ và sinh động hơn...

Quảng cáo, hien thi quang cao, Advertising

Demo tại Blog (theo yêu cầu): Hình ảnh đẹp
- Ở đây itviet360 có 3 hình ảnh tương ứng với 3 link:
1. Link: Dịch vụ SEO Web giá rẻ
2. Link: Tải game miễn phí
3. Link: Tải game Avatar
Tương với với 3 hình ảnh (ở Code dưới)
Code:
<script type="text/javascript">
// Banner Rotation Script by Bloggerism
var ban = new Array();
var link = new Array();
var index = 0;
ban[0] = new Image();
ban[0].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglgGt7xNd3hhCQf-m0gwQzxH3nlmUwxcGhPnicf8ktmYTWUoTOnEhNR0dV62Q7pr7V6UR2vmVNw5iT_gicSoq3Iv6jPXj0PW8Ynvoi5vh6KzDztIhUporXhHgL_BVCix19HyvF7KIfjtLP/s1600/seo-gia-re.gif";
link[0] = "http://www.itviet3601.blogspot.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html";
ban[1] = new Image();
ban[1].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj70ILJd82TUxnMyk9kf4xlwmK7fhd2lG49Q2PGHgIAU3aHI4yj-1piPhhugnFsnLv55mcn8fl7cX56g975oThDuDBeUnRsZx28Ukp4vp4VdfrUtCUOJNPg8O2nd8iNJ265MNzh4qE9-o0h/s1600/taigame2-logo.png";
link[1] = "http://taigame2.blogspot.com";
ban[2] = new Image();
ban[2].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMscMDYDLtmFVLpB5NZ9srIRhiY9vdDvnpxOH1Pcknv4riIQ_sisNe7JNEZqe8BI1bbS5fu0IISoq4vyElVQSbb6O4O1uhU76H2W-mx2Mgt2AyCnfUb-6SE-KZ0_QdW2Zl978TSCyp4Hju/s1600/banner-avatar-1.gif";
link[2] = "http://www.itviet3601.blogspot.com/2013/07/tai-game-avatar-222-cho-dien-thoai-android-ios.html";
index = Math.random() * (ban.length);
index = Math.floor(index);
function rotator()
{if (index == ban.length) index = 0;
if (document.images) {
document.images.rotation.src = ban[index].src;
}
else {
document.getElementById('rotation').src=ban[index].src;
}
index++;
setTimeout('rotator()',3000);
}
function go() {window.open(link[index-1]);}
</script>
<img id="rotation" style="cursor:pointer;" src="" onclick="go();"/>
<script type="text/javascript">rotator();</script>
- Hướng dẫn 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 :) và lưu lại xem kết quả

»» read more

Thứ Tư, 17 tháng 7, 2013

Cách nhúng code Google dịch vào Website, Blogspot, Blog [tổng hợp]

Làm thế nào để đưa Google dịch tự động vào Website? Cách đưa Google translation vào Blog như thế nào?
Rất nhiều Blogger đưa ra vấn đề về muốn đưa google dịch vào blog mà không dùng tới tiện ích sẵn có trong Blogger (Tiện ích này có 1 điểm là nó bắt để tiêu đề)
- Hôm nay, itviet360 chia sẻ bài viết này với nội dung hướng dẫn cách nhúng code Google dịch vào Website, Blogspot, Blog [tổng hợp]
Như vậy việc đầu tiên chúng ta phải xác định được Code Google dịch.

Các bạn làm theo các bước hướng dẫn dưới đây
BƯỚC 1: Truy cập Website Google translation
http://translate.google.com/manager/website/?hl=en

BƯỚC 2: Điền thông tin Website và lựa chọn ngôn ngữ

Website translator Add Website, google dich

BƯỚC 3: Cài đặt cho ngôn ngữ dịch vào giao diện của hộp dịch

bấm Get Code>>
BƯỚC 4: Google cho chúng ta 2 đoạn Code và nhắc chúng ta vị trí dán Code đó, các bạn chỉ việc Copy và dán đúng chỗ theo hướng dẫn của google dịch nhé

»» read more

Thứ Năm, 11 tháng 4, 2013

Code popup Javascript tạo quảng cáo cho Web, blog [tổng hợp]

Theo yêu cầu của 1 số bạn. Ở bài viết này mình sẽ tổng hợp 1 số code Popup quảng cáo cho Website, blog. Mình sẽ cập nhật những code Popup javascript ở bài viết này luôn. Nên có thể các bạn sẽ quay lại bài viết này để xem cập nhật.
Khi ghé thăm Website có đặt Popup chắc hẳn bạn cũng sẽ không hài lòng, nhưng vì lý do quảng cáo nên Admin của Website vẫn phải sử dụng. Nên mình mong các bạn hãy thông cảm cho. Code Popup được nhiều người hài lòng nhất vẫn là những dạng code popup chỉ chạy popup 1 lần trong thời gian cố định. code mở new Tab, mở new windows nhỏ

1. Code Popup nhiều lần, cứ Click bất kỳ vị trí nào là nó lại nhảy 1 new Windows mới.
- Loại này thêm code thì rất đơn giản nhưng người xem rất không hài lòng.
Code:


<body onclick="open_popup()">
<script type="text/javascript">
function open_popup() 
{
window.open("http://itviet360.com/")
}
</scirpt>

Nếu muốn Popup nhiều trang thì bạn thêm những dòng Window.open tương tự


window.open("link Web muốn popup")

2. Code Popup theo thời gian 1 lần / 1 ngày / 1 địa chỉ IP
- Dạng này bạn xem ở bài viết đã hướng dẫn cụ thể: http://www.itviet360.com/2012/10/code-popup-javascript-xuat-hien-mot-lan.html
3. Code Popup mở new Tab
- Code này thì chỉ xuất hiện 1 lần / 1 lần mở trình duyệt. Nghĩa là khi bạn không tắt đi mở trình duyệt lại thì không bị popup lần nữa nhé.
- Xem chi tiết tại bài viết: http://www.itviet360.com/2012/10/code-popup-javascript-xuat-hien-mot-lan.html
4. Code javascript popup trên màn hình
- Loại code này rất được vì nó Popup lên giao diện màn hình luôn, và chỉ xuất hiện 1 lần. Người xem Website chỉ cần tắt nó đi là ổn. Không bị gây phiền, tuy nhiên hiệu quả
- Xem chi tiết tại: http://www.itviet360.com/2013/01/thua-thuat-jquery-popup-like-facebook-box-cho-web-blog.html
5. Dạng Javascript hiển thị góc màn hình.
- Loại này thì được sử dụng nhiều hơn vì nó không làm ảnh hưởng gì tới người xem webstie của bạn.
Xem chi tiết hướng dẫn dạng này tại bài viết: http://www.itviet360.com/2013/03/code-tao-quang-cao-goc-man-hinh-cho-web-blog.html

Tiếp tục cập nhật...

»» read more

Thứ Hai, 8 tháng 4, 2013

Jquery slide show chạy ảnh đẹp cho Web, blogspot [V2]

Slide chạy ảnh đẹp luôn là những điểm nhấn trên 1 Website, blog. Slide đó bạn có thể trình bày những thông tin nổi bật như bài viết, quảng cáo, hình ảnh đẹp...1 hiệu ứng Slide đẹp cũng góp phần làm tô điểm thêm cái đẹp và sống động của trang Web. Ở bài viết hôm nay mình giới thiệu tới các bạn V2 của Slide Jquery chạy ảnh.

Xem thêm: Jquery slide show chạy ảnh đẹp cho web, blog [V1]

Demo và hướng dẫn mình sử dụng trên nền Blogger, ở dạng Website các bạn làm tương tự, dán vị trí code là Javascript và HTML là OK. ^^

Jquery slide show chạy ảnh đẹp cho Web, blogspot, Jquery Slide show images for blogspot

Demo trực tiếp

- Hướng dẫn thủ thuật:

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 dưới đây vào tiện ích vừa thêm:

Code


<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/AVvXsEh6MgXW3jQUtsCeF40sO7uxeV4izXd0stfKkgFdjYZFjfvnrzT0hAgrOzJlckkSJUQ4mL5Qf_zBsmu4fB7slNm7MddssU8IwXHJyhvPBj7WHnFyXVaSUu9sLoe6sKYskaogmkYLcA6AJ0s/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 hrefs="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCUEfHit_-De59blmj19VQew71DLDvCRnOa6fHTt735feNQF9IhJsxICFh2WMi8X0QoTocvD7SpvgvWwACqo2G9ID_PWFqHcgCOjwstzcTyRCXdqqFq5SNLzAVbCHwh5_20HtT9_CrEej/s1600/anh-bia-fb-tinh-yeu-10.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
            <a hrefs="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpE4czRwl4-B-pVHWeqSU5cBbQrDaG5JlgTPHqEyerB1HAe23mEYd72X9jxPFNph0e5uSYI4QzIhMr9YyBCbp-AxtCajbsjforsCUnC5DKl2UMtJMTW7erRHoVQuuGobKE3GDeK_2XOiDx/s1600/anh-bia-fb-tinh-yeu-11.jpg" width='660' alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
            <a hrefs="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR226XLaPEgzWXUiBOqApYcSyciLBUQ9-srDVjRrnt5Uxcl5gy0xNbbJDRnhJ-ejbMTRzNmrfwRFGXr6pDImJVks6z8I-jCa4GEovZN_xysEFpfVVWKs4TOJ4QSqwqgyT_Xq6LXXSszpq1/s1600/anh-bia-tinh-yeu-dep-3.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
            <a hrefs="http://itviet360.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfI37um_lHOil3-G6v1o3HOhMg_JhupwQEE_yOdxzPwbMYdHGUvMSjGB-4pFxPLENJT2q9NWyVmyAcaP1btVaQBkMzW0nC9le0pF7-iL2ubpH-k7pCtIk-zAHg00dzhsDciPeii1hI9rQ/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 hrefs="#" rel="1">1</a>
        <a hrefs="#" rel="2">2</a>
        <a hrefs="#" rel="3">3</a>
        <a hrefs="#" 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>

Các điểm lưu ý mình đã in màu khác. Các bạn có thể chỉnh sửa theo ý của mình nhé.
- Lưu lại và xem kết quả :)

»» read more

Thứ Ba, 2 tháng 4, 2013

Jquery slide show chạy ảnh đẹp cho web, blog

Làm thế nào để thêm slide chạy hình ảnh đẹp, khuyến mãi hấp dẫn cho blog, website ?
1 thủ thuật khá đơn giản là chúng ta sử dụng Jquery để làm được slide ảnh đó. Ở bài viết này mình gửi tới các bạn code và hướng dẫn thủ thuật trên blogger

jquery slide show image đẹp cho Website blogger

Demo trực tiếp

Code:


<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/AVvXsEjIb7MSSxiHA41Brwa93u7SixyezwJM6jeBvYDMssRCy4VjDeub3yZnry87PoU6_J0XBPO2V-9NQSoQAJVPgxQNsIeN-9Pfg0a-tEvTyBLPRHZ6Gg4enTzoBjaAQMKGHFB4D1l5CTqcvpc/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/AVvXsEiQQjrvXkEodtqyz9sMWpb9czrdOvXBwbcNCShHgWuv1UvoWq_ZiGG-Ge_uyOVoM6hLR15CU3yGl_6ph5AFv-CphhHmg1QmFsWQlKH_Cl4QLoc1Iz2cOUk4P9ZY-sNyYk15a9lrn60DPpk/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/AVvXsEiC6M07euqT3RAgIdt_fW863MEHyBxATot5uI9FB7WSVCphBOM96UN9QR-1pDaypgIZDIuqOIZAHfX-sfLT3UDdoNmL71z-Y1PEHzEFWyqtEcKVG9R3JEAlIPMSzc5BO3FSsb9GFGHiNGc/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/AVvXsEgDMaHkJA6oXaATB4JYt_isin8rb7cnSXX4rfn3BGGm_Orp1XFWlm6KLvAi98k8mA4a7MrQtQ8lkGlxFytZDcEux_ejcc8ji8K36WflEwzLD1kmKDSZytQGhyphenhyphenVyp8eosaBsmAbdvYOMSf0/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/AVvXsEjD7O6Ow-mNme2jbAVuL8YvVXoGRS0hScjVkPhYEPDpfeJPEpJ-BMBJjLDGhZr5EX-l80I0Y_Nc7MuGcJNchZ1Uca9BQ7KNIZcMCh1TVb4pNa4Vdg4jWoDSaICvh6-KhpkcMoJDHrCtZBo/s1600/btrix-London_Barrier.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinSUZn3G9ixJ48IZgO5ro9jUfo6O0fKsK-h-NkOqxGFGLwXv9OFWmxTtZiZ4pt1TOAkUntWYx2JXWqr9yfk-T0NPv6KZLWIPd51NfL4fbM0ldfgbmXiVGJKPK0D3z5TPtgXSY4C61-Ed8/s1600/btrix-sunset.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6jCkttymTaqlR3YeUY2lGS0YCB2yZ7Ze1hZAsqN9RjlvAgBy3csOzj196JTharx4prtLZmWVgXclxSx8UN5ltjIUMimW7fZaHH_RfAzjlPeWQr6cFAO5eMr66UGoEVw7wAUDnymyJC7U/s1600/btrix-car-wallpapers.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVi40PIwlqmw34tz4BywLwaDMaFQY73Xd0hbxGJobL3zxiYYWkDvZhlFLEUlP1YrdP0-EpFiaarI34XJY92ls72ExkAaT3UPV9OkRp4_g_Kk5AXnePkJb_8Ld9M4SwSyWNTRr9prbjz90/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>

Trong đó:
Code bôi xanh là CSS, Code bôi đỏ là HTML + Javascript.
Link hình ảnh các bạn thay thế bằng ảnh của mình.
Hướng dẫn thêm cho blogspot:
- Thêm 1 tiện ích và dán Code ở trên vào tiện ích đó. Tiện ích HTML/ Javascript đó nên thêm ở trên phần bài đăng.

»» read more

Thứ Năm, 28 tháng 3, 2013

Tạo Menu jQuery Horizontal trỏ xuống ngang cho Web, blog

Làm thế nào để thêm menu trỏ xuống ngang cho Website, blog? Mình muốn tạo menu ngang trên blogspot của mình thì làm thế nào?
Code sử dụng cho dạng menu đó thì CSS cũng làm được nhưng có vẻ không đẹp bằng JQuery. Ở bài viết này mình giới thiệu tới các bạn code đó và hướng dẫn thủ thuật trên blogspot. Đối với Website thì các bạn chèn theo hình thức code JS và HTML tương tự

How To Add jQuery Horizontal Sub Navigation to Blogger, menu ngang đẹp cho web blog

Code này mình chia làm 2 phần. Phần code Jquery + CSS và Code HTML.
Code Jquery + CSS:


<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>

Tiếp theo là code HTML:


<ul id="topnav">

<li><a hrefs="#">Home</a></li>
<li>
<a hrefs="#">Blogger</a>
<span>
<a hrefs="#">Widgets</a> |
<a hrefs="#">Tip And Tricks</a> |
<a hrefs="#">Basic</a>
</span>
</li>
<li>
<a hrefs="#">Tutorials</a>
<span>
<a hrefs="#">HTML</a> |
<a hrefs="#">Java Script</a> |
<a hrefs="#">CSS</a>
<a hrefs="#">jQuery</a>
<a hrefs="#">MooTools</a>
</span>
</li>
<li>
<a hrefs="#">Templates</a>
<span>
<a hrefs="#">1 Column</a> |
<a hrefs="#">2 Column</a> |
<a hrefs="#">3 Column</a> |
<a hrefs="#">4 Column</a> |
<a hrefs="#">Premium</a>
</span>
</li>
<li><a hrefs="#">Subscribe</a></li>
<li><a hrefs="#">Advertise</a></li>
<li><a hrefs="#">Contact</a></li>

</ul>

Hướng dẫn thêm vào Blogger:
1. Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Dán code Jquery + CSS trước thẻ đóng </head> và lưu mẫu.
3. Vào bố cục (Layout) -> thêm tiện ích (Add a Widget) -> HTML/Javascript (tiện ích này thêm ở bên trên tiện ích POST nhé)
4. Dán code HTML vào tiện ích đó và lưu lại.

»» read more

itviet3601

Pages

Random Post

Thứ Hai, 21 tháng 4, 2014

Hướng dẫn code quảng cáo đứng & trượt dọc 2 bên trang Web

Thứ Hai, 21 tháng 10, 2013

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

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

Thứ Hai, 7 tháng 10, 2013

Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot

Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot

Thứ Ba, 1 tháng 10, 2013

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

Thứ Sáu, 2 tháng 8, 2013

Tạo banner quảng cáo hiển thị luôn phiên cho Blogspot, Web

Thứ Tư, 17 tháng 7, 2013

Cách nhúng code Google dịch vào Website, Blogspot, Blog [tổng hợp]

Thứ Năm, 11 tháng 4, 2013

Code popup Javascript tạo quảng cáo cho Web, blog [tổng hợp]

Thứ Hai, 8 tháng 4, 2013

Jquery slide show chạy ảnh đẹp cho Web, blogspot [V2]

Thứ Ba, 2 tháng 4, 2013

Jquery slide show chạy ảnh đẹp cho web, blog

Thứ Năm, 28 tháng 3, 2013

Tạo Menu jQuery Horizontal trỏ xuống ngang cho Web, blog