Code chia sẻ bài viết và cách đặt ở từng vị trí

Như các bạn biết like,G++ rất có lợi cho việc tăng thứ hạng trang web/blog à làm cho nhiều người biết đến trang web/blog của mình nhanh hơn ! Hôm nay Viettin24h giới thiệu đến các bạn thủ thuật hay tạo hộp chia sẻ tích hợp : Like, G+, Twitter,printerest...ngoài ra mình tích hợp thêm post lên Linkhay.com(1 trong những trang khá nổi tiếng ở Việt Nam về chia sẻ link) .

Ảnh minh họa : 

Code của thủ thuật hay này : 

<div style='background:#fedda4;border:0px solid #ffffff; padding:0px 0px;margin:0px 0px 5px 0px;width:100%;float:left;height:20px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:22px;'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='' name='zm_share' title='Chia sẻ lên Zing Me' type='button'>Chia sẻ</a>
<a href='http://linkhay.com/submit' target='_blank' title='Hot!'><img alt='Hot!' height='20' src='http://linkhay.com/templates/images/guide/button4.jpg' width='52'/></a>
<a href='http://sig.vn/bk/submit.php?url={postrow.U_MINI_POST}&amp;title={TOPIC_TITLE}' target='new' title='Add to Sig'>
<img alt='Add to Sig' border='0' height='20' src='http://i99.servimg.com/u/f99/11/79/54/63/bookma10.gif' width='20'/></a>
<script src='http://stc.ugc.zdn.vn/link/js/lwb.0.7.js' type='text/javascript'/>
<div style='float:right;padding-right:1px;'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_button_tweet'/>

<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=4rifin' type='text/javascript'/>
</div>
</div>

Cách đặt nó và các vị trí trên Blog/web của bạn

Đăng nhập Blogger-->Chọn mẫu--> Chỉnh sửa mẫu
1. Dưới tiêu đề bài viết các bạn đặt code trên dưới code sau 
                        

   <div class='post-header'>

hoặc        

<div class='post-header-line-1'/>

2. Dưới chân bài viết các bạn đặt dưới 1 trong những code sau :
                 

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>                        

<div class='post-footer-line post-footer-line-2'>            

<div class='post-footer-line post-footer-line-3'> 

Tùy thuộc vào ý bạn để đặt vị trí phù hợp

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

More about →

Khung chứa code cho bài viết

Bài này mình sẽ giới thiệu cho các bạn các mẫu pre code ( Khung chèn code ) đẹp cho blogspot.
Bài viết này sẽ hướng dẫn các bạn một cách khá đơn giản nhưng cũng rất chuyên nghiệp để đặt đoạn code mình cần trích dẫn vào bài đăng trên blog. Với cách làm này đoạn mã code chúng ta đặt vào bài viết sẽ gọn gàng,dễ nhìn và chuyên nghiệp hơn!
Đây là các mẫu khung code mà mình sưu tầm từ nhiều trang 

☼ Bây giờ ta bắt đầu thủ thuật :
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HMTL). Search 1 trong các đoạn code tương tự.

pre {....}
code {....}
pre, code {....}

Nếu có thì bạn thay toàn bộ code css đó  bằng các code sau. Nếu tìm không có thì bạn chèn thẳng 1 trong các mẫu sau vào trước thẻ đóng ]]></b:skin>. Chèn xong bạn Save lại.

Tiếp theo,muốn sử dụng thì trong bài post bạn làm như sau :

<pre> ....
Code của bạn
......</pre>

hoặc

<code> ......
Code của bạn
.....</code>

Nếu có thắc mắc bạn có thể để lại trong comment hoặc pm trực tiếp qua Yahoo: jemy_viet@yahoo.com

Mẫu 1 : 

Code :

pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMUDH1AKFfjqiNWzEH2GKJ0G7iDwRyvoZvLlo8dNEj9MzodL1dlgoBkw4RnL_Vqn84QTthbO25lYzSnQ-AtzgZ1adbj4NLjRG_ncRoIRttrvR0Pzd40y5HVIDMhQtrH-YwThgpGBGlV8/s1600/prepb3-khung-chua-code-namkna-blogspot-com.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}

Mẫu 2 : (Mẫu này giới hạn 100 dòng thôi nhé )

Code : 

.pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe5nfPrqR6rZ7w8xnsukaQKwyWzc3UDJKEiISDHhdRD9C_fuLyxxTAPKoi5dB5VHGD1t5xshzdMsqRAuNnPQRZqhyBBrWC0pHHxkXMfibbC98CRMz7hx6hv8sgA4mW5a2Ox1KoyC6uNAo/s1600/prepb3-namkna-blogspot-com-1.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}

Mẫu 3 :

Code :

.pre, code {
display:block;
margin:10px 0;
border:1px solid #E6DB55;
background:#FFFBCC url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mnthHWkGnboaW8htfm_ZIBVZDxwGYohjaRII4xzAIPXWIhVCZBwUfDgBhyphenhyphenzRWzKaF8wARogbGfwx0UXQW09icELyC1J3hIS5uctskq0DRB6HUG07J4NPOQcjSLNaWDzVKNq6PIjzCyY/s1600/pen-namkna-blogspot-com-1.png) top left no-repeat;
padding:10px 10px 10px 40px;}

Mẫu 4 :

Code :

pre, code {
overflow:auto;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhvUz_dlQRnkYqH5t5ZYNREFfbPfYAsReNOt5pLLF4ykdQgtbWOWK1XfkzgAiGu8EkeBaYjdvjJSuCS66nM2DqUxDh_IQDUcGE0u8Q8ry_VzSgQrZSt_xK_6hyPAzm5_TORek7zYGw4A/s1600/Note-namkna-blogspot-com.png);
background-color:#FFF77A;
background-repeat:no-repeat;
padding-top:50px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
border:#FF9900 thin dashed;
color:#000;}

Mẫu 5 :

Code :

pre, code {
color:#281800;
font-family:Courier New;
font-size:13px;
line-height:17px;
background-image:URL(https://lh4.googleusercontent.com/_kck7-TEWM-M/TWtvurFWTlI/AAAAAAAAAlM/qNLb07OebIw/code_tag_bg.jpg);
display: block;
padding-left: 4px;
padding-right: 4px;
border: 1px #FC0 dashed;
overflow:auto;
word-wrap:break-word;}

Mẫu 6 :

Code :

pre, code {
background-image: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-sGgj4PYYDriI4Ns9nx4ki94ekW_BjG75FJ4MsJolsvTNFsMb-dEOtoni8QlKCoNnUA1pAgfy4GOW9mS3mzM9AqpW2Oy7SN_bfb2-HVjIFCoflFPgh3UHKKhgw08qJ5EQDy3djMU7x4/s1600/code-2-namkna-blogspot-com.png);
background-position: 15px 15px;
background-repeat: no-repeat;
background-color: #FDD;
width: 118%;
border: #C72B2C dashed thin;
padding: 15px;
padding-left: 70px;
color: #D24E50;}

Mẫu 7 :

Code :

pre, code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEDBhvHR1uWhziLPwpZE5-2bILqwPtIk3kt0IgdTD2PbU8HRYB3vOp0NtZy5iA8JR_C2xFQuspdeJ-QiZl9nW962UrYNg8zTC4j4vyEJIrWR1dsXLWKogIND61pNR6shc5nwmjgiTsl0/s1600/Svip4u-namkna-blogspot-com.png) repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;}

Mẫu 8 :

Code :

pre, code {
background:#eee;border:1px solid #ddd;clear:both;
font-family:Consolas,Monaco,"Courier New",Courier,monospace;
overflow-x:auto;
padding:10px;
white-space:pre-wrap;
word-wrap:break-word;}

Mẫu 9 :

Code :

pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYDCmdEWhwvnTdDhQxZi2UJnhR3Haufa9xTJgojwLArO43BbCxb3htZG1aNcP4EH_oz94t5BGe_D59HNcg1nED0Pq7QgHIvnAmyH8mX_gjlKutSpLDU4oLGTQ3_ZZebleCbnLDgia_Ecc/s1600/imgbg-namkna-blogspot-com-hot.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}

Mẫu 10 :

Code :

pre, code {font-family:"Courier New",monospace;
font-size:16px;
display:block;
margin:10px 0 15px;
border:4px dotted #C9C9C9;
background:#E9E9E9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-bkEfX4D64kErDabcVdTXPV6fPD4czBKeDfG_qDDB-5UMxd4fywWZp7eNr2C6384422ceWH5_HE0r6NPry8ACDaUCdeBYtOx7bI6he7XimNyzTQBBZAlNiYGjL2XnEvwcu-DhBDXMiWY/s1600/code-namkna-blogspot-com.png) top right no-repeat;padding:10px;overflow:auto;
}

Đây là các mẫu code mình thu thập được từ các blog,forum khác nhau. Do sử dụng công cụ Viewsource nên có thể đụng chạm với một số bạn.

 Chúc các bạn vui vẻ.

More about →

Tạo cảnh báo xác nhận thoát khỏi trang

Chúng ta vào bất kì một trang web/blog nào đó khi muốn thoát chỉ cần Click vào (X) trên trình duyệt web ! Thủ thuật này giúp trang web của các bạn thêm 1 bước xác nhận  thoát khỏi trang.

Ảnh minh họa :

Bắt đầu thủ thuật : 
1. Đăng nhập Blogger
2. Chọn mẫu ---> Chỉnh sửa HTML
3. Dán code bên dưới sau thẻ </head>

<script> var exittraffic_splashalertmessage = "Bạn đã xem hết trang Viettin24h chưa!"; </script>
<script type='text/javascript'>
//<![CDATA[
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
function DisableExitTraffic() {
PreventExitSplash = true;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function addClickEvent(a, i, func) {
if (typeof a[i].onclick != 'function') {
a[i].onclick = func;
}
}
theBody = document.body;
if (!theBody) {
theBody = document.getElementById("body");
if (!theBody) {
theBody = document.getElementsByTagName("body")[0];
}
}
var PreventExitSplash = false;
var LightwindowOpening = false;
function DisplayExitSplash() {

if (PreventExitSplash == false) {


window.scrollTo(0, 0);
if (is_firefox) {
//window.alert(exittraffic_splashalertmessage);
}
PreventExitSplash = true;
if (is_chrome||is_firefox) {
timeout_variable = setTimeout("exittraffic_change_url();", 1000);
} else {
document.location.href = exittraffic_RedirectUrl;
}

return exittraffic_splashalertmessage;
}
}
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
disablelinksfunc = function() {
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
}

addLoadEvent(disablelinksfunc);

disableformsfunc = function() {
// Makes that clicking on the links on the page will not cause this popup to appear
var f = document.getElementsByTagName('form');
for (var i = 0; i < f.length; i++) {
if (!f[i].onclick) {
f[i].onclick = function() {
if (LightwindowOpening == false) {
PreventExitSplash = true;
}
}
}
else if (!f[i].onsubmit) {
f[i].onsubmit = function() {
PreventExitSplash = true;
}
}
}
}

function exittraffic_change_url() {
disable_confirmation = false;
clearTimeout(timeout_variable); // just to make sure
document.location.href=exittraffic_RedirectUrl;
}

addLoadEvent(disableformsfunc);
window.onbeforeunload = DisplayExitSplash;
//]]>
</script>  

4. Lưu lại và xem kết quả

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

More about →

Tạo quảng cáo góc màn hình cho Blog/Website

Quảng cáo góc màn hình bên phải và trái cho Blog giúp khác truy cập nhìn thấy rất dễ dàng ! Viettin24h chia sẻ đến các bạn thêm 1 lựa chọn 

Ảnh minh họa:

Các bước thực hiện : 

1. Đăng nhập Blogger

2. Chọn bố cục 
3. Thêm tiện ích HTML / Javascript và dán code bên dưới vào :

<!-- Start quang cao Viettin24h.com-->

<script type="text/javascript">
function hide_float2() {
    var content = document.getElementById('float_content2');
    var hide = document.getElementById('hide_float2');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float2()">Tắt Quảng Cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float2()">Mở quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 2000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#hide_float2 { text-align:right;}
#hide_float2 a { background: #01AEF0; padding: 5px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0pt" >
    <div id="hide_float2">
<a href="javascript:hide_float2()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content2" style="border: 1px solid rgb(1, 174, 240);">
         <a href='http://www.viettin24h.com/'><img border='0' height='200' src='http://lh5.googleusercontent.com/-w_-nmCLIGFQ/AAAAAAAAAAI/AAAAAAAAAAA/yW8TJFAV4_I/s96-c/photo.jpg' width='200'/></a>
 </div>
</div>

<!-- End quang cao Viettin24h.com -->

Chỉnh sửa các đoạn có màu đỏ và xanh cho phù hợp
4 . Lưu lại và xem kết quả

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

More about →

Tạo hộp chia sẻ theo từng vị trí cho blog

Facebook, Twitter... là các trang mạng xã hội rất phổ biến và được nhiều người dùng hiện nay! Vì vậy việc tạo ra các nút Share là rất cần thiết cho một trang web! Thủ thuật tạo hộp chia sẻ Viettin24h.com hôm nay giới thiệu cho các bạn là một thủ thuật không mới nhưng mong rằng các bạn khi xem xong bài này thì sẽ dễ dàng hơn rất nhiều trong việc chọn vị trí đặt hộp chia sẻ.

Ảnh minh họa :

Bắt đầu thủ thuật : 

1. Đăng nhập Blogger
2. Chọn mẫu --> Chỉnh sửa HTML
3.Chèn code dưới vào vị trí theo ý muốn :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

.botpost{margin-left:-15px;width:615px;height:68px;border-top:1px solid #0443A1;border-bottom:1px solid #0443A1;background: #EDF7CD;padding-top:5px;margin-bottom:10px}

.nhan {float:left;width:160px;padding:0 10px 0 10px}

.sendmailp {float:left;width:130px}

.google {float:left;width:270px}
.wdt_button{float:left;margin:5px}
</style>
<div class='botpost'>
<div class='nhan'>
Đăng bởi <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author' target='_blank'><data:post.author/></a>
</div>
<div class='sendmailp'>
Hãy like nếu bài viết có ích &#8594;
</div>
<div class='google'>
<div class='wdt_button'><a class='addthis_button_facebook_like' fb:like:layout='box_count'/></div>
<div class='wdt_button'><a class='addthis_button_tweet' tw:count='vertical'/></div>
<div class='wdt_button'><a class='addthis_button_google_plusone' g:plusone:size='tall'/></div>
<div class='wdt_button'><a class='addthis_counter'/></div>
</div>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf' type='text/javascript'/>
<!-- AddThis Button END -->
</b:if>

Cụ thể từng vị trí như sau: 

3.1 : Đặt dưới tiêu đề bài viết:
Tìm đến code 

<div class='post-header'>

hoặc

<div class='post-header-line-1'/>

3.2 Đặt dưới cuối bài viết:
Tìm đến code 

<div class='post-footer-line post-footer-line-1'/>

hoặc

<div class='post-footer-line post-footer-line-2'/>

hoặc

<div class='post-footer-line post-footer-line-3'/>

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

More about →

Tạo hiệu ứng đẹp cho hình ảnh

Hôm nay Vietin24h.com sẽ giới thiệu đến các bạn code tạo hiệu ứng đẹp cho hình ảnh ! Ưu điểm của đoạn code này là chỉ dùng CSS3 va HTML nên không ảnh hưởng gì đến tốc độ của Website/blog của bạn 

Ảnh minh họa: 

Các bước thực hiện: 

1. Đăng nhập Blogger

2. Chọn mẫu--> Chỉnh sửa HTML

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

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; 
height: 434px; 
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){ 
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){ 
clip: rect(0,0,434px,0); 
opacity: 0;
}

4. Lưu lại

5. Thêm tiện ích HTML/ Javascript và chèn code bên dưới vào :

<a class="nowandthen" href="http://www.viettin24h.com/">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAw2gRnKk4wzyiE8Tl_iem7KMqi-gtW9nyzyMcG26MAEt1ZwHBYzmcsxOxyj8FR0wi7lxXwXqagitVn_sk7kPqay8zYdDqnDqvnUt4NhHibkInZCO1Vx7XwzbzrwSIPyECKdqXZYcGQI/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07fhcI06J9Lus6fHSRXyWE1t7cbo5GW4byYh1BUn8gk0w5-VS4G7XNNXiwXw3fDfYoS2tl1Js56vylzCM8gnn6h8kaBSn71ktjLeMUtJdjwUg_qI_N5pnHWJ06L4Zui5rHt9hrmV-B5g/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

Chúc các bạn vui ve

More about →

Cách tạo banner quảng cáo trượt dọc 2 bên cho blogspot

Các bạn đang sở hữu 1 Blog/Website với số lượng truy cập ổn định hoặc có dự định làm AM --> Đây là một hình thức quảng cáo đến khách hàng khá thuận tiện và nhanh chóng ! Đây không phải một thủ thuật mới lạ nhưng mình cũng giới thiệu lại cho các bạn!!!
Ảnh minh họa:

* Cách thực hiện:
1. Đăng nhập vào tài khoản Blogger
2. Chọn Bố cục 
3. Chọn tiện ích HTML/ Javascript và dán đoạn code bên dưới vào :

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="http://www.viettin24h.com/" target="_blank"><img src="LINK ẢNH BANNER 1" /></a>
 
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="http://www.viettin24h.com/" target="_blank"><img src="LINK ẢNH BANNER 2" /></a>
</div>
<script>
function FloatTopDiv()
{
startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
el.x = startRX;
el.y = startRY;
return el;
}
function m2(id)
{
var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
e2.x = startLX;
e2.y = startLY;
return e2;
}
window.stayTopLeft=function()
{
if (document.documentElement && document.documentElement.scrollTop)
var pY = document.documentElement.scrollTop;
else if (document.body)
var pY = document.body.scrollTop;
if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
ftlObj.y += (pY+startRY-ftlObj.y)/16;
ftlObj.sP(ftlObj.x, ftlObj.y);
ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
ftlObj2.sP(ftlObj2.x, ftlObj2.y);
setTimeout("stayTopLeft()", 1);
}
ftlObj = ml("divAdRight");
//stayTopLeft();
ftlObj2 = m2("divAdLeft");
stayTopLeft();
}
function ShowAdDiv()
{
var objAdDivRight = document.getElementById("divAdRight");
var objAdDivLeft = document.getElementById("divAdLeft");
if (document.body.clientWidth < 1000)
{
objAdDivRight.style.display = "none";
objAdDivLeft.style.display = "none";
}
else
{
objAdDivRight.style.display = "block";
objAdDivLeft.style.display = "block";
FloatTopDiv();
}
}
</script>
<script>
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>

 Thay http://www.viettin24h.com/ và link ảnh theo ý bạn

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

More about →

Code thống kê đẹp cho Blog

Việc thống kê cho blog khá quan trọng nhất là đối với những blog "khủng". Hãy tham khảo một tiện ích nhỏ mình đang sử dụng.
Demo:

Các bước thực hiện:
1. Đăng nhập Blogger
2. Chọn bố cục
3. Thêm widet HTML/Javascript và dán đoạn code bên dưới:

<script language='javascript' type='text/javascript'>
function snfbc(json){
document.write(parseInt(json.value.items[0].feed.entry.circulation));
}
function xfeedburner(uri){
if(uri){
document.write('<sc'+'ript src="http://pipes.yahoo.com/pipes/pipe.run?_id=e61a81bcdb1660ebf8bc1a7c130f1f7b&_render=json&uri='+uri+'&_callback=snfbc" type="text/javascript"></s'+'cript>');
} else{
return false;
}
}

function sntwitter(json){
document.write(parseInt(json.followers_count));
}
function xtwitter(user){
if(user){
document.write('<scr'+'ipt src="http://twitter.com/users/show/'+user+'.json?callback=sntwitter" type="text/javascript"></scr'+'ipt>');
} else{
return false;
}
}

</script>
<div style='float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zBHo0U4FDBiGBA2HvMYaP5mDG4yn_uzgLOQumRawQHhG0wn9iqBQFvlvT2dyx0mP7xSP1YCKAgcTiGFsCrMq_acUKLAto2K18HXERK0lxSWDRvnn0bjvdjVDd5dz0sp3AfJI5OtLkb89/s1600/Twitter+3-48.png" style="margin-right: 8px; float:left;" />
<a href="http://twitter.com/viettin24h target="_blank" ><span style="float: left; margin-top:2px;padding:0;font-size:18px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xtwitter("winnitg") </script> Người theo dõi</span>
<!--[if IE]>
<![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#000;font-family:Arial,Helvetica,sans-serif;">Theo dõi trên Twitter</span></a>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2iqQQ3JDHIv9deayOOARYQWzDz20o9bG6j8108Q9aXy11j1qdsjqDC3gITYaWJyi0EAKmOOnqNr7lYqsna5UlkPAdBSegeSj7pLb5tj4B5GOS_BVT4NFvqYEHFGeI_I5dHRbBAJ2HlAO/s1600/Rss-48.png" style="margin-right:8px;float:left;" />
<a href="http://feeds.feedburner.com/blogspot/quangvietmkt" target="_blank" ><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xfeedburner("sinhvienthuysan") </script> Người đăng ký</span>
<!--[if IE]>
<![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size:12px; color:#000;font-family:Arial,Helvetica,sans-serif;">Đăng ký!</span></a>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUk-gdjBqg7cnffAwRi06bRs6hTILBIZryL3gOwE2oxUKA30zy0cZwb7lB2qzvEVbDS6H7YXfSUa9X0BQaHU_L3ak_pvlGwJRedMXPOJ2paugNEgip7VemmYKETqisWghhrT4i7nG2GmaI/s1600/comments-48.png" style="margin-right:8px;float:left;" />
<span style="float:left;margin-top:2px;padding:0;font-size:18px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://viettin24h.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Nhận xét</span>
<!--[if IE]>
<![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#000;font-family:Arial, Helvetica, sans-serif;"></span>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaeAqbRwhOCMP4t1xame1_mPwkIXdoIqq8xQerg5JpRDfdgXvv4U5_n1Q_tZ5iEpSDRLZDdXXjlLEHS2Qu6Z5JlWgh31Qmrl24UxeS7BiqRl09OaV321f7tqVo27524eyEOsCB8MKnuaZ/s1600/blogger_48.png" style="margin-right:8px;float:left;" />
<a href="http://viettin24h.com/search/label/?max-results=999" target="_blank"><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script src="http://viettin24h.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Bài viết</span>
<!--[if IE]>
<![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size:12px; color:#000;font-family:Arial,Helvetica,sans-serif;">Xem tất cả!</span></a>
</div><div style='clear:both;'/></div></div></div></div

Bạn thay:

http://twitter.com/quangvietmkt bằng địa chỉ twitter của bạn

Bạn thay:
Code: http://feeds.feedburner.com/blogspot/viettin24h  bằng địa chỉ Feedburner của bạn, bạn có thể đăng kí tại: 

Code: http://feedburner.google.com
Thay tiếp:http://viettin24h.com/bằng địa chỉ blog của bạn.

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

More about →

Tạo Slideshow ảnh đẹp cho Blogspot

Với các bài viết trước mình cũng có chia sẻ với các bạn cách tạo Slideshow cho hình ảnh. tuy nhiên slide mỗi bài mỗi kiểu trình diễn. Nhằm thêm đa dạng kiểu trình diễn ảnh thì hôm nay mình chia sẻ cho các bạn một thủ thuật nữa để tạo slideshow cho hình ảnh của bạn. Với thủ thuật này thì hình ảnh của bạn sẽ tự động trình diễn với 1 khoảng thời gian định trước cùng với nội dung mô tả cho hình ảnh tương ứng. Với 2 nút điều khiển tới lùi thì bạn có thể lần lượt xem tất cả hình ảnh trong slide đó và phần mô tả sẽ trượt lần lượt theo hình ảnh tương ứng trông đẹp mắt.

» Bắt đầu thủ thuật

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

2. Vào phần Mẫu (Template)

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

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

#slider{ width:660px;height:275px;position:relative;overflow:hidden;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;box-shadow:0 0 6px #000}
#mask-gallery{overflow:hidden}
#gallery{list-style:none;margin:0;padding:0;z-index:0;width:900px;overflow:hidden}
#gallery li{float:left}
#mask-excerpt{position:absolute;top:0;left:0;z-index:500;width:100px;overflow:hidden}
#excerpt{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;list-style:none;margin:0;padding:0;z-index:10;position:absolute;top:0;left:0;width:100px;background-color:#000;overflow:hidden;font-family:arial;font-size:14px;color:#fff}
#excerpt li{padding:5px}
.clear{clear:both}
#btn-prev{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-prev:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-prev:active{border-top-color:#238acf;background:#238acf}
#btn-next{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-next:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-next:active{border-top-color:#238acf;background:#238acf}

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://vncongnghe.googlecode.com/files/jquery.scrollTo.js"></script>
<script>/* <![CDATA[ */ 
$(document).ready(function() {
var speed = 5000; // Tốc độ trình diễn
$('#mask-gallery, #gallery li').width($('#slider').width()); 
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
var run = setInterval('newsscoller(0)', speed); 

$('#gallery li:first, #excerpt li:first').addClass('selected');
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed); 
return false;
});
$('#btn-next').click(function () {
newsscoller(0); 
return false;
}); 
$('#btn-prev').click(function () {
newsscoller(1); 
return false;
}); 
$('#slider').hover(

function() {
clearInterval(run);
}, 
function() {
run = setInterval('newsscoller(0)', speed); });});

function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');
$('#mask-gallery').scrollTo(next_image, 800); 
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
/* ]]> */</script>

6. Save template lại và vào Bố cục (Layout)

7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiapxGQ_BapvjsXdecLMym53a91g1AsLgfN3YUjfrzF4l3z0GrnnVcIRCM0w3wCKfQZ7zYbEkKy8I5es4L9yvPvqnkYm2N0g_ymng7oJ0jOFsl-UtiB8mxW3xq6dbC4RP3lyQmKAZHrK8Y/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiizMCT4JDdo2_2IJ043by8ZArvS0fnxkyNudSvBmfHXzEfAUebMkJXr5jSJR1gIGA08QYP8KxqFptRftysXh6fXDwlJ9ZjzHohdBrwAqsjfSAsS-taQnb6s5u4cajTZisQ7i5xLoKIa8T/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkI2geR4xYykBkPhAv1VFqcQKekbOhE89ABbEo2sTYOoxZokQZNYyn7mDpLcMKtA-Ay_fQQjdI0tcw-hXkM4Q4M5PyZnfm_F7TxByuMFoVoY8LWsIfex-KagFGrxafo4KnZedBNlPOCnhp/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbXkmx1bZ5d5OL0AxCRIaNbkXSseUPvhUf1n-TF6XTGQPCiAjxnL96baL3xc1FSFZpbjqchFckIXYC3JuVTjuQf-vr6u_y0vNRKXZE-TmNLE1s5uKm_cMLlJrjlCIiv5I88VrWZVk5jAa8/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMwTATwggl06KUUtjR7OI41fz2tOYNeHEHMqZCc9XkrbWunY50Lg-IvQQ2RVYVYoCApEj2F6iMZyZKnU0-SD2Hr2aik44Arlv6ANtVi6YHagGBGXbphYd4DnI3Nemii9iZFexZiK-xqPV3/s515/2.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li>Nội dung thông tin mô tả cho hình ảnh 1. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 2. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 3. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 4. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 5. </li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a></div>

Bạn hãy thay link ảnh (Link màu đỏ) thành link hình ảnh của bạn và nội dung mô tả tương ứng cho hình ảnh của bạn.

8. Cuối cùng save tiện ích lại

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

More about →