Theme DJ Blogger Bay68Club - Đẳng cấp DJ Blogger

Người đăng: yeu mai em on Thứ Tư, 30 tháng 11, 2011


Share full xml hiện tại mình đang dùng giao diện matxac cực đẹp và chuẩn.
Trước mình hạn chế bị người khác rip theme nên css có vẻ khủng bố ^^ . Ai sài vui lòng để lại Design

Demo: http://www.bay68.com

Download direct link

Để Post nhạc  nên post theo cấu trúc sau để hiện thị cho đẹp ở rss và search google

Thông tin Track list
[m]linkzipyshare[/m]
(Link nhạc luôn phải được đặt trong thẻ [m][/m])
Nên post Track list rồi đến redmore cuối cùng là link để tránh rip data (ai chưa biết hãy xem ở bài trước http://www.fandung.com/2011/11/huong-dan-bao-mat-data-blogger.html ). Như vậy nếu bị rip chỉ rip đc Track list mà ko lấy được link.
Hiện tai JS này không thể play ở IE6 vì vậy mình đã làm 1 thông báo lỗi khi có người sử dụng IE6 để nghe nhạc.

Hỗ trợ play các kiểu link sau:
    http://mp3.zing.vn/bai-hat/Gio-Lanh-Cao-Thai-Son/ZWZD7EO0.html
    http://www.nhaccuatui.com/nghe?M=eYY7QIkAx4
    http://nhacso.net/nghe-nhac/honey-honey.WVBZVktX.html
    http://www29.zippyshare.com/v/84705837/file.html
    http://hn.nhac.vui.vn/em-luon-o-trong-tam-tri-anh-the-men-m198386c3p5314.html
    http://musik.soha.vn/mp3/decv89hwexo/Be-My-Baby-Wonder-Girls.html
    http://s1.chacha.vn/audio/mp3/0/0/85/87785.mp3
    http://www.youtube.com/watch?v=_wr12xYqQHw
Nếu blog có Thành viên post nhạc vào chỉnh sửa HTML tìm js sau để add avatar:
<script type='text/javascript'>
function djbay68 (post) { dj = new Array()
dj[0] = &quot;<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSH1c7GnfmECjnDH7DdcyjJfRQV8CVt6ex1YQ50HquSlHIJyONfP4YYsXPSoM2WPweNsFl858ysJJ6bNqyECxJq2DeWhKU26I_kI48hnidHFQqhoOS5wJ4fK6BTpiRBLRmmQEF1-C4wBs/s1600/HelloXimo.png' style='width:120px;height:120px'/>&quot;
dj[1] = &quot;<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUgwv3B-dy2JdZ8Nd4CuQF4W3UATo8CGWK0vAr3giMMyjrNMnVBBDwjY4keeQE87tAOuuDdEkL7gGcQPQWjWUmc4Lf30UyROswNs2AHtqKRTZlvOgbrdc80VsFNu9-ig-KOZ9-fVBT23Y/s1600/nguagovt.jpg' style='width:120px;height:120px'/>&quot;
dj[2] = &quot;<img border='0' src=Link ảnh Author2' style='width:120px;height:120px'/>&quot;
dj[3] = &quot;<img border='0' src=Link ảnh Author3' style='width:120px;height:120px'/>&quot;

if (post == &quot;HelloXimo&quot;) {document.write(dj[0]);}
if (post == &quot;nguagovt&quot;) {document.write(dj[1]);}
if (post == &quot;TenAuthor2&quot;) {document.write(dj[2]);}
if (post == &quot;TenAuthor3&quot;) {document.write(dj[3]);}
}
</script>   

Cứ như vậy add avatar là xong max blogger là 100 người :)

Random songs vào Thiết kế -> Phần tử trang -> Chỉnh sửa  widget Random songs  thêm:
Chú ý: Chỉ thêm khi có hơn 10 bài viết ko là load trang treo
<ul>
<script type='text/javascript'>
var rdp_numposts=8;
var rdp_snippet_length=150;
var rdp_info='no';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javascript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaYWETwQR8JhtW-8fAyPpj9UuWU9uADBJRZJ1uwaYzvmi_PgtMLc4001LtAefAgmr6fCCuLCfZloG4rdZJlcL0iVvBLVaXG72DLqvi69svf0d337qyD3cD4oOBzmAPfIsrwngb3Q9BYcn/"}}};document.write('<li>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Để hiện thị icon Video, Hot, New khi post bài các bạn tạo thêm Label tương ứng muốn hiện là : Video, Hot, New nhé




Vậy là bạn đã có 1 site DJ
More about

Hướng dẫn Bảo mật data blogger

Người đăng: yeu mai em

Vấn đề này tuy cũ và nhiều người biết nhưng lại không thấy ai nhắc đến khiến một số bạn mới tham gia Blogger nản lòng khi bị người khác Rip mất data, mất đi công sức bao lâu.
Nay mình xin hướng dẫn cho các bạn chưa biết để bảo vệ data của chính mình.
Hiện tại Google Chrome có thể view data các bạn thông qua RSS chính vì vậy ta sẽ tùy biến cách hiện thị RSS của blogger để ko hiện thị toàn bộ nội dung bài viết.


Trước tiên bạn cần vào Cài đặt -> Nguồn cấp Trang Web -> Cho phép Nguồn cấp dữ liệu Blog -> Chọn: Cho đến dấu ngắt.
Vậy là xong  từ bây giờ khi post bài nếu ở chế độ HTML chỉ cần thêm <!--more-->  vào giữa bài viết hoặc trên cùng nội dung bài viết.
Còn nếu post ở chế độ WYSIWYG thì bạn có thể sử dụng ngay nút redmore của blogger để ngăn cách
 Bây giờ hãy xem lại RSS của bạn sẽ thấy sự  khác biệt : http://tenmiencuaban/rss.xml
Ngoài ra để tùy chình nút  Đọc thêm » khi view rss bạn hãy vào Thiết kế -> Phần tử Trang -> Bài đăng trên Blog -> Chọn Chỉnh sửa và thay bằng nội dung muốn hiện thị.
Ví dụ: Click vào đây để xem tiếp... hoặc  Click vào đây để xem bộ phim này... v.v...
Bây giờ RSS blog của bạn đã hiện thị 1 cách đẹp và chuyên nghiệp hơn, không còn lo sợ người khác Rip data nữa rồi. ^^
More about

HIỂN THỊ CÁC BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 7)

Người đăng: yeu mai em on Thứ Hai, 28 tháng 11, 2011


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 sẽ hiển thị một hình đại diện nhỏ đi kèm với tiêu đề, khi bạn rê chuột vào một tiêu đề bất kỳ thì sẽ xuất hiện thêm một bảng nhỏ ghi ngày tháng xuất bản, số lượng comments và vài dòng tóm tắt của bài viết.
Mời các bạn xem thử (bấm vào XEM THỬ phía dưới để trải nghiệm nha)








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






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

Bạn có thể thay đổi độ rộng của tiện ích ở phần Width: 350px
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.






<script src="http://dl.dropbox.com/u/66348944/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 = "THỦ THUẬT INTERNET";
home_page = "http://www.dungheineken.blogspot.com/";
</script>
<div id="rc-posts-2-col"><h3>Thủ thuật Internet</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://dl.dropbox.com/u/66348944/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>



Bây giờ, bạn có thể thay đổi các giá trị ở các dòng màu đỏ để phù hợp với blog của mình (có ghi chú trên code)


Lưu ý: Ở code thứ hai, số bài viết hiển thị trong tiện ích phải bằng hoặc nhỏ hơn số lượng bài thực tế trong nhãn (numpost), và các bạn phải điền thật chính xác tên nhãn và đường link địa chỉ blog của mình thì nó mới hiển thị, nếu không nó sẽ bị lỗi ra một khung trắng (không hiển thị).


Nguồn: Trai đất mũi
More about

Tích hợp AncPlay Media Player cho Blogspot

Người đăng: yeu mai em

Trước kia khi muốn nhúng 1 đoạn video nào đó vào blog ta thường quen với việc nhúng code của nó mà server đó cung cấp. Nếu muốn nhúng nhiều video khác nhau thì ta lại dán 1 đoạn code khác nhau. Và nếu bài viết nào đó phải nhúng nhiều đoạn video vào thì sao? ví dụ 20 video chẳng hạn, nếu ta dùng cách thủ công là chèn tất cả 20 đoạn code của 20 video vào thì cũng được, nhưng như thế trông bài viết sẽ dài lê thê, và cũng không chuyên nghiệp lắm.


Tiện ích Ancplay hôm nay mình giới thiệu sẽ giúp các bạn khắc phục vấn đề trên. Ancplay được phát triển bởi Suzuki_aka, nó cho phép người xem dễ dàng xem nhiều video khác nhau trên bài viết của bạn. Hay nói dễ hiểu hơn nó giống như 1 trình xem video đơn giản, với 1 phần hiển thị video và 1 phần hiển thị danh sách các video. Các bạn chỉ việc click vào danh sách các video và xem. Hiện tại tiện ích hỗ trợ xem video từ các server : youtube.com, videobb.com, clip.vn, cyworld.vn, video.zing.vn, stream.pub.vn, dailymotion.com, videozer.com, 4shared.com, 2shared.com.

Xem DEMO

Sau đây là các bước chèn tiện ích vào blog :
1. Vào trong code template (không cần nhấp mở rộng mẫu tiện ích), sau đó chèn đoạn code bên dưới vào trước thẻ đóng </body> , các bạn có thể chèn ở vị trí khác cũng được, nhưng bắt buộc phải chèn sau tiện ích Blog1 (phần hiển thị bài viết) :
<script src='http://fandung.googlecode.com/svn/trunk/js/ancplay-mp.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
M.pl(M.re("Blog1"),"anc_pl","anc_tp");

var anc_ida = M.re("Blog1").split('|')[0].split(';')[1];
$_("anc_content").innerHTML = $_("anc_nd").innerHTML;

var player_id = "player";
var player_width = 640;
var player_height = 420;
var player_stream = ""+anc_ida+"";
var params = {allowFullScreen: true, scale: 'scale', allowScriptAccess: 'always'};
var attributes = {id: player_id, name: player_id};
var player_dvrMinutes = 30;
swfobject.embedSWF('http://cdn.octoshape.net/resources/player/infinitehd/player1.swf', player_id, player_width,

player_height, "10.0.0", null, null, params, attributes);

function Rload(x){
player_stream = ""+x+"";
swfobject.embedSWF('http://cdn.octoshape.net/resources/player/infinitehd/player1.swf', player_id, player_width,

player_height, "10.0.0", null, null, params, attributes);
swfobject.addDomLoadEvent(fixReference);
}
//]]>
</script>

Update (30/11/2011) : đã fix code javascript, do 1 số template không có thẻ div có id là wrap2, nên mình đã sửa wrap2 thành Blog1 là ổn nhất.
Update (1/12/2011 bởi HellloXimo) : Hoàn thiện tiện ích hơn với 1 số tính năng đã được fix như :
- Fix play Full Sreen tất cả Server
- Fix play server Zing, Daily
- và đây là link file js : http://maphim-net.googlecode.com/svn/trunk/ancplay.js

2. Save template lại.

Như vậy đã xong bước chèn tiện ích vào blog. bây giờ mình giới thiệu qua cách post bài viết.
Để trình xem video hiển thị được, bắt buộc bài viết của bạn phải tuân theo mẫu bên dưới :
{Một vài thông tin về video - vị trí 1 }

<div align="center" id="anc_pl"></div>
<div id="anc_tp"></div>

<div id="anc_content"></div>


{Một vài thông tin về video - vị trí 2 }

[id]1;link video 1|2;link video 2|[/id]
- Thông tin về video các bạn có thể đặt ở vị trí 1 hoặc 2 tùy thích. Tùy vào cách bố trí bài viết của các bạn, hoặc có thể sử dụng đồng thời 2 vị trí cùng 1 lúc cũng được.
- phần code highlight là code bắt buộc có trong bài viết.
- Sau đây là hướng dẫn chèn link video vào bài viết. Như trong đoạn code trên ta thấy, chèn link vào bài viết có dạng như bên dưới :
[id]1;link video1|2;link video2|[/id]

- Ví dụ ta có 2 link từ youtube và 2 link từ dailymotion và code mẫu như bên dưới :
[id]1;link youtube1|2;link youtube2|1;link dailymotion1|2;link dailymotion2|[/id]
và phần hiển thị sẽ trông như thế này :
Server Youtube: 1 | 2 |
Server Daily: 1 | 2 |
- Nếu ta thay số 12 thành Tập 1Tập 2 như bên dưới :
[id]Tập 1;link youtube1|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|[/id]

thì phần hiển thị sẽ là như thế này :
Server Youtube: Tập 1 | Tập 2 |
Server Daily: Tập 1 | Tập 2 |
- nếu Tập 1 được chia làm nhiều phần nhỏ thì ta cứ thêm tuần tự link vào, và các link được ngăn cách bằng dấu chấm phẩy. ví dụ như bên dưới :
[id]Tập 1;link youtube1-a;link youtube1-b;link youtube1-c;link youtube1-d|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|[/id]
- thì phần hiển thị sẽ như thế này :
Server Youtube: Tập 1a | Tập 1b | Tập 1c | Tập 1d | Tập 2 |
Server Daily: Tập 1 | Tập 2 |

- Tương tự như thế, nếu video có từ nhiều nguồn thì ta cứ việc thêm vào phía sau nó. ví dụ như bên dưới :
[id]Tập 1;link youtube1-a;link youtube1-b;link youtube1-c;link youtube1-d|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|1;link zingmovie1|2;link zingmovie2[/id]
- và phần hiển thị sẽ là :
Server Youtube: Tập 1a | Tập 1b | Tập 1c | Tập 1d | Tập 2 |
Server Daily: Tập 1 | Tập 2 |
Server Zing: 1 | 2 |

Như vậy mình đã giới thiệu xong. chúc các bạn thành công.

Thủ thuật thực hiện theo yêu cầu của ChipKool_Online

Thanks to Suzuki_aka
More about

TẠO BẢNG THÔNG BÁO CHO BLOG (KIÊU 2)

Người đăng: yeu mai em on Chủ Nhật, 27 tháng 11, 2011

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ì nội dung thông báo sẽ hiển thị phía dưới, nếu không muốn xem nữa, bạn bấm "Đóng thông báo lại", bạn bấm vào xem thử phía dưới nha.




Xem thử



Thủ thuật này khá đơn giản, chỉ cấn bạn đăng nhập vào blog > chọn Thiết kế > 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 nhập nội dung thông báo vào và bấm Lưu lại là xong
More about

TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG

Người đăng: yeu mai em on Thứ Sáu, 25 tháng 11, 2011

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á đẹp, khi sử dụng menu này, bạn rê chuột vào một menu bất kỳ thì menu đó sẽ có hiệu ứng lật và chuyển đổi màu khá mướt. Các bạn bấm vào Xem thử phía dưới để xem trước nha.





Xem thử



Thủ thuật này khá là đơn giản, bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.




<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/Jquery1.3.2.js"></script>
<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>



Bây giờ, bạn thay đổi các dấu "#" màu xanh thành các địa chỉ tương ứng của các menu và thay đổi các tiêu đề hiển thị trên menu (các dòng chữ màu xanh) theo ý thích của bạn, ngoài ra bạn còn có thể thay đổi:
* Width: 250px (chiều rộng của tiện ích).
* Cỡ chữ hiển thị trên menu (Font-size:16px)

và bấm LƯU lại là xong



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



Nguồn: Trai đất mũi
More about

THAY ĐỔI GIAO DIỆN CHO BLOGGER

Người đăng: yeu mai em on Thứ Năm, 24 tháng 11, 2011

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ức giao diện cũng là một trong những yếu tố cần được các bạn quan tâm. Với giao diện đẹp bóng bẩy, bố cục gọn gàng, màu sắc hài hoà trang nhã sẽ thu hút khách tham quan, làm tăng lượt truy cập vào blog. 
Bạn có thể dễ dàng tìm kiếm một giao diện ưng ý tại thẻ Trình thiết kế mẫu được Blogger cung cấp sẳn (đăng nhập vào Blog > chọn thiết kế > chọn trình thiết kế mẫu). Nếu vẫn chưa hài lòng, bạn có thể truy cập VÀO ĐÂY để chọn cho mình một Themes đẹp. Trang Web này cung cấp cho bạn một số mẫu Themes đẹp, lạ mắt với nhiều bố cục tuỳ chọn (1 cột, 2 cột, 3 cột, cột bên trái, bên phải...), bạn có thể trải nghiệm thử bằng cách bấm trái chuột vào mẫu themes và chọn Demo để xem thử, nếu vừa ý bạn bấm Download để tải mẫu themes đó về máy tính. Khi tải về, bạn giải nén sẽ thu được một files có đuôi .Xml.


Để bắt đầu đổi thems mới, bạn đăng nhập vào Blog > chọn thiết kế > chọn chỉnh sửa HTML


Tại trang chỉnh sửa HTML, bạn bấm thẻ Duyệt để duyệt đến file .Xml mà bạn vừa tải về, sau đó bấm thẻ Tải lên để đổi giao diện. Bạn chờ một lát, khi hoàn thành xong Blogger sẽ báo cho bạn các tiện ích cần giữ lại hoặc xoá nó đi (tuỳ theo mục đích sử dụng, bạn chọn giữ lại hoặc xoá đi cũng được), cuối cùng bấm Lưu mẫu và đăng nhập vào Blog để xem giao diện mới của mình.


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 thSAO LƯU/PHỤC HỒI ở phía trên cùng bên phải đđi đến thBROWSE, 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.
Với các bước kể trên, hy vọng các bạn có thể tạo cho mình một Blogger có giao diện vừa ý...
Chúc các bạn thành công.
More about

HIỂN THỊ CÁC BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 6)

Người đăng: yeu mai em


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 thay đổi theo một khoảng thời gian nhất định. Mỗi bài viết sẽ hiển thị một hình đại diện nhỏ đi kèm với tiêu đề, ngày tháng xuất bản, số lượng comments và vài dòng tóm tắt.
Mời các bạn xem thử (bấm vào XEM THỬ phía dưới để trải nghiệm nha)









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








#NewsTicker_horizontal{
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;
}


Ở code trên, các bạn có thể thay đổi các số màu đỏ và màu tìm để phù hợp cho Blog của mình (Width: chiều rộng tiện ích, Height: chiều cao tiện ích, còn số màu tím 280px là độ rộng của mỗi cột). Lưu ý: nếu thay đổi chiều cao và chiều rộng của tiện ích các bạn phải thay đổi đồng thời chiều rộng của mỗi cột thì nó mới tương xứng nha.

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.






<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUu3Ju8gRVOEkUBEomuEcV4ukdz79omgpsNROIVMIxqRY3rhKd8pOxVbFvXk0DAdrk4oa9lLI34-280zYNp1hssZG0u8byuahi01sdMBOdCslKo3OMbW-bhGwwELQ68y_RDHyrVB8hyX_6/";
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>
 
<div id="NewsTicker_horizontal">
<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>



Bây giờ, bạn có thể thay đổi các giá trị như: địa chỉ blog, tên nhãn, số bài viết hiển thị, tiêu đề tiện ích theo ý thích của mình (có ghi chú trên code).
Ngoài ra, với thủ thuật này bạn cũng có thể tạo KHUNG TRÌNH DIỄN CÁC BÀI ĐĂNG MỚI NHẤT CHO TOÀN BLOG bằng cách thay chữ label (màu xanh) thành chữ post và thay chữ TRANG TRÍ BLOG (màu xanh) thành chữ CÁC BÀI ĐĂNG MỚI (hoặc chữ nào mà bạn thích) bấm Lưu lại là xong.

Lưu ý: Ở code thứ hai, các bạn phải điền thật chính xác tên nhãn và đường link địa chỉ blog của mình thì nó mới hiển thị, nếu không nó sẽ bị lỗi ra một khung trắng (không hiển thị).


Nguồn: Trai đất mũi
More about

KHẮC PHỤC VIỆC KHÔNG GÕ ĐƯỢC TỪ XÁC MINH Ở COMMENTS

Người đăng: yeu mai em on Thứ Tư, 23 tháng 11, 2011

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ượng này các bạn sẽ có 3 cách như sau:






1/ KHÔNG CHO HIỂN THỊ TỪ XÁC MINH:
Bạn đăng nhập vào Blog > chọn Cài đặt và chọn thẻ Nhận xét. (Rê chuột vào ảnh để xem ảnh với kích thước lớn hơn.)


Sau đó một bảng thiết lập cho khung nhận xét hiện ra.
Bạn kéo xuống phía dưới ở mục "Hiển thị xác minh từ cho các nhận xét?" và đánh dấu vào ô tròn trước chữ Không, cuối cùng bấm Lưu cài đặt là xong.


Với cách này, thì khi nhận xét xong các bạn sẽ không thấy khung xác minh từ nữa mà nhận xét sẽ tự động xuất bản luôn.

2/ TẠO THANH TRƯỢT CHO KHUNG XÁC MINH TỪ:
Bạn đăng nhập vào Blog > chọn Thiết kế > chọn chỉnh sửa HTML (đánh dấu mở rộng mẫu tiện ích), bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh scrolling='no'Enter thì bạn sẽ thấy dòng lệnh giống như thế này xuất hiện ở khung lớn phía trên

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>



Bây giờ, bạn thay đổi chữ 'no' thành chữ 'auto' và bấm Lưu mẫu, trở lại Blog xem kết quả.
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.

3/ THIẾT LẬP LẠI CHIỀU CAO CỦA KHUNG XÁC MINH TỪ:
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...



More about

GALLERY

Người đăng: yeu mai em

Đâ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ạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặt cho Blog của mình. Các bạn có thể xem bài "THAY ĐỔI GIAO DIỆN CHO BLOGGER" để biết cách cài đặt cho Blog




THEMES GALLERY



Nguồn:PB templates

More about

SHADES OF GRAY

Người đăng: yeu mai em

Đâ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ỏ (giao diện này rất thích hợp dùng để chia sẻ hình ảnh ), các bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặt cho Blog của mình. Các bạn có thể xem bài "THAY ĐỔI GIAO DIỆN CHO BLOGGER" để biết cách cài đặt cho Blog




THEMES SHADES OF GRAY



Nguồn:PB templates

More about

HIỂN THỊ CÁC BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 5)

Người đăng: yeu mai em on Thứ Ba, 22 tháng 11, 2011

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 đại diện và một số dòng giới thiệu của bài viết mới nhất, cột bên phải sẽ hiển thị hình đại diện và tiêu đề bài viết thứ hai, số còn lại sẽ hiển thị theo dạng List. Ngoài ra, ở trên cùng của khung còn hiển thị một số Tab để các bạn có thể theo dõi các nhãn khác....
Mời các bạn bấm vào xem thử phía dưới sẽ thấy rõ hơn.




Xem thử




Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.




<style type="text/css">
    .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>



Bây giờ, bạn thay đổi các đường link màu xanh (http://www.dungheineken.blogspot.com/search/label.......) là địa chỉ trang nhãn mà bạn muốn hiển thị, thay đổi các số màu đỏ theo ý muốn của bạn:
* Width: 630px (chiều rộng của tiện ích).
* 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)
* Home_page: địa chỉ blog của bạn
* Label: Tên nhãn muốn hiển thị
* Numposts2=5: Số bài muốn hiển thị (kể cả bài có hình và bài hiển thị dạng List)
* SummaryPost=230: Số ký tự phần giới thiệu bài viết mới nhất.
và bấm LƯU lại là xong


LƯU Ý: 
 - 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.
Chúc các bạn thành công



Nguồn: Itech Plus
More about

TẠO TAB CHO BLOG (MẪU 4)

Người đăng: yeu mai em on Thứ Hai, 21 tháng 11, 2011


Để 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ện ích nào đó bất kỳ chúng ta chỉ việc bấm vào tiện ích đó, TAB tiện ích hiện hành sẽ đổi màu khác biệt so với các TAB khác...
Thủ thuật này cũng khá đơn giản.
Mời các bạn xem thử (bấm vào XEM THỬ phía dưới để trải nghiệm nha)






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






<div id="tabs">
<ul>
<li><a href="#tabs-1">Tiêu đề tiện ích 1</a></li>
<li><a href="#tabs-2">Tiêu đề tiện ích 2</a></li>
<li><a href="#tabs-3">Tiêu đề tiện ích 3</a></li>
</ul>
<div id="tabs-1">Nhập nội dung tiện ích 1 vào đây</div>
<div id="tabs-2">Nhập nội dung tiện ích 2 vào đây</div>
<div id="tabs-3">Nhập nội dung tiện ích 3 vào đây</div>



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

More about

Thêm favicon cho tiện ích LinkList

Người đăng: yeu mai em on Chủ Nhật, 20 tháng 11, 2011

Đối với Blogspot, khi bạn muốn thêm một tiện ích liệt kê các trang web hoặc blog mà bạn ưa thích thì bạn thường dùng đến tiện ích LinkList. Tính năng của tiện ích này rất đơn điệu, bạn chỉ có thể tùy biến CSS cho các liên kết. Qua bài viết này, mình sẽ giúp bạn sáng tạo thêm một chút, thêm favicon cho các liên kết của tiện ích LinkList.

Kể từ khi Blogger tích hợp tính năng Favicon thì một liên kết favicon của blogspot có dạng như sau:

http://tenblogcuaban.blogspot.com/favicon.ico

Theo quy tắc phổ biến, liên kết favicon của một website (được xây dựng trên các nền tảng Wordpress, Joomla, …) có dạng như sau: http://www.tenwebsite.com/favicon.ico.

Bây giờ hãy xem xét cấu trúc XML của một tiện ích LinkList. Trước tiên Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích LinkList rồi lần lượt thêm địa chỉ (URL) và tên trang tương ứng cho các liên kết ưa thích mà bạn muốn tạo. Sau đó vào Edit HTML chọn Expand Widget Templates. Dùng từ khóa LinkList để tìm đến đoạn code của tiện ích này như sau:

  1. <b:widget id='LinkList1' locked='false' title='My Favourite Resources' type='LinkList'>
  2. <b:includable id='main'>
  3. <b:if cond='data:title'><h2><data:title/></h2></b:if>
  4.  <div class='widget-content'>
  5.    <ul>
  6.      <b:loop values='data:links' var='link'>
  7.        <li><a expr:href='data:link.target'><data:link.name/></a></li>
  8.      </b:loop>
  9.    </ul>
  10.   </div>
  11. </b:includable>
  12. </b:widget>

Trong đoạn code trên, cần chú ý đến dòng

<li><a expr:href='data:link.target'><data:link.name/></a></li>

Nó biểu thị các liên kết. Trong đó data:link.target chính là đích đến của các liên kết. Như vậy để tự động thêm favicon vào trước các liên kết thì chúng ta thay thế dòng code nói trên bằng đoạn code như sau:

  1. <li>
  2.   <a expr:href='data:link.target'>
  3.     <img expr:src='data:link.target + &quot;favicon.ico&quot;' />
  4.     <data:link.name/>
  5.   </a>
  6. </li>

Cuối cùng, bạn có thể tùy biến CSS cho tiện ích, thêm đoạn code bên dưới vào trước dòng ]]></b:skin>.

#LinkList1 li {
background-color: #C89A2B;
border-top: 2px solid #C89A2B;
border-bottom: 2px solid #C89A2B;
cursor: pointer;
margin: 2px 0;
padding:0;
float:left;
width:50%;
list-style:none;
clear:none
}
#LinkList1 li a {
color: #069 !important;
font-weight: normal !important;
padding-left:5px
}
#LinkList1 li img {
display: inline-block;
height: 16px;
width: 16px;
margin-right: 5px;
vertical-align:middle;
border:none
}
#LinkList1 li:hover {
background-color: #C25A3B;
border-color: #606971
}

Lưu Template là hoàn thành.

More about

FLASH TƯƠNG TÁC VỚI CHUỘT (PHẦN 1)

Người đăng: yeu mai em on Thứ Bảy, 19 tháng 11, 2011

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 bạn có thể tìm thấy các file Flash có tính tương tác với con trỏ chuột, có nghĩa là bạn phải bấm con chuột vào một trong các dữ liệu của file Flash để nó thực thi (ví dụ: Play, Preview, Replay...)
Tôi có sưu tầm một số Flash từ các trang Web nước ngoài khá đẹp và lý thú thích hợp cho việc giải trí sau vài giờ làm việc "mệt mỏi", mời các bạn cùng khám phá file Flash phía dưới.
Với file Flash này, khi bạn rê chuột vào khung lớn phía trên thì sẽ có một số kiểu dáng và hiệu ứng rất đẹp theo con trỏ chuột, bạn cũng có thể đổi kiểu dáng bằng cách bấm vào thẻ Effect number, đổi hiệu ứng rơi ở thẻ Type, sau cùng bấm Apply để thực thi.

Bây giờ, mời các bạn "giải trí" với một file Flash phía dưới.








Các bạn nhớ khi thay đổi khi thay đổi kiểu dáng hoặc kiểu rơi thì phải bấm Apply thì mới "hiệu nghiệm" nha.
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


<embed bgcolor="#FFFFFF" height="320" width="450" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://420560203807516800-a-1802744773732722657-s-sites.googlegroups.com/site/dunghennesy/ngoisaodoimau.swf?attachauth=ANoY7cqQZlM8bexVHF9jr7njzzVzeKVVYi--XPJTAXOmxW9rQWBzfHmFHVXjDxpqIZe0_oDZrwx3elRz_Ncx2gAINlt7cSARdw5d6SFcnDuHtqhmUaN0wzj2EYWCfAYaEAZyrnyEUMjxrRwVn9kC7p4Eu-5naJU9DlgQ8CB1rH2qNY5ZJI6v5TF4YYHWlnMWAZPC7ZCSbB6l5HWXII7-uXu5H1KWB9rTrg%3D%3D&amp;attredirects=0" type="application/x-shockwave-flash" ><br /> </embed>

Bạn có thể thay đổi chiều ngang ở mục Width, chiều dài ở mục Height, sau cùng bấm Lưu lại là xong.

Chúc các bạn vui!!!
More about

HIỂN THỊ BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 4)

Người đăng: yeu mai em on Thứ Sáu, 18 tháng 11, 2011

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 đại diện, phía dưới là tiêu đề bài viết...Nếu bạn muốn xem hết các bài viết trong nhãn này thì bấm vào Xem tất cả.... ở phía dưới cùng.
Mời các bạn bấm vào xem thử phía dưới sẽ thấy rõ hơn.




Xem thử




Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.





<style type="text/css">
    #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/AVvXsEge80yCiVAIFUnJaQNaGwld4u9JzT3BOQG4tCNRsSHY8Z6wM33j4icj5PM5d5TLpzG5GNfmBmqKB0oYQK0i6ScQCivYEdurAA6vfLZIt6oQXEpr9NL7M_xTMuej4PYy-obGwKjz6aU74JU/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/AVvXsEgYnE9ZiaHhnrzV2ww_oJ9H3wiCwOanuH11MaD3XZEWN0hTI5WNLUtKafEHRjPqtiWvhlNMTOf_SDSbfyDJF1nhOWluZPDa6mbJ75jl8d5rIa-CfcNGHeEl1I-uaQxUtqSZ20pv8ybk6qY/";
    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>



Bây giờ, bạn thay đổi các đường link màu xanh (http://www.dungheineken.blogspot.com/search/label/WIN%207) là địa chỉ trang nhãn mà bạn muốn hiển thị, thay đổi các số màu đỏ theo ý muốn của bạn:
* Width: 300px (chiều rộng của tiện ích).
* Height: 60px width: 50px (chiều cao và chiều rộng của ảnh đại diện)
* Background: url http://3bp......png (link hình thanh ngang của tiêu đề)
* Home_page: địa chỉ blog của bạn
* Label: Tên nhãn muốn hiển thị
* Numposts=9: Số bài muốn hiển thị
* SumTitle=24: Số ký tự của tiêu đề bài đăng.
* Colortitle: Màu tiêu đề bài đăng
* Thủ thuật Windows 7: Tiêu đề tiện ích
và bấm LƯU lại là xong


LƯU Ý: 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.
Chúc các bạn thành công



Nguồn: Itech Plus
More about