Traidatmui.com – Bài viết này mình chia sẻ cho các bạn một đoạn code có thể giúp trang Fanpage Facebook của bạn hiển thị dưới dạng ẩn hiện ở góc phải của Blogspot của bạn. Với kiểu hiển thị này sẽ giúp bạn tiết kiệm rất nhiều diện tích blog của bạn, trang Fanpage chỉ hiển thị ra khi bạn rê chuột vào biểu tượng Facebook ở góc dưới bên phải, bình thường thì nó sẽ được ẩn đi. Bạn xem chi tiết hướng dẫn bên dưới.


Hình ảnh minh họa
Thủ thuật tạo trang Fanpage ẩn hiện khi rê chuột cho Blogspot

» 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>
img,a{border:0;}
#on{visibility:visible;}
#off{visibility:hidden;
}
#facebook_div{width:280px;height:270px;overflow:hidden;}
#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:280px;height:270px;position:fixed;right:-285px;}
#facebook_right img{position:absolute;top:-2px;left:-35px;}
#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:270px;left:-2px;top:-3px;}
5. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">/* <![CDATA[ */
jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -285}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });/* ]]> */</script>

6. Save template lại và trở về phần bố cục (Layout)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="on"><div id="facebook_right" style="bottom: 0;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsn170R4MXT8cw7jTDK8HoeapJx7G8OtJ0854-Tu-zO5M0pVEZ6-rePNkFjoHyGwiqgK9dD57tuQPCOi4KmylgnD1KNZ4SMxC2NrzaYBwfzeq7penS59xLXSGJWryK70fRByVQ6v40diI/s1600/helperblogger.com-facebook-icon.png" alt="" />
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/vnbloggertheme"
data-width="300" data-show-faces="true" data-stream="fasle" data-header="true"></div></div></div></div>

Bạn thay https://www.facebook.com/vnbloggertheme thành link của trang Fanpage của bạn là xong.

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

Chúc bạn thành công!
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.
Code tạo hiệu ứng Peel cho hình ảnh trên Blogspot
» 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
[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJaxTraidatmui.com – Khi dùng Blogspot thì việc làm sao để có thể viết công thức toán học một cách chuyên nghiệp vẫn là câu hỏi. Tuy nhiên với sự hỗ trợ của MathJax thì bạn sẽ hoàn toàn có thể làm được điều đó một cách dễ dàng. Như bạn biết thì khi soạn thảo công thức toán học trong Word nhìn trông rất đẹp mắt đúng không và điều đó bạn hoàn toàn có thể trình bày các công thức toán học đẹp mắt ngay trên Blogspot của bạn.

Hình ảnh minh họa
[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax

» 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 sau thẻ <head>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>

5. Save template lại.

Bạn có thể dùng đoạn code công thức này để test thử:
\[
\left [ - \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi
= i \hbar \frac{\partial}{\partial t} \Psi
\]

\[\sqrt {{a^2} + {b^2}} \mathop {\lim }\limits_{x \to \infty } \sqrt {{b^2} - 4ac} \frac{{ - b \pm \sqrt {{b^2} - 4ac} }}{{2a}}\]

Như thế là đã xong, công thức toán học đã có thể hiển thị trên blogspot của bạn. Tuy nhiên, câu hỏi đặt ra là phải viết công thức thế nào mới có thể hiển thị được. Vâng điều này thì bạn hoàn toàn có thể yên tâm, với hỗ trợ của MathType thì việc viết công thức và lấy mã đưa vào blogspot của bạn rất dễ dàng.

[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax

Đầu tiên bạn tải MathType 6.6 (Có Keygen) này về máy tại đây hoặc tại đây và bắt đầu cài đặt. Sau khi đã cài đặt hoàn tất bạn hãy thiết lập sau: bạn vào mục Preferences và chọn Cut and Copy Preferences...

[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax

Và bạn hãy thiết lập như hình bên dưới

[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax

Bây giờ bạn đã có thể trở lại phần soạn thảo công thức để thiết lập công thức toán học mà bạn muốn chèn vào blog của mình. Sau khi đã soạn thảo xong bạn chỉ cần tô đen công thức vừa tạo ra và nhấn Ctrl C hoặc click chuột phải chọn Copy

[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax

Bây giờ thì bạn chỉ cần dán code công thức vào bài viết (Ở chế độ HTML) hoặc trong tiện ích HTML của blogspot để hiển thị công thức ở vị trí mà bạn muốn.

[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax

Chúc bạn thành công!
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
Tạo hiệu ứng trượt cho hình ảnh với css

» 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 – Bài viết hôm nay mình chia sẻ cùng các bạn một menu với hiệu ứng cũng khá đẹp mắt dành cho blogspot, đặc biệt menu này chỉ dùng CSS3 và HTMl đơn giản nên không làm ảnh hưởng đến tốc độ của blog bạn nhiều. Với menu này bạn có thể tự mình phối màu lại để có 1 menu ưng ý cho blog của mình và cách thực hiện cũng đơn giản bạn theo dõi các bước bên dưới.


Hình ảnh minh họa
Thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot

» 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>
.ribbon span{font-weight:bold;background:#A81B6A;display:inline-block;line-height:3em;padding:0 1em;margin-top:0.5em;position:relative;-webkit-transition:background-color 0.2s,margin-top 0.2s; -moz-transition:background-color 0.2s,margin-top 0.2s; -ms-transition:background-color 0.2s,margin-top 0.2s; -o-transition:background-color 0.2s,margin-top 0.2s; transition:background-color 0.2s,margin-top 0.2s}
.ribbon a:hover span{background:#FFD204;color:#000;margin-top:0}
.ribbon span:before{content:"";position:absolute;top:3em;left:0;border-right:0.5em solid #9B8651;border-bottom:0.5em solid #fff}
.ribbon span:after{content:"";position:absolute;top:3em;right:0;border-left:0.5em solid #9B8651;border-bottom:0.5em solid #fff}
.ribbon a:link,.ribbon a:visited{color:#fff;text-decoration:none;float:left;height:3.5em;overflow:hidden}
.ribbon:after,.ribbon:before{margin-top:0.5em;content:"";float:left;border:1.5em solid #A81B6A}
.ribbon:after{border-right-color:transparent}
.ribbon:before{border-left-color:transparent}

5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<a href='#'><span>Trang chủ</span></a>
<a href='#'><span>Tên menu 1</span></a>
<a href='#'><span>Tên menu 2</span></a>
<a href='#'><span>Tên menu 3</span></a>
<a href='#'><span>Tên menu 4</span></a>
<a href='#'><span>Tên menu 5</span></a>
<a href='#'><span>Tên menu 6</span></a>
Bạn thay đổi Tên menu lại thành tên thư mục bạn muốn cho lên thanh menu này (màu xanh lá) và thay dấu # thành link dẫn tương ứng với từng tên menu bạn đặt.

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

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

Tham khảo bloggertrix.com
Hosting Miễn PhíHostinger Việt Nam - Hosting hoàn toàn Miễn Phí bạn không nên bỏ quaTraidatmui.com – Đối với các bạn đang muốn xây dựng 1 website cá nhân riêng nhưng nguồn tài chính còn hạn hẹp để thuê hosting thì mình nghĩ bạn nên tìm hiểu về http://www.hostinger.vn để có lựa chọn đúng đắn. Hostinger là gì? Đây là nơi cung cấp cho bạn nhiều gói hosting để bạn lựa chọn, đặc biệt là bạn có thể lựa chọn gói Free Web Hosting (Đây là gói hoàn toàn miễn phí). Trước đây khi cần những gói hosting miễn phí chất lượng thì chúng ta hay tìm đến các nhà cung cấp nước ngoài để sở hữu và trãi nghiệm, tuy nhiên với Hostinger bạn hoàn toàn có thể yên tâm về chất lượng của dịch vụ, hơn nữa đây là nhà cung cấp Việt Nam nên ngôn ngữ tiếng Việt cũng thân thiện giúp bạn dễ dàng trong thao tác Host của mình.


Hostinger cung cấp cho bạn 3 gói hosting: Free Web Hosting (Gói hosting miễn phí của chúng tôi phù hợp với nhiều loại website - cá nhân, cộng đồng, diễn đàn, blogs), Premium Web Hosting (Gói Premium hosting là gói cước không giới hạn kèm theo tên miền .com miễn phí!), Business Web Hosting (Gói Business hosting được dành riêng cho công ty và website có lượng truy cập lớn). Bạn có thể lựa chọn gói hosting phù hợp để sử dụng.

Với gói hosting MIỄN PHÍ (Free Web Hosting) bạn sẽ có 2,000 MB Space, 100 GB Traffic, hỗ trợ PHP và MySQL, Site Builder, Không quảng cáo và banner. Với gói hosting này cũng đã đầy đủ để bạn sử dụng cho mục đích web/blog của mình và đặc biệt bạn không phải tốn đồng chi phí nào để sử dụng.

Bạn có thể tham khảo một số thông tin về các gói hosting bên dưới

Hostinger Việt Nam - Hosting hoàn toàn Miễn Phí bạn không nên bỏ qua

Một số danh mục trong bảng ControlPanel

Hostinger Việt Nam - Hosting hoàn toàn Miễn Phí bạn không nên bỏ qua

Để có thể sử dụng gói Hosting Miễn phí thì bạn chỉ cần vào http://www.hostinger.vn để khởi tạo tài khoản miễn phí và có thể tìm hiểu về gói hosting này. Mặc dù là gói miễn phí nhưng bạn được hỗ trợ rất nhiều và đặc biệt Không có text links, không có pop-ups phiền phức, không có banner gây khó chịu, không kiểm soát việc đăng bài. Website của bạn 100% sẽ không bao giờ có quảng cáo.


Hy vọng sẽ hữu ích cho bạn!
| Copyright © 2013 Trái Đất Mũi