Traidatmui.com – Bài viết hôm nay mình chia sẻ cho các bạn một đoạn code để các bạn có thể tạo hiệu ứng khá đẹp mắt cho hình ảnh trên Blogspot của bạn. Ưu điểm của đoạn code này là chúng ta chỉ sử dụng CSS3 và HTML nên sẽ không làm ảnh hưởng đến tốc độ blog của bạn nhiều. Tác dụng của code này là khi bạn thiết lập 2 ảnh và rê chuột vào ảnh thì 1 ảnh sẽ được cuộn đi tạo một hiệu ứng rất đẹp chi hình ảnh.

» Bắt đầu thủ thuật

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>

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

5. Save template lại và trở về phần bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<a class="nowandthen" href="http://www.traidatmui.com/">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggWpx5wsjUh-eyIC5u-BqbKG_bHC53gNHNJj70U-1b2UEIoKZLOUWyfp-zWCbrEaa0kWV-HG_OTlT6nJMKI2XwTpbygeZHJrMgqss3xlciFskytAguixZksYKcL-4nvieW2PHMURpmaKA/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjr-asxyHZELZ_-ZNig3KSwTWprtbVxMIg5Scl9_eIeht8FA1hhn9CVYFBcSit0hlnfajlvT1py-T8jQeU1Q_7VjHzRNeNOiGy5ULCr9cXG434SIGSZ-nUJY5GJKkxSPQgYo6L1XyO9Qc/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

7. Cuối cùng save tiện ích lại

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

Tham khảo bloggertrix.com

Traidatmui.com – Với bài viết hôm nay mình chia sẻ cùng các bạn đoạn code có thể giúp các bạn tạo hiệu ứng trượt cho hình ảnh của bạn. Với đoạn code này thì khi bạn rê chuột vào hình ảnh thì hình ảnh sẻ được trượt lên phía trên và hiển thị phần mô tả cho hình ảnh đó. Code này chỉ sử dụng CSS và HTML nên sẽ không ảnh hưởng nhiều đến tốc độ blog của bạn.

Hình ảnh minh họa

» Bắt đầu thủ thuật

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>

.image-box {
width:320px;height:320px;overflow:hidden;background-color:white;
border:1px solid #ccc;float:left;margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.image-container,
.image-details {height:310px;border:5px solid white;background-color:#eee;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:310px;height:310px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.image-details h4,
.image-details p {
margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
font-size:120%;height:auto;
}
.image-details .details {
padding:10px 12px;overflow:hidden;
}

.image-details .more {
color:white;text-decoration:none;display:block;
text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:320px;
height:320px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}

5. Save template lại và trở về phần bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0TCJ4U5wffHzs3L0PMlcJQZhNbQqYuxkY4lHWHEjHIX8lF7qsm9Ft53sJ00iCS-gRM5imJN_Lr9ZpExfbfmK2b7XDBlzw7edRUmMR5H2I-u0URUBsKbT0HXWaglbyAP9qODOZhyphenhyphenakm5Q/" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Tiêu đề</h4>
<p>Ở đây sẽ là nội dung mô tả cho hình ảnh của bạn</p>
<p>
<a class="more" href="# ">Đọc tiếp...</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>

</div>

Bạn thay link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0TCJ4U5wffHzs3L0PMlcJQZhNbQqYuxkY4lHWHEjHIX8lF7qsm9Ft53sJ00iCS-gRM5imJN_Lr9ZpExfbfmK2b7XDBlzw7edRUmMR5H2I-u0URUBsKbT0HXWaglbyAP9qODOZhyphenhyphenakm5Q/ thành link ảnh của bạn và tiêu đề nội dung của bạn.

7. Cuối cùng là save tiện ích lại.

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

Tham khảo bloggertrix.com

Traidatmui.com – Khi bạn sở hữu web/blog thì việc làm sao để web/blog của mình được nhiều người biết đến và được nhiều người truy cập vào xem là điều cần phải làm. Hiện nay với các mạng xã hội như Facebook, Google+, Twitter.. là những nơi giúp bạn có thể tiếp cận nhanh đối tượng người dùng hay khách hàng mục tiêu, những người có nhu cầu về nội dung hay sản phẩm mà bạn đang cung cấp. Tuy nhiên nếu bạn chỉ làm thao tác thủ công đăng bài lên các trang mạng xã hội thì rất mất thời gian và không đảm bảo cập nhật nhanh, ở đây mình sẽ hướng dẫn bạn đưa bài viết của web/blog tự động lên các trang mạng xã hội lớn hiện nay là Facebook khi bạn đăng bài viết mới lên web/blog của mình.

Ở đây mình hướng dẫn bạn dùng RSS Graffiti để có thể post bài viết tự động từ blog của bạn lên trang facebook của bạn, với RSS Graffiti thì bạn có thể đăng bài tự động lên trang người dùng hay trang Fanpage của mình và có thể đăng từ nhiều blog lên Facebook của mình.

Đầu tiên bạn hãy đăng nhập vào trang Facebook của mình tại facebook.com và gõ vào ô tìm kiếm từ khóa RSS Graffiti để tiến hành cài đặt ứng dụng. Tiếp theo bạn hãy nhấn Go to Permissions Dialog để tiến hành cài đặt.

Sau khi cài đặt hoàn tất thì bạn chọn Add New Publishing Plan để bắt đầu bật tính năng đăng bài tự động lên facebook



Bạn thay đổi tên My Publishing Plan hoặc có thể giữ nguyên

Sau khi tạo xong thì bạn sẽ thấy được 1 bên sẽ là nguồn (Nơi lấy bài viết) và 1 bên sẽ là đích đến (hay nơi nhận bài).

Bạn nhấn Add New bên Target và chọn đích gửi bài lên có thể là trang cá nhân hay Page của bạn.

Tiếp theo chọn Add New bên Sources để thêm nguồn lấy bài viết lên facebook, ở đây chúng ta sẽ dùng tên miền hoặc link Feed của FeedBurner hoặc mặc định của Blogspot ví dụ: example.com/rss.xml.

Tiếp theo là bước tùy chỉnh 1 vài thông số như tần suất cập nhật, số bài tối đa hay thứ tự của chúng...

Sau khi bạn save lại bạn hãy nhấn tiếp nút OFF để bật tính năng cập nhật bài viết tự động lên Facebook là xong.

Ở chuyên mục Sources thì bạn hoàn toàn có thể thêm nhiều feed của nhiều Blog khác nhau để cùng xuất bản bài viết lên Facebook của bạn.

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

Traidatmui.com – Feedburner chắc không còn lạ lẫm đối với bạn tạo blog hay web, vâng trước đây mình đã có bài viết hướng dẫn bạn tạo form để khách truy cập có thể đăng ký nhận bài viết qua email trên web/blog của bạn và 1 bài đăng ký nguồn feed với Feedburner cho từng nhãn riêng biệt. Có nhiều bạn hỏi mình cách để có thể đưa logo của mình lên trang feed như của mình, nhân đây mình cũng chia sẻ cùng các bạn cách này để bạn nào chưa biết có thể tham khảo. Thực ra nó cũng không qua phức tạp vì Feedburner đã có hỗ trợ cho chúng ta.

Hình ảnh minh họa

Bạn hãy truy cập http://feedburner.google.com và chọn nguồn feed muốn thêm logo.

Tiếp theo bạn chọn tab Optimize

Tiếp theo bạn click Feed Image Burner ở cột bên trái, sau đó chọn Image Source là Specify custom image URL và thiết lập các thông số, xong nhấn ACTIVATE để kích hoạt là xong.

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

Traidatmui.com – Với sự cải tiến về giao diện mới của Blogger vừa qua thì đi kèm với đó là một số tính năng mới về SEO. Một trong số đó mình muốn nói đến là tính năng "Mô tả tìm kiếm" (Search Description) cho từng trang trong blogspot. Đây là một tính năng rất tốt cho SEO vì với tính năng này bạn hoàn toàn có thể tự mình quyết định đoạn thông tin tóm tắt mô tả cho bài viết của bạn trong kết quả tìm kiếm thay vì để google tự lấy thông tin để mô tả. Việc này sẽ tránh được thông tin mô tả không hay, không thú vị, không lôi cuốn khách truy cập click vào bài viết của bạn, vì bạn đã tự chủ được phần thông tin mô tả này.

Tính năng này ra cũng khá lâu và việc bật tính năng này cũng đã được giới thiệu, tuy nhiên do đối với nhiều bạn mới tham gia vào blogger thì còn gặp khó khăn trong vấn đề này nên hôm nay mình chia sẻ để các bạn có thể bật tính năng mô tả tìm kiếm (Search Description) cho blogspot của mình để có thể cải tiến về SEO cho chính site của bạn.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Chọn mục Cài đặt (Settings)
3. Click tiếp Tùy chọn tìm kiếm (Search preferences)
4. Bạn click chỉnh sửa trong mục Thẻ Meta (Meta tags)

5. Bây giờ bạn hãy nhập thông tin mô tả chung cho blog của bạn vào ô Description và chọn Lưu thay đổi (Save)



Như vậy là bạn đã bật được tính năng mô tả cho cả trang blog và trong từng bài viết của bạn, từ bây giờ mỗ khi bạn vào đăng bài viết mới thì bên cột bên phải sẽ xuất hiện ô Mô tả tìm kiếm (Search Description). Bạn chỉ cấn cho đoạn mô tả mà bạn muốn mô tả về bài viết trên công cụ tìm kiếm vào ô này và xuất bản bài viết là xong.



"Tuy rằng đây là một cộng đoạn đơn giản thôi nhưng tác dụng về SEO của nó không hề nhỏ nên các bạn hãy chú trọng đến vấn đề này. Ngoài việc cần làm là tự chèn thông tin mô tả cho bài viết bạn cũng cần tối ưu hình ảnh trong bài viết bằng các chèn thêm thẻ ALT và TITLE cho hình ảnh. Việc chèn 2 thuộc tính này Blogger cũng đã hỗ trợ nên bạn chỉ cần click vào hình ảnh và chèn vào 1 cách nhanh chóng."

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

Traidatmui.com – Ở bài viết này mình chia sẻ cho các bạn đoạn code có thể giúp bạn hiển thị được thời gian hiện tại ngay trên thanh tiêu đề của trình duyệt. Để cài đặt cho Blog của bạn thì bạn chỉ cần copy và dán đoạn code bên dưới như hướng dẫn.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Chọn Bố cục (Layout)
3. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<Script Language="JavaScript" Type="Text/JavaScript">
var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;
</script>

4. Save tiện ích lại

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

Traidatmui.com – Thỉnh thoảng khi lướt qua 1 số web/blog bạn thấy một hiệu ứng ảnh cũng khá thú vị đó là hiệu ứng làm mờ dần ảnh khi bạn rê chuột vào hình ảnh đó. Hiệu ứng này không đơn giản sử dụng thuộc tính opacity mà ở đây chúng ta sử dụng thư viện JQuery sẽ tạo nên một hiệu ứng thú vị hơn nhiều. Ở đây mình sẽ chia sẻ cho bạn 1 đoạn code nhỏ để có thể tạo hiệu ứng này cho Blogspot của mình khá dễ dàng.

» Bắt đầu thủ thuật

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 code bên dưới vào trước thẻ </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // Độ mờ ban đầu của ảnh trước khi rê chuột (1.0 tức ảnh rỏ nhất, 0 là mờ nhất)
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.3); // Độ mờ của ảnh khi rê chuột vào
},function(){
$(this).fadeTo("slow", 1.0); // Độ mờ của ảnh khi không còn rê chuột vào ảnh
});
});
</script>

Ở trên chỉ là tạo hiệu ứng cho các hình ảnh ở trang bài viết của Blogspot, nếu bạn muốn tạo hiệu ứng cho các ảnh thuộc class nào đó thì chỉ việc thay đổi .post thành class ban muốn tạo hiệu ứng là được.

Ngoài việc tạo hiệu ứng làm mờ ảnh như trên thì chúng ta hoàn toàn có thể áp dựng ngược lại hiệu ứng này, tức là ban đầu chúng ta sẽ để hình ảnh dạng mờ và khi rê chuột vào hình ảnh sẽ rỏ hơn vẫn hiệu ứng đẹp mắt đấy. Bạn chỉ cần thay đổi thông số ở bên trên là được. Ví dụ thay 0.3 thành 1.0 và ngược lại 1.0 thành 0.3.

5. Cuối cùng save template lại.

Bạn hoàn toàn có thể tự mình mày mò và tọa thêm hiệu ứng mà mình thấy ưng ý cho hình ảnh trên blog của mình nhé.


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

Traidatmui.com – Với thủ thuật hiển thị biểu tượng (icon) phía trước link của từng loại tập tin mình nhớ đã có 1 bạn giới thiệu, tuy nhiên vẫn còn khá nhiều bạn hỏi mình về cách này nên mình xin chia sẻ để bạn nào đang cần có thể áp dụng. Với thủ thuật này thì bạn dễ dàng hiển thị được các biểu tượng tương ứng với từng loại file bạn đặt link, và thủ thuật rất hữu ích với các site chèn link download. Với đoạn css bên dưới nó sẽ tự động nhận dạng ra loại file bạn chèn vào link và hiển thị biểu tượng đại diện tương ứng. Như đuôi là *.doc thì icon word, *.gif sẽ icon ảnh gif...

Hình ảnh minh họa

» Bắt đầu thủ thuật

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>

a[href*='.js'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLqknZd0mOuwFs1Wr81-GVV2EZkGH4n87AwGF0ws-ifY2k2_17KYtqZSxyeQp2gFuKEKDl7IPAeDw9ynCqdAaTS-LEbBrISltGucX7Yt_ifUbqpX-QSGGSotNiN0XjZ_SB6Pph4MU-XLk/s400/file_js.png) no-repeat 0 0; padding:7px 0 0 25px; }

a[href*='.gif'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1PCXSeXuI6uahciT1IHSRCtlrqlVcvgmVwFg_UB4fNZIIZrFDvH1mF7QIPMSvI_V9jkRN8G3oQWxPbvHycZPU-VpB36f4JWDz-RoIE-guJJGDJUBSH0NIZcM2EIzB0UmHNtYbvxq0xKo/s400/file_gif.png) no-repeat 0 0; padding:7px 0 0 25px; }

a[href*='.doc'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWxbfYg0OUrQ9S-xd82RnaE4nES61NGvDdEigH9y7eU9pjmqWG6czhSW4Zdd1GTmrkhsgZM7hypqu-v2Fylvl5B13Y6eN7a-HvXanH63tPOwMuIk0lVklp72lSExEbO6wcqglzUjVDOc/s400/file_doc.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.rar'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKpxbg9qcqIQ6x36GX3Nxu5MWEUZ3DOWDdMnUulwniD8WwmzK8mS5GeR3z-SCwEQaSVbJDVUJ1XzZ0a1MjZVyFpuqNydyIJwFn1ZSYtdhJsIDo22ilwDvOWs7yUF2hEWJVsnQ78Lhoy-E/s400/file_rar.png) no-repeat 0px 0px;padding:7px 0 0 25px; }

a[href*='.zip'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGizkAV64YBbCXFU5V6z57Sblhnvrsnmi4NxaY4_mA4we8cRTKgFYxKad47sj6S_rVqlNztPqpow9Rx0XzUFeKgn0N5tSg8jDloXRVVH5pNhlFCeoZuZ1awDLBaVmxqSNCbud-eZ2GpE/s400/file_zip.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mp4'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFpf20HUbQU1FvGYn0V2WKEzfciTkBfL30ea7fWSn5QWjtCChv8xDJxUMqxkDiMjKwU8ufMysrM8lgW2tIUsOssS-AbJlSFKt_mmrellJi0nG_ni1ToQ0xkDM22NCHF9Xy8Pmao-E5_KI/s400/file_mp4.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.php'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDHTjOY3m9Z4zMaDrxDccWAtMOSNfDIf0PbfiENWBpGC74Epnm10qVUuOmN5Xc92XlUJj9sSUu3-R57SauxrXw9NVOR3rlTaz4KXba4d-VCScOExwnl4v3oHCLioMw79zpQQfmTF2jgRI/s400/file_php.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.xml'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6QDThmnQQV23CEjP3RIPb35WeIzq5SiZFJ2MY6zpVyNyZiBBjNQuBYHUDXYCYikDlKTxKUovHMumcgVqRhjpEingwFZXLYE5M6ukx89DYID2SvbCXrQJa6tDUCygMCjQRZD_Jcxppwho/s400/file_xml.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.pdf'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjquC5pwxdWsEpRQMNaUN72Eb_W9cUlih_U9Qjq3yu8z9E9qK5IUe5vlYIrlDW78J82hlyoYCKjfKzSkpbCukjPqO7b7SGKv1z_N7T7IVt74K0Ucdzk6tnmrUBsIGFHD1yD4sONf99jVEU/s400/file_pdf.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.xls'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpPaSjZvBx04Z3bGG9zhQTt8UuaTRkgvjviZpUtBRK9zKO5KDtQKDvESj3dBC5vgJoby9qLZ_sPpWR-hwQ7iVkeQKkJAjS8UI9OyRq-a5oMPYESJOlP2K7K3jAmw2_dpekLFtj-IWcGQk/s400/file_xls.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mpg'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraO_UKybDFDHk9hqPl4wdSI7QcypVelV2ocrI2F8pq-FgR5VsGvpXhglglP9_z1JjFCBELMi_XZqR7n8KqFf3Od2htnmhN6sr6IS_-0U60oKogU2AOIoCAT6tdyit70lmCAOAYkmNNT0/s400/file_mpg.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.bmp'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKl_SIuWLwAzX7BTOJt_DUN2XcHHTmJFjPwPqGrcaoHKUGtOpbStjXt3rwJ3OHdcOY8JSUcuVjZxavsRyCC6cucaZKVP-32hCIV-_7FAk1FF3H3OZy1eMhv3KckTEef7z9MgoVe9i1HIk/s400/file_bmp.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.avi'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3eNrzRe-_oKYbbqDgNoPiLwhD251b7_X1gFLi8ZmE348KauP8EEHr_XVMDaUHGqOewMJY_Pn1cfWnwEgN41HFzF6Ycu1JT8tX7t5zSR48anpMQwGSJ0Adwl7KAIJMhRFOySD7fR_JZU/s400/file_avi.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mp3'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwh6AHoBFfnx6C9A9enSZq_axpqTBt_E7l_17wx80jY-GEwihs0DD2RfZ4RIiglgkETZmADmsL0wtTKqFBl_k_FTRMTfACXSfrb6PyFh_pDIUiV2HG1_8-MxsEaK2swheEMUqWpq-N7b4/s400/audio_alt.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='mailto'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAvQsdbccJZVRsUPwGMA12nE7Uv4ZEE0OqDdOhyqo0pCOUmhpjJYNVKvNuaynSBzCiSuw1QE99dZlKz9CO3MHmkUNiYJJFCfiUeAj7ZmcP919TPMklVyAlvUZV6sKMUXSsrP8Tf7p6HE/s400/e_mail.png) no-repeat 0px 0px; padding:0 0 0 25px; }

Bạn có thể tải bộ icon về máy tại đây hoặc tại đây và upload lên host của mình lấy link thay thế vào background ở trên.

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

Traidatmui.com – Với các nút chia sẻ bên AddThis.com cung cấp chắc hẳn các bạn không còn xa lạ nữa. Với tiện ích này chứa rất nhiều công cụ để chia sẻ trang blog của bạn, bạn có thể vào đây để lấy code chèn vào blog của mình. Điều mà mình muốn chia sẻ cùng các bạn ở đây là việc chèn tiêu đề vào trong box của Addthis khi bạn rê chuột vào nút Share. Bình thường khi bạn nhúng code của AddThis thì bạn sẽ không thể thay đổi được phần tiêu đề đó, tuy nhiên với đoạn code nhỏ này bạn có thể chèn và tùy biến tiêu đề trong box share.

Hình ảnh minh họa

Nếu bạn chưa có code AddThis có thể vào đây để lấy code chèn vào blog của mình hoặc bạn có thể dùng code bên dưới

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <!-- AddThis Button END -->

Đó là đoạn code bình thường khi bạn lấy từ AddThis, để chèn thêm phần tiêu đề vào hộp Share bạn chỉ cần thêm đoạn code bên dưới vào sau đoạn code ở trên.

<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "traidatmui.com",  // Dòng text hiển thị trên tiêu đề
ui_header_color: "#ffffff",  // Mã màu tiêu đề
ui_header_background: "#CF152A"  // Màu nền của header
} </script>

Nếu trong blog của bạn đã có chèn code AddThis thì bạn chỉ cần thêm đoạn code trên vào là được. Xem mẫu chèn bên dưới:

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <!-- AddThis Button END -->

<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "traidatmui.com",  // Dòng text hiển thị trên tiêu đề
ui_header_color: "#ffffff",  // Mã màu tiêu đề
ui_header_background: "#CF152A"  // Màu nền của header
} </script>

Như vậy là bạn đã có thể tùy biến tiêu đề trong hộp share của AddThis.

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

Traidatmui.com – Trong hầu hết các web hay các blog đều có hệ thống nhận xét (Comment) và Blogspot cũng không ngoại lệ. Đây là công cụ giúp khách truy cập tương tác, cho ý kiến bàn luận về 1 vấn đề nào đó liên quan đến 1 bài viết nào đó. Tuy nhiên, với hệ thống này cũng gây không ít phiền phức vớiuswchur web/blog. Nhiều bạn lạm dụng hệ thống này spam quá nhiều, để lại link dẫn đến các site khác rất nhiều. Trong Blogspot thì hệ thống comment bạn có thể tùy chọn đối tượng có quyền để lại comment và check spam. Tuy nhiên đối với các comment để laik link dẫn đi sang trang khác thì gây rất nhiều bực bội cho bạn đúng không? Vì vậy hôm nay mình chia sẻ cho bạn 1 cách để có thể loại bỏ tất cả link trong comment của Blogger với đoạn code nhỏ bên dưới.

Với cách này thì thay vì trong comment hiển thị text có liên kết link của người comment thì nó sẽ thay thế phần link chỉ còn lại dạng text.

Ví dụ khi add link trong comment code có dạng <a href="http://www.traidatmui.com">Thủ thuật - Download - Thư giản</a> nó sẽ hiện thị trong comment có dạng Thủ thuật - Download - Thư giản. Và sau khi bạn thêm đoạn code nhỏ theo bài viết này thì phần link sẽ được thay thế thành text và hiển thị trong comment hoàn toàn không có link để click, chỉ còn Thủ thuật - Download - Thư giản.


» Bắt đầu thủ thuật

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 code bên dưới vào trước thẻ </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>$('.comment-body a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});</script>

Bạn lưu ý nếu trong template của bạn đã có thư viện JQuery thì bạn chỉ cần chèn đoạn code bên dưới là được

<script>$('.comment-body a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});</script>

Tùy vào hệ thống comment bạn sử dụng mà lớp bao quanh nội dung khác nhau. Bạn hãy thay thế .comment-body lại thành class hay id bao quanh nội dung comment tương ứng với blog bạn đang dùng.

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

Traidatmui.com – Còn không lâu nữa thì Noel đã đến, để giúp các bạn trang hoàng cho ngôi nhà blog của mình, mình xin chia sẻ cho các bạn đoạn code bông tuyết rơi bên dưới. Với đoạn script này thì blog bạn sẽ trở nên đầy bông tuyết, tuy nhiên để có thể thấy được bông tuyết thì màu nền blog của bạn nên chọn màu tối sẽ trông đẹp hơn.

» Bắt đầu thủ thuật

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 code bên dưới vào trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
var snowmax=100 // số lượng bông tuyết rơi
var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff") // mã màu bông tuyết, bạn có thể thay thành mã màu khác
var snowtype=new Array("Times","Arial","Times","Verdana")
var snowletter="*"
var sinkspeed=0.6 // tốc độ bông tuyết rơi
var snowmaxsize=30 // kích thước bông tuyết lớn nhất
var snowminsize=10 // kích thước bông tuyết nhỏ nhất
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
// Do not edit below this line
var snow=[],marginbottom,marginright,timer,i_snow=0,x_mv=[],crds=[],lftrght=[],browserinfos=navigator.userAgent,ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/),ns6=document.getElementById&&!document.all,opera=browserinfos.match(/Opera/),browserok=ie5||ns6||opera;function randommaker(a){return rand=Math.floor(a*Math.random())} function initsnow(){ie5||opera?(marginbottom=document.body.scrollHeight,marginright=document.body.clientWidth-15):ns6&&(marginbottom=document.body.scrollHeight,marginright=window.innerWidth-15);var a=snowmaxsize-snowminsize;for(i=0;i<=snowmax;i++)crds[i]=0,lftrght[i]=15*Math.random(),x_mv[i]=0.03+Math.random()/10,snow[i]=document.getElementById("s"+i),snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)],snow[i].size=randommaker(a)+snowminsize,snow[i].style.fontSize=snow[i].size+"px",snow[i].style.color= snowcolor[randommaker(snowcolor.length)],snow[i].style.zIndex=1E3,snow[i].sink=sinkspeed*snow[i].size/5,1==snowingzone&&(snow[i].posx=randommaker(marginright-snow[i].size)),2==snowingzone&&(snow[i].posx=randommaker(marginright/2-snow[i].size)),3==snowingzone&&(snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4),4==snowingzone&&(snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2),snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size),snow[i].style.left= snow[i].posx+"px",snow[i].style.top=snow[i].posy+"px";movesnow()} function movesnow(){for(i=0;i<=snowmax;i++)if(crds[i]+=x_mv[i],snow[i].posy+=snow[i].sink,snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px",snow[i].style.top=snow[i].posy+"px",snow[i].posy>=marginbottom-2*snow[i].size||parseInt(snow[i].style.left)>marginright-3*lftrght[i])1==snowingzone&&(snow[i].posx=randommaker(marginright-snow[i].size)),2==snowingzone&&(snow[i].posx=randommaker(marginright/2-snow[i].size)),3==snowingzone&&(snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/ 4),4==snowingzone&&(snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2),snow[i].posy=0;setTimeout("movesnow()",50)}for(i=0;i<=snowmax;i++)document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>");browserok&&(window.onload=initsnow);
//]]>
</script>

5. Cuối cùng save lại

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

Traidatmui.com – Thời gian qua mình thấy một số bạn vẫn gặp rắc rối ở việc là không biết cách giảm khoảng cách của khung comment so với chân của blog. Điều này có lẽ các blogger trước đây đã có đề cập nhưng những bạn mới bắt đầu chưa tiếp cận, nhân tiện thì mình cũng chia sẻ để các bạn có thể khắc phục việc này và trả lời cho một bạn nặc danh đã hỏi mình. Để khắc phục vấn đề này cũng không khó khăn lắm chỉ cần bạn tìm đúng bệnh thì một bước chỉnh sửa lại là xong. Bạn hãy xem hình ảnh bên dưới, khoảng cách lúc mặc định và sau khi chỉnh sửa lại.

Hình ảnh lúc đầu

Hình ảnh sau khi đã chỉnh sửa

1. Đầu tiên đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến đoạn code như bên dưới (hoặc tương tự).

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

6. Bạn chỉ cần giảm chiều cao (height) của khung comment lại là xong.

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='280' id='comment-editor' name='comment-editor' src='' width='100%'/>

Tùy theo mỗi template mà trong code đó có thể khác nhau ở một vài phần tử, thông thường đoạn code trên là code nằm trong đoạn code bên dưới.

<b:includable id='comment-form' var='post'>

-------------------------------------------
-------------------------------------------

</b:includable>

7. Save template lại là xong.

Chúc bạn thành công.

Traidatmui.com – Bài viết hôm nay mình chia sẻ cùng các bạn cách để có thể nhúng tiện ích Yahoo Media Player vào trong blog/web với các file video hay audio. Yahoo Media Player là một chương trình chơi video hay các file audio, chương trình này sau khi chèn vào web/blog thì nó sẽ được ẩn ở một góc nhỏ của web/blog, cụ thể là ở góc phía dưới bên trái của web/blog của bạn. Chương trình chỉ hiện ra khi bạn click vào link của tên file audio nào đó hay Youtube video. Chương trình này sẽ không làm ảnh hưởng nhiều đến tốc độ load trang của bạn vì nó chỉ load khi bạn click để xem hay nghe một video hay đoạn nhạc nào đó. Cách để có thể đưa chương trình này vào web/blog cũng rất đơn giản chỉ cần vài bước nhỏ, trước khi thực hiện bạn có thể xem hình ảnh minh họa hoặc demo bên dưới để thấy rỏ hơn.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>

5. Giờ bạn save template lại

Bây giờ khi muốn nhúng video từ youtube hay audio nào đó bạn chỉ cần đặt link như bên dưới

<a href="http://mediaplayer.yahoo.com/example3.mp3">Tên của file MP3</a>
<a href="http://www.youtube.com/watch?feature=player_embedded&v=6m7jyixPC_M">Tên link Video</a>
<a href="http://www.youtube.com/watch?v=i56XeM0-b8Y">Tên link Video</a>

Như vậy là xong, bạn có thể xem trực tiếp cách hướng dẫn và tùy chỉnh thêm tại trang webplayer.yahoo.com

Tham khảo webplayer.yahoo.com

Traidatmui.com – Có một bạn hỏi mình cách để làm sao chỉ hiển thị tiêu đề bài viết (Post Title) ở trang nhãn (label) và Archive, vì vậy bài viết hôm nay mình chia sẻ đến các bạn thủ thuật để mọi người tham khảo. Thật ra bài viết này đã được chia sẻ rất nhiều, ở những trang tiếng Anh thủ thuật này cũng khá phổ biến nên hôm nay mình xin được trích và chia sẻ để các bạn tham khảo. Với thủ thuật này, thay vì theo mặc định thì bài viết trong Blogspot ở trang nhãn sẽ hiển thị phần tiêu đề và bên dưới là nội dung thì bây giờ chỉ còn tiêu đề bài viết.



» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến dòng code như bên dưới

<b:include data='post' name='post'/>

6. Bây giờ bạn hãy thay code vừa tìm được thành code bên dưới

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>
</b:if>
</b:if>

7. Cuối cùng save template lại là xong

» Cập nhật 06/11/2011

Ở code trên nó xảy ra vấn đề đối với các blog có sử dụng trang tĩnh của blogger, tức là khi sử dụng code trên thì nội dung ở trang tĩnh sẽ không hiển thị được khi xem trang đó. Vì vậy ở đây mình khắc phục lại để các bạn nào có sử dụng cách tạo trang tĩnh của blogger có thể áp dụng thủ thuật này. Bạn chỉ cần thay code ở bước 6 thành code bên dưới là được

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>
</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

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

Tham khảo anshuldudeja.com

Khi vào YouTube để tìm video và chia sẻ trên diễn đàn, blog, người sử dụng có thể áp dụng một số thủ thuật đơn giản để bỏ qua đoạn đầu clip, xóa các đường link liên quan...

1. Để không phải xem đoạn đầu của video trên YouTube, người sử dụng chỉ cần thêm #t=XXmYYs (trong đó XX là số phút và YY là số giây) vào cuối URL.

Video bắt đầu chạy từ giây thứ 30 nên đoạn đầu thanh trượt có màu xám.

Chẳng hạn: youtube.com/watch?v=_OBlgSz8sSM#t=00m30s để xem từ giây thứ 30.

2. Còn muốn video chạy từ giây thứ 25 khi đăng blog, thêm mã &start=25 (hoặc bất cứ số giây nào bạn muốn) vào cuối URL trong mã nhúng (embed code) khi viết entry.


Khi viết blog, bổ sung lệnh &start=25 (đánh dấu đỏ) trong mã nhúng và video sẽ chỉ hiển thị từ giây 25.

3. Nếu không thích hộp tìm kiếm của YouTube xuất hiện cuối clip, mọi người có thể ẩn đi bằng cách thêm mã &showsearch=0 vào cuối URL nhúng trước khi chia sẻ (tương tự phần 2).


4. Thông thường, video sẽ nằm yên trên blog cho đến khi người xem bấm vào nút "Play". Để clip tự động phát nội dung, thêm &autoplay=1 vào URL nhúng. Còn nếu muốn clip đó tự động chạy lại (replay), thêm mã &loop=1.


5. Khi người sử dụng đăng nội dung, YouTube thường thêm một số video khác và đôi khi khiến họ khó chịu. Khi đó, chỉ cần thêm &rel=0 vào URL nhúng để clip trở nên "sạch" hơn.

Không còn hộp tìm kiếm và các video liên quan.

6. Có nhiều cách để tải video từ YouTube, nhưng phương pháp đơn giản nhất là thay đổi chữ "youtube" thành "kickyoutube" trong đường link. Khi đó, người dùng sẽ truy cập trang kickyoutube.com để tải video theo các định dạng được liệt kê ở hai hàng trên cùng.

Nguồn vnexpress.net

Traidatmui.com – Tiếp theo những bài viết về cách tạo form liên hệ để tương tác với người dùng trên blog/web của bạn thì hôm nay mình chia sẻ cùng các bạn một website coa thể giúp bạn tạo nhanh form liên hệ cho blog/web của mình. Có rất nhiều cách và rất nhiều trang cung cấp dịch vụ tạo form này từ đơn giản đến phức tạp và foxyform.com thì bạn có thể hoàn toàn dễ dàng và nhanh chóng có một form khá ấn tượng dành cho blog/web của bạn. Quá trình tạo form chỉ với 3 bước đơn giản mình sẽ đi chi tiết bên dưới.

Hình ảnh minh họa

- Ưu điểm: tạo nhanh, dễ dàng, không phải đăng ký tài khoản
- Nhược điểm: không thể tùy biến các trường (field) trong form.

Bạn không cần cài đặt tài khoản như các website khác, bạn chỉ cần truy cập foxyform.com và bắt đầu thực hiện 3 bước đơn giản để tạo form.

Bước 1: Đây là bước bạn sẽ chọn trường (field) mà bạn muốn người dùng sẽ điền vào trong form của bạn.


- Cột bên trái là khi bạn muốn hiển thị trường nào thì bạn chỉ việc check vào trường đó, bạn có thể click Show further options để thấy tất cả các trường.
- Cột bên phải là giúp bạn bắt buộc người dùng phải nhập hay không, nếu bạn thấy thông tin nào cần thiết không thể thiếu khi gửi thông tin trong form thì bạn check vào trường đó đê buộc người dùng phải nhập thông tin vào trường đó.

Bước 2: Bước này bạn có thể định dạng đặc tính của form


- Background Color: chọn nền cho form
- Font Color: màu chữ
- Font: font chữ bạn muốn sử dụng
- Font size: cỡ chữ

Bước 3: Bước này bạn hãy nhập địa chỉ email của bạn vào ô Your e-mail address, đây là email mà bạn muốn nhận thông tin khi người dùng sử dụng form này gửi thông tin đến bạn.


Sau khi đã hoàn tất 3 bước ở trên bạn nhấn Create Formular để lấy code và chèn vào blog/web của bạn.


Như vậy công việc cuối cùng là bạn chỉ việc dán code vào blog bạn là xong, đơn giản, nhanh chóng.

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

(Traidatmui.com) – Blogger trước đây đã cho ra lò tính năng Dynamic Views cho RSS, đây là cách xem RSS cực đẹp và cực kì chuyên nghiệp với 5 chế độ xem là Flipcard, Mosaic, Sidebar, Snapshot, Timeslide. Giờ đây Blogger đã cải thiện lại giao diện, bổ sung thêm 2 chế độ xem là Classic và Magazine và đã tích hợp tính năng này vào ngay trong Trình thiết kế Mẫu cho Blogger (Blogger Template Designer) của bạn. Ngay bây giờ bạn có thể áp dụng 7 chế độ xem bài viết này ngay vào giao diện blog của bạn mà không phải chỉ có ở RSS nữa. Chế độ xem bài viết dạng Dynamic Views này trên giao diện blog tương tự ở RSS nên bạn có thể xem demo của trang traidatmui.com tại đây

Để cài đặt các chế độ xem này bạn chỉ việc vào phần thiết kế (Design) chọn Trình thiết kế Mẫu (Template Designer) để chọn chế độ xem mà bạn thích.


Ở đây sẽ có 7 chế độ xem bạn có thể click vào từng chế độ xem để thấy mẫu trước khi áp dụng nó cho blog của mình.


Sau khi đã chọn được chế độ xem ưng ý bạn chọn Áp dụng cho Blog (Apply to Blog), nếu muốn hoàn lại mẫu ban đầu bạn chọn Revert to previous template.


Ở đây là chủ yếu bạn chọn chế độ xem mặc định cho giao diện blog của bạn, các chế độ khác người dùng có thể xem luân phiên nhau qua trình đơn thả xuống trên giao diện blog của bạn.


Bây giờ bạn có thể vào thiết kế để thử nghiệm tính năng Dynamic Views cho giao diện blog mình và cho nhận xét thế nào nhe?

(Traidatmui.com) – Ở một số template của Blogger thường xảy ra một lỗi cũng khá phổ biến, đó là lỗi ở ngày đăng của bài viết. Nếu bạn để ý sẽ thấy, đối với những bài viết có cùng ngày đăng thì chỉ có một bài viết mới nhất hiển thị được ngày đăng còn các bài viết cùng ngày khác ngày đăng sẽ không hiển thị khi bạn xem bài viết ở trang chủ hay trang nhãn. Dĩ nhiên khi bạn xem bài viết đó dạng đầy đủ thì sẽ có ngày đăng hiển thị bình thường. Và bài viết này mình sẽ giúp các bạn khắc phục lỗi đó, thực hiện xong thủ thuật này thì tất cả các bài viết có cùng ngày hay khác ngày điều hiển thị ra trong bài viết của bạn. Bạn xem hình ảnh bên dưới 2 bài viết được xuất cùng ngày sẽ có 1 bài bị khuyết ngày đăng

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến code như bên dưới

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

6. Thay thế code vừa tìm được ở trên thành code bên dưới

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<script>document.write(ultimaFecha);</script>
</b:if>

7. Xong save tiện ích lại


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

(Traidatmui.com) – Trước đây mỗi khi chúng ta muốn thay đổi biểu tượng chữ B màu cam của Blogger trước địa chỉ của blog thì cần chèn thêm một code vào template (Bạn có thể xem tại đây) nhưng giờ đây bạn có thể thực hiện việc thay đổi Favicon đó rất đơn giản, bạn không cần upload ảnh đại diện riêng của bạn lên host nào cả mà bạn có thể upload ngay lên blogger và thay thế Favicon mặc định của Blogger rất dễ dàng. Tính năng này chỉ mới cập nhật gần đây và nó rất giúp ích cho việc chọn Favicon riêng cho blog. Bạn chỉ cần vài bước đơn giản là có thể thay đổi Favicon theo ý muốn

Đầu tiên bạn đăng nhập vào tài khoản Blogger, vào tab Thiết kế, chọn chỉnh sửa (Edit) ở tiện ích Favicon
Sau đó nhấn Browse... ở cửa sổ hiện ra để chọn ảnh tải lên và chọn Lưu (Save)

Sau khi tải ảnh lên xong bạn sẽ thấy nó xuất hiện ở phần Favicon thay cho chữ B của Blogger
Như vậy là bạn đã thay thế Favicon mặc định của Blogger bằng hình ảnh của mình.

Lưu ý: Hình ảnh sử dụng để thay thế phải là hình vuông.

Tuy nhiên nếu sau khi bạn đã thực hiện xong mà Favicon của bạn vẫn không xuất hiện được thì bạn cần thực hiện một bước nữa là xóa browser cache của trình duyệt, đối với trình duyệt Firefox bạn vào Options thẻ Advanced >> Network chọn "Clear now"
Như vậy là hoàn tất bạn nhớ Restart Firefox lại và xem kết quả.

Nhược điểm là không sử dụng được ảnh động làm Favicon
Chúc bạn thành công