Showing posts with label CSS HTML. Show all posts

Hộp chia sẻ Facebook, Twitter, G+ cho blogger

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ẻ Viettin365.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.

Thiết kế giao diện Blog

Hôm nay mình tìm được một bài viết hay cho những người mới làm quen với Blog có thể dễ dàng hơn trong việc chỉnh sửa và nắm bắt được nội dung của mẫu! Nếu hay mọi người cùng nhau chia sẻ nhe!

» TUYỆT ĐỐI KHÔNG THIẾT KẾ NGAY TRÊN TRANG BLOG CHÍNH. Bạn nên tạo một trang blog khác chỉ để phục vụ cho việc thiết kế. Sau khi thiết kế hoàn thành hãy đem cái template mới đó về áp dụng cho blog chính của mình.

» Trên hướng dẫn này mình chỉ viết về cấu trúc template.

» Trước khi thiết kế nên phát thảo ra giấy về hình dạng trang blog mình mong muốn sẽ như thế nào. Việc này giúp bạn định hình được việc chính mình cần phải làm là gì, tránh lang mang không biết bắt đầu từ đâu. Bắt đầu vào vấn đề chính:

1. Cấu trúc cơ bản template của 1 blog có dạng như sau:

<?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[
]]></b:skin>

</head>

<body>

</body>

</html>

Việc bạn cần làm là vào thiết kế → Chỉnh sửa HTML xóa toàn bộ đoạn code bên trong đó và paste đoạn code trên vào rồi save lại. Khi save lại sẽ xuất hiện 1 mục cảnh báo dạng như hình bên dưới. Bạn chọn vào mục xóa tiện ích.

Về trang chủ bạn sẽ thấy nó trắng toát không còn gì trên đó hết.

2. Chèn thẻ meta và title cho blog - cấu trúc template

Giải thích 1 tí về vị trí thêm code vào đoạn code ở bước 1.

» Meta, tags sẽ được chèn dưới thẻ <head> và trên thẻ <b:skin>

Để blog được các công cụ tìm kiếm chú ý đến thì phần này là phần quan trọng nhất.

Bạn có thể xem hình bên dưới để hiểu ý nghĩa của phần meta tags là gì.

Ở dòng đầu là khi search ra trang chủ. Nó sẽ hiển thị tên blog vào đó.

Dòng bên dưới là khi search ra nội dung trong bài viết. Nó sẽ hiển thị kiểu Tên bài viết - Tên Blog

Nói chung phần này bạn cũng không cần hiểu nhiều làm gì. Chỉ cần chèn đoạn code sau vào vị trí đó là được:

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<title><data:blog.title/></title>

</b:if>

<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.pageTitle/></title>

<meta content='Mô tả về blog của bạn' name='description'/>

<meta content='Các từ khóa trên blog của bạn' name='keywords'/>

<b:else/>

<title><data:blog.pageName/> - <data:blog.title/></title>

<meta expr:content='data:blog.pageName + " - Mô tả về blog của bạn"' name='description'/>

<meta expr:content='data:blog.pageName + ", Các từ khóa trên blog của bạn"' name='keywords'/>

</b:if> Thay đổi những dòng màu đỏ cho phù hợp với blog của bạn là được rồi.

» Những đoạn css qui định về thuộc tính các module trên blog sẽ được chèn phía trên thẻ ]]></b:skin>

» Các module hiển thị trên blog sẽ được chèn bên trong thẻ <body> Module hiển thị trên blog </body>

3. Bố cục các thành phần muốn có trên blog của mình (đây là bước đầu tiên để bạn tạo được sự khác biệt cho blog của mình. Ví dụ mình muốn blog có cấu trúc dạng như hình vẽ bên dưới.

Thành phần blog này bao gồm 3 phần chính:

» Ở đầu trang là header.

» Ở giữa gồm 3 phần là 1 sidebar bên trái (sidebar1) 1 sidebar bên phải (sidebar2) và phần nội dung bài viết ở giữa.(post)

» Ở cuối trang là footer.

Tất nhiên đây chỉ là những module lớn. Bên trong mỗi module lớn này sẽ còn được chia thành nhiều module nhỏ nữa. Vấn đề này mình sẽ đề cập sau. Việc bây giờ bạn cần làm là tạo ra các module ban đầu cho blog.

4. Tạo Module đầu tiên trên blog. Module lớn nhất của blog là body. Đây là module mặc định chứa tất cả các module khác trên blog.

Bạn cần khai báo một số thuộc tính css cho module body này vào phía trên thẻ ]]></b:skin> theo dạng như sau:

body{

background: #cccccc; /* Màu nền toàn blog (mặc định là màu trắng) */

font: 16px georgia; /* Cỡ chữ và font chữ cho toàn blog */

thuộc tính khác; /* Một số thuộc tính khác cho toàn blog */

...;

}

Tiếp theo tạo 1 module với ID là box nằm trong body và chứa tất cả các module còn lại của blog.

Cách làm: ở giữa thẻ <body> và </body> bạn thêm 1 đoạn code như bên dưới:

<div id='box'>

Nội Dung Blog

</div>Tiếp tục chèn thêm thuộc tính css cho id box này bằng cách thêm đoạn code này ở trên thẻ ]]></b:skin>

#box{

Background:#3399bb; /* Màu nền của module box */

Width: 990px; /* Chiều rộng của trang blog */

Margin:0 auto; /* Cân bằng vị trí module này vào giữa trang */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */

...;

} Save template lại rồi về trang chủ bạn sẽ thấy có 1 module mới được hình thành.

5. Chia nhỏ Module box thành 3 phần: header, main-outer, footer Việc tiếp theo là tạo ra 3 phần chính trên blog như mình đã đề cập ở trên bao gồm header, main-outer, footer. Cách làm cũng tương tự như gọi ra ID box cụ thể là:

ở giữa thẻ <div id='box'> và thẻ đóng </div> của box bạn thêm 1 đoạn code như bên dưới:

<div id='header'>

Nội Dung header

</div>

<div id='main-outer'>

Nội Dung Blog

</div>

<div id='footer'>

Nội Dung Footer

</div> Tiếp tục chèn thêm thuộc tính css cho 3 id vừa tạo bằng cách thêm đoạn code css của nó ở trên thẻ ]]></b:skin>

#header{

Background:#4499bb; /* Màu nền của module header */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */

...;

}

#main-outer{

Background:#113366; /* Màu nền của module main-outer */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */

...;

}

#footer{

Background:#6600ee; /* Màu nền của module footer */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */

...;

} Save template lại rồi về trang chủ bạn sẽ thấy có 3 module mới được hình thành.

6. Chia nhỏ Module main-outer thành 3 phần: sidebar1, main, sidebar2 Tiếp tục lại chia nhỏ module Main-outer ra thành 3 module nhỏ là sidebar1, main và sidebar2. Cách làm cũng tương tự như bạn chia nhỏ mudule box ở trên:

Cụ thể là ở giữa thẻ <div id='main-outer'> và thẻ đóng </div> của main-outer bạn thêm 1 đoạn code như bên dưới:

<div id='sidebar1'>

Nội Dung sidebar1

</div>

<div id='main'>

Nội Dung Bài Viết

</div>

<div id='sidebar2'>

Nội Dung sidebar2

</div>

<div style='clear:both'/>Chú ý: do 3 module trên sử dụng thuộc tính dời module qua trái, qua phải nên phía dưới nó cần có thêm <div style='clear:both'/> để dừng hiệu ứng dời module.

Tiếp tục chèn thêm thuộc tính css cho 3 id vừa tạo bằng cách thêm đoạn code css của nó ở trên thẻ ]]></b:skin>

#sidebar1{

Background:#884400; /* Màu nền của module sidebar1 */

width:200px; /* Chiều rộng của module sidebar1 */

float:left; /* Dời module sidebar1 qua trái */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */

...;

}

#main{

Background:#646853; /* Màu nền của module main */

width:590px; /* Chiều rộng của module main */

float:left; /* Dời module main qua trái */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */

...;

}

#sidebar2{

Background:#518643; /* Màu nền của module sidebar2 */

width:200px; /* Chiều rộng của module sidebar2 */

float:right; /* Dời module sidebar2 qua phải */

thuộc tính 1; /* Một số thuộc tính khác */

thuộc tính 2; /* Một số thuộc tính khác */

...;

}

Chú ý: Do lúc tạo module Main-outer có chiều rộng là 990px (như đã qui định ở trên). Nên tổng chiều rộng 3 module bên trong nó không được lớn hơn 990px nếu tổng chiều rộng 3 module con lớn hơn 990px thì sidebar2 sẽ bị đẩy xuống dưới.

Và cứ bằng cách làm như trên ta có thể chia nhỏ module trên blog của bạn ra bao nhiêu phần cũng được. Việc bạn cần làm là cứ chèn module vào đúng vị trí của nó, qui định kích thước và áp dụng những thể css phù hợp cho module đó phía trên thẻ ]]></b:skin> là ok.

7. Điều chỉnh sidebar (tạo mục Thêm Tiện Ích của blogspot cho sidebar) Lẽ ra việc tiếp theo cần làm là điều chỉnh header trước nhưng như vậy sẽ có 1 số thứ phải điều chỉnh hơi lằng nhằng nên mình hướng dẫn điều chỉnh sidebar trước, sau này điều chỉnh header sẽ tiện hơn.

Như bạn cũng đã biết ở mục Thiết kế → Phần tử trang. Trên sidebar có mục Thêm Tiện Ích để tiện việc cho bạn bổ sung những tiện ích cần thiết cho blog. Cách tạo ra mục này:

Như trên template đưa ra ban đầu thì có 2 sidebar 1 nằm bên trái và 1 nằm bên phải. Cách tạo sidebar bên trái tương tự với sidebar bên phải.

Trong template mình đã tạo thì sidebar bên trái có ID là sidebar1.

Ở giữa thẻ <div id='sidebar1'> và thẻ đóng </div> của sidebar1 bạn chèn đoạn code sau:

<b:section class='sbar1' id='sbar1' showaddelement='yes'/>Save template lại.

» Về mục Phần tử trang bạn sẽ thấy xuất hiện mục thêm tiệc ích. Lúc này nó sẽ nằm ở giữa. Nhưng không sao, cứ để nó ở đó sau này nó sẽ tự điều chỉnh lại.

» Về trang chủ bạn sẽ thấy xuất hiện thanh Navbar ở đầu blog. Nếu bạn không muốn xài thanh navbar này thì chèn đoạn code sau vào trước thẻ ]]></b:skin> rồi save lại là xong.

#navbar-iframe {height:0px;visibility:hidden;display:none} Làm tương tự với sidebar2 có 1 điều cần lưu ý là nhớ chuyển sbar1 trong đoạn code ở sidebar1 thành sbar2. Nếu bạn không chuyển cái này thì template sẽ báo lỗi.

Khi tạo ra được 2 sidebar rồi bạn hãy thử thêm 1 tiện ích gì đó vào blog xem nói hoạt động như thế nào.

Rất dễ thấy là mặc định tiêu đề của blog mới tạo bị dư 1 khoãng khá lớn ở trên và ở dưới. Để khắc phục điều này bạn chỉ cần chèn đoạn code sau phía trên thẻ ]]></b:skin> rồi save lại là xong.

h2 {padding:0; margin:0}

8. Điều chỉnh header (tạo header như mẫu header mẫu của blogspot)

Như đã đề cập ở mục 7. Phần tiếp theo mình cần điều chỉnh là header của blog. Header mặc định của blog là một tiện ích cho phép thay đổi tiêu đề và mô tả của blog. ngoài ra còn cho phép thay đổi banner cho header.

Và bây giờ mình sẽ hướng dẫn bạn gọi ra tiện ích này cho header.

Vào template (KHÔNG mở rộng mẫu tiện ích). Trong template này header mình đã tạo ban đầu có ID là header.

Ở giữa thẻ <div id='header'> và thẻ đóng </div> của header bạn chèn đoạn code sau:

<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>

</b:section>Save template lại. Về mục phần tử trang bạn sẽ thấy tiện ích của header đã được tạo ra. Bạn chỉ việc thay đổi tiêu đề và mô tả cho blog hoặc thay đổi banner cho blog là được. Về trang chủ để kiểm tra kết quả nào.

9. Điều chỉnh phần bài đăng (main) (hiển thị nội dung các bài viết ra blog)

Trong template này mình đã cho các bài viết nằm trong ID main. Để hiển thị nội dung các bài viết ra blog bạn chỉ việc thực hiện như sau:

Vào template (KHÔNG mở rộng mẫu tiện ích) ở giữa thẻ <div id='main'> và thẻ đóng </div> của main bạn chèn đoạn code sau:

<b:section class='mainpost' id='mainpost' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

</b:section> Save template lại. Về mục Phần tử trang bạn sẽ thấy tiện ích Bài Đăng Trên Blog đã hiện ra. Bạn chỉ việc chỉnh sửa tiện ích này lại cho phù hợp với blog là ok rồi. Về trang chủ các bài đăng có trên blog cũng đã được hiện ra. Như vậy là ok rồi.

10. Điều chỉnh footer blog.

Thông thường footer blog là nơi người ta đặt thông tin về tên template. Người thiết kế ra template (ghi tên mình zô liền. mình tự thiết kế mà) nên bạn cứ đặt những code thông thường vào đó là được rồi.

Cũng có một số bạn muốn đặt thêm một số tiện ích vào phần footer. Việc bạn cần làm là thực hiện y như bước 7 nhưng thay chữ sbar1 thành foot là được rồi.

11. Những điều chỉnh khác.

Về cơ bản template blogspot chỉ có bao nhiêu đó thôi. Ngoài ra cũng chẳng còn gì nữa.

Tiếp theo là bạn áp dụng những thủ thuật khác để tạo ra những nét đặc trưng riêng cho blog của mình là được rồi.

Bài viết này chỉ đề cập đến việc tạo ra và nắm bắt dược cấu trúc template của mình thôi. Việc trang trí là sao cho đẹp là ở chổ bạn có thật sự sáng tạo khi kết hợp các thuộc tính css lại với nhau hay không.

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/AVvXsEhKWzeTvmVQyopDIj0MVtB5flkzbE73yN1m68O7__wnzUtYB5tb_3zCbVfcDVVLZM6pJxNIYY8W9EgayDgI4HBDNEVgRqUmtAUv7O5rOZEacgqmg6xzVMQWr8iH-vFEK9WdVIblbsXFoZ8Z/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI-5MnVn4AFfjiX8WJAmfxkOSc6HfHd0YoBf5c2nEs18GV4MvPEuqD_aoWfBpvN72yjMqc3t-2VC1D_M-Oo1mDVSaoC8p_Q6havA0v3dS_F8f42IO2iKNRpziW4IMcx86OApR34chlixTZ/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFUGF2szmT7bMnn6ZMr4RrvacKa-knIzzVVjCR5_ahdMqgsTR4DDVL-EChfdd1y_DEMeXHZIkuhZ9-kyzqZu3gTgF3j9sC8uUbAjgJ0NDXfxomJ9EYMFcvgPg7-4LPYjlAydrRVAd-6YDa/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTk-yvZnSFsYXerOI86XGr-KixTRFSMzvi7pXgLyWJFbuDR8ySkM4NPiDn5T6nLeYpnNtAwxfIi2oWt8oi8M6SpEOoSImuvqi1djWnARzQ2uibTVH20R68-MhKsvnY6zI_kqbKehCpkYae/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjilGzIPzwUR01YE9C4CpCKUJ9i0Qsa8Ojuomv7fskr_-DVesHqk5uwSMyE7g58q3RW2dRKCnwOHNEOrQG0op7djBIsAWD4IGaYaLiONLOEQfzwjOliFpGZOS-Z0lA2oWDY60t77MiCJAMV/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!

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/AVvXsEhBpxdq5IGWhbsBkL7HkLDtGFoJXCfppm2tXHegYvtlaKfNzoDh_6oVU5FcU2HNV8C_UcDCDzHUPFXcgjmq9E024HAKbZGp6ShWGjLLVyAwcOg1m7TLZTh8qm4p39NhrLcMJVCzLuta7VA/)}
#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

<div id='float-menu'>
 <ul>
  <li id='menu-right'>
   <b:if cond='data:olderPageUrl'>
    <b:if cond='data:olderPageUrl != data:blog.url'>
     <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' rel='prev'/>
    </b:if>
   </b:if>
  </li>
  <li id='menu-left'>
   <b:if cond='data:newerPageUrl'>
    <b:if cond='data:newerPageUrl != data:blog.url'>
     <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' rel='next'/>
    </b:if>
   </b:if>
  </li>
  <li id='menu-random'>
   <script type='text/javaScript'>//<![CDATA[
   var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
   //]]></script>
   <script type='text/javaScript'>//<![CDATA[
   function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'"  title="Bài đăng Ngẫu nhiên" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
   //]]></script>
  </li>
  <li id='menu-home'>
   <a expr:href='data:blog.homepageUrl' title='Trang chủ'/>
  </li>
  <li id='menu-top'>
   <a href='#' rel='nofollow' title='Lên trên'/>
  </li>
 </ul>
</div>

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

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

Trang trí nền blog ngày tết cho blogger

Bài viết này mình sẽ hướng dẫn các bạn trang trí nền blog nhân dịp tết nguyên đán 2013.Các bạn hãy chọn một mẫu để áp dụng cho blog của bạn nha.

Các bạn hãy tải các file ảnh về và upload lên blog để láy link rùi thay vào các code bên dưới nha.

DOWNLOAD NOW

+ Cách tiến hành!

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. Tìm đoạn code sau:

body{...}

- Và thay thế thành một số mẫu dưới.

Style1: Thay thế nền blog tết

Mẫu 1 Demo

body{background-color:#fff;background-image:url(https://scipt-namkna.googlecode.com/svn/trunk/Photo/nen-tet-namkna-blogspot-com-1.jpg);background-position:50% 50%;background-attachment:fixed;margin:0;padding:0;color:#333;font:x-small Georgia Serif;text-align:center}

Mẫu 2 Demo

body{background-color:#fff;background-image:url(https://scipt-namkna.googlecode.com/svn/trunk/Photo/nen-tet-namkna-blogspot-com-2.jpg);background-position:50% 50%;background-attachment:fixed;margin:0;padding:0;color:#333;font:x-small Georgia Serif;text-align:center}

Mẫu 3 (phong cách mp3.zing) Demo

body{background-color:#fff;background-image:url(https://scipt-namkna.googlecode.com/svn/trunk/Photo/nen-tet-namkna-blogspot-com-3.jpg);background-position:50% 50%;background-attachment:fixed;margin:0;padding:0;color:#333;font:x-small Georgia Serif;text-align:center}

Mẫu 4 (Phong cách zing.me) Demo

body{background-color:#fff;background-image:url(https://scipt-namkna.googlecode.com/svn/trunk/Photo/nen-tet-namkna-blogspot-com-4.jpg);background-position:50% 50%;background-attachment:fixed;margin:0;padding:0;color:#333;font:x-small Georgia Serif;text-align:center}

Mẫu 5 (Phong cách tv24.vn) Demo

body{background-color:#fff;background-image:url(https://scipt-namkna.googlecode.com/svn/trunk/Photo/nen-tet-namkna-blogspot-com-5.jpg);background-position:50% 50%;background-attachment:fixed;margin:0;padding:0;color:#333;font:x-small Georgia Serif;text-align:center}

Style 2: Thêm một cành đào góc trên bên phải hoặc bên trái blogger.

XEM DEMO

Thêm góc trên cùng bên trái:

<a style="display:scroll;position:fixed;Top:0px;left:0px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6Ibj5wi8LXImXDbcdkIFlEPVG3ZPx7ZKBNyw7klk2TeUzhVpYKT4LkscAH1tbxfCrWqtUuD9LxUxg6sv2cnkef5WlfkYD2Mw1qL7edeYiTK-3lnXsTFsfLNOER1eqGtQeJuDJVVp9b4h/s1600/canh-dao-namkna-blogspot-com-1.png" /></a>

Thêm góc trên cùng bên phải:

<a style="display:scroll;position:fixed;Top:0px;right:0px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_kCaI_mWKp-NDMekkF6CgV2R6ff_QhrAj1XHK6iL6BUTWgNpP8WYLiL_KWa3qcZt0GI68xydPJ1bBcEAuAlnJ1LzcAvemBn3Wc_fKC0ouiKaVZ-BLgW_pd4cnmsrDvoPooLnAYYPp9ig/s1600/canh-dao-namkna-blogspot-com-3.png" /></a>

Thêm góc dưới cùng bên trái:

<a style="display:scroll;position:fixed;bottom:0px;left:0px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixEqv4xaiRfsqU2MdiQkiEXPr02zIlzIU4qgcBRX5ZXDpqybNGfUkGmxyoD3g996onCG50Ldl6bEZK5KqQTIECvR7_9yJC8VmZa6FUfN7f-SxBYhrZe0I0w3VTNZags3IHjGjGvCWdjpmD/s1600/canh-dao-namkna-blogspot-com-2.png" /></a>

Thêm góc dưới cùng bên phải:

<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzuCA7Hx4OagpA6TagEyAniHCbtF60xRfi-eaRSrkACZR6TqU6gkXDAKO-OMf6cNGrloDlry-ZIQdB0j1v9_lf27zhpQsFzCtfU395lGj3HivKY9oakCx10k-ZlYaGRJ80r1fiGR480se/s1600/canh-dao-namkna-blogspot-com-4.png" /></a>

Style 3: Treo 2 câu đối 2 bên blog.

XEM DEMO

Mẫu này được mình cải tiến từ thủ thuật banner quảng cáo trượt dọc 2 bên.

<script type='text/javascript'>
//<![CDATA[
document.write('
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">html{height:auto!important}body{background:#EEE;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHD0q2lIpQrlJo3ZHskxLEnFLL3er5tNG2Gge7dWAU2jLiUq8lTf1ZpMCpR3nNOJ0wwPuF57jYamDw1SVYspQFap6NfNkWtzlgBOGl-RIraZkIUx-4ZM9Yxk6iPHAfI94AizZX0iZLtHrH/s1600/left-cau-doi-namkna-blogspot-com.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLDdoHCNneoanes4yNsTJ3uGIJbBRz6kcYia9F-luKjHFil-eg8dfrB7vk1DQeZGSokI8a0h7B5NgCfbID00EUMb_TOOI9EjqOCpuZKR3Bhm0H8EVa7hl-Uou-_7nb5nujGpACB3-eKwB/s1600/right-cau-doi-namkna-blogspot-com.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:220px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmexCjaYqSLyQZ00LQndjjWUz4OulkcAiGCNjORrgPjv3jQXaeUJaXwmJPyy8J3604fCmVRwtl1a-2meiDiTcVXIJL4P5uONsDtpkgUxxLCSuMUwGAjw9qFdYr1rmht-vnKe_F4vN76BL/s1600/bottom-cau-doi-namkna-blogspot-com.png) repeat-x bottom left;"></div><a href="http://namkna.blogspot.com/" target="_blank"><img style="position:fixed;z-index:9999;bottom:19px;left:280px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmDYPUSyTPefYIaoUY6W8jcn3gqcmVMq83urE071I9jDTNdpyL_s9S_TPFfOOkmfzJ4w7WbL4ri_JkIQdvzSm3p8Xq22AZ1gQgJuj1LcVH_hR3_q1EgfS9l4VWR9rCWhWfd1ktDHvQ4Kx/s1600/buttom-left-namkna-blogspot-com.png"/>');
var no=100,hidesnowtime=0,snowdistance="pageheight",ie4up=document.all?1:0,ns6up=document.getElementById&&!document.all?1:0;function iecompattest(){return document.compatMode&&"BackCompat"!=document.compatMode?document.documentElement:document.body}var dx,xp,yp,am,stx,sty,i,doc_width=800,doc_height=600;ns6up?(doc_width=self.innerWidth,doc_height=self.innerHeight):ie4up&&(doc_width=iecompattest().clientWidth,doc_height=iecompattest().clientHeight);dx=[];xp=[];yp=[];am=[];stx=[];sty=[];
for(i=0;i<no;++i)dx[i]=0,xp[i]=Math.random()*(doc_width-50),yp[i]=Math.random()*doc_height,am[i]=20*Math.random(),stx[i]=0.02+Math.random()/10,sty[i]=0.7+Math.random(),(ie4up||ns6up)&&document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"></div>');
//]]>
</script>

Style 4: Treo cau dối 2 bên blog.

Cặp 1: Demo

<a style="display:scroll;position:fixed;Top:0px;right:5px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifZYEnkt5_cD_l1Sz0wr0XuwHmjk86FB6L0k_rE4btKs9oI_gnJORbwq_XwHufUpk5ZUSng6MmjCTQMKBzhyABKa-gpu7nPoVbCvHSzNeSAmxvFshj_rB50Ga_jpHfb6_ujBYYKrO8EPNO/s1600/1b-left_namkna-blogspot-com.png" /></a>
<a style="display:scroll;position:fixed;Top:0px;left:5px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuhpNQTQ20aLPDTBiqliBdwdYYdIJMFHHQ00BRCNRJSxk-xwvMvMZoQtz3eV4-W3M3bsUSMuGs-bIYK429AItUjDThz7h8kcKmfuLtUp61iTIVCKOU4rX5pPeK3PgHj65NT6v8OKakzuoh/s1600/1a-right_namkna-blogspot-com.png" /></a>

Mẫu 2: Demo

<a style="display:scroll;position:fixed;Top:0px;right:5px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxZH-ysg0SAjoSfUlYrsVgJSKtBiTKTFUgGRoZEtbgeown3Dki-WfUZFDRWvT-FZhVGElnL5T-l0ZhzKbkbDcX36339cpz0GpS_xBAecEm5K-4TaadQ_MFEbJKzQdMClCnsmNnfo9kP0y/s1600/2a-left_namkna-blogspot-com.pngp" /></a>
<a style="display:scroll;position:fixed;Top:0px;left:5px;" href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9fFVJxOK5G4W073TncPJN0Q4-stDCgysKgW_cS3L_tTOb3_hvokdOJcnuqwzVGM13qwCVRf6wWnWV8RTdc13JV7euPOBcguUwmAsEk0ZBmfjVo16m3T7OAGThL4J_9lfmmHijiGXi4Gkf/s1600/2a-right_namkna-blogspot-com.png" /></a>

Tạo hình tam giác với CSS

Trong thiết kế blog/web site rất nhiều lần cần sử dụng các thuộc tính tạo tam giác bằng CSS mà không cần dùng hình ảnh. Bài viết này namkna giới thiệu với các bạn sử dụng mẹo nhỏ với thuộc tính border trong css để tạo ra hình tam giác.

1- Đầu tiên tạo một thẻ div với id là demo:

<div id="demo">
.....
</div>

Sau đó bạn xem hình dưới để thấy được cách tạo ra hình tam giác.

Khi để width và height bằng 0 thì thẻ div với border-width bằng 10px sẽ là hình vuông kết hợp của 4 hình tam giác tương đương với 4 cạnh border-left ,border-right, border-bottomvà border-top.Để tạo ra hình tam giác ta sẽ ẩn 3 trong 4 border bằng cách để cho chúng màu trong suốt với giá trị transparent.

Bạn cũng có thể thay đổi kích thước của tam giác bằng cách thay đổi độ rộng của border ví dụ như :

#demo{
    .....
    border:10px solid transparent;
    border-top:15px solid red;
}

Hình tam giác thường được tạo bằng pseudo-class của một phần tử.Ví dụ như:

#demo{
    width:80px;
    height:80px;
    background-color:#232323;
    position:relative;
}

#demo:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    border:10px solid transparent;
    ...../*code thêm ở hình dưới*/.....
}

Xem hình dưới:

Tuy chỉ là một mẹo nhỏ nhưng nó lại có khá nhiều ứng dụng hữu ích giúp làm tăng thẩm mỹ của trang web. Ví dụ như tạo tooltip hay ribbon..

Tạo tooltip

Ảnh minh họa:

HTML code :

<span id="tooltip">Tooltip bằng CSS</span>

CSS code :

#tooltip{
    background-color:#232323;
    background-image:-moz-linear-gradient(top,#4a4a4a,#232323);
    background-image:-o-linear-gradient(top,#4a4a4a,#232323);
    background-image:-webkit-linear-gradient(top,#4a4a4a,#232323);
    background-image:linear-gradient(top,#4a4a4a,#232323);
    color:white;
    padding:8px 15px;
    font-size:14px;
    border-radius:5px;
    font-family:helvetica,sans-serif;
    position:Relative;
    text-shadow:0 1px 0 rgba(0,0,0,0.7);
}
 
#tooltip:after{
    content:"";
    width:0px;
    height:0px;
    position:absolute;
    border:9px solid transparent;
    border-top:9px solid #232323;
    left:45%;
    bottom:-16px;
}

Tạo ribbon

Ảnh minh họa:

HTML code:

<div id="demo">
    <h1 class="ribbon">Ribbon bằng CSS</h1>
    <p><!-- nội dung --></p>
</div>

CSS code:

#demo{
    background-color:#232323;
    width:200px;
    padding:50px 25px 20px 15px;
    position:relative;
    color:#c8c8c8;
    font-family:helvetica,sans-serif;
    line-height:20px;
}
 
.ribbon{
    position:absolute;
    height:30px;
    top:10px;
    left:-8px;
    background-color:#0072ff;
    padding:0 60px 0 15px;
    max-width:180px;
    color:white;
    line-height:30px;
    font-weight:400;
    font-size:14px;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
    text-transform:uppercase;
    letter-spacing:1px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.3);
}
 
.ribbon:before,.ribbon:after{
    content:"";
    position:absolute;
    z-index:-1;
    width:0;
    height:0;
    bottom:-6px;
    left:3px;
    border:6px solid transparent;
    border-bottom:6px solid #023a7f;
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}

Tuy nhiên tại sao namkna lại sử dụng cả :before và :after.Lý do là tại vì ở trình duyệt firefox hiện nay có một lỗi nhỏ khi ta sử dụng thuộc tính transform với hình tam giác.Xem hình dưới đây hoặc các bạn có thể test ngay trên trình duyệt có thể nhìn thấy ngay.

Có thể thấy lỗi nhỏ này làm hình hiện thị trên màn hình trông không được đẹp mắt do vậy tôi sự dụng 2 hình tam giác chồng lên nhau bằng cả 2 lớp giả :before và :after để là mờ cái đường kẻ không mong muốn kia đi như hình dưới:

Trên chỉ là 2 ví dụ đơn giản về sự hữu ích của việc tạo hình tam giác bằng css,hi vọng mẹo nhỏ này sẽ giúp ích được cho các bạn.
Chúc các bạn thành công

Breaking

Business

Friday, September 27, 2013

Thursday, April 18, 2013

Sunday, April 14, 2013

Saturday, April 13, 2013

Monday, October 15, 2012

Monday, October 8, 2012

Technology

About & Social

Aplha Blog

Popular

Sponsor

Categories

Labels

Breaking News

Top Featured

Top Ad unit 728 × 90

পরিসংখ্যান

Post Top Ad

আর্কাইভ

মন্তব্য

Find Us On Facebook

Subscribe Here

সাম্প্রতিক প্রকাশনা

Random Posts

Advertise

Column1

Social Share

SOCIAL WIDGET

Recent Posts

Recent comments

Food

আমার সম্পর্কে

Biểu mẫu liên hệ

+ Cách tiến hành!

Style1: Thay thế nền blog tết

Style 2: Thêm một cành đào góc trên bên phải hoặc bên trái blogger.

Style 3: Treo 2 câu đối 2 bên blog.

Style 4: Treo cau dối 2 bên blog.

Tạo tooltip

Tạo ribbon

Advertise

YOUR_PROFILE_DESCRIPTION

About

Recent Comments

Most Popular

Tags

Categories

Popular Posts