Tạo ảnh chạy xoay tròn trên blog bằng Javascript

Lướt web mình thấy ở trang nsvina.com có một cách trình diễn ảnh cũng khá là đẹp mắt nên mình xin chia sẻ cùng các bạn thủ thuật này. Với thủ thuật này thì hình ảnh sẽ chạy dạng xoay tròn, nó trông đẹp hơn thủ thuật trước mình giới thiệu đến các bạn. Các bước để thực hiện thủ thuật này cũng không quá phức tạp, mình sẽ hướng dẫn bạn chi tiết hơn bên dưới.

1. Đầu tiên bạn đăng nhập vào tài khoản blogger
2. Vào phần thiết kế (Design) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ </head>


<script src='http://tranphucminh.110mb.com/xoaytronanh.js.txt' type='text/javascript'/>

4. Save template lại và trở về phần tử trang và thêm 1 HTML/Javascript
5. Thêm code bên dưới vào phần tử vừa thêm ở trên
<script type='text/javascript'>
carousel({id:'',
border:'',
size_mode:'image',
width:200, //độ rộng của ảnh trình diễn
height:163, //chiều cao của ảnh trình diễn
sides:12,
steps:23,
speed:1, //tốc độ trình diễn
direction:'left', //hướng chạy của ảnh bạn có thể đổi thành RIGHT

images:[
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bIdLJvyzGnussaHGXE4e0lYbAQPvkrbCSSjpjJN4_3RRoAXphXIc9ufe65TmoMcLwmagkwjSFb0nNYPwcW0HjUgHfkgHYfxkR46z-tgsUyBpMSc35cbCD-cnV56PNi5FjobzpF_AaII/s1600/cooltext467203564.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-mFBUIL8cdIKhigeJRsTk8srCEt0qZ38nHoEq13feTxHFoKd_Lh7HRhUpr4IuCul99tGR-xKPiM5_d4DZxC1_G1zX2_CP2zON-FJRrJJ0WdJfiAZxZrPVS-8DRXN6UC9Ccr36nhICPnum/s400/3.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsP4lQTB3kgIUZBe26f6pVnsZCX4TTU_h8y-d3y6_eJTZxHg6vlzCpPEt-rTvnhEYStTnnBSveTr6YexxBdmeGL6_X1q-Jq24i8BjQaUOb0WRx5W3w-j2YAl3WD1sC237C0JdHpbEsDMQ/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhttXzZM8j4ilfSGwMXT2vXJLwcq4Es-6bEwM3WsrJBOOppGPDM9WLlIAcby8OZgFfEF12ZSkaLTI1elo-IHAkrOi0toepzY9gmG6fhwQtx4XFhKEn73jsN_uGIDWpCSg_2TJeg8_fpE1i_/s400/4.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJkDyuAAGcs5RGIR2r446AcntQyastBkElnCMsZySyjAuFNmjlKnpP8P_Pi3Mew99rfrYR6JcFES4V8DtrpGi_Qt9ZF06xzaxL440pWueqq6Rh8PV0SFFOvJYYmWyAmCExdDM_A6cSCGR/s400/2.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie6YVykU490pfY2fT22IOUcRbdD7LskzSBwxRxuyZL6MtNDhnui3Q9d5o4jYXh-Y_JRBsTBrWT_dciXkSp_akGDU9EDQxXq0rncLilWaW_Ls4-ZQbHRBFO7zRpuuSXABh8AVv6RS8r79iB/s400/3.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwndI9kLhXuu0TbBnjbcxvxMLvnHda99vzCnyWp2wjXiESFvpag4wUrmocJnVZKLf7oMRe5uLqRMPbb86hxgAqzIBjD544udzHRqXvXU42mnT47x5s-SqiYuNXVwX7YuUi9HOdMImOZ4S-/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRFI9ykuTBHvWZIY1i56-ByAOvF1XiCORt5RIsFPSxUjB9rokKYylgdTs901l4jsuLDba_rQ07quX6DwNcxzq8jkVtxXXzaOVdNMtZKq4hjRcxAm2hyphenhyphenRWpKMX5praXzdoVyI9Bsea_KUZ/s400/2.jpg'
],

links: [
'http://tranphucminh.blogspot.com/search/label/Nh%E1%BA%A1c',
'http://tranphucminh.blogspot.com/search/label/C%C3%B4ng%20ngh%E1%BB%87%20TT',
'http://tranphucminh.blogspot.com/search/label/Phim',
'http://tranphucminh.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20Blogger',
'http://tranphucminh.blogspot.com/search/label/V%C4%83n%20b%E1%BA%A3n%20PL%20n%C4%83m%202010',
'http://tranphucminh.blogspot.com/search/label/Cu%E1%BB%99c%20s%E1%BB%91ng',
'http://tranphucminh.blogspot.com/search/label/PTLB-TKCN-2010',
'http://tranphucminh.blogspot.com/search/label/T%C3%A0i%20li%E1%BB%87u',
],

titles:[
'tranphucminh',
'tranphucminh',
'tranphucminh',
'tranphucminh',
'tranphucminh',
'tranphucminh',
'tranphucminh',
'tranphucminh'
],
image_border_width:1,
image_border_color:'transparent'
});
</script>
6. Cuối cùng bạn save tiện ích lại

Chúc bạn thành công. Nguồn: Traidatmui.com

Đọc tiếp

Cách tạo một Album nhạc trên Blog

Hiện nay có rất nhiều trang web cho ta thực hiện điều này. Bài viết này chỉ giới thiệu cách tạo Album nhạc trên trang web Esnips.com, các trang web khác cũng được thực hiện gần như tương tự.

Công việc trước tiên là bạn phải chuẩn bị cho mình những bản nhạc yêu thích. Sau đó bạn phải đăng ký là thành viên của http://www.esnips.com/, với dung lượng lưu trữ lên đến 5 GB tha hồ cho bạn upload nhạc lên mạng. Cách đăng ký thành viên như sau:

Truy cập vào trang web http://www.esnips.com/, bấm vào thẻ “Join Now!”. Tại cửa sổ mới hiện ra nhập email vào “Your e-mail address” và gõ password vào “Choose your password”, tại “Type the letters you see below” gõ dòng chữ nhìn thấy ở phía dưới đồng thời đánh dấu vào “I have read and agree to the terms of use”. Xong thì bấm Create Account, lúc này bạn đã hoàn tất quá trình đăng ký.

Để thuận tiện cho việc phân loại nhạc bạn nên tạo ra những thư mục khác nhau bằng cách vào thẻ folders rồi chọn tiếp “New folder”. Gõ thư mục vào “Give your new eSnips folder a name”. Các lựa chọn “Public Folder” cho tất cả cùng xem, “Group Folder” cho các bạn bè xem và “Private Folder” chỉ mình bạn xem. “Describe it” dùng để gõ những mô tả cần thiết về album nhạc và “Tag it” dùng để gõ những từ khóa cần thiết để cho công việc tìm kiếm dễ dàng.

Khi đã tạo được thư mục rồi thì bây giờ là chỉ cần upload file lên mạng, vào Uploading Files chọn Browse để chọn file cần upload từ máy tính, bấm tiếp Browse để lựa chọn những file nhạc khác, trang web hỗ trợ rất nhiều định dạng nhạc khác nhau. Khi đã upload xong bạn bấm tiếp vào “Go to Folder” trang web sẽ hiện ra những file mà bạn đã upload lên thư mục.

Tích dấu vào đầu tên của bài hát, bấm tiếp vào dòng chữ “Add to Quicklist” ở phía dưới bài hát nó sẽ đổi thành “Go to Quicklist >”. Bấm tiếp “Go to Quicklist >” sẽ hiện ra thanh công cụ Quicklist. Tại thanh công cụ này bạn chọn tiếp “Create playlist widgets”.

Cửa sổ mới xuất hiện bạn có thể chọn một trong hai “widget”, tại “Customize” chọn No để bấm play khi nghe nhạc hoặc chọn Yes để tự động chơi nhạc. Lúc này phía dưới “Copy and paste” bạn đã có đoạn code cho riêng mình.

Công việc bây giờ là copy đoạn code vào blog entry. Và hãy nhớ mời bạn bè vào nghe Album do chính mình vừa tạo ra.

Công việc cuối cùng là khi viết Entry, blogger nên nhớ đánh dấu vào view html source, copy đoạn code embed html rồi dán vào entry là xong.

Đọc tiếp

Hiển thị bài viết với hiệu ứng trượt bằng Jquery

Hôm nay mình xin chia sẻ đến các bạn một các hiển thị bài đăng với hiệu ứng trượt khi click vào tiêu đề bài viết,bài viết ứng dụng với Jquery. Với thủ thuật này, bài viết của bạn sẽ chỉ hiển thị tóm tắt một bài viết đầu tiên, còn các bài viết còn lại chỉ hiển thị tiêu đề. Khi bạn click xem một bài nào đấy thì các bài viết khác sẽ thu gọn lại, chỉ hiển thị tiêu đề. Bây giờ chúng ta sẽ tiến hành thủ thuật này.

Hình ảnh minh họa

1. Đăng nhập vào Blogger
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>
.accordion {
width: 600px; /* độ rộng tiện ích*/
border-bottom: solid 1px #c4c4c4;
color:#000;}
.accordion h3 {
background: #616D7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMDPR1kCrjw99p3_ncqNTAXbcBemdaHx-M9ljKBsMV2yasexGgmsusnRp7R1T9bt0wps1KryoM_yNYhapVK1Gx0CbIpeyOL9d5gpuWK1ON8KDS0v5omsd5dctel03I7I0QJ4O9jGQRi9Y5/) no-repeat right -51px;
padding: 5px 27px 5px 8px;
margin: 0px;
font: bold 12px Arial, Helvetica, sans-serif; /* kiểu font của tiêu đề bài viết hiển thị trên header*/
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color:#fff; /* màu tiêu đề bài viết hiển thị trên header*/
}
.accordion h3:hover {
background-color: #ccc; /* màu nền khi rê chuột*/
color:#000099; /* màu tiêu đề khi rê chuột*/
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0px;
padding: 8px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.accordion p a{
color:#0000ff; /* màu tiêu đề bài viết */
}
.accordion p a:hover{
color:#ff0000; /* màu tiêu đề bài viết khi rê chuột*/
}
.accordion-img{
float:left;
border: #ddd 1px solid;
padding:2px;
margin-right:4px;}

4. Save template lại
5. Trở lại phần tử trang và thêm 1 HTML/Javascript
6. Thêm vào HTML/Javascript đoạn code sau
<script src="http://tranphucminh.110mb.com/jquery.min.js.mp3.txt" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2EBJRXi0CXdFTBQY0nYWi6aymeNyfLkYtTcWeKZTGZYgOG5UPHw8hpKrtQ8e62Wtd2CkfyFOIjooIo7pGUSh7swNKgkujNsZNGyJZ_0pgRvtaiTC4zt5S_ffveVCDwhZp7A-sLwIz5Gt_/";

showRandomImg = true;

jimgwidth = 80; //độ rộng của ảnh thumb
jimgheight = 80; //chiều cao của ảnh thumb
jfntsize = 10;
jacolor = "#000";
jasize = "2"; //kích cỡ của phần comments vào phần days
jaBold = true;

jtext = "Comments";
jshowPostDate = true; //nếu không muốn hiển thị phần comments và phần day bạn đổi TRUE thành FALSE

jsummaryPost = 400; //số ký tự hiển thị trong phần tóm tắt

numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //nhãn bài viết thay thành nhãn bài viết của bạn
home_page = "http://www.tranphucminh.blogspot.com/"; //thay thành địa chỉ blog của bạn

</script>

<div class="accordion">
<script src="http://tranphucminh.110mb.com/accordion_post.js.mp3.txt" type="text/javascript"></script>
</div>

Chỉnh code: Bạn dựa vào các dòng chỉ dẫn để chỉnh sửa lại cho phù hợp với blog của bạn.
7. Save tiện ích lại Nguồn: traidatmui.com

Đọc tiếp

Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger

Trước đây mình đã có giới thiệu đến các bạn thủ thuật tạo nút read more (Đọc tiếp) cho blogger tại đây, tuy nhiên với thủ thuật trước thì bạn phải cần thêm code trong khi soạn thảo bài viết của bạn mới có thể ứng dụng được nút read more. Hôm nay mình xin chia sẻ đến các bạn một thủ thuật đơn giản và tiện ích hơn thủ thuật trước, với thủ thuật này thì bài viết của của sẽ được tự động tóm tắt một đoạn trong bài đăng của bạn, và nếu bài viết của bạn có ảnh sẽ được hiển thị dạng ảnh thumbnail.

Hình ảnh minh họa

1. Đăng nhập vào tài khoản blogspot
2. Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)
3. Chọn mở rộng tiện ích 4. Chèn code bên dưới vào trước thẻ ]]></b:skin>
.readmore {
float:right;
margin:1px 10px 5px 0px;

padding:3px;}
.readmore a{
color:#fff;
padding:3px 5px 3px 5px;
background:#0000ff;
}
.readmore a:hover{
color:#0000ff;
background:#ddd;}

.sumpost {
color:#000;
font-family:arial;
font-weight:bold;
font-size:12px;}
.img-post {
float:left;
margin-right:5px;
border:1px solid #fff;
height:96px;
padding:1px;}

5. Tiếp đến bạn chèn code bên dưới vào sau thẻ <head>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 230; //số ký tự bài viết hiển thị khi không có ảnh
summary_img = 500; //số ký tự bài viết hiển thị khi có ảnh
img_thumb_height = 90; //chiều cao của ảnh thumb
img_thumb_width = 100; //độ rộng của ảnh thumb
</script>
<script src='http://tranphucminh.110mb.com/auto_sumpost.js.txt' type='text/javascript'/>

Bạn dựa vào hướng dẫn trong code để tùy chỉnh cho phù hợp với blog của mình
6. Bây giờ bạn tìm đến đoạn code như bên dưới
<data:post.body/>

7. Thay đoạn code vừa tìm được ở trên thành code bên dưới
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>

8. Cuối cùng save template lại

Lưu ý: Nếu trước đây bạn đã thêm tiện ích read more (Đọc tiếp) thì bạn nên gở bỏ trước khi thêm thực hiện thủ thuật này để tránh việc trùng lấp trong bài viết của bạn.

Chúc bạn thành công; Nguồn: traidatmui.com

Đọc tiếp

Tên miền quốc tế miễn phí 100%

Domain là một yếu tố quan trọng trong việc quảng bá thương hiệu cho trang web, blog hay forum của bạn ,cái domain nói lên tất cả những gì liên quan đến web. Đặc biệt hơn khi bạn sở hữu được một tên miền quốc tế dạng như là tenban.com , tenban.net hoặc tenban.org. Tuy nhiên, bạn không nhất thiết dùng tiền để mua những cái này, mặc dù bây giờ giá của nó cũng rẻ rồi chỉ 10$/năm , nhưng đối vơi học sinh, sinh viên cũng khó đúng không? Bạn đăng kí tên miền miễn phí của plus.vn hoặc co.cc cũng chỉ tên miền cấp ba dạng tenban.plus.vn hoặc tenban.co.cc thật là xỉn đúng không! Vậy bạn có thể sử dụng được tên miền tenban.com hay tenban.net miễn phí không? Xin thưa là có đấy...

Bạn hãy vào trang này này

Vào link sau để bắt đầu đăng ký: http://www.FreePremiumDomain.com/

Và đăng kí theo các bươc như sau:

Step 1: Choose Your FREE Gift!

Có 3 lựa chọn:

1./ One Free Domain , 9 Referrals: nghĩa là bạn sẽ nhận đc 1 tên miền quốc tế , nếu bạn giới thiệu đc 9 người vào đăng ký

2./Two Free Domains,16 Referrals: nghĩa là bạn sẽ nhận đc 2 tên miền quốc tế , nếu bạn giới thiệu đc 16 người vào đăng ký

3./Two Free Domains,16 Referrals: nghĩa là bạn sẽ nhận đc 2 tên miền quốc tế , nếu bạn giới thiệu đc 16 người vào đăng ký

Vào đó các bạn làm như sau :

Step 2: Registration

Email Address: ………………….

Password: ……………………..

Đánh dấu chọn I agree to the Terms of Service

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

NGuồn:traimientay.com

Đọc tiếp

TIN ÁP THẤP NHIỆT ĐỚI GẦN BỜ, Hồi 19 giờ ngày 04/11/2010

Hồi 19 giờ ngày 04/11, vị trí tâm áp thấp nhiệt đới ở vào khoảng 12,2 đến 13,2 độ Vĩ Bắc; 110,1 đến 111,1 độ Kinh Đông, cách bờ biển Bình Định – Khánh Hòa khoảng 130km về phía Đông. Sức gió mạnh nhất ở vùng gần tâm áp thấp nhiệt đới mạnh cấp 6, cấp 7 (tức là từ 39 đến 61 km một giờ), giật cấp 8, cấp 9.

Dự báo trong 24 giờ tới, áp thấp nhiệt đới hầu như ít dịch chuyển hoặc di chuyển chậm theo hướng giữa Tây và Tây Tây Bắc, mỗi giờ đi được khoảng 5km. Đến 19 giờ ngày 05/11, vị trí tâm áp thấp nhiệt đới ở vào khoảng 12,5 đến 13,5 độ Vĩ Bắc; 109,5 đến 110,5 độ Kinh Đông, trên vùng biển các tỉnh Bình Định – Khánh Hòa. Sức gió mạnh nhất vùng gần tâm áp thấp nhiệt đới mạnh cấp 6 (tức là từ 39 đến 49 km một giờ), giật cấp 7, cấp 8. Do ảnh hưởng của hoàn lưu áp thấp nhiệt đới kết hợp với đới gió đông bắc mạnh và nhiễu động trong đới gió đông trên cao, khu vực Bắc và giữa Biển Đông (bao gồm cả vùng biển quần đảo Hoàng Sa), vùng biển ngoài khơi các tỉnh từ Quảng Trị đến Khánh Hòa có gió mạnh cấp 7, có lúc cấp 8, giật cấp 9 – 10 và có mưa dông mạnh. Biển động rất mạnh. Trong cơn dông cần đề phòng có lốc xoáy và gió giật mạnh. Ở các tỉnh từ Thừa Thiên Huế đến Khánh Hòa có mưa vừa, mưa to đến rất to, Tây Nguyên có mưa, mưa vừa, có nơi mưa to và dông. Bản tin tiếp theo được phát vào lúc 23h30 ngày 04/11 Tin phát lúc: 21h30

Chùm ảnh đường đi và vị trí cơn bão

Đọc tiếp

Các Văn bản chương trình MTQG Nông thôn mới

1. 491/QĐ-TTg 16/04/2009 Bộ tiêu chí quốc gia về nông thôn mới 2. 54/2009/TT-BNNPTNT 21/8/2009 Hướng dẫn thực hiện Bộ tiêu chí quốc gia về nông thôn mới 3. 07/2010/TT-BNNPTNT 08/02/2010 Hướng dẫn quy hoạch nông nghiệp cấp xã theo Bộ tiêu chí quốc gia về nông thôn mới 4. 193/QĐ-TTg 02/02/2010 Phê duyệt Chương trình rà soát quy hoạch nông thôn mới 5. 21/2009/TT-BXD 30/6/2009 Quy định việc lập, thẩm định, phê duyệt và quản lý quy hoạch xây dựng nông thôn 6. 174/2009/TT-BTC 08/9/2009 Hướng dẫn cơ chế huy động và quản lý các nguồn vốn tại 11 xã thực hiện đề án " Chương trình xây dựng thí điển mô hình nông thôn mới thời ký công nghiệp hóa, hiện đại hóa" 7. 6867/BKH-KTNN 08/9/2009 Hướng dẫn cơ chế đặc thù quản lý đầu tư và xây dựng tại các xã thí điểm xây dựng mô hình nông thôn mới 8. 800/QĐ-TTg 04/6/2010 Phê duyệt Chương trình mục tiêu Quốc gia về xây dựng nông thôn mới giai đoạn 2010-2020 9. 72/2010/TT-BTC 11/5/2010 Hướng dẫn cơ chế đặc thù về quản lý dự án đầu tư tại 11 xã thực hiện Đề án "Chương trình xây dựng thí điểm mô hình nông thôn mới thời kỳ công nghiệp hoá, hiện đại hoá" 10. 221/TB-VPCP 20/8/2010 Thông báo ý kiến kết luận của Thủ tướng Nguyễn Tấn Dũng tại Hội nghị trực tuyến triển khai Chương trình MTQG xây dựng nông thôn mới giai đoạn 2010-2020 11. 1738/QĐ-TTg 20/9/2010 Thành lập thường trực Ban chỉ đạo Trung ương Chương trình Mục tiêu quốc gia xây dựng nông thôn mới giai đoạn 2010-2020 12. 435/KH-BCĐXDNTM 20/9/2010 Kế hoạch triển khai Chương trình Mục tiêu quốc gia xây dựng nông thôn mới giai đoạn 2010-2020 13. 436/KH-BCĐXDNTM 20/9/2010 Kế hoạch công tác của Ban chỉ đạo Trung ương năm 2010 và 2011 14. 437/QĐ-BCĐXDNTM 20/9/2010 Quyết định về việc ban hành quy chế hoạt động của Ban chỉ đạo Trung ương Chương trình mục tiêu quốc gia xây dựng nông thôn mới giai đoạn 2010-2020 15. 2501/QĐ-BNN-TCCB 17/9/2010 Thành lập Văn phòng điều phối Chương trình mục tiêu Quốc gia xây dựng nông thôn mới giai đoạn 2010-2020

Đọc tiếp