Viet Nam Báo: CSS HTML

Showing posts with label CSS HTML. Show all posts

Saturday, August 17, 2013

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 :
Đọc thêm »

Monday, August 12, 2013

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

Đọc thêm »

Saturday, August 10, 2013

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>

Đọc thêm »

Sunday, July 28, 2013

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 :

Đọc thêm »

Sunday, July 14, 2013

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 :
Đọc thêm »

Saturday, June 8, 2013

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:

Đọc thêm »

Tuesday, May 28, 2013

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 thêm »

Monday, May 27, 2013

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/AVvXsEizupkSiFJKdS9CHPwrgfyKj-GF_AeWcsW8JvgQltGuVtyX7HkgLNdZl0AcuVzndN95XNnfxGdxnoPyTNbhrMageD6w8Xo5K86iYkYFJVfy38LcoYD4FzAX2VGrP12HmrVlT_bMnl-cizwg/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/AVvXsEizdByxrMffry9_sj_AFbr-I4JJMiHe6RzVLItoW26b8QCnJ2gdJfPO2XhJ6VrVleVHXIV5jibXYrNaUthtgEfrtxAHPFSXjE7bTNgsgE6UhuS8Jy0-ayGxAn5v9i7uTkn1_lr4dmBionNC/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/AVvXsEh-CkwoRFXT1hBnrNsFGOBa2zKjrIOqpXHvVVsecaCJl267GgCbdYyznuEUMx730FpmA3ciY52rFBdBmEY21AllyR2Dva8cL2LxICd0BufY8LdAnUc_IrJRr4-YPKfICODUFYKv9oQ3de7Q/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/AVvXsEigFhJIEGIXRBCOQ0labKb7ezDZMqxkf3EeD7rfC_dHca0PV0HTMFleOl6rCuZKlWFDRhU0GtApnAp3SY1RXd7tf8-7baetZ-oZCxXh9XKx7kQCquNgv6VgRmwOhe4OQvl5pNwDmpCsIwxe/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 !!!!!

Sunday, April 14, 2013

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/AVvXsEjOsyJid7OCkBmvv4dG3HAaiQW0hXKZMsq1UvE3YUH0vgjkwWe7PTeqln642Ik07_giGgaOMgw_9WzVUiP5U5BefJhS0H290ouHMh2rmvW2LGEW4Biys2zWJEePWpCSW0LlBZ0OI2RCTRdh/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHBKJwddrULx-OU63hdwns7UOHqiWxwPSCP948MnSA4GNPGiSaOtsGHZP9MQP_5R-QRQrfaTuQI9cA3V0Gh26pwFQn_wsG3iHzVs7YE2tU1e4kgNPYUt94kVaVAkrYcnCeoCYdc4IVEC9C/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbk8K2nZ-RkTVldGnVmZhilf7TmXzTSF-CgnPf29rfxVr78P4pEmJnhJr2-5r2L4UmU84mSeVKjbfb0bm4c5RM4P2Jj_UlNyD5MrQTc42S65IS09KHpYV2XD8eSP7n3XMEt8S2avXb8ov/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmya6g-dNRfWkwEej4NV0Rfm6I0_M3UczrqRFVRH69zzyUk_JNOvUBKTGub-n-QfGZwiBfp530zxDNE7KJXxpBV8jQCYSqwEXTOwTIxoBbbfQcb9iUqvpTYxrRySnmnU1btq1q2gP2CkW/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgse-op2yhIbLXtK-afvXan9AC22lARbvyWxKV6yL8W4LxwzERpruKT-KPv0Ubb9YiPqBCElvFGo2HmXyPjEtRuepqsIZG-tyx-ra6yGur_XHMl3cRVVasUdNkbUTzSLPwlGC3JDXL8exvB/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!

Saturday, April 13, 2013

Tạo nút button menu bên phải blogspot

Hôm nay mình giới thiệu các bạn một tiên ích khá đẹp mắt cho Blogspot! Tiện ích giúp người đọc dễ dàng di chuyển đến các mục mà không cần phải sử dụng quá nhiều thao tác

Chọn Mở Rộng Tiệng ích trong Blogspot

Tìm : ]]></b:skin>

Thêm Bên Trên nó đoạn code css sau:

#float-menu{position:fixed;bottom:20%;right:0;border-top:1px solid #CCC;border-left:1px solid #CCC;border-bottom:1px solid #CCC;background:#EEE}
#float-menu ul{padding:0}
#float-menu li{margin:5px;list-style-type:none}
#float-menu li,#float-menu li a{width:24px;height:24px}
#float-menu li a{float:left}
#float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ag3PgYjhr407efvJ4EMQ69InKe694C4FwVQr27NQIODczL6c0jRiLeXfGc6VugZmFR3sHOhIKXHh2FVQongOGIvJ6HR5Em03GuXzoApw_ADr_XBpn0-3qmTWvXQGwaTyOVW76AeGzQo/)}
#float-menu #menu-right a{background-position:0 -120px}
#float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px}
#float-menu #menu-left a{background-position:0 -24px}
#float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px}
#float-menu #menu-random a{background-position:0 -48px}
#float-menu #menu-random a:hover{background-position:-24px -48px}
#float-menu #menu-home a{background-position:0 -72px}
#float-menu #menu-home a:hover{background-position:-24px -72px}
#float-menu #menu-top a{background-position:0 -96px}
#float-menu #menu-top a:hover{background-position:-24px -96px}

Tìm <b:includable id='main' var='top'>

Thêm Vào Bên Dưới Đoạn Code sau đây

Đọc thêm »

Sunday, March 24, 2013

Code quảng cáo trượt cho Blog hay Website

Banner float trên sidebar - Định dạng quảng cáo khá quen thuộc

Bạn là một admin của một trang web hay một blog nào đó, website của bạn đã đến một thứ hạng tốt và có danh tiếng, việc đặt quảng cáo sẽ giúp bạn giảm gánh nặng về hosting, domain và nhân sự...có rất nhiều lựa chọn quảng cáo cho bạn..Google Adsense, Bidvertiser, ..hay các công ty quảng cáo Việt Nam như Ad360 ,Vietad và Admicro......và cũng có thể sẽ có khách hàng liên hệ với bạn để đặt quảng cáo của họ trên website của bạn.

Tuy nhiên ở bài viết này Share99 sẽ không đề cập tới vấn đề này mà sẽ giới thiệu cho các bạn một cách đặt quảng cáo khá hiệu quả...Có rất nhiều cách đặt quảng cáo để thu hút người đọc, hình thức banner là hình thức khá phổ biến. Bạn có thể đặt ở header hay ở cuối bài đăng,chân trang , chạy dọc 2 bên trang web và bất cứ chỗ nào để mang lại hiệu quả nhất cho hoạt động quảng cáo..
Ở bài viết này, Viettin24h sẽ cung cấp cho các bạn một cách đặt banner quảng cáo khá hiệu quả,áp dụng đối với các mẫu 120x600 hoặc 160x600 chạy dọc sidebar. Banner sẽ đặt ở cuối cùng của sidebar, khi chưa kéo qua nó, nó sẽ được giữ cố định. Khi khách truy cập vào xem một bài viết tương đối dài, họ sẽ rê chuột qua cái Banner đó và Banner của chúng ta cũng tự động được kéo theo. Quảng cáo sẽ trôi theo chiều dọc sidebar xuống đến phần footer thì sẽ biến mất. Cách bố trí quảng cáo dạng trôi này cũng bù lấp khoảng trống làm cho site của chúng ta trở nên đẹp mắt và "pro" hơn ...........

Các bạn có thể áp dụng cho các widget bám theo sidebar cũng được. Kiểu float này giống kiểu trượt quảng cáo của Admicro mà các bạn có thể gặp ở các trang Vtc.vn, Kenh14.vn đang áp dụng kiểu quảng cáo dạng trượt này.

Hướng dẫn làm quảng cáo Float trên sidebar theo chiều xem trang của khách truy cập

1. Đăng nhập Blogger
2. Vào Mẫu, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>

<script src="http://bachkhoamedia.googlecode.com/files/jquery.min.js"type="text/javascript"></script>

Nếu bạn nào trong template đã có file jquery.min.js rồi thì bạn bỏ qua bước 3 này

4. Save template lại và mở tab Bố cục>Thêm tiện ích (Nơi bạn muốn chèn quảng cáo )
5. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó

Thêm vào đoạn code sau :

6.Lưu và xem kết quả

Chú ý một số thông số để tuỳ chỉnh :

+ top:30px : Khoảng cách của widget Ads với lề trên của trang web,thường đặt là 0.Nếu bạn nào có menu header cố định thì sẽ thay đổi cho widget dãn xuống phù hợp(bachkhoamedia là 30)

+ documentH>1000 : Thông số này có nghĩa là nếu bài viết của bạn dài quá 1000px thì widget sẽ float, còn nếu bài viết có height nhỏ hơn 1000px thì widget sẽ không float

+bottomHeight=1400 : Thông số này quy định chiều cao tối thiểu mà widget có thể xuống được.Khi cách lè dưới 1400px thì widget sẽ tự động trượt lên trên. Các bạn chỉnh sử thông số này sao cho phù hợp nhất với footer của các bạn.

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

Tuesday, March 5, 2013

Tạo banner quảng cáo ở góc màn hình

Các bạn đang sở hữu 1 Blog 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!!!

Demo

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 :

<style type="text/css"> 
* html div#fl813691 {position: absolute; overflow:hidden; 
top:expression(eval(document.compatMode && 
document.compatMode=='CSS1Compat') ? 
documentElement.scrollTop 
+(documentElement.clientHeight-this.clientHeight) 
: document.body.scrollTop 
+(document.body.clientHeight-this.clientHeight));} 
#fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:150px; } 
#eb951855{ width:279px; padding-right:7px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5sHCUWt7d5_kQSdrVkG24cAHbCMB_Ax50xtZTb49W6B48-gC0uEBNBBDoAyxEwUWXjbKnyWtty3D3hkOLuubkZ3hIxdow84EPI5L3iz92s8WAH2Sih8u4aWdBRRLFOSZInHb7Hwj-nR7u/s150/rightp-itviet360.gif) no-repeat right top;} 
#cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7cb4nTIo4E_5zAQwPIu-0YVg9JRZX4e8pDtQB-tl9cF0hHYeime7UMUOtQ6VyTv_GqlmGIQmxule4jC2CFZkgIHCvuR-hdTsQs9AS0hN4CqJ2N1Dk6PNzSp0OsnWNsLamEWTsjYQRvNoy/s501/fulld.gif) no-repeat left top; height:150px; padding-left:7px;} 
#coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;} 
#coh963846 a{color:#690;text-decoration:none;} 
#coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;} 
#coc67178 li{display:inline;} 
#coc67178 li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGw-Vewu2AIDabAMajjllz1Taf2NS2Cv8xAGR6Us8BAZEfu-wsYVmMVIRZOTt-Bbfs7g3m2CEn0zF2sasgwo6vyp48JVfoPn5U8UdKu75LTNqncgCz1cH3Rsr9jRNCIorM2EkpYqHc8yzf/s90/closebutton-itviet360.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;} 
#coc67178 li a.close{background-position: 0 0;} 
#coc67178 li a.close:hover{background-position: 0 -15px;} 
#coc67178 li a.min{background-position: -30px 0;} 
#coc67178 li a.min:hover{background-position: -30px -15px;} 
#coc67178 li a.max{background-position: -60px 0;} 
#coc67178 li a.max:hover{background-position: -60px -15px;} 
#co453569{display:block; margin:0; padding:0; height:123px; border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;} 
</style> 
<div id="fl813691" style="height: 152px;"> 
<div id="eb951855"> 
<div id="cob263512"> 
<div id="coh963846"> 
<ul id="coc67178"> 
<li id="pf204652hide"><a class="min" href="javascript:pf204652clickhide();" title="Ẩn đi">Ẩn</a></li> 
<li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hiện lại">Xem </a></li> 
</ul> 
Tin tức- Giải trí - Thủ thuật
</div> 
<div id="co453569"> 
<!-- code ads --> 
<a target="_blank" href="http://quangvietmkt.blogspot.com" > <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="http://sphotos-d.ak.fbcdn.net/hphotos-ak-ash4/400810_114667438742021_278435790_n.jpg" height="115" title="Tin tức - Giải trí - Thủ thuật"/></a> 
<!-- code ads --> 

</div> 
</div></div></div> 
<script> 
pf204652bottomLayer = document.getElementById('fl813691'); 
var pf204652IntervalId = 0; 
var pf204652maxHeight = 150;//Chieu cao khung quang cao 
var pf204652minHeight = 20; 
var pf204652curHeight = 0; 
function pf204652show( ){ 
pf204652curHeight += 2; 
if (pf204652curHeight > pf204652maxHeight){ 
clearInterval ( pf204652IntervalId ); 
} 
pf204652bottomLayer.style.height = pf204652curHeight+'px'; 
} 
function pf204652hide( ){ 
pf204652curHeight -= 3; 
if (pf204652curHeight < pf204652minHeight){ 
clearInterval ( pf204652IntervalId ); 
} 
pf204652bottomLayer.style.height = pf204652curHeight+'px'; 
} 
pf204652IntervalId = setInterval ( 'pf204652show()', 5 ); 
function pf204652clickhide(){ 
document.getElementById('pf204652hide').style.display='none'; 
document.getElementById('pf204652show').style.display='inline'; 
pf204652IntervalId = setInterval ( 'pf204652hide()', 5 ); 
} 
function pf204652clickshow(){ 
document.getElementById('pf204652hide').style.display='inline'; 
document.getElementById('pf204652show').style.display='none'; 
pf204652IntervalId = setInterval ( 'pf204652show()', 5 ); 
} 
function pf204652clickclose(){ 
document.body.style.marginBottom = '0px'; 
pf204652bottomLayer.style.display = 'none'; 
} 
</script>

Các bạn tùy chỉnh: + Màu đỏ : góc phải hoặc góc trái

+ Màu xanh : thông tin về banner quảng cáo

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

Friday, February 8, 2013

Tùy biến header toàn tập cho Blog

Trong quá trình thiết kế web hay blog chắc hẳn không ít bạn từng nghĩ đến việc chia header ra làm 2 3 phần gì đó hay chèn flash chèn nhạc vvv... vào header. Trong bài viết này mình sẽ đề cập đến cách thức làm việc của header blogger như thế nào và tùy biến header ra sao. Hy vọng sẽ giúp ích được cho các bạn

Những câu hỏi thường gặp với widget header.

1. Làm sao chia header ra làm 2 - 3 phần?
2. Làm sao chèn nhạc, flash vào header?
3. Làm sao gắng tiện ích khác (quảng cáo chẳng hạn) lên header?
4. Làm sao xóa header vì thấy nó thừa thải quá...

Giải đáp cho các câu hỏi đó của các bạn tại đây.

Phần 1: Nói về widget header của blogger.

Khi vào template của bạn , bạn sẽ thấy có 1 đoạn code tương tự như thế này.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Viettin24h-Tin tức,Giải trí,Thủ thuật tổng hợp (Tiêu đề)' type='Header'/>
</b:section>

Dòng chữ mình tô đỏ sẽ khác nhau tùy blog. Đoạn code trên là đoạn code của widget header. Bài viết này chúng ta sẽ làm việc với nó đây. Mình tạm gọi nó là đoạn code A nha.

Khuyến cáo các bạn nếu muốn tìm hiểu thì nên tạo 1 trang blog mới. Xóa toàn bộ template và chỉ để lại cấu trúc cơ bản và widget header để tiện tìm hiểu.

Nếu lười thì tạo blog mới rồi copy toàn bộ đoạn code bên dưới về paste vào template ngồi tìm hiểu.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[
#box{background:red; margin:0 auto; text-align:center; }
]]></b:skin>
</head>
<body>
<div id='box'>
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Viettin24h-Tin tức,Giải trí,Thủ thuật tổng hợp (Tiêu đề)' type='Header'/>
</b:section>
</div>
<b:section class='sbar1' id='sbar1' showaddelement='yes'/>
</body>
</html>

Cấu trúc bên trên sẽ rất đơn giản. Bây giờ bạn vào chỉnh sửa mẫu bạn sẽ thấy đoạn code A trên sẽ xuất hiện rất nhiều code nhỏ trong đó. Nó sẽ có dạng giống giống như sau:

<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Võ Quốc An Blog (Tiêu đề)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "BEHIND"'>
      
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "                        + "background-position: "                        + data:backgroundPositionStyleStr + "; "                        + data:widthStyleStr                        + "min-height: " + data:height                        + "_height: " + data:height                        + "background-repeat: no-repeat; "' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
<b:else/>
    
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
<b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>

Trong đoạn code trên mình đã đánh dấu 1 số code màu đỏ. Nhìn đoạn code trên thì khá lằng nhằng cũng không cần hiểu nhiều làm gì. Mình xin giải thích đoạn code đó ngắn gọn dể hiểu là:

Nếu header có sử dụng ảnh làm nền thì set background-img của header là liên kết ảnh vừa ải lên. Xuất tên blog và mô tả blog ra header. Ngược lại nếu header không sử dụng ảnh thì xuất tên blog và mô tả blog ra header.

Mình chỉ dịch đại khái những dòng lệnh trên cho mọi người dể hiểu chứ không dịch sát nghĩa từng đoạn code nên đừng bắt lỗi chổ này làm gì nha.

Ý nghĩa của mấy đoạn code màu đỏ mình đã đánh dấu.

<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
Tương đương với
<div style='background-image:url(link_ảnh); background-position:...; background-repeat:no-repeat;' id='header-inner'>

<data:title/>: Xuất ra tên blog.

<data:description/>: Xuất ra dòng mô tả blog.

data:blog.homepageUrl: Xuất ra địa chỉ trang chủ.

Cơ bản header chỉ làm nhiêu đó việc thôi. Bây giờ đã nắm được cách làm việc của header rồi thì mình khuyến khích các bạn nên viết code header bằng tay mà không cần sử dụng đếnđoạn code A nữa. Và để làm được điều đó thì mình cần xác định là header của mình cần những gì.

Ví dụ: bạn muốn header của mình chỉ có tên blog và mô tả blog thì thay đoạn code A thành

<div id='blogheader'>
<div class='titlewrapper'>
Tên Blog Của Bạn.</div>
<div class='descriptionwrapper'>
Mô Tả (Slowgun) của blog. </div>
</div>

Xong chỉ việc cài thuộc tính css cho 2 class titlewrapper và descriptionwrapper và chèn trước thẻ ]]></b:skin> là xong.

Nếu muốn background của header có ảnh thì chỉ việc cài đặt css background:url(link_ảnh)cho id Blogheader là xong.

Nếu chưa biết về css thì bạn xem qua bài viết css căn bản.

Ưu nhược điểm của 2 cách làm trên.

Về mức độ tiện dụng thì hiển nhiên là dùng widget có sẵn của blogger là tiện hơn rồi. Không cần phải hiểu nhiều gì về code.
Còn về thời gian load thì dễ thấy rằng với cách code bằng tay khi load chỉ cần xuất ra 1 dòng chữ thay vì phải load 1 widget rồi phải xuất data từ widget đó ra. Mỗi widget tiết kiệm 1 chút thời gian thì blog của bạn sẽ nhanh hơn đáng kể đó.

Phần 2: Tùy biến header của blogger.

Như ban đầu mình đã đề cập. Làm sao để chia header ra 2 - 3 phần hoặc làm sao chèn flash, nhạc vào header sẽ được giải quyết trong phần 2 này.

Ví dụ: Mình muốn chia header ra 2 phần. Phần bên trái chứa tên blog, slowgun của blog. Phần bên phải chứa 1 bài nhạc. Cách làm như sau:

Tìm đến đoạn code A như mình đã nếu ở phần 1. Thêm vào trước vào sau đoạn code A theo mẫu sau:

<div class='header'>
<div class='header1'>
Đoạn code A
</div>
<div class='header2'>
Code của bài hát hoặc flash hoặc bất kỳ 1 đoạn code gì đó.
</div>
<div style='clear:both'/>
</div>

Mục đích của việc làm trên là tạo ra các module chứa các thành phần mình muốn thêm vào. Ví dụ ở trên là mình tạo ra module header chứa 2 module con là header1 và header2.

Tiếp theo là cài đặt css qui định chiều rộng chiều cao của các header trên và chèn trước thẻ]]></b:skin>. Đoạn css bên dưới là 1 ví dụ.

.header{
width:550px;
height:60px;
text-align:center;
box-shadow:1px 1px 3px 3px #666;}
.header1{
width:330px;
height:40px;
float:left;
padding:10px;
color:#333;}
.header2{
width:200px;
height:60px;
float:right;}

Cơ bản chỉ bao nhiêu đó thôi.

Lưu ý: trong demo bên dưới các class chứa css mình để bên trong thẻ <style type='text/css'>...</style> Khi đưa vào template thì bạn để các class phía trên thẻ ]]></b:skin> là được.

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

Tuesday, November 20, 2012

Tạo nút button bằng css

Nút button được ứng dụng khá nhiều trên các blog có thể làm nút home link, nút RSS... bạn cũng có thể sử dụng để làm menu cho blog. Có nhiều cách để tạo nút bạn có thể dùng phần mềm hoặc tạo trực tuyến từ các trang web. Hôm nay không cần phần mềm hay hổ trợ của web, mình xin chia sẻ cách để bạn có thể tạo nút bằng css dùng để ứng dụng cho blog mình. Thủ thuật này sẽ hình thành nên một nút dạng hình chữ nhật và có hiệu ứng khi rê chuột.

☼ Cách tiến hành:

1- Đăng nhập vào Blog

2- Vào Mẫu

3- Chọn Chỉnh sử HTML (Edit HTML)

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

.button{
background: #00ccff; /*màu nền của nút*/
border: 3px #00ccff outset;
padding: 0 2px;
text-decoration: none;
font: bold 10px Verdana; /*kích thước của text*/
color:#ff0000; /*màu text*/
}

.button:hover {
border-style: inset;
background: #33ffff; /*màu nền của nút khi rê chuột*/
padding: 2px 3px 0 5px;
color:#000099; /*màu text khi rê chuột*/
}

.button:visited {
background: #00ffff; /*màu nền của nút sau khi click chuột*/
color:#ff6600; /*màu text khi đã click chuột*/
}

.button:active{
color: white;
}

- Bạn chỉ việc dựa vào chú thích và chỉnh sửa lại cho phù hợp, sau khi chỉnh sửa xong nhớ xóa đi các dòng chú thích màu xanh để không bị lỗi code.

- Bạn có thể xem bảng mã màu TẠI ĐÂY

5- Save template lại

Để tạo nút cho link trong bài đăng hay trên blog, bạn chỉ việc thêm và link đó lệnh "class="button" như bên dưới.

<a class="button" href="http://quangvietmkt.blogspot.com/2011/12/tao-nut-button-bang-css.html">Blog Namkna</a>

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

Thursday, October 18, 2012

Tạo cửa sổ popup sử dụng Javascript

Đôi khi bạn phải sử dụng Popup window để tạo liên kết đến một trang web khác. Popup window thường xuyên được sử dụng trong thiết kế web. Bạn hãy click chuột vào liên kết Demo dưới đây để thấy tác dụng của thủ thuật này.

Xem Demo:

XXEM DEMO

☼ Bắt đầu thủ thuật
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế chọn Chỉnh sửa HTML
3. Bạn tìm thẻ.

</head>.

4. Dán code bên dưới vào sau thẻ trên.

<script type="text/javascript">
//<![CDATA[
function OpenPopup(Url,WindowName,width,height,extras,scrollbars) {
var wide = width;
var high = height;
var additional= extras;
var top = (screen.height-high)/2;
var leftside = (screen.width-wide)/2; newWindow=window.open(''+ Url + 
'',''+ WindowName + '','width=' + wide + ',height=' + high + ',top=' + 
top + ',left=' + leftside + ',features=' + additional + '' + 
',scrollbars=1');
newWindow.focus();
}
//]]>
</script>

Tiếp theo thiết lập cấu trúc HTML như sau và đặt tại vị trí muốn hiển thị liên kết đến một trang web khác.

<a href="javascript: void(0);" onclick=" javascript:OpenPopup('http://quangvietmkt.blogspot.com/','WindowName','510','280','scrollbars=1');">Tên Hiển Thị</a>

Trong đoạn code HTML ở trên, bạn cần thay đổi những phần được đánh dấu màu đỏ cho phù hợp.