Zing News - Tri thức trực tuyến

M

Hướng dẫn chèn fanpage Facebook vào Blogspot




Một trong những công cụ mà Facebook cung cấp là “Like Box”. Like Box như một trang Facebook thu nhỏ. Trong đó thể hiện Fans Page và những bài đăng trên trang Facebook riêng của bạn. Khi chèn Like Box vào Blog, bạn bè của bạn có thể xem nhanh nội dung trang Facebook của bạn và họ có thể kết nối để chia sẻ với bạn thông qua nút “Like” (thích) ngay phía trên hộp thoại.


Để tạo nút Like Box cho Blog, trước tiên bạn cần có một tài khoản trên Facebook và bạn cần tạo trang Facebook riêng .

Sau khi đã có tài khoản và trang Facebook riêng, bạn vào trang http://developers.facebook.com/docs/reference/plugins/like-box/ để bắt đầu.

Bạn sẽ thấy một hộp thoại tùy chỉnh cho nút Like cần đặt và điều chỉnh các tùy chọn như sau:












tại Facebook Page URL bạn điền địa Facebook your Page của bạn vào, ví dụ như:

https://www.facebook.com/haridangblog

tiếp đến bạn điền giá tri hight và width theo kích cỡ mà bạn muốn hiển thị, phần Border Color là mã màu của border, phần lựa chọn thêm là Show Faces, Show stream,Show header bạn lựa chọn theo ý thích và sau đó bạn nhấn vào Get code để lấy mã.

Một hộp thoại hiện ra. Bạn chọn tab iframe và copy đoạn code vào vị trí muốn đặt trên web của mình.




Cách sao lưu và phục hồi bài viết trong blog

Mình xin chia sẻ với các bạn cách sao lưu, phục hồi bài viết một cách nhanh chóng và hiệu quả. Thủ thuật này sẽ giúp các bạn có thể tạo ra một trang blog mới, với đầy đủ các bài viết và cả những lời chia sẻ của bạn bè trong từng bài viết - y hệt như trang blog hiện tại của các bạn.


Cách sao lưu bài viết (xuất blog): 


Đăng nhập blog, vào "Thiết kế", ở "Trang tổng quan" bấm chuột vào hình tam giác nhỏ . Một trình đơn thả xuống, bấm vào "Cài đặt", hiện ra giao diện tổng thể điều khiển blog, nhìn xuống phía dưới góc trái bấm "Khác" . Một giao diện hiện ra, bấm "Xuất blog"  trong giao diện tiếp theo bấm "Tải xuống blog".
   
Ở giao diện tải xuống, đánh dấu kiểm vào "Lưu tập tin"  rồi bấm "OK" , đợi hệ thống tải xong (thời gian tải xuống phụ thuộc vào số lượng bài viết trong blog nếu có vài trăm bài cũng chỉ mất gần 10 phút). Các bạn lưu lại tập  tin XML đó (đây là các bài viết đã được sao lưu dưới dạng XML nên không thể mở ra đọc bằng cách thông thường).

Cách đưa toàn bộ bài viết lên blog mới (nhập blog):


Sau khi tạo một blog mới. Đăng nhập vào blog và thực hiện lại các bước như trên, tới giao diện như ảnh 3. Bấm "Nhập blog" , bấm "Duyệt"hoặc "Chọn tập tin" để đi tới tập tin XML đã sao lưu ở các bước trên. 



Nhấp chuột trái vào tập tin và bấm nút "Open" trong giao diện hiện ra.  Hệ thống sẽ tự động đưa bạn đến giao diện kế tiếp. Ở giao diện này, gõ thật chính xác các ký tự an ninh rồi bấm "Nhập blog" [10]. Đợi hệ thống tải các bài viết của bạn lên blog (thời gian tải phụ thuộc vào số lượng dữ liệu trong tập tin XML - tải lên thường lâu hơn tải xuống chút ít). Nếu không muốn xuất bản các bài viết ngay thì bỏ dấu kiểm trong ô "Tự động xuất bản các bài viết" và các bài viết sẽ được lưu ở dạng "Nháp".

Khi hệ thống đã tải xong, các bạn có thể bấm vào "Xem blog" để tận hưởng thành quả và những bất ngờ thú vị của thủ thuật này là: các "Nhãn", "Danh mục",... vẫn nguyên vẹn như ở blog cũ.

Mở rộng thủ thuật: 

   
Các bạn có thể "tùy biến" thủ thuật này như nhập dữ liệu hai blog trong một blog bằng cách sử dụng giao diện "Nhập blog". Hoặc sao lưu các bài viết và gửi đến bạn bè đăng lên blog của họ,...
   
Chúc các bạn thành công! 

Tạo tiện ích LÊN, XUỐNG, TRỞ LẠI cho blog

Cách tạo tiện ích: lên, xuống, tự động cuộn trang cho blog. Thủ thuật nhỏ này nhằm giúp cho người truy cập blog đỡ vất vả kéo chuột, nhất là khi truy cập bằng laptop với chuột ảo.

Tiện ích này có thể tạo bằng cách sau:









- Chèn đoạn mã trong khung dưới đây vào bên dưới thẻ: ]]></b:skin> .

<!-- BAT DAU LEN XUONG --> 
<style type='text/css'> #backscroll { width:30px; line-height:50px; position:fixed; right:5px; top:350px; 
} 
</style> <script language='javascript'> /* <![CDATA[ */ suspendcode="<div id='backscroll'><a onclick='javascript:amutop();return false;' href='#' title='LÊN ĐẦU'><img border=0 src=\"https://lh5.googleusercontent.com/-ObCGpcQDQDk/T35aQPPWQMI/AAAAAAAAAPA/8iDyiJ07n3Y/s48/top.gif\" width=\"30\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='TRỞ LẠI TRANG VỪA XEM'><img border=0 src=\"https://lh4.googleusercontent.com/-HQASFJRYdd0/T35aO4vWfrI/AAAAAAAAAOo/WtpQMguYPLs/s48/back.gif\" width=\"30\"></a><br><a onclick='javascript:sc();return false;' href='#' title='DỪNG CUỘN'><img border=0 src=\"https://lh5.googleusercontent.com/-mZIfXp3qmSM/T35aP6jrhtI/AAAAAAAAAO0/Dda_pbetGyE/s48/ting.gif\" width=\"30\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='TỰ ĐỘNG CUỘN'><img border=0 src=\"https://lh4.googleusercontent.com/-HW6-lwAajuU/T35aO55KD8I/AAAAAAAAAOs/uWG9m072otc/s48/gun.gif\" width=\"30\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='XUỐNG CHÂN'><img border=0 src=\"https://lh4.googleusercontent.com/-i00crAzVJK0/T35aO5nmNdI/AAAAAAAAAOw/t0BCAeUQZbY/s48/end.gif\" width=\"30\"></a></div>" document.write(suspendcode);var currentpos,timer;function initialize(){timer=setInterval("scrollwindow ()",30)}function sc(){clearInterval(timer)}function scrollwindow(){currentpos=document.documentElement.scrollTop||document.body.scrollTop;window.scrollTo(0,++currentpos)}function amutop(){window.scrollTo(0,0);clearInterval(timer)}function amubutton(){window.scrollTo(0,8E4);clearInterval(timer)};/* ]]> */</script> 
<!-- KET THUC LEN XUONG -->

- Bấm "Lưu mẫu" và trở lại trang chủ xem kết quả.


Cách tối ưu hóa thẻ meta và mô tả tìm kiếm


Để bài viết có thể dễ dàng xuất hiện trong kết quả tìm kiếm của người truy cập. Chúng ta cần: tối ưu hóa thẻ Meta và Mô tả tìm kiếm trong từng bài viết. Đây là một tíện ích có sẵn của Blogspot, nhằm tăng cường sự hiện diện các từ khóa, tăng cường SEO cho bài viết. Nhưng, rất nhiều người dùng Blogspot đã bỏ qua một tiện ích có thể nói là tuyệt vời; vì theo mặc định tiện ích này chưa được kích hoạt nên không xuất hiện trong phần "Cài đặt bài đăng". Vậy là thế nào để kích hoạt và tận dụng sức mạnh của tiện ích "Mô tả tìm kiếm"? 

Cách kích hoạt thẻ Meta và Mô tả tìm kiếm:

1. Đầu tiên các bạn vào "Thiết kế" - "Trang tổng quan", bấm vào "Cài đặt" :


2. Trong giao diện hiện ra, bấm vào "Tùy chọn tìm kiếm".

3. Cuộn ngược lên phía trên: trong mục "Thẻ meta", bấm vào "Chỉnh sửa" và và đánh dấu kiểm vào ô "Có" . Một ô hình chữ nhật hiện ra, nhập những từ khóa mô tả blog vào đó và bấm "Lưu thay đổi" để hoàn tất .


Sử dụng "Mô tả tìm kiếm" trong từng bài viết:


- Sau khi hoàn tất các bước kích hoạt như trên, trong giao diện: Soạn thảo - chỉnh sửa bài viết, ở cột bên phải trong mục "Cài đặt bài đăng" đã xuất hiện một tiện ích mới có tiêu đề "Mô tả tìm kiếm" [6] (xem ảnh dưới).



- Để sử dụng tiện ích này, sau khi viết xong bài mới hoặc chỉnh sửa bài viết cũ, các bạn bấm vào "Mô tả tìm kiếm". Một khung nhỏ hiện ra, hãy gõ vào đó những từ khóa chính của bài viết hoặc một đoạn tóm tắt có chứa các từ khóa của bài viết và đừng quên bấm "Hoàn thành" để lưu lại!
- Cuối cùng bấm "Xuất bản" - đối với bài viết mới, hoặc bấm "Cập nhật" - đối với bài viết cũ chỉnh sửa lại.

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

Tạo nhãn cho bài viết




"Nhãn" (Labels) - trong Blogspot: Có nghĩa là tên của một tập hợp các bài viết cùng chủ đề, thể loại nào đó. Ví dụ: Trong trang Hari Đăng Blog này "blogspot" là nhãn của các bài viết về thủ thuật blog; "phan-mem-pc" là nhãn của các phần mềm máy tính,...


Sau đây là cách tạo nhãn

Từ giao diện soạn thảo hoặc chỉnh sửa bài viết như hình dưới, các bạn vẫn viết bài như bình thường. Viết xong, nhìn sang bên phải - ngay dưới cột "Cài đặt bài đăng" có một biểu tượng màu đen và chữ "Nhãn".

- Bấm chuột vào chữ "Nhãn" sẽ có một khung nhỏ hiện ra, đây là nơi các bạn đặt tên cho "Nhãn" của bài viết đang thực hiện.

- Sau khi đã đặt tên cho "Nhãn" của bài viết, bấm vào nút "Hoàn thành" để lưu lại. Bây giờ, một "Nhãn" đã hiển thị với dòng chữ màu xanh, bên dưới khung vừa đặt tên "Nhãn". Các bạn chỉ cần bấm "Xuất bản" là xong.

- Nếu muốn tạo một "Nhãn" khác, thì viết một bài nữa và tiếp tục gắn (đặt tên) cho "Nhãn" mới - lặp lại thao tác như trên.

- Nếu viết một bài nữa và muốn đặt vào nhãn cũ thì chỉ việc bấm vào nhãn cũ đã tạo (hiển thị với chữ màu xanh ngay bên dưới khung đặt tên "Nhãn") rồi bấm "Hoàn thành" là bài viết sẽ được hệ thống tự động chuyển vào "Nhãn" đó. Chỉ cần bấm "Xuất bản" là được.

- Nếu muốn chuyển các bài viết từ nhãn này sang nhãn khác, chỉ cần vào "Chỉnh sửa bài viết" thay tên "Nhãn" bằng tên đã có hoặc tạo "Nhãn" mới và bấm "Hoàn thành" [2] rồi bấm "Xuất bản" [3] hoặc "Cập nhật" [4] là xong việc.


Tạo bảng hiện thị số số bài viết và coment trong blogspot

Tiện ích này có tác dụng làm cho người truy cập thấy được sự phong phú trong blog và kích thích sự tò mò của họ.

Cách tạo tiện ích:

- Đăng nhập vào blog.
- Vào "Bố cục". Trong bảng "Bố cục" bấm "Thêm tiện ích" 
- Trong bảng tiện ích hiện ra, chọn"HTML/Javascript"
- Tại giao diện "Định cấu hình HTML/JavaScript"  - nhập tiêu đề và dán toàn bộ code dưới đây trong khung dưới vào phần "nội dung".

<script style="text/javascript"> function showpostcount(json) { document.write('<left>TỔNG SỐ BÀI VIẾT VÀ COMENT <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b></center>');}</script> <script src="http://haridang.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> <p> <script style="text/javascript"></script> <script style="text/javascript"> function numberOfComments(json) { document.write('<left>TỔNG SỐ COMMENT: <b>' + json.feed.openSearch$totalResults.$t + '</b></center>');}</script> <script src="http://haridang.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

Lưu ý: 

- Thay caocongkien.blogspot.com thành link blog của các bạn.
- Bấm "Lưu"  và dùng chuột kéo thả - di chuyển tiện ích vừa tạo đến vị trí thích hợp nếu cần thiết.
- Bước cuối cùng bấm "Lưu sắp xếp"  để hoàn tất và trở lại trang chủ xem kết quả. 

TẠO SITEMAP CHO BLOGSPOT

Một trang blog với nhiều chuyên mục và bài viết cũng giống như một công sở với nhiều phòng, ban... Vậy người đọc làm thế nào để biết "đường đi, lối lại" trong blog của bạn? 


Giải pháp tối ưu nhất để giải quyết vấn để này là tạo sơ đồ (sitemap) cho blog. Thực tế cho thấy: những người đọc blog có kinh nghiệm thường hay xem sơ đồ blog trước tiên, vì làm như vậy tiết kiệm được rất nhiều thời gian,...


Sơ đồ blog là gì và có tác dụng gì?


- Sơ đồ blog là một tập hợp phân cấp những chuyên mục và tiêu đề các bài viết trong blog, giống như một tấm bản đồ dẫn đường vậy.

- Nó giúp cho người đọc có một cái nhìn tổng thể về trang blog đang truy cập... Nhờ có sơ đồ, người đọc dễ dàng tìm đến các chuyên mục và bài viết chứa những thông tin cần tìm kiếm.

- Sơ đồ có nhiệm vụ "khai báo" với các công cụ tìm kiếm những thông tin chứa trong đó. Như vậy, sẽ giúp cho blog SEO (tối ưu tìm kiếm) tốt hơn. Khi các công cụ tìm kiếm "quét" qua blog, tiêu điểm sẽ là sơ đồ blog. 

Cách tạo sơ đồ trong Blogspot: 


 Đăng ký sơ đồ: 

- Trước tiên, đăng nhập vào tài khoản emai đã đăng ký cho blog cần tạo sơ đồ. 
- Bấm vào link: https://www.google.com/webmasters/tools/ . Bấm vào nút màu đỏ có tiêu đề "Thêm trang web" - một cửa sổ bật ra, bạn nhập link blog cần tạo sơ đồ vào đó. Sau đó bấm "Tiếp tục" (ảnh dưới), lúc này trên màn hình hiển thị: "Trang web của bạn đã được thêm vào tài khoản của bạn.". 
 


- Bấm tiếp "Sơ đồ trang web"  (ảnh dưới).


 

- Tiếp tục bấm "Thêm kiểm tra sơ đồ trang web" . Một cửa sổ tiếp theo hiện ra - dán đoạn code trong khung dưới đây vào khung nhỏ - hiển thị sau phần đuôi link blog của bạn . Cuối cùng bấm "Gửi sơ đồ trang web"  (xem ảnh dưới).

/atom.xml?redirect=false&start-index=1&max-results=500



Tạo trang chứa sơ đồ:

- Đăng nhập vào blog, bấm "Thiết kế" hoặc từ "Trang tổng quan",...
- Bấm chuột vào hình tam giác nhỏ , một cửa sổ thả xuống, bấm tiếp vào "Trang"  sẽ hiện ra bảng điều khiển (xem hình dưới). 
 

  



 - Bấm vào "HTML"  (để chuyển sang chế độ soạn thảo HTML) trong giao diện trang (ảnh trên) và dán vào phần nội dung đoạn mã sau: 

<script src="http://caocongkien.googlecode.com/svn/sitemap-lables.js"></script>
<script src="http://haridang.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

- Thay thế đoạn màu đỏ (http://haridang.blogspot.com) bằng địa chỉ (URL) blog của bạn.
- Bấm "Xuất bản"  để hệ thống cập nhật và trở lại trang chủ xem kết quả.

Chú ý: 
    Nếu ẩn tiêu đề trang sơ đồ đi, thì sau khi hoàn tất việc tạo sơ đồ blog, bạn cần tạo nút "Sơ đồ blog"  ở một vị trí thích hợp rồi chèn link của trang sơ đồ vừa tạo vào. Khi người truy cập bấm vào nút này sẽ hiện ra sơ đồ blog. 
     
Chúc các bạn thành công! 

P/S:
- Có khá nhiều kiểu sơ đồ blog, nhưng kiểu trên là thân thiện với Blogspot nhất và hỗ trợ SEO tốt hơn cả.
- Hiện nay Google thay đổi một số quy định nên cách tạo sơ đồ kiểu cũ không còn thích hợp. Bài viết này đã được tác giả cập nhật thêm những nội dung mới nhất. 

Cách thu gọn bài viết cho blogspot

Bài viết này sẽ chia sẻ với các bạn một thủ thuật tương tự, thủ thuật này đã được tối ưu và thêm vào nút "Xem chi tiết" - làm cho bài viết chuyên nghiệp hơn. Đặc biệt, thủ thuật này có thể áp dụng thành công trên tất cả các template của Blogspot.
  

Cách áp dụng thủ thuật:


1. Đăng nhập vào blog, vào "Thiết kế" - "Trang Tổng quan", - "Mẫu" - "Chỉnh sửa HTML" tìm thẻ(Ctrl + F) ]]></b:skin>

2. Chèn đoạn mã dưới đây vào trước (phía trên) ]]></b:skin>

.readmore { float:right; margin:5px 20px 5px 0px; padding:3px;}
.readmore a{ color:#fff; padding:3px 5px 3px 5px; background:#fc8b33; }
.readmore a:hover{ color:#fff; background:#000ff;}

3. Chèn đoạn mã dưới đây vào trước (phía trên) </head> (xem cách tìm </head>

<script type="text/javascript"> var summaryConf = { showImage: true, imgFloat: 'left', imgWidth: 120, imgHeight: 110, defaultThumb:'http://1.bp.blogspot.com/-A7K0Ugz3jKc/Uf0leijlp0I/AAAAAAAACsQ/w29f6zRMSbA/s1600/no-thumb.jpg', words: 60, wordsNoImg: 80, skip: 0, showHome: true, showLabel: true }; </script> <script type="text/javascript" src="http://caocongkien-blog.googlecode.com/svn/summary.rm.test.js"> </script>  

4. Tìm: <data:post.body/>

5. Thay thế <data:post.body/> (bôi đen <data:post.body/> rồi dán đè lên) bằng đoạn mã trong khung dưới đây:

<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == "index"'> <div class='readmore'><a expr:href='data:post.url'>Xem chi tiết &#187;</a></div> <script type='text/javascript'>summary("<data:post.id/>")</script> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <script type='text/javascript'>summary("<data:post.id/>")</script> </b:if> </b:if>

Lưu ý:Trong template của các bạn có thể có nhiều đoạn <data:post.body/>. Phải thay thế tất cả các đoạn <data:pots.body/> tìm được!

 6. Bấm "Lưu mẫu" và trở lại trang chủ xem kết quả.

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

Hiển thị số người đang online trên blog

Bạn có một trang Blog và muốn biết số người đang truy cập trên blog, hãy làm vài thao tác đơn giản sau đây:


Tạo tiện ích:


1. Đăng nhập vào Blog, vào "Bố cục", chọn "Thêm tiện ích"  (nên chọn ở dưới chân blog hoặc trên cột sidebar cho tiện).


2. Trong bảng tiện ích hiện ra, chọn HTML/Javascript  


3. Tại giao diện "Định cấu hình HTML/JavaScript" (ảnh trên) nhập tiêu đề và dán toàn bộ code trong khung dưới vào phần "nội dung" ở bên dưới.
<script id="_wauey1">var _wau = _wau || []; _wau.push(["small", "uawevhsuy1xd", "ey1"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
Lưu ý:  

- Bấm "Lưu" và định vị lại tiện ích vừa tạo nếu cần thiết. 
- Bước cuối cùng bấm "Lưu sắp xếp" để hoàn tất và trở lại trang chủ xem kết quả.



Mở rộng:

- Để xem người truy cập đang dọc bài viết nào của bạn, chỉ cần bấm vào ô hình chữ nhật nhỏ có số người đang online (hình dưới) trong blog của bạn. 



- Tại đây - trang chủ của tiện ích, nếu bạn muốn thay đổi diện mạo của tiện ích vừa tạo với một màu sắc hay kích thước khác thì bấm vào "Widgets" (trên thanh menu) và chọn đoạn code tương ứng với kích thước và màu sắc bạn thích rồi dán đè lên đoạn code trong tiện ích vừa tạo lúc đầu (bôi đen rồi dán đè lên hoặc xóa đi dán lại), sau đó bấm "Lưu" là được

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

Thay đổi banner hình ảnh cho blog

Banner là một phần rất quan trọng đối với 1 website, Blog,.v.v. Banner thể hiện được mục tiêu và hướng đi của trang web và nó thu hút, lôi cuốn sự chú ý của người xem. Khi người xem truy cập vào 1 địa chỉ web hay Blog , họ thường quan tâm đầu tiên đó là Logo và Banner.



Đối với các website hay Blog, thường có 2 cách để đặt Banner, đó là sử dụng thuộc tính background-image:url trong CSS hoặc thiết lập trên giao diện Web của người quản trị.

Sau đây là cách chỉnh banner bằng cách sửa CSS :
 
- B1: Đăng nhập vào blogger,

- B2: Chọn Trình bày > Mẫu > Chỉnh sửa HTML

- B3: Các bạn kiếm dòng dưới #header-wrapper {

- B4: Thêm

width:940px;
height:200px
margin:0;
background-image:url('#');
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

Chỉnh chiều kích cỡ hình ảnh và thay # bằng link banner.

- B5: Lưu lại thay đổi và xem kết quả :">.



Delete "Showing posts with label blogspot. Show all posts"

Khi các bạn ấn vào 1 nhãn nào đó trong blogspot thì blogger sẽ hiển thị tất cả các bài có cùng nhãn đó. Và trên cùng sẽ có một dòng chữ: "Showing posts with label blogspot. Show all posts" hay "Hiển thị các bài đăng có nhãn XXX. Hiển thị tất cả bài đăng". Bài viết này mình sẽ hướng dẫn cách xóa nó dễ dàng với html :">.

Các bạn thực hiện như sau: 

1. Đăng nhập blog

2. Vào Mẫu =>  Chỉnh sửa  HTML
3. Chèn đọan code sau vào phía trên dòng ]]></b:skin>

.status-msg-wrap{
display:none;
}

4. Lưu mẫu

5. Như vậy là xong.

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

Thêm bộ nút Google +1 , Facebook và Twitter cho Blogger gắn bên trái blog



Để thực hiện thủ thuật bạn làm như sau:

1. Đăng nhập vào Blogger > Phần tử trang > Thệm tiện ích HTML/JavaScrip.

2. Copy đoạn code bên dưới và dán vào tiện ích




<style>#floatingbuttons{
background:#aaa;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));
background:-moz-linear-gradient(top, #f2f2f2, #aaa);
border:1px solid #808080;
float:left;
padding:0 0 3px 0;
position:fixed;
bottom:15%;
left:0;
z-index:10;
border-radius:0 5px 5px 0;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}
#floatingbuttons .floatbutton{
float:left;
clear:both;
margin:5px 4px 0 4px;
}
.addbuttons{
clear:both;
text-align:center;
padding-top:5px;
}
.addbuttons a span.getfloat, .addbuttons a span.sharebuttons{
color:#fff;
background:none;
font-family:arial, sans-serif;
display:block;
font-size:9px;
font-weight:bold;
text-decoration:none;
line-height:11px;
}
.addbuttons a:hover span{
color:#fff;
background:none;
text-decoration:underline;
}
</style>
<br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div></div>

Lưu lại và kiểm tra kết quả :">