Với thủ thuật này, số lượng các bài viết trong cùng một nhãn sẽ hiển thị (do bạn quyết định) thành 2 cột trong khung tiện ích. Mỗi bài viết ...
TẠO BẢNG THÔNG BÁO CHO BLOG (KIÊU 2)
Với bảng thông báo kiểu 2 này, nội dung sẽ được ẩn hiện do tác động vào nút bấm. Khi bấm vào nút "Bấm vào đây để xem thông báo" th...
TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG
<script src="http://dl.dropbox.com/u/66348944/flipmenu.js" type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Times new roman;
font-size: 16px;
font-weight: bold;
position: relative;
}
.flipmenu_box {
overflow: hidden;
position: relative;
}
.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:250px;
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="#">● Thủ thuật Windows 7</a>
<a href="#">● Thủ thuật Windows XP</a>
<a href="#">● Thủ thuật Internet</a>
<a href="#">● Thủ thuật USB</a>
<a href="#">● Thủ thuật Yaoo-Gmail</a>
<a href="#">● Thủ thuật Windows</a>
<a href="#">● Thủ thuật Blogspot</a>
<a href="#">● Chuyên đề máy tính</a>
<a href="#">● Tổng hợp</a>
<a href="#">● Linh tinh</a>
</div>
* Cỡ chữ hiển thị trên menu (Font-size:16px)
Trước đây, tôi có chia sẻ với các bạn các mẫu menu dọc cho Blogspot (xem TẠI ĐÂY ), hôm nay tôi giới thiệu đến các bạn một mẫu menu dọc khá ...
THAY ĐỔI GIAO DIỆN CHO BLOGGER
nếu bạn đang sử dụng giao diện mới của Blogspot thì bạn phải đăng nhập vào Blog > Chọn MẪU, sau đó bấm vào thẻ SAO LƯU/PHỤC HỒI ở phía trên cùng bên phải để đi đến thẻ BROWSE, các bước còn lại giống như hướng dẫn ở trên.
Trước khi đổi theme mới, nếu bạn muốn giữ lại theme cũ để sau này dùng đến, bạn đăng nhập vào Blog > chọn thiết kế > chọn chỉnh sửa HTML và bấm thẻ Tải mẫu xuống đầy đủ. Khi tải về, bạn cũng được 1 files có đuôi .Xml, bạn lưu giữ nó vào máy tính, bây giờ bạn có thể yên tâm để thử nghiệm các mẫu theme mới, nếu không thích mẫu mới bạn có thể sử dụng lại mẫu cũ bằng các bước tương tự như trên.
Một trong những điều kiện để đem đến sự thành công cho một Blogger, ngoài nội dung đặc sắc, phong phú được cập nhật thường xuyên thì hình th...
HIỂN THỊ CÁC BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 6)
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh ]]></b:skin> và dán tất cả code phía dưới trên dòng lệnh ]]></b:skin> và bấm Lưu mẫu.
border:solid 1px #ccc;
width:600px;
height:200px;
}
#NewsTicker_horizontal h1{
padding:6px;
margin:0;
background:#616D7E;
color:#fff;
font-size:11px;
font-weight:bold;
}
#NewsHorizontal {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
#TickerHorizontal {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerHorizontal li {
width: 280px;
border-right:1px solid #ccc;
text-align: left;
font-size: 12px;
margin: 0;
padding: 6px 10px;
float: left;
height: 162px;
display: inline;
}
#TickerHorizontal li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerHorizontal li a:hover {
color: #666;
text-decoration:underline;
}
#TickerHorizontal li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerHorizontal li .NewsFooter{
display: block;
color: #000;
font-size: 10px;
margin: 0px 0px 0px 70px;
}
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmT_RQ0uYu8-ZlHeNl2ggPMFqPkLAkptLZL6dcLsyN2A4jOBHCOJHGqoHIp-z3_mUuuiVscE_rNZDBPiIvQCs6DmwzvCrX0tY2SSt-KGolwFPHFofFtbEkMKOpyzDRd_CNW4-GDyec72BA/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "TRANG TRÍ BLOG"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.dunghennessy.blogspot.com/"; //thay thành địa chỉ blog của bạn
</script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66348944/mootools.1.11.js"></script>
<h1>TRANG TRÍ BLOG</h1>
<div id="NewsHorizontal">
<script src="http://dl.dropbox.com/u/66348944/Horizontal_re-label.js" language="javascript">
</script>
</div></div>
<script src="http://dl.dropbox.com/u/66348944/Ticker_Horizontal.js" type="text/javascript"></script>
Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị 2 bài một lúc được chia thành 2 cột trong khung tiện ích và được tự động tha...
KHẮC PHỤC VIỆC KHÔNG GÕ ĐƯỢC TỪ XÁC MINH Ở COMMENTS
Với cách này thì khung xác minh từ sẽ có một thanh trượt ở bên tay phải bạn chỉ việc kéo thanh trượt chạy lên thì sẽ gõ được từ xác minh để xuất bản bình luận cho mình.
Bạn làm tương tự như ở cách 2 nhưng bạn thay đổi chiều cao của khung xác minh từ ở mục Height thành số lớn hơn
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
Và cuối cùng cũng bấm Lưu mẫu, trở vào Blog xem kết quả.
Còn với cách này thì khung xác minh từ sẽ cao hơn từ đó bạn sẽ dễ dàng gõ được từ xác minh khi xuất bản bình luận.
Theo tôi thì các bạn nên làm cách 1 là tốt nhất và đơn giản nhất, còn cách 2 và 3 vì phải chỉnh sửa trong mã lệnh HTML nguồn của Blog nên rất "nguy hiểm" vì khi bạn chỉnh sửa "vô tình" thay đổi làm xáo trộn một mã lệnh nào đó mà bạn không biết sẽ làm cho giao diện Blog bị lỗi...
Có một số giao diện Blogspot, các bạn không thể gõ được từ xác minh ở khung comments để đăng bình luận cho mình được. Để khắc phục hiện tượn...
GALLERY
Đây là Theme có một menu ngang nằm phía trên, có 1 sidebar hiển thị bên tay phải bài đăng, khu vực bài đăng được chia tay 3 ô nhỏ, các b...
SHADES OF GRAY
Đây là Theme có một menu ngang nằm phía trên, có 8 sidebar nằm phía dưới (chia thành 2 tầng),. khu vực bài đăng được chia tay 4 ô nhỏ (g...
HIỂN THỊ CÁC BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 5)
.fl{float:left}
.fr{float:right}
.folder{width:630px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(http://goo.gl/CyQBL) repeat-x}
.folder-active{height:24px; padding:4px 10px; background:url(http://goo.gl/EgxmY) repeat-x; font-weight:bold}
.link-folder:link, .link-folder:visited{color:#fff}
.subfolder{height:24px; padding:5px 5px 0 15px; background:url(http://goo.gl/Z29yN) no-repeat}
.folder-content{width:620px; background:#fff url(http://goo.gl/qy9iZ) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
.folder-content p{margin:0}
.folder-content ul{list-style:none; margin:0; padding:0}
.folder-content li{padding:0 0 4px 6px; background:url(http://goo.gl/4OvNo) no-repeat 0 8px}
.folder-topnews{width:350px; padding-right:10px}
.folder-othernews{width:250px}
.other-folder{margin:0}
.img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
.img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
.xemthem{float:right; display:block; margin:0; padding:5px}
</style>
<div class="folder">
<div class="folder-title">
<div class="folder-active fl">
<a class="link-folder" href="http://dunghennessy.blogspot.com/search/label/N%C3%82NG%20CAO">Thủ thuật nâng cao</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/C%C6%A0%20B%E1%BA%A2N">Thủ thuật cơ bản</a> | <a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/TRANG%20TR%C3%8D%20BLOG">Trang trí Blogspot</a> | <a class="link-subfolder" href="http://www.dunghennessy.blogspot.com/search/label/Template">Giao diện Blogspot</a> | </div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="javascript">
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
homepage = "http://dunghennessy.blogspot.com/";
label = "NÂNG CAO";
</script>
<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript">
</script></div>
</div>
* Folder-topnews (width: 350px-chiều rộng của cột bên trái)
* Folder-othernews (width: 250px-chiều rộng của cột bên phải)
* Img-subject (chiều cao và chiều rộng của hình đại diện bên trái)
* Img-other (chiều cao và chiều rộng của hình đại diện bên phải)
- Nếu thay đổi chiều rộng của tiện ích thì các bạn phải thay đổi đồng thời chiều rộng của cột bên trái và bên phải luôn.
- Các bạn phải điền thật chính xác địa chỉ trang nhãn của bạn ở các dòng màu xanh và ở Label, nếu không nó sẽ bị lỗi và không hiển thị được.
Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị trong một khung hình chữ nhật được chia thành 2 cột, cột bên trái là hình đạ...
TẠO TAB CHO BLOG (MẪU 4)
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh </head> và dán tất cả code phía dưới trên lệnh </head> và bấm Lưu mẫu.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" />
Tiếp theo, bạn thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào.
Bây giờ, bạn có thể thay tên hiển thị và dán nội dung của bạn vào code trên và bấm lưu mẫu, quay trở lại blog xem kết quả.
Để tiết kiệm không gian Blog, bạn có thể gom các tiện ích vào một tiện ích HTML chung, các tiện ích này sẽ có các TAB riêng, khi cần xem ti...
FLASH TƯƠNG TÁC VỚI CHUỘT (PHẦN 1)
Còn muốn dán vào Blog, thì đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code phía dưới vào
Flash là file có đuôi.SWF, các file flash thường rất đẹp và sinh động thích hợp cho việc trang trí, quảng cáo trên Web/Blog... Ngoài ra, các...
HIỂN THỊ BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 4)
#itechplus-rc-3cot {width:300px;}
table#itechplus-rc-3cot {border:1px solid #ccc;}
#rc-3cot {padding:0 8px;width:30%;}
#rc-3cot p{padding:0;margin:0 0 5px 0;}
#rc-3cot img {margin:8px 0 2px; height:60px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-3cot a:link {font:normal 12px Times new roman;}
#itechplus-rc-3cot h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuBVptqn_IC8_Dlww5HTVhbpPOdV5NYkQvdwvJgvCDrIcFYibUiIGZNxwqhWHXWlmV8Znp5QvJyI-Uoo7EZucaQahlFxaPLYWPMHz6fKzEHJhY43y3AD06ziwCB5g9sN2QZOn4Q-39AJw/s1600/04.png) no-repeat top left;
padding:5px 0 14px 15px;
font:bold 13px Verdana;
margin:0px;
color:#fff;
}
</style>
<script type="text/javascript">
home_page = "http://dungheineken.blogspot.com/";
label = "WIN 7";
numposts = 9;
sumTitle = 24;
colortitle = "#333";
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfF93KpuD5KEcgRrwSJBUdbZOnLj-zM-P6bVpl1LEwH1xpPK9weqqNmgjkN2694RWW81GOtdW-qCo1_so8JaqMbD1qnnWjx-OuMW8EE4TzeD6Lr1I5tRUfWNKB-ocTOj9RT15pAZbbW0U/";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<h2>
Thủ thuật Windows 7</h2>
<script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript">
</script>
<div style="float: right; margin: 0; padding: 3px;">
Xem tất cả<a href="http://www.dungheineken.blogspot.com/search/label/WIN%207"> Thủ thuật Windows 7 »</a></div>
</div>
Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị theo 3 cột thẳng hàng, bài viết mới nhất sẽ nằm trên cùng, phía trên là hình...
TẠO ẢNH KÈM FLASH VÀO BLOG
X là chiều rộng của ảnh
Link Flash : Thay Link của file Flash muốn chèn vào.
Bạn có thể dễ dàng gắn ảnh tĩnh và ảnh động vào Blog hoặc vào các bài đăng, tuy nhiên để hình ảnh thêm đẹp bạn nên thêm vào ảnh một hiệu ứng...
THÊM 2 CỘT TIỆN ÍCH PHÍA DƯỚI KHU VỰC BÀI ĐĂNG
Đầu tiên, bạn đăng nhập vào Blog > Chọn Thiết kế > Chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh <div id='main-wrapper'> rồi Enter, bạn sẽ thấy trên bảng lớn có dòng lệnh này và được highlight màu xanh.
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section> <b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
Bước kế tiếp, bạn gõ vào hộp tìm kiếm dòng lệnh ></b:skin> và copy code phía dưới vào ngay trên dòng lệnh ></b:skin>
#magazine-left2 {
width: 45%;
float: left;
}
#magazine-right2 {
width: 45%;
float: right;
}
Thông thường các bạn có thể thêm nhiều tiện ích phía dưới khu vực bài đăng nhưng những tiện ích này sẽ có chiều ngang bằng với chiều ngang c...
ĐỒNG HỒ CÓ KÈM LỊCH
Mẫu 1:
Mẫu 2:
Mẫu 3:
Mẫu 4:
Mẫu 5:
Mẫu 6:
Mẫu 7:
Mẫu 8:
Mẫu 9:
Mẫu 10:
Mẫu 11:
Mẫu 12:
Trước đây, tôi có chia sẻ với các bạn một số mẫu đồng hồ đẹp (xem TẠI ĐÂY ), kỳ này tôi chia sẻ thêm với các mẫu đồng hồ có kèm theo lịch (m...
FLASH ĐẸP CHO BLOG (PHẦN 11)
MẪU 1:
MẪU 2:
MẪU 3:
MẪU 4:
MẪU 5:
MẪU 6:
MẪU 7:
MẪU 8:
MẪU 9:
MẪU 10:
Dưới đây là một số files flash đẹp để bạn có thể trang trí cho Blog mình thêm đẹp, ứng với mỗi files flash là mã code phía dưới, bạn chỉ cần...