Xem Blogspot với nhiều giao diện khác nhau

Tình cờ xem giao diện của trang Blog Hình ảnh đẹp thì mình có thấy 1 điều thú vị trong giao diện này, điều này tuy cũ nhưng hiện tại mình tới biết tới nên muốn chia sẻ cùng cộng đồng Blogger...

- Khi tạo Blogger chắc các bạn đã biết đến giao diện mặc định của Blog, đó là giao diện auto chuyển đổi được nhiều giao diện khác nhau. Nhưng chúng ta không sử dụng temp đó mà sử dụng temp do thiết kế riêng.

Ở đây itviet360 chia sẻ với các bạn về việc xem Blogspot vẫn ở dạng auto đó mà vẫn sử dụng được những mẫu thiết kế riêng.

- Dạng Temp auto

Ví dụ trên trang itviet360 các bạn có thể xem giao diện này bằng cách thêm sau Domain 1 cái View...

- Cụ thể: http://www.itviet360.com/view/

- Ví dụ: http://anhdep3.blogspot.com/view/

Thêm sinh động hơn phải không các bạn...

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

Read More

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

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

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

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

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

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

var pix = "px";

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

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

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

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

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

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

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

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

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

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

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

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


- Trong đó:
+: Khu vực bôi vàng là mã màu của hiệu ứng
- HƯỚNG DẪN TRÊN BLOGSPOT
1. Vào bảng điều khiền Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code ở trên vào tiện ích vừa thêm...

Read More

Code thêm Page Like Facebook vào mỗi bài viết cho Web, blogspot

Khi trang itviet360 sử dụng thủ thuật thêm trang Page Like FB vào mỗi bài viết cho blog của mình thì có nhận được yêu cầu của 1 số bạn cần hướng dẫn thủ thuật này.

Ở bài viết này itviet360 chia sẻ thủ thuật này, với Code chia sẻ này các bạn có thể đặt nó ở bất kỳ đây mà vị trí đó cho phép code HTML...
- Ở trang itviet360 mình đặt ở vị trí ngay cạnh thông báo có bao nhiêu comment, với vị trí này các bạn tìm tới đoạn code:

<data:post.commentLabelFull/>

Và dán đoạn code Like Page FB dưới đây ngay cạnh nó
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fitviet360&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=18' style='border:none; overflow:hidden; width:120px; height:18px;'/>

Trong đó:
itviet360 : là tên link Page Facebook của Website mình, nếu các bạn chưa đổi link thì lấy cái ID của Page đó nhé.
Ví dụ:
- https://www.facebook.com/itviet360
- https://www.facebook.com/pages/Ti%E1%BA%BFu-l%C3%A2m-truy%E1%BB%87n-c%C6%B0%E1%BB%9Di/635871999762106

---

Chúc các bạn vui vẻ và đừng quên Like Page itviet360 nhé :)

Read More

Page number Navigation - Code phân trang đẹp cho blogspot

Thủ thuật tạo phân trang cho Blog, Website là 1 điều rất quan trọng cho mỗi site. Khi số lượng bài viết quá nhiều thì các bạn có thể phân trang cho trang chủ, label của blogspot để nhìn nó gọn hơn.

Thủ thuật hôm nay itviet360 chia sẻ với các bạn sử dụng Blogger là cách phân trang hay còn gọi là Page number Navigation của blogger với mẫu đẹp.

HƯỚNG DẪN THỦ THUẬT

1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript

2. Dán Code dưới đây vào tiện ích vừa thêm

<style type='text/css'>

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;}
.showpageNum a,.showpage a {background: rgb(15, 124, 241);color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-weight:bold;line-height:0;text-align:center;padding:7px 13px 7px;-moz-border-radius:36px;-webkit-border-radius:8px;border-radius:8px;}
.showpageNum a:hover,.showpage a:hover {background: rgb(0, 49, 247); color:#000000; margin-right:.6em;text-decoration:none;font-size:15px;font-weight:bold;line-height:0;text-align:center;padding:7px 13px 7px;-moz-border-radius:36px;-webkit-border-radius:12px;border-radius:12px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background: rgb(0, 49, 247); color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:7px 13px 7px;-moz-border-radius:36px;-webkit-border-radius:8px;border-radius:8px;}

</style>

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}}}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}}
function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
}}itemCount++;}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}fFlag++;}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}}}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}}
html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}}
</script>
</script>


- Lưu tiện tích vừa thêm và xem kết quả nhé :)

Read More

Khung chia sẻ bài viết blogspot hiển thị chi tiết tác giả bài viết

Thủ thuật thêm chia sẻ bài viết dưới mỗi bài viết của blogspot đã được itviet360 giới thiệu qua Like và chia sẻ bài viết blogspot theo mẫu của itviet360 version1. Bài viết này mình đã chỉnh sửa và thay luôn chia sẻ cho trang itviet360.

- Với thủ thuật này chúng ta có:

+ Làm thủ thuật đơn giản

+ Tự động cập nhật tác giả bài viết

+ Sử dụng Like & Share của Addthis nhẹ nhàng, đủ các mạng xã hội + trang chia sẻ

+ Tùy biến dễ dàng

CÁCH THÊM THỦ THUẬT:

1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

2. (Ctrl + F) tìm đến 

<div class='post-footer-line post-footer-line-1'/>
(Nếu có 3 dòng như thế này thì chọn dòng thứ 2 từ trên xuống)
3. Dán đoạn code dưới đây xuống đoạn code vừa tìm được ở trên

<!-- Chia se moi -->

<style>

.botpost{margin-left:-15px;width:666px;height:68px;border-top:1px solid #0443A1;border-bottom:1px solid #0443A1;background: #EDF7CD;padding-top:5px;margin-bottom:10px}

.nhan {float:left;width:160px;padding:0 10px 0 10px}
.sendmailp {float:left;width:130px}
.google {float:left;width:260px}
.wdt_button{float:left;margin:5px}
.itviet360 {float: left; width: 95px}
</style>
<div class='botpost'>
<div class='nhan'>
Đăng bởi <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author' target='_blank'><data:post.author/></a>
</div>
<div class='sendmailp'>
<b>Like</b> hoặc <b>Share</b> ủng hộ những bài viết của itviet360 nhé <img src='http://2.bp.blogspot.com/-lMjnz4PUgRo/T5LxjMggATI/AAAAAAAAB8Y/Iawz5yYuv3w/s1600/muiten.gif'/>→
</div>
<div class='google'>
<div class='wdt_button'><a class='addthis_button_facebook_like' fb:like:layout='box_count'/></div>
<div class='wdt_button'><a class='addthis_button_tweet' tw:count='vertical'/></div>
<div class='wdt_button'><a class='addthis_button_google_plusone' g:plusone:size='tall'/></div>
<div class='wdt_button'><a class='addthis_counter'/></div>
</div>
<div class='itviet360'>ITViet360 chia sẻ thông tin và kết nối</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 -->

Trong đó: các con số lưu ý trong phần bôi vàng các bạn tùy chỉnh rộng phù hợp với blog của mình nhé.

Read More

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

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

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

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

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

---

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

Read More

Tùy chình tiện ích nhãn (label Widget) màu đen cho blogspot

Đã khá quen với label của blogspot, làm cho màu sắc của label bắt mắt hơn cũng là 1 cách để người xem blog của bạn thích thú hơn.
Bài viết chia sẻ thủ thuật tùy chỉnh nhãn blogger theo phong cách màu đen. Với phong cách này phù hợp với blog có nền đen.

Xem thêm:
Tùy chỉnh nhãn (Labels) cho blogspot - Thủ thuật
Tùy chỉnh nhãn (Labels) cho blogspot V2 - Thủ thuật
Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]

---

Hướng dẫn thủ thuật:
Bước 1: Vào Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> Nhãn (Labels)
Bước 2: Tùy chỉnh thiết lập tiện ích Labels theo lựa chọn hình dưới đây.

Lưu lại.
Bước 3: Vào mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Dán đoạn code dưới đây ngay bên trên ]]></b:skin>



Code:

/*----- hướng dẫn thủ thuật itviet360.com ----*/

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top, rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}

#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D8D8D8;}


Bước 4: Lưu mẫu lại và xem kết quả nhé :)

Read More

CSS3 hiệu ứng đổi hình ảnh đẹp cho Web, blogspot

Với thủ thuật thêm 1 đoạn code CSS3 sẽ làm cho hình ảnh và trang Web, blog của bạn thêm sống động hơn.
bài viết này mình giới thiệu về đoạn code CSS3 thay đổi hình ảnh khá đẹp mắt khi rê chuột vào.

Demo: http://360anhdep.blogspot.com/p/a.html
Code:

<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px;
height: 434px;
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}


a.nowandthen img:nth-of-type(2){
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}

</style>

<a class="nowandthen" href="http://itviet360.com">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSEPg2UczEDzC1PJOb0BbqMyVIuXEDumjOCO6YyEeinhoArAg_snLy5Kn6ePGejoha0wSdxnIRlvCM9BSHeobIpGys5UryjXi-fcpINlVpQ-PiUXU5pnJ_f2prRVa8F6_jKcKcByXW6H4/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3QTzCJ0xbe-YmXlWwZss35e40UgEYNyd_raWJlgaI9xKlzUmRv3sKxZQJqBzYVAOUbzwGzM8lht8aloDF-N6rCEf21uhE42RdZWs6CwlJvReGKn5CgVpZdS1d3zw-elIbXVfBrfAVtVk/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

- Dán code đó vào vị trí các bạn cần thêm nhé/

Read More

Sửa lỗi (error ) phân trang (pagenavi) trong Blogspot

Nhiều bạn có thắc với mình về blogspot của bạn phân trang ngoài trang chủ và trang Label bị lỗi hoặc gặp những lỗi như hiển thị bài đăng ngoài trang chủ không đúng số lượng.

Việc khắc phục lỗi này khá đơn giản nhưng lại cần phải nhớ và làm nhiều. Đó là khi chúng ta soạn thảo bài viết mới thì chúng ta để dấu ngắt nhảy trong quá trình soạn thảo. Bài nào cũng cần thiết.
Ví dụ:

Read More

Template Blogspot Responsive cực đỉnh cho blog hình ảnh, sản phẩm

Responsive đã được biết đến rất nhiều với những mẫu thiết kế của các dạng mã nguồn khác như Wordpess.
Mới đây Template Blogger cũng xuất hiện loại giao diện cực đẹp này.

DEMO tại Blog: Hình ảnh đẹp 360
Ưu điểm của template này:
- Giao diện rộng toàn trang, tự động điều chỉnh theo kích thước màn hình
- Tính năng Responsive: Khi bạn co trình duyệt lại thì giao diện tự động rớt hình ảnh xuống giúp Blog sống động và không cần phải kéo thanh cuộn ngang của trình duyệt.
- Menu trái gọn.
- Trang trong bài viết trình bày hấp dẫn.
...
Hợp với site hình ảnh, show sản phẩm, blog cá nhân thích du lịch khám phá...
 Download: https://docs.google.com/file/d/0B4bsUgW5hT9xYW1hZVEySElLdDA/edit?usp=sharing

Read More