Code tạo hiệu ứng Peel đẹp mắt cho hình ảnh trên Blogspot

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/AVvXsEh-THJkVGFtoN4AFhKp8J1UT2Sy53SR4tfNvNhpOQiVOEG7zxSMHeek8QOHuzxDNiBmZiXmwhyphenhyphenmQI_OPrt9UjFAztV3YkUaSIFp4ivtyqsbhSz9PPKOKAI7n-XpOYp-GLs0AW4fEN31zzc/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGy9rWMAel_dNNBwdQ4Pgd5yiV6FT9Z3FSDsrjmvtfK7rj83zOagdP_Ah_WZl9yOBLYXBg4c8EXrZkgzz2W0dMSVo7mSFCCee-6Zgo8Vmje9ivUYhcdPV3fIT89jTl4bfYzAjecNyAFA/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 MathJax

Traidatmui.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

» 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.

Đầ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...

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

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

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.

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

Tạo hiệu ứng trượt cho hình ảnh với css

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/AVvXsEgDWHALq62gZUSG3_bLj1v5LNGIy5rKLNV7GJUr6rGDtj4dkWc6dn4KCRpnWST_gFNvzmu0ys_WK4yKw_7HC79SUDnchEr4Y0-txx2Ndhc7pPkFItqA9_tomFliOesMxVA4VUdmkoYrDKs/" 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/AVvXsEgDWHALq62gZUSG3_bLj1v5LNGIy5rKLNV7GJUr6rGDtj4dkWc6dn4KCRpnWST_gFNvzmu0ys_WK4yKw_7HC79SUDnchEr4Y0-txx2Ndhc7pPkFItqA9_tomFliOesMxVA4VUdmkoYrDKs/ 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