KIỀU TRUNG KIÊN


Thủ thuật tạo banner Quảng cáo tự động thay đổi cho blogspot

13:53 |

Để đặt banner quảng cáo trên webisite, blogspot thường có một số vị trí ta thường đặt đó là đặt trên Header về bên phải thường có kích thước là 468x60 hoặc đặt banner quảng cáo ở Side của website. Tuy nhiên trong một không gian cố định bạn chỉ có thể đặt 1 banner.

Quảng cáo trên webiste

Thủ thuật sau đây sẽ giúp tạo hiệu ứng chạy luân phiên các banner quảng cáo như trên webiste Shop Gấu Mèo của tôi, từ đó website, blogspot của bạn sẽ trở nên đẹp và sinh động hơn.

Để thực hiện thủ thuật  này, bạn hãy sử dụng code như bên dưới (đặt trong một tiện ích HTML/Javascript).

1 - Đăng nhập vào Blogger / Blogspot
2 - Vào Bố cục của Blogger
3 - Thêm tiện ích >> Chọn HTML/Javascript >>thêm code dướng đây>> Lưu lại

<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 = "URL_banner_0";
link[0] = "URL_link_0";
ban[1] = new Image();
ban[1].src = "URL_banner_1";
link[1] = "URL_link_1";
ban[2] = new Image();
ban[2].src = "URL_banner_2";
link[2] = "URL_link_2";
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>

Phần chứ đot trong đoạn code trên bạn lần lượt thay thế URL_banner quảng cáo tương ứng với URL_link, số 3000 ám chỉ 3000 mili giây, tương đương 3 giây chỉ khoảng cách giữa các lần chuyển banner (bạn có thể điều chỉnh con số này tùy ý)

Bạn phải thiết kế banner quảng cáo sao cho phù hợp với website và vị trí đặt banner của mình.

Chúc các bạn thành công và có 1 webiste, blogspot đẹp!

Tạo nút button: download, demo ... với hiệu ứng bọt nước bằng CSS3 cho Blogspot

08:44 |
Trong quá trình thiết kế blog, blogspot, wordpress hay website việc tạo các nút (button) rất cần thiết và tùy vào mục đích sử dụng mà bạn có thể tạo ra những kiểu nút khác nhau. Có nhiều cách để bạn tạo hình dạng của các nút phục vụ cho việc thiết kế, có thể tạo bằng hình ảnh bằng các công cụ tạo ảnh hay bằng flash, dạng ảnh động... Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo Button download cho Blogger đẹp mắt bằng CSS3.

Tạo nút download, demo
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML) 
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.button{font:15px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat; background-position:bottom left;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'); background-position:bottom left,top right,0 0,0 0;background-clip:border-box; -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px; -moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s}
.button:hover{ background-position:top left;background-position:top left,bottom right,0 0,0 0}
.button:active{ bottom:-1px}
.button.big{font-size:30px}       /*Cỡ chữ nút lớn*/
.button.medium{font-size:18px}       /*Cỡ chữ nút trung bình*/
.button.small{font-size:13px}        /*Cỡ chữ nút nhỏ*/
.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em}

.blue.button{color:#0f4b6d !important;border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}
.blue.button:hover{background-color:#63c7fe;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}

.green.button{color:#345903 !important;border:1px solid #96a37b !important;background-color:#79be1e;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1)),to(rgba(162,211,30,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#82cc27),to(#74b317))}
.green.button:hover{background-color:#89d228;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1)),to(rgba(183,229,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#90de31),to(#7fc01e))}

.orange.button{color:#693e0a !important;border:1px solid #bea280 !important;background-color:#e38d27;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1)),to(rgba(232,189,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f1982f),to(#d4821f))}
.orange.button:hover{background-color:#ec9732;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1)),to(rgba(241,192,52,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f9a746),to(#e18f2b))}

.gray.button{color:#525252 !important;border:1px solid #a5a5a5 !important;background-color:#a9adb1;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1)),to(rgba(197,199,202,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#c5c7ca),to(#92989c))}
.gray.button:hover{background-color:#b6bbc0;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDMZM4DBYzXTDjtv399HyECmuiv0M6OTTW1cckNj62jHEXBBsrjhq8BjhNFZIhI0pmqnq4BD1d9oam-O5gPmuypK83Fx281x9vjlkaDiFSXjQ1Uh31_44vxen_ouZBpfj1ov3idwdRC8h/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1)),to(rgba(202,205,208,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#d1d3d6),to(#9fa5a9))}

5. Và bây giờ bạn chỉ cần tìm vị trí để chèn nút vào với code như bên dưới
<a class="button big blue" href="#">Big Button</a>
<a class="button big green" href="#">Big Button</a>
<a class="button big orange" href="#">Big Button</a>
<a class="button big gray" href="#">Big Button</a>

<a class="button blue medium" href="#">Medium Button</a>
<a class="button green medium" href="#">Medium Button</a>
<a class="button orange medium" href="#">Medium Button</a>
<a class="button gray medium" href="#">Medium Button</a>

<a class="button small blue" href="#">Small Button</a>
<a class="button small green" href="#">Small Button</a>
<a class="button small blue rounded" href="#">Rounded</a>

<a class="button small orange" href="#">Small Button</a>
<a class="button small gray" href="#">Small Button</a>
<a class="button small green rounded" href="#">Rounded</a>


Bạn hãy thay dấu # thành link website của bạn và tên màu xanh thành tên của nút bạn muốn tạo. Như vậy là đã hoàn tất bạn chỉ cần chèn nút vào vị trí mà mình mong muốn là xong.
Chúc bạn thành công!

Cách tạo sitemaps (liệt kê danh sách bài viết) cho Blogspot

13:43 |

Ai sử dụng blogspot cũng thấy một điểm hạn chế lớn của blogspot là không có sẵn Sitemaps, với bài viết này bạn có thể tạo sitemaps cho blogspot của bạn.

Tạo sitemap cho Blogspot

Bước 1 : Đăng nhập vào Blogger Dashboard.
Bước 2 : Vào trang Pages > click vào nút New Page và chọn Blank page.
Tạo page mới
Bước 3 : Click vào tab HTML và dán đoạn code sau vào bên trong :

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();
var postUrl=new Array();
var postPublished=new Array();
var postDate=new Array();
var postLabels=new Array();
var postRecent=new Array();
var sortBy="titleasc";
var tocLoaded=false;
var numChars=250;
var postFilter="";
var numberfeed=0;
function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdjDmkqhjgQeVJvyJ4qI0Y1kI0PAB87wcv1_nGM9rsjCSvJzhKeQPpvRr5NSTZXBFF3XnroQtSj3evXg4DvHK544LckroC94z9TyKRFXwjlqUwwphMi5MWVAh_W868_Sc6_-CJotkJFuC/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://kieukien.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>


Các bạn nhớ thay thế địa chỉ http://kieukien.blogspot.com với địa chỉ blog của các bạn nhé.

Bước 4 : Click Options ở bên phải và chọn Don’t allow.

Bước 5 : Cuối cùng , click nút Publish và xem trên trang.

Thế là bạn đã có một sitemaps hết sức pro!

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

Cách sửa lỗi sai font chứ cho blogspot

22:22 |

* Nếu bạn sử đã từng download Theme blogspot thì chắc hẳn đã có lần gặp phải tình trạng lỗi font ở thanh tiêu đề, lỗi nay thường xẩy ra với những Template không phải là template mặc định của Blogspot.

Lỗi thường gặp: Chữ thiếu nét ở những chữ có dấu, không đọc được...

Cách sửa lỗi:
- Đăng nhập vào blog, tại "Trang tổng quan" bấm vào "Mẫu", bấm tiếp "Chỉnh sửa HTML".
- Tại bảng HTML, tìm kiếm đoạn mã: Oswald, - nằm phần đầu của bảng HTML, sẽ có một hoặc hai đoạn code như sau:
 <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
(Nếu chưa biết cách tìm kiếm nhanh các đoạn mã - mời  các bạn tham khảo bài viết này!)
- Các bạn hãy thay thế Oswald bằng một font chữ thông dụng trong tiếng Việt như: Arial hoặc các font chữ khác như: Times, New Times Roman,...

Lưu ý quan trọng:
- Phần này chỉ được phép thay thế Oswald bằng một font chữ duy nhất!
- Nếu template không có đoạn mã:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>.
Các bạn có thể khắc phục bằng cách thêm đoạn mã trong khung dưới đây vào phía trên thẻ: ]]></b:skin>
.post-body {font-family:Arial, Tahoma, Veranda, Times, Times New Roman}

- Bấm "Lưu mẫu" để lưu lại là được.

* Từ nào cũng viết hoa chữ cái đầu tiên:

Mô tả lỗi:  Lỗi này chỉ xảy ra ở tiêu đề bài viết với đặc điểm: Chữ cái đầu tiên của một từ đều biến thành chữ hoa như khi viết tên người hay tên địa danh vậy. Điều này là không đúng ngữ pháp Việt Nam.

Cách sửa lỗi:
- Gõ vào ô tìm kiếm trong bảng HTML của template từ: capitalize (tạm dịch: chữ cái đầu tiên của mỗi từ là chữ hoa). Các bạn có thể xóa từ "capitalize" hoặc thêm vào giữa nó một ký tự bất kỳ - làm cho từ này trở thành vô nghĩa. Ví dụ: capitzalize chẳng hạn.
- Bấm "Lưu mẫu" để hoàn thành.

* Font chữ không đều về kích thước trong bài viết: 

Mô tả lỗi:
- Lỗi này thường xảy ra ở tiêu đề và phần nội dung bài viết, với đặc điểm: Chữ cái nào có dấu thì nhỏ hơn chữ cái không có dấu - nhìn vào cảm thấy dòng chữ méo mó, khó chịu,...
- Nguyên nhân là do template đã sử dụng font chữ không phù hợp khi gõ tiếng Việt có dấu. Do đó, chức năng chuyển đổi font chữ (nếu có) đã hoạt động không chuẩn xác.
Cách sửa lỗi:
+ Cách 1:
- Gõ từ: "to" vào ô tìm kiếm trong bảng HTML rồi bấm "Enter". Sau đó, thay thế toàn bộ những font chữ "lạ" như: Georgia, Serif, Lucida Sans, Trebuchet MS,..  (đứng trước và sau từ "to" bằng các font chữ phổ biến trong tiếng Việt như: Arial, Times, New Times Roman, Tahoma, Helvetica.
- Bấm "Lưu mẫu" để hoàn tất.
+ Cách 2:
 - Lần lượt gõ các font chữ sau: Georgia, Serif, Lucida Sans, Trebuchet MS,...vào ô tìm kiếm, bấm "Enter" và thay thế bằng các font chữ sau: Arial, Times, New Times Roman, Tahoma, Helvetica.
- Bấm "Lưu mẫu" để hoàn tất.

Bạn có thể xem thêm một số thủ thuật Blogspot khác tại Thủ thuật Blogspot
Chúc các bạn Thành công!

Cách tối ưu Meta Description cho từng bài viết Blogspot

15:36 |
Cách tối ưu Meta Description cho từng bài viết Blogspot
Cách tối ưu Meta Description cho từng bài viết Blogspot.Tối ưu hóa Meta Description trong mỗi bài viết Blogspot. Làm sao để tối ưu Meta Description cho từng bài viết Blogspot

Bài viết liên quan: 

- Cách tối ưu meta keywords cho từng bài viết Blogspot

Sau đây Bít tuốt xin chia sẻ cách  tối ưu Meta Description cho từng bài viết Blogspot cho những ai quan tâm về vấn đề tối ưu các thể meta cho blogspot

Điều cần chú ý về viết Meta Description

- Hạn chế ký tự – hiện tại Goolge cho hiển thị lên tới 160 ký tự, Yahoo là 165 còn MSN lên tới 200. Hãy sử dụng mức thấp nhất của Google, tức là viết thẻ meta decription chỉ nên trong vòng 160 ký tự (bao gồm cả khoảng trống).

- Viết càng “kêu” càng tốt, trong khi vẫn giữ được tính miêu tả của nó. Một thẻ meta description hoàn hảo cũng giống như một quảng cáo hoàn hảo – đó là tính hấp dẫn và mang thông tin.

- Meta Description nên chứa từ khóa và từ khóa nên lặp lại 2 lần hoặc nhiều hơn 2 cũng được (đấy là theo ý mình)

Và nhiều vấn đề khác các bạn tìm hiểu thêm trên các diễn đàn SEO nhé

Cách tối ưu Meta Description cho từng bài viết Blogspot

Cách 1 : Tối ưu Meta Description cho từng bài viết Blogspot bằng cách điền trực tiếp

Cách này thì mỗi khi viết bài viết thì bạn phải mất thời gian điền Meta Description cho từng bài viết, nhưng nó sẽ tùy biến hơn vì bạn có thể viết và thay đổi tùy ý

Các bước thực hiện

Bước 1 : Đăng nhập Blogger => Cài đặt => Tuỳ chọn tìm kiếm

- Tìm Thẻ Meta và đánh dấu vào "Có" để kích hoạt nó.
- Một hộp thoại sẽ xuất hiện khi bạn phải viết thẻ meta cho trang chủ của bạn. Hãy chắc chắn rằng nó không quá 150 ký tự.
- Nhấp vào Lưu Thay đổi!

Cách tối ưu Meta Description cho từng bài viết Blogspot

Ảnh minh họa - Cách tối ưu Meta Description cho từng bài viết Blogspot


Bước 2 :  Là bước khi bạn viết bài viết

- Khi viết bài mới sẽ bạn sẽ thấy "Mô tả Tìm kiếm" trong thanh bên phải, đơn giản là viết mô tả nội dung tóm tắt tìm kiếm của cho bài viết đó.

Cách tối ưu Meta Description cho từng bài viết Blogspot

Ảnh minh họa - Cách tối ưu Meta Description cho từng bài viết Blogspot


Cách 2 : Tối ưu Meta Description cho từng bài viết Blogspot bằng cách auto tự điền

Cách này thì bạn sẽ không mất thời gian để điền Meta Description cho từng bài viết,mà nó sẽ tự điền giúp bạn khi bạn đăng bài xong.Nhưng bạn sẽ không tùy biến được Meta Description và độ dài của Meta Description có thể bị vượt quá độ dài cho phép

Cách thực hiện

Bước 1: Đăng nhập blogspot

Bước 2: Tìm đến phần:  Mẫu (Layout) => Chỉnh sửa HTML

Bước 3: Tìm đoạn code sau :

<b:skin><![CDATA[

Rồi thêm vào trước nó đoạn code dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + &quot;- &quot; + &quot; .Cùng tìm hiểu chi tiết về : &quot; + &quot;- &quot; + data:blog.pageName + &quot; tại Kiều Kiên Blog &quot;' name='Description'/>
</b:if>

Chú ý phần chữ màu đọ bạ thay cho phù hợp nhé

Hiểu đoạn code trên như thế nào

- data:blog.pageName: Là tiêu đề bài viết

Ví dụ : Bài viết bạn có tiêu đề là : Cách tối ưu Meta Description cho từng bài viết Blogspot

Thì nội dung trong thẻ Meta Description của bạn sẽ là :


  • Cách tối ưu Meta Description cho từng bài viết Blogspot cùng tìm hiểu chi tiết về Cách tối ưu Meta Description cho từng bài viết Blogspot tại Bít tuốt Blog


Chú ý: &quot; &quot; tương ứng với dấu "" bạn có thể viết text trong cái này. Dùng cách trên thì Description sẽ lặp lại tiêu đề của bài viết lại 3 lần

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

Cách tối ưu Title - Meta Description - Meta Keywords cho blogspot

15:32 |

Cách tối ưu Title - Meta Description - Meta Keywords cho blogspot

Cách làm: Bạn đăng nhập Blogspot ==> Mẫu (Template) =>> Chỉnh sửa HTML rồi bắt đầu thêm các đoạn code dưới đây lên trên đoạn code  <b:skin><![CDATA[

(Các bạn có thể down code về rồi sửa bằng Notepad ++. Nhớ là sao lưu lấy 1 bản gốc để tránh tình trạng code sai ko khôi phục lại được)

Chú ý: Nếu không thành công các bạn thử xóa hết code nằm trong đoạn <b:include data='blog' name='all-head-content'/> ........  <b:skin><![CDATA[   rồi copy đoạn code dưới đây vào trong nó nhé


<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang chủ --> 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <title>Kiều Trung Kiên</title>
    <meta content='Blog sưu tập các bài viết về seo, wordpress, blogspot  và các thông tin tổng hợp khác của Kiều Trung Kiên' name='description'/>
    <meta content='Wordpress, blogger, blogspot, tin tức, Kiều Trung Kiên' name='keywords'/>
  </b:if>
<!-- Viết Title cho trang 404 --> 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Bài viết này không tồn tại | Bít tuốt blog</title>
</b:if>
<!-- Viết Title cho trang tìm kiếm --> 
<b:if cond='data:blog.searchQuery'>
<title>Từ khóa tìm kiếm cho :: <data:blog.searchQuery/> tại Bít Tuốt Blog</title>
</b:if>
<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang lưu trữ --> 
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Meta Title Archive Page -->
<title>Danh mục bài viết <data:blog.pageName/> theo tháng | Bít Tốt Blog</title>
<!-- Meta Description Archive Page -->
<meta expr:content='&quot;Danh mục bài viết &quot; + data:blog.pageName + &quot; theo tháng .Tìm hiểu thêm vui lòng truy cập bittuot.blogspot.com&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/>
<b:else/>
<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang Static Page lưu trữ --> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- Meta Title Pages -->
<title><data:blog.pageName/> | Kiều Trung Kiên</title>
<!-- Meta Description Pages -->
<meta expr:content='data:blog.pageName + &quot;. Please read the article &quot; + data:blog.pageName + &quot; Tìm hiểu thêm vui lòng truy cập kieukien.blogspot.com&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/>
<b:else/>
<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang Search Label -->
<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/> :: Tổng hợp các bài viết về <data:blog.pageName/>tại Kiều Kiên Blog</title>
<!-- Meta Description Label Page -->
<meta expr:content='data:blog.pageName + &quot; - Tổng hợp các bài viết về:&quot; + data:blog.pageName + &quot;. Cùng đón đọc các bài viết về &quot;+ data:blog.pageName + &quot; tại Kiều Kiên Blog&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/>
</b:if>

</b:if>
</b:if> 
<!-- Tối ưu Title cho trang bài viết -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title>
      <data:blog.pageName/>
    </title>
  </b:if>
Chú ý: Các bạn thay,thêm bớt phần chữ màu đỏ thành các câu từ của bạn nhé.

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

Tạo khung "Nổi bật" làm đẹp cho nội dung bài viết blogspot

09:17 |
Làm đẹp cho nội dung bài viết blogspot.Làm đẹp cho bài viết blogspot.Code làm đẹp cho nội dung bài viết blogspot.Làm đẹp cho phần cần nhấn mạnh - phần quan trọng trong nội dung bài viết

Làm đẹp cho phần cần nhấn mạnh - phần quan trọng trong nội dung bài viết


Bước 1 : Đăng nhập blogspot => Mẫu (Template) => Chỉnh sửa HTML

Rồi tìm đoạn code sau :  ]]></b:skin> rồi dán các đoạn code dưới đây

Bạn thêm đoạn code này lên trên phần ]]></b:skin>
.noibat {
background-color:#C0E9FA;
background-position:30px 20px;
background-repeat:no-repeat no-repeat;
border:3px dashed #0E7FAD;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
box-sizing:border-box;
color:#000;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;
line-height:24px;
margin:20px 10px;
outline:none;padding:10px;
}

Bạn lưu lại vậy là xong bước 1

Bước 2 : Cần chú ý khi viết bài
- Bước này là bước bạn thao tác khi viết bài . Khi bạn viết bài thì bạn đơn giản chuyển dạng soạn thảo văn bản từ dạng Viết sang dạng HTML rồi bao phần nội dung cần gây chú ý vào thẻ:

 <div class="noibat"> Nội dung cần làm nổi bật </div>

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

Tạo nút like facebook, G+ và twitter

09:10 |
Ngoài việc chèn Facebook fanpage vào website, blog, chức năng like facebook là một trong những cách bạn có thể giúp cho bạn chia sẻ bài viết của mình nhanh nhất mà khỏi phải vất vả vào facebook, copy link bài viết, viết giới thiệu bài viết, rồi enter. Các thao tác kể trên được giảm bớt một cách tối đa, chỉ cần nhấn vào nút like facebook, G+ được tích hợp sẵn trên blog, bạn có thể giảm bớt số lượng các bước kể trên thành 2 bước, viết giới thiệu và enter.

Quá tiện lợi đúng không các bạn. Vậy thì còn chờ gì nữa. Cùng vào bài nào các bạn.

Sau đây mình xin giới thiệu các bạn các thêm nút like và nút google plus vào blogspot một cách dễ dàng nhất mà không cần phải tốn một khoảng diện tích trên website.

Cách 1: chỉ có nút like facebook và G+

1. Vào trang quản lý blog


2. Chọn Template rồi ấn vào nút Edit HTML

    3. Vào phần code của blog rồi ấn CTRL + F tìm với từ khóa <body
      4. Copy phần đoạn code sau bỏ vào sau thẻ <body>


      <style type="text/css"> #nt_like_wrapper {position:fixed; bottom:40%; margin-left:0px; float:left; background-color:#E7E7E7;padding:2px;z-index:10;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border: 1px solid #CCCCCC;} #nt_like_wrapper .nt_button {float:left;clear:both;} </style> <div id='nt_like_wrapper'> <div style="margin:4px;"> <div class='nt_button' id='facebook'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script> <fb:like layout='box_count' show_faces='false'></fb:like> </div> <br /> <div class='nt_button' id='google'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script> <g:plusone size="tall"></g:plusone> </div> </div> </div>

      5. Các bạn có thể chỉnh sửa dịch trái, dịch lên trên xuống dưới với 2 thống số mình đã tô đỏ lên ở trên.

          Ví dụ: 
           - Bạn muốn dịch sang trái 1 đốt ngón tay: tăng margin-left:10px; Dịch xuống dưới: bottom:25%

      Cách 2: gồm 3 nút like facebook, G+ và Twitter

      1. Vào trang quản lý Blogspot.
      2. Vào Bố cục > thêm tiện ích > chọn HTML sau đó bạn copy đoạn code dưới đây vào:

      <style>
      /* Fixed Positioned AddThis Toolbox */
      .sharing_box_namkna {
      position: Fixed;
      top: 30%;
      left: 0%;
      border: 0px solid #00EE00;
      padding: 5px 5px 1px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      background: #F0FFFF;
      width: 60px;
      min-height: 295px;
      }
      .sharing_box_namkna .item {
      width: 50px;
      margin: 5px 0 5px 0;
      }
      .twitter_float iframe
      {
      width:55px!important;
      }
      </style>
      <!-- SHARING BOX Fixed-Positioned Toolbox -->
      <div class='sharing_box_namkna'>
      <div style='text-align:center; margin-top:5px'>
      </div>
      <!-- TWITTER -->
      <div class='item twitter_float' style='margin-left:3px'>
      <a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
      </div>

      <!-- FACEBOOK -->
      <div class='item' style='margin-left:3px'>
      <div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
      <div id='fb-root'></div>
      </div>
      <!-- G+ -->
      <div class='item' style='margin-left:5px'>
      <!-- Place this tag where you want the +1 button to render -->
      <g:plusone size='tall'></g:plusone>
      </div>
      <!-- OTHERSHARE -->
      <div class='item' style='margin-left:5px'>
      <!-- AddThis Button BEGIN -->
      <div class='addthis_toolbox addthis_default_style '>
      <a class='addthis_counter'></a>
      </div>
      <!-- AddThis Button END -->
      </div>
      </div>
      <!-- FAST SHARING SCRIPT -->
      <!-- TWITTER SCRIPT -->
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <!-- G+ SCRIPT -->
      <!-- Place this render call where appropriate -->
      <script type='text/javascript'>gapi.plusone.go();</script>
      <!-- STUMBLEUPON SCRIPT -->
      <!-- Place this snippet wherever appropriate -->
      <script type='text/javascript'> 
       (function() { 
           var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
            li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
       })(); 
       </script>
      <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
      <!-- AddThis Button END -->

      3. Sau đó thêm đoạn code sau vào sau thẻ <head>:

      <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

      Bạn có thể thay đổi thanh trươt like sang bên trái, phải bằng cách thay đổi chữ bôi đỏ phía trên "left" thành "right" và ngược lại
      Chúc các bạn thành công!

      Cách chèn biểu tượng chat yahoo, skype vào Website, Blogspot

      11:31 |
      1. Chèn Yahoo: 
      Xem tại Chèn trạng thái online/offline yahoo, skype vào website, wordpress, blog
      2.Chèn Skype
      iệc đầu tiên bạn cần làm là cho phép hiển thị trạng thái trực tuyến trên web. Để thực hiện bạn đăng nhập Skype, chọn thực đơn Tools -> Options -> Privacy và đánh dấu chọn Allow my status to be shown on the web.
      Tiếp theo bạn click vào địa chỉ http://www.skype.com/share/buttons/ và thực hiện theo các bước.

      Bước 1: Nhập Skype Name (Tên mà bạn dùng để đăng nhập trên Skype).
      Bước 2: Lựa chọn biểu tượng hoặc click vào link này để tạo biểu tượng.
      Bước 3: Xem hiển thị trước.
      Bước 4: Khi đã ưng ý thì chép phần mã nằm trong Copy & pase this code để dán vào HTML/JavaScript trên Blogger hay dán vào mã nguồn website của bạn.