Quoc Binh 86: Blogger

Marquee làm di chuyển nội dung văn bản ...

<div class="separator" style="clear: both; text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59DG6C1C5eC_T87lyXcXD4wlBEmRd0zojqMkGZS1MT2Fb4D64lRTra_9YhdTjBi7MnPmaHNN_oEyu2VW8uLfrC_Irs2ji5KqficrDydc1z-va2xaAkC6maAUhNb8G3jb_9ejJLSUx1JIn/s1600/Blogger-Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59DG6C1C5eC_T87lyXcXD4wlBEmRd0zojqMkGZS1MT2Fb4D64lRTra_9YhdTjBi7MnPmaHNN_oEyu2VW8uLfrC_Irs2ji5KqficrDydc1z-va2xaAkC6maAUhNb8G3jb_9ejJLSUx1JIn/s320/Blogger-Logo.jpg" width="320" /></a></span></span></div>
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">Để giúp blog hay web sống động hơn mình sưu tầm thêm ít về chuyển động nội dung bằng cặp thẻ html Marquee. Marquee là một mã HTML để làm cho một đối tượng có thể chuyển động. Lệnh Marquee được thực hiện bằng cách sử dụng thẻ <marquee> {đối tượng}<marquee>.<br />
<b>Một số các thuộc tính thường dùng của lệnh marquee:</b></span></span></div>
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">Align: Sắp xếp canh chỉnh lề so với văn bản khác trong trang. Các giá trị của nó là Left, Right, Top, Middle, Bottom. <br />
HSpace, VSpace: Khoảng cách ngang và dọc so với đoạn văn bản khác trong trang. Dùng khi sử dụng thuộc tính ALIGN. <br />
- BGCOLOR="color" → tạo màu nền cho vùng hiện thị lệnh marquee (có thể dùng hình nền...).<br />
- DIRECTION="left/right/up/down" → chọn hình thức chạy nội dung ( trái, phải, lên, xuống...)<br />
- BEHAVIOR="scroll/slide/alternate" → thiết lập kiểu chạy chữ .<br />
    Scroll → di chuyển tuần tự, cuộn không ngừng.<br />
    Slide → di chuyển 1 thời gian, sau đó dừng lại.<br />
    Alternate → đổi hướng di chuyển khi chạm biên.<br />
- TITLE="message" → Một đọan tin nhắn nhỏ được hiển thị khi người dùng rê chuột vào.<br />
- SCROLLMOUNT="number" → điều chỉnh tốc độ chạy<br />
- SCROLLDELAY="number" → chỉnh khoảng thời gian chờ sau mỗi lần cuộn. Số càng lớn, tốc độ càng chậm (tính bằng giây)<br />
- LOOP="number|-1|infinite" → Chỉ định số lần lặp lại của dòng Marquee. Theo mặc định là lặp vô tận, giá trị là Infinite hay -1 <br />
- WIDTH="number" → chỉnh độ rộng của vùng chạy chữ. Có thể dùng đơn vị pixel (px) hoặc phần trăm (%).<br />
- ScrollAmount: Chỉ định số Pixel giữa mỗi lần trợc. Số càng lớn thì cuộn càng nhanh và càng không nhuyễn.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"></span></span></div>
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">Ví dụ đoạn code khi đưa chuột vào thì dừng chạy , đưa chuột ra thì chạy tiếp:</span></span></div>
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b> </b></span></span></div>
<form name="MyTextBoxForm">
<input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all" /><textarea cols="86" name="MyTextBox" rows="6" style="background: #eee; border: 1px #A0C4EA dashed; color: #464646;" wrap="off"><marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" bgcolor="silver" scrollamount=3><br />
Chữ chạy di chuột vào thì dừng , di ra thì chạy tiếp<br />
</marquee>

Marquee làm di chuyển nội dung văn bản ...

Để giúp blog hay web sống động hơn mình sưu tầm thêm ít về chuyển động nội dung bằng cặp thẻ html Marquee. Marquee là một mã HTML để làm ...

Slider Recent Post Cho blogspot

<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59DG6C1C5eC_T87lyXcXD4wlBEmRd0zojqMkGZS1MT2Fb4D64lRTra_9YhdTjBi7MnPmaHNN_oEyu2VW8uLfrC_Irs2ji5KqficrDydc1z-va2xaAkC6maAUhNb8G3jb_9ejJLSUx1JIn/s1600/Blogger-Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59DG6C1C5eC_T87lyXcXD4wlBEmRd0zojqMkGZS1MT2Fb4D64lRTra_9YhdTjBi7MnPmaHNN_oEyu2VW8uLfrC_Irs2ji5KqficrDydc1z-va2xaAkC6maAUhNb8G3jb_9ejJLSUx1JIn/s320/Blogger-Logo.jpg" width="320" /></a></span></span></div>
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">Các bạn có thể tạo một widget <b>Recent Post</b> như blog mình đang dùng nhưng có một code để tạo <b>Recent Post </b>thành một slider đẹp mắt hơn nay mình xin chia sẻ đoạn code đó.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">Cách làm chỉ cần vào <b>bố cục </b>sau đó click vào <b>Thêm tiện ích </b>nơi mà muốn hiển thị slider Recent Post, chọn tiện ích HTML/Javascript và dán đoạn code dưới đây vào và lưu lại xem thành quả.</span></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><br /></span></span>
<br />
<form name="MyTextBoxForm">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all" /><br /></span></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><textarea cols="86" name="MyTextBox" rows="6" style="background: #eee; border: 1px #A0C4EA dashed; color: #464646;" wrap="off"><style>
/* CSS Responsive Slider Recent Post */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald',Solaimanlipi,Kalpurush;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald',Solaimanlipi,Kalpurush;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#2DBE71;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald',Solaimanlipi,Kalpurush;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:#2DBE71;padding:3px 6px;font-family:'Oswald',Solaimanlipi,Kalpurush;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style><br />
<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/slider.js' type='text/javascript'></script><br />
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://fashionfuture2030.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script><br />
<b:if cond='data:blog.url == data:blog.homepageUrl'><br />
<div id="featuredpost">
</div>
</b:if>

Chỉ cần thay http://fashionfuture2030.blogspot.com/ thành URL Blog của bạn là xong

Slider Recent Post Cho blogspot

Các bạn có thể tạo một widget Recent Post như blog mình đang dùng nhưng có một code để tạo Recent Post thành một slider đẹp mắt hơn nay ...

Code tạo widget Recent Post cho blogspot

<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Blogspot chỉ có một số widget cơ bản mà mỗi blogger đều muốn blog của mình nhìn đẹp vì vậy để tạo widget Recent Posts cho blogspot thì cách làm như sau:</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">đầu tiên cần đăng nhập vào blog của bạn sau đó vào <b>Bố cục </b> chọn vị chí muốn đặt widget <b>Recent Post</b> chọn thêm tiện ích <b>HTML/Javascript</b> sau đó paste đoạn code sau vào.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">ở đây mình sưu tầm được 2 mẫu </span><b style="font-family: Arial, Helvetica, sans-serif;">Recent Post</b><span style="font-family: Arial, Helvetica, sans-serif;"> các bạn tùy chọn mẫu mà mình thích.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Mẫu số 1:</span></div>
<form name="MyTextBoxForm">
<input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all" /><br />
<textarea cols="86" name="MyTextBox" rows="6" style="background: #eee; border: 1px #A0C4EA dashed; color: #464646;" wrap="off"><div id="hlrpsb">
<script style="text/javascript" src="http://4sharevn.googlecode.com/files/recent-posts-with-titles-only.js"></script><br />
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><br />
<script src="http://quocbinh86.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<style type=text/css>
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style><br />

Trong đoạn code trên chú ý thay:
- http://quocbinh86.blogspot.com bằng url blog của bạn
- thay số 10 bằng số bài viết mà bạn muốn hiển thị

Mẫu số 2:

Trong đoạn code trên chú ý thay:
- http://quocbinh86.blogspot.com bằng url blog của bạn
- thay số 5 bằng số bài viết mà bạn muốn hiển thị

Code tạo widget Recent Post cho blogspot

Blogspot chỉ có một số widget cơ bản mà mỗi blogger đều muốn blog của mình nhìn đẹp vì vậy để tạo widget Recent Posts cho blogspot thì cách...