Võ Văn Tùng: Nâng Cao

Hiển thị các bài đăng có nhãn Nâng Cao. Hiển thị tất cả bài đăng

Thứ Sáu, 18 tháng 11, 2011

Một thủ thuật khá hay được mothuthuat.com phát triển đó là tạo tiện ích "Recent posts" với 2 cột cùng hiệu ứng Tooltip. Để chia sẽ đến các blogger có thể biết và thêm tiện ích này cho blog của mình, hôm nay mình xin chia sẽ lại thủ thuật này. Ở đây mình không sử dụng link css mà chèn hẳn code vào template để tránh tình trạng host bị die. Điều này cũng có thể giúp tiện ích này load nhanh hơn khi sử dụng host không ổn định hay bị lỗi.

1. Đăng nhập vào tài khoản Blogger

2. Vào phần thiết kế (hay bố cục)

3. Chọn chỉnh sửa HTML

4. Chèn code bên dưới vào trước thẻ ]]></b:skin>

/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 350px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}

#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}

5. Save template lại và trở về phần tử trang

6. Tạo 1 HTML/Javascript và thêm vào code bên dưới

<script src="http://traidatmui-tips.googlecode.com/files/System_Tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Advanced blogger";
home_page = "http://vovantung.blogspot.com/";
</script>
<div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://lh6.ggpht.com/_btztxrwc9ik/tsw3lpdf6yi/aaaaaaaage0/lkhkccqnwvw/loading-related.gif'/></div>
<script src="http://traidatmui-tips.googlecode.com/files/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Các bạn chỉnh sữa màu cam, màu đỏ, màu xanh trên cho phù hợp với Blog của mình.
7. Sau khi chỉnh sữa xong các bạn Lưu lại, thế là xong.

Chúc các bạn thành công!!!
Nguồn: traidatmui

-->Đọc thêm...

Đọc Thêm | nhận xét

Tạo menu nhiều cấp với hiệu ứng Drop down cho Blogspot

Hôm nay mình đã xin chia sẻ cùng các bạn một dạng menu dành cho Blogspot cũng khá là đẹp mắt. Đây là dạng menu có nhiều cấp hay nói cách khác là có nhiều menu con thả xuống. Menu này được hình thành trên Javascript với hiệu ứng thả xuống rất mướt và bạn sẽ thiết lập các tên hay link cho menu trong ngôn ngữ Script. Bạn có thể xem hình ảnh minh họa và phần LIVE DEMO dưới đây để thấy rỏ hơn hiệu ứng của menu này.

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

5. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

#ja-mainnavwrap {
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZRPoDFm7OI/AAAAAAAAAKg/7S_f_IZTyu4/mainnav-bg.gif) repeat-x top #FFFFFF; /* màu nền menu chính*/
}
.clearfix:after {
clear: both;
display: block;
content: "";
height: 0;
visibility: hidden;
}
.transMenu {
position: absolute;
overflow: hidden;
}
.transMenu .background {
background:#eee; /*màu nền phần submenu*/
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
-moz-opacity: .5;
filter: alpha(opacity=90);
}
.transMenu .content {
position: absolute;
}
.transMenu .items {
position: relative;
left: 0px;
top: 0px;
z-index: 2;
}
.transMenu .shadowRight {
width: 2px;
position: absolute;
z-index: 3;
top: 3px;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.transMenu .shadowBottom {
position: absolute;
z-index: 1;
left: 3px;
height: 2px;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.transMenu .item {
color: #333; /*màu chữ phần submenu*/
text-decoration: none;
text-transform: none;
border: none;
cursor: pointer;
font-size: 11px; /*cở chữ phần submenu*/
}
.transMenu .item.hover {
color: #fff; /*màu chữ phần submenu khi rê chuột*/
background: #000; /*màu nền phần submenu khi rê chuột*/
}

.transMenu .item img {
margin-left: 10px;
}
.transMenu .item#active {
background: #484848;
color: #FFFFFF;
}
.transMenu .item#active:hover {
color: #FFFFFF;
background: #ff0000;
}
#ja-transmenu {
margin: 0;
padding: 0;
float: left;
}
#ja-transmenu li {
margin: 0;
padding: 0;
background: none;
display: inline;
}
#ja-transmenu li a {
color: #ff0000; /* màu chữ của menu chính*/
margin: 0;
padding: 8px 20px 7px;
float: left;
display: block;
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZRPoVUpBPI/AAAAAAAAAKk/zwj21fS-urk/mainnav-sep.gif) no-repeat top right;
font-weight: bold;
text-decoration: none;
font-size: 13px;
}
#ja-transmenu li a:hover {
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZRPoVUpBPI/AAAAAAAAAKk/zwj21fS-urk/mainnav-sep.gif) no-repeat top right #fff;
color: #666; /* màu chữ của menu chính khi rê chuột*/
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Chọn thêm tiện ích (Add a Gadget)
8. Thêm 1 HTML/Javascript và thêm vào nó code bên dưới

<div id="ja-mainnavwrap"
class="clearfix">
<div id="ja-mainnav">
<div class="transmenu-inner">
<ul id="ja-transmenu">
<li><a href="URL link"
class="mainlevel-trans" id="home"><span>TRANG
CHỦ</span></a></li>
<li><a href="URL link trang chủ"
class="mainlevel-trans" id="menu1"><span>MENU
1</span></a></li>
<li><a href="URL link 1"
class="havechild-mainlevel-active-trans"
id="menu2"><span>MENU 2</span></a></li>
<li><a href="URL link 2"
class="havechild-mainlevel-trans"
id="menu3"><span>MENU 3</span></a></li>
<li><a href="URL link"
class="havechild-mainlevel-trans"
id="menu4"><span>MENU 4</span></a></li>
<li><a href="URL link 4"
class="havechild-mainlevel-trans"
id="menu5"><span>MENU 5</span></a></li>
<li><a href="URL link 5"
class="mainlevel-trans" id="menu6"><span>MENU
6</span></a></li>
<li><a href="URL link 6"
class="havechild-mainlevel-trans" id="menu7"><span>MENU
7</span></a></li>
<li><a href="URL link 7"
class="mainlevel-trans" id="menu8"><span>MENU
8</span></a></li>
</ul>
<script type="text/javascript"
language="javascript">
if (TransMenu.isSupported()) {
var ms = new TransMenuSet(TransMenu.direction.down, 0, 0,
TransMenu.reference.bottomLeft);
TransMenu.subpad_x = 0;
TransMenu.subpad_y = 0;
document.getElementById("home").onmouseover =
function() {
ms.hideCurrent();
}
document.getElementById("menu1").onmouseover =
function() {
ms.hideCurrent();
}
var tmenu2 =
ms.addMenu(document.getElementById("menu2"));
tmenu2.addItem("Submenu 2.1", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.2", "URL link", 0, 1);
tmenu2.addItem("Submenu 2.3", "URL link", 0, 0);
var tmenu23 = tmenu2.addMenu(tmenu2.items[2]);
tmenu23.addItem("Submenu 2.3.1", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.2", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.3", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.4", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.5", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.4", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.5", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.6", "URL link", 0, 0);
var tmenu3 =
ms.addMenu(document.getElementById("menu3"));
tmenu3.addItem("Submenu 3.1", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.2", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.3", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.4", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.5", "URL link", 0, 0);
var tmenu4 =
ms.addMenu(document.getElementById("menu4"));
tmenu4.addItem("Submenu 4.1", "URL link", 0, 0);
var tmenu41 = tmenu4.addMenu(tmenu4.items[0]);
tmenu41.addItem("Submenu 4.1.1", "URL link", 0, 0);
tmenu41.addItem("Submenu 4.1.2", "URL link", 0, 0);
tmenu41.addItem("Submenu 4.1.3", "URL link", 0, 0);
tmenu41.addItem("Submenu 4.1.4", "URL link", 0, 0);
tmenu4.addItem("Submenu 4.2", "URL link", 0, 0);
var tmenu42 = tmenu4.addMenu(tmenu4.items[1]);
tmenu42.addItem("Submenu 4.2.1", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.2", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.3", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.4", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.5", "URL link", 0, 0);
tmenu4.addItem("Submenu 4.3", "URL link", 0, 0);
tmenu4.addItem("Submenu 4.4", "URL link", 0, 0);
var tmenu5 =
ms.addMenu(document.getElementById("menu5"));
tmenu5.addItem("Submenu 5.1", "URL link", 0, 0);
tmenu5.addItem("Submenu 5.2", "URL link", 0, 0);
tmenu5.addItem("Submenu 5.3", "URL link", 0, 0);
document.getElementById("menu6").onmouseover =
function() {
ms.hideCurrent();
}
var tmenu7 =
ms.addMenu(document.getElementById("menu7"));
tmenu7.addItem("Submenu 7.1", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.2", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.3", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.4", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.5", "URL link", 0, 0);
document.getElementById("menu8").onmouseover =
function() {
ms.hideCurrent();
}
TransMenu.renderAll();
}
init1=function(){TransMenu.initialize();}
if (window.attachEvent) {
window.attachEvent("onload", init1);
}else{
TransMenu.initialize(); }
TransMenu.spacerGif =
"https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZRCOgRadyI/AAAAAAAAAKE/C4woVGLQKkg/x.gif";
</script>
</div></div>
</div>

- Phần màu Hồng chính là tên của các menu chính, bạn có thể thay chúng thành tên của các menu phù hợp với blog của bạn.
- Các URL link chính là các link tương ứng cho các menu
- Các ID màu cam bạn chú ý phải cho chúng trùng khớp ở trên phần menu chính và các Submenu.
- Các submenu màu Đỏ là tên các thư mục con cấp 1 và phần màu Xanh đọt chuối là các thư mục con cấp 2, bạn hãy thay chúng tương ứng với từng thư mục.

9. Sau khi chỉnh sửa xong bạn save tiện ích lại

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

-->Đọc thêm...

Đọc Thêm | nhận xét

Nâng Cao

Tạo "đếm số người đang xem (online)" trên Blog của bạn

Thứ Tư, 9 tháng 11, 2011

Để biết số lượng khách ghé tham quan của bạn là bao nhiêu, thì thủ thuật này sẽ giúp bạn chính xác số người truy cập vào Blog của bạn. Mời các bạn xem Demo bên dưới.

Hình minh họa

Để làm được như trên, đầu tiên bạn truy cập VÀO ĐÂY, sau đó chọn vị trí để hiển thị bộ đếm (trái, giữa, phải...) và cuối cùng copy code để dán vào Blog.

Bây giờ, vào Blog của mình bạn có thể thấy được số khách đang tham quan Blog.

Ngoài ra, khi bấm vào biểu tượng này bạn có thể biết các bài hoặc hình ảnh trên Blog đã bị copy ở mục What are they copying... hoặc bạn có thể thấy được thành phố và Quốc gia khách đã và đang online ở mục Where they come From..

Ngoài ra, bạn cũng có thể VÀO ĐÂY, để chọn cho mình các mẫu đếm truy cập khác bằng cách chọn mẫu rồi chép code dán vào Blog là xong.

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

-->Đọc thêm...

Đọc Thêm | nhận xét

Nâng Cao

Tạo nút lên đầu trang và xuống cuối trang bằng Javascript

Mình sẽ giơi thiệu đến các bạn thủ thuật để có thể giúp người dùng trên blog của bạn có thể linh hoạt và thao tác nhanh chóng khi muốn lên đầu trang hoặc xuống cuối trang. Vâng với thủ thuật này người dùng chỉ việc click vào nút lên đầu trang hoặc xuống cuối trang thì nó sẽ tự động nhảy đến đầu hoặc cuối trang một cách nhanh chóng. Thủ thuật này sử dụng Javascript và cách thực hiện cũng khá là đơn giản.

1. Đăng nhập vào tài khoản Blogger

2. Vào thiết kế chọn chỉnh sửa HTML

3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>

#top-buttom_image {
position:fixed;
bottom:35px;
right:15px;
clip:inherit;
line-height:0em;
}

4. Tiếp đến bạn hãy tìm và thêm code bên dưới trước thẻ </body>

Bạn có thể thay link ảnh (link màu đỏ) trên hoặc có thể giữ nguyên.

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

Theo traidatmui

-->Đọc thêm...

Đọc Thêm | nhận xét

Nâng Cao

Menu dọc với hiệu ứng lật bằng JQuery

Thứ Ba, 8 tháng 11, 2011

Đây là dạng menu dọc với hiệu ứng lật bằng JQuery. Menu này trông khá Pro cho Blog của các bạn. Thủ thuật để tạo Menu này cũng khá đơn giản. Để tạo được nenu này các bạn thực hiện theo các thao tác mình hướng dẫn dưới đây.

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 thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js"></script>
<script src="http://traidatmui-tips.googlecode.com/files/flipmenu.js" type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Arial;
font-size: 14px;
font-weight: bold;
position: relative;
}


.flipmenu_box {
overflow: hidden;
position: relative;
}


.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:300px;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
text-transform: uppercase;
color: #000000;
cursor: pointer;
margin-top:2px;
padding: 6px;
position: absolute;
background: #fdd78d;
background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}


.flipmenu_link_over,
.flipmenu_link_active {
text-decoration: none;
text-shadow:1px 1px 1px #eee;
color: #fa0320;
background: #aebcbf;
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
</style>


<div id="flip_menu">
<a href="#">Tên menu 1</a>
<a href="#">Tên menu 2</a>
<a href="#">Tên menu 3</a>
<a href="#">Tên menu 4</a>
<a href="#">Tên menu 5</a>


</div>

Bạn thay dấu (#) thành đường dẫn tương ứng với từng menu của bạn
và đặt tên cho từng menu phù hợp với Blog của bạn
Ở trên mình chỉ giới thiệu 5 mục menu.Nếu các bạn muốn thêm menu 6 thì chỉ cần coppy <a href="#">Tên menu </a> dán dưới dòng <a href="#">Tên menu 5</a> là được.
5. Save tiện ích lại là xong.
Chúc các bạn thành công!!!

-->Đọc thêm...

Đọc Thêm | nhận xét

Võ Văn Tùng

THỜI TIẾT - THÔNG TIN CẦN BIẾT

--Tiên Đoán Tình Yêu--

Thống Kê

--Số Lượng Truy Cập--

Recent posts 2 cột với hiệu ứng Tooltip

Thứ Sáu, 18 tháng 11, 2011

Tạo menu nhiều cấp với hiệu ứng Drop down cho Blogspot

Tạo "đếm số người đang xem (online)" trên Blog của bạn

Thứ Tư, 9 tháng 11, 2011

Tạo nút lên đầu trang và xuống cuối trang bằng Javascript

Menu dọc với hiệu ứng lật bằng JQuery

Thứ Ba, 8 tháng 11, 2011

TỪ ĐIỂN

Thống Kê Blog

CĐQTKD5A - ĐH TÂY ĐÔ

ĐỌC BÁO TRỰC TUYẾN

cdqtkd5a@gmail.com

------------------Tin Tức Hàng Ngày Cập Nhật 24/24-------------------

Game Online

----Học kinh Doanh----

---Xem Truyện Cười---

TỔNG HỢP WEB

Game Vui

Người theo dõi

LỊCH PHÁT SÓNG BÓNG ĐÁ

Tin Tức Hàng Ngày 24/24

BÀI VIẾT XEM GẦN ĐÂY

Võ Văn Tùng

THỜI TIẾT - THÔNG TIN CẦN BIẾT

--Tiên Đoán Tình Yêu--

Thống Kê

--Số Lượng Truy Cập--

Recent posts 2 cột với hiệu ứng Tooltip

Thứ Sáu, 18 tháng 11, 2011

Tạo menu nhiều cấp với hiệu ứng Drop down cho Blogspot

document.write(ultimaFecha);

Tạo "đếm số người đang xem (online)" trên Blog của bạn

Thứ Tư, 9 tháng 11, 2011

Tạo nút lên đầu trang và xuống cuối trang bằng Javascript

document.write(ultimaFecha);

Menu dọc với hiệu ứng lật bằng JQuery

Thứ Ba, 8 tháng 11, 2011

TỪ ĐIỂN

Thống Kê Blog

CĐQTKD5A - ĐH TÂY ĐÔ

ĐỌC BÁO TRỰC TUYẾN

cdqtkd5a@gmail.com

------------------Tin Tức Hàng Ngày Cập Nhật 24/24-------------------

Game Online

----Học kinh Doanh----

---Xem Truyện Cười---

TỔNG HỢP WEB

Game Vui

Người theo dõi

LỊCH PHÁT SÓNG BÓNG ĐÁ

Tin Tức Hàng Ngày 24/24

BÀI VIẾT XEM GẦN ĐÂY