3 Mẫu nút Share Chuyên Nghiệp trượt Dọc hai bên cho Blogsport

3 Mẫu  nút Share (Chia sẻ)  trượt Dọc hai bên cho Blogsport

Như các bạn cũng đã biết thì nút Share trên mỗi blog,website hay những bài viết là rất quan trọng .Nó vừa tạo nên sự chuyên nghiệp cho blog ,vừa tạo ra liên kết cho blog quan trọng nhất là để người đọc có thể chia sẻ bài viết một cách nhanh chóng khi họ muốn -Như thế bài viết của ta càng tiếp cận được nhiều độc giả hơn .Hầu hết các Blog ,website đều dùng tiện ích này và chỉ có 2 cách đặt vị trí cho nút Share  : 1.Đặt trực tiếp trong bài viết  2.Nút Share trượt dọc 2 bên blog .
Hôm nay mình sẽ hướng dẫn các bạn tạo nút share trượt dọc 2 bên blog

Xem Thêm :

 Code tạo khung cho các đoạn trích dẫn trong blogsport 

Hướng dẫn tạo khung Comment facebook cho blogsport

Chúng ta hãy bắt đầu thực hiện nhé :
Mình sẽ hướng dẫn các bạn cách đơn giản nhất là chỉ cần chèn đoạn code vào một widget/javascript là ok .

Blog => Bố cục => Thêm Tiện Ích => Html/Javascript  Và sau đó dán đoạn Code dưới đây vào là xong => Lưu Lại

Phong cách nút Share 1 : 

<style type="text/css"> #Share {position:fixed; top:35%; left:0%; background-color:#2AA4CF;padding:2px;z-index:10;border-bottom-right-radius:5px;border-top-right-radius:5px;} #Share .Sharebutton {float:left;clear:both;} </style><div id='Share'> <div style="margin:4px;"> <div class='Sharebutton' id='facebook'> <script src='https://connect.facebook.net/en_US/all.js#xfbml=1'></script> <fb:like layout='box_count' show_faces='false'></fb:like> </div><br /> <div class='Sharebutton' id='google'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div><div class='Sharebutton' id='twitter'> <a class="twitter-share-button" href="https://twitter.com/share" data-count="vertical"> Tweet </a> <script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script> </div></div></div>

Phong cách nút share cho blog  2 :

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script><style>/* Fixed Positioned AddThis Toolbox */ .sharing_box_namkna { position: fixed; top: 20%; right: 0%; border: 3px solid #00EE00; padding: 5px 5px 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #F0FFFF; width: 60px; min-height: 345px; } .sharing_box_namkna .item { width: 50px; margin: 5px 0 5px 0; } .twitter_float iframe { width:55px!important; } </style><!-- SHARING BOX Fixed-Positioned Toolbox --><div class='sharing_box_namkna'><div style='text-align:center; margin-top:5px'><img alt='Share Emphasis' height='46px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqx5zv80MSTYxqGrQepcXAJN9Fnez41O6mI4SHxuIt-xlncEuOHqcrFjAAMYU-DxJqj_zQFt_3lnVxT-X20c1UPd08zudkdfELYIeEq-og6AsU6kEoyX308p4PL9JWMyklZzCwOZioMDI/s1600/obtenir-par-poste-icone-5533-48-+-namkna-blogspot-com.png' width='56px'/></div><!-- TWITTER --><div class='item twitter_float' style='margin-left:3px'><a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a></div><!-- FACEBOOK --><div class='item' style='margin-left:3px'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div><div id='fb-root'></div></div><!-- G+ --><div class='item' style='margin-left:5px'><!-- Place this tag where you want the +1 button to render --><g:plusone size='tall'></g:plusone></div><!-- OTHERSHARE --><div class='item' style='margin-left:5px'><!-- AddThis Button BEGIN --><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter'></a></div><!-- AddThis Button END --></div></div><!-- FAST SHARING SCRIPT --><!-- TWITTER SCRIPT --><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><!-- G+ SCRIPT --><!-- Place this render call where appropriate --><script type='text/javascript'>gapi.plusone.go();</script><!-- STUMBLEUPON SCRIPT --><!-- Place this snippet wherever appropriate --><script type='text/javascript'> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script><script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script><!-- AddThis Button END -->

Phong cách nút share cho blog 3 :

<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:30%;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:#000;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> <div id='floatingbuttons' title="Share this post!"><script src="https://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 class="addbuttons"><a href="http://www.windows2it.com/2015/09/them-nut-share-truot-doc-hai-ben-blogspot-blogger.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div></div>

Tùy Chỉnh : 

   Các bạn có thể tùy chỉnh cho nút Share bên trái hay bên phải Blog chỉ cần tìm và thay đổi chỉ số : right (phải ) left (trái ) là được .

Như thế Là Xong rồi đó .Các bạn hãy áp dụng cho blog của chính mình nhé.
Chúc các bạn thành công .
Nếu thấy hay thì hãy chia sẻ với mọi người nhé các bạn .

Read More

Hướng Dẫn Tạo Hiệu Ứng Xoay 360 Độ Cho Blogsport

Hướng Dẫn Tạo Hiệu Ứng Xoay 360 Độ Cho Blogsport 

Chào mừng  các bạn ghé thăn Blog Kiến thức seo .Hãy cùng tôi khám phá  những điều hay và thú vị của blog nhé .Hôm nay tôi  xin giới thiệu với các bạn một hiệu ứng khá hay cho blogsport đó hiệu ứng xoay 360 độ cho trang của blog .Nếu các bạn để ý thì sẽ thấy mình đã áp dụng hiệu ứng này cho bài viết này đấy (Nếu chưa thấy thì các bạn có thể f5 lại để xem nhé ) .Với hiệu ứng này Blog của bạn sẽ trở nên thú vị hơn và khách truy cập sẽ cảm thấy thích thú tránh sự nhàm chán  .


Xem thêm :

• Code tạo khung cho các đoạn trích dẫn hay code 
• Hướng dẫn chèn khung comment facebook vào blogsport
• Tạo hiệu ứng trỏ chuột cực đẹp cho blogsport

Hãy cùng Kiến thức seo thực hiện nhé :

Cách 1 : Chèn trực tiếp vào Template

Các bạn vào Blog => Mẫu => Chỉnh sửa HTML  Sau đó nhấn tổ hợp Ctrl F tìm thẻ </b:skin>
Sau đó Dán đoạn Code phía dưới đây vào trên thẻ </b:skin> Cuối cùng là Lưu Mẫu
                <Với cách này thì các bạn áp dụng cho tất cả các trang trong blog >

@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes roll { 100% { -o-transform: rotate(360deg); } } @-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } } body{ -moz-animation-name: roll; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 2s; -o-animation-iteration-count: 2; -webkit-animation-name: roll; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; }

Cách 2 : Tùy ý bạn có thể tích hợp hiệu ứng này cho 1 bài viết bằng cách dán đoạn code dưới đây vào phần HTML của bài viết (Hoắc dán vào 1 tiện ích HTML/Javascrip của blog )

<style> @-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes roll { 100% { -o-transform: rotate(360deg); } } @-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } } body{ -moz-animation-name: roll; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 2s; -o-animation-iteration-count: 2; -webkit-animation-name: roll; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } </style>

Chú Ý : Vì đoạn Code là Css 3 nên một số trình duyệt như IE 5,6,7 sẽ không hoạt động .Hoạt động tốt trên các trình duyệt Chroom ,Cococ,Firefox,...
Hiệu ứng này hoàn toàn không ảnh hưởng tới tốc độ load trang nhé .Nên các bạn yên tâm mà sử dụng

Tùy chỉnh  :
          360 deg : là góc xoay của trang ,như ở trên là 360độ ,Nếu chỉnh phải chỉnh cả 3 đoạn vì nó tương thích với các trình duyệt khác nhau .
          2s là thời gian Hiệu ứng xảy ra : Thời gian càng lớn thì hiệu ứng càng chậm
Hãy tùy chỉnh theo ý thích nhé .

Chúc các bạn thành công .
Nếu thấy bài viết hay thì chia sẻ với mọi người nhé .

Read More

Tạo Hiệu Ứng Khi Tải Trang Cho Blogsport

Tạo Hiệu Ứng Khi Tải Trang Cho Blogsport

Xin chào các bạn .Chào mừng các bạn đến với Blog Kiến Thức Seo Như các bạn cũng đã biết thì có rất nhiều thủ thuật hay (những đoạn code ) hay cho blog làm tăng tính thẩm mĩ và sự tương tác giữa người xem với blog .Tùy theo sở thích của mỗi quản trị viên sẽ có sự thay đổi sao cho phù hợp nhất với blog của mình với mong muốn Blog hay Website của mình sẽ có cái nhìn thân thiện nhất với người đọc .Với hiệu Ứng tải trang (Load Page ) mà mình muốn giới thiệu với các bạn ở giưới đây thì Blog hay website của bạn sẽ bắt mắt hơn giảm bớt sự nhàm chán cho người xem .


Xem thêm :

•  Chèn video từ Youtube vào Blog trong khung máy tính kết hợp với Responsive 
• Tạo điểm nhấn riêng biệt cho nhận xét của tác giả 
• Hướng Dẫn tạo sitemap cho blogsport       

Demo cho các bạn (Khi tải trang sẽ xuất hiện xoáy màu đỏ )

Chúng ta hãy cùng bắt đầu thực hiện tạo hiệu ứng tải trang nhé : 

Vào Blog => Mẫu => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl F tìm   thẻ </body>  Sau đó Copy đoạn Code phía dưới đây vào trên thẻ </body> Và Lưu Mẫu 

<style>#page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUwg_hIYwR25YSjKIgcAPwHHJ82OPxCjBLwyDNlGkIp59eBKCVvvDRx8UCLWWJ28-xXQwT9i04O3SOy0ei52Clzof4cPi4AYIsRTzhITYVCzQJHm_Lm_p7d1BikJ4YTI8keLWPkgsINuY/s1600/loading.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style><script type='text/javascript'>//<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]></script>

Tùy Chỉnh : 

background:#000  :Màu nền khi tải trang
Các thông số : fadeIn(1000) : Thời gian hiệu ứng đậm dần lên và xuất hiện
                        delay(6000)  : Thời gian hiệu ứng duy trì
                        fadeOut(1000) : Thời gian hiệu ứng mờ dần và biến mất
Thay link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUwg_hIYwR25YSjKIgcAPwHHJ82OPxCjBLwyDNlGkIp59eBKCVvvDRx8UCLWWJ28-xXQwT9i04O3SOy0ei52Clzof4cPi4AYIsRTzhITYVCzQJHm_Lm_p7d1BikJ4YTI8keLWPkgsINuY/s1600/loading.gif    
Bằng link hình ảnh mà bạn thích .

Mình có một số mẫu ảnh cho các bạn .Nếu thích thì các bạn hãy áp dụng nhé : 

Các bạn có thể thay đổi các thông số theo sở thích sao cho phù hợp với blog của các bạn .
Như thể là xong các bạn hãy Test và tận hưởng thành quả nhé .Chúc các bạn thành công .Nếu thấy bài viết hay thì hãy chia sẻ cho mọi người cùng biết nhé .
Có thắc mắc gì hãy để lại comment nhé .

Read More

Chèn video từ Youtube vào Blog trong khung Laptop kết hợp với Responsive

Chèn video từ Youtube vào Blog trong khung Laptop kết hợp với Responsive

Chắc hẳn các bạn làm blog hay web đều đã bết nhiều thủ thuật hay cho blog và trong đó là nhúng video từ youtube vào blog hay website của bạn theo cách thông thường là lấy Mã nhúng cuả Youtube copy vào HTML của bài viết .Nhưng làm theo cách  đó thì nhìn video khá đơn điệu và nó không có chức năng Responsive (tương thích với các kích cỡ màn hình khác nhau ) Điều đó khiến cho người sử dụng thấy rất khó chịu khi một video tương thích với màn hình máy tính khí hiển thị trên điện thoại sẽ bị khuất hình .Hôm nay mình sẽ giới thiệu với các bạn một cách chèn video vào blogsport vừa đẹp lại vừa có chức năng Responsive .


Xem Thêm :

• Hướng dẫn tạo Playlist nhạc cho blogsport
•  Hướng dẫn tạo nút G+ ở góc phải blog
• Hướng dẫn tạo điểm nhấn cho comment của tác giả 

Chúng ta hãy cùng bắt đầu nhé :

Bước 1 : Các bạn vào Blog >> Mẫu >>Chỉnh sửa HTML >> Ctrl F  tìm thẻ </b:skin> .Sau đó dán đoạn code phía dưới đây vào trên thẻ </b:skin> và Lưu Mẫu

.tb_outer_wrap { width: 100%; max-width: 650px; margin: 15px auto; } .tb_video_wrap_macbook { position: relative; padding-bottom: 43%; padding-top: 0; height: 0; overflow: hidden; -webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje9EnjjAml1FDxlIEuIymLIaPlCyF4dTET4BWTQg28YGWMmtoeuCm15xNKSzkBg6o-fxBsnHGqTIxTzoiBtNN2XPSa6p429egbsISYCAhbhl3ILSpl1GKMkwvjsspYrLmW4XkxEP5MlAk/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje9EnjjAml1FDxlIEuIymLIaPlCyF4dTET4BWTQg28YGWMmtoeuCm15xNKSzkBg6o-fxBsnHGqTIxTzoiBtNN2XPSa6p429egbsISYCAhbhl3ILSpl1GKMkwvjsspYrLmW4XkxEP5MlAk/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje9EnjjAml1FDxlIEuIymLIaPlCyF4dTET4BWTQg28YGWMmtoeuCm15xNKSzkBg6o-fxBsnHGqTIxTzoiBtNN2XPSa6p429egbsISYCAhbhl3ILSpl1GKMkwvjsspYrLmW4XkxEP5MlAk/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje9EnjjAml1FDxlIEuIymLIaPlCyF4dTET4BWTQg28YGWMmtoeuCm15xNKSzkBg6o-fxBsnHGqTIxTzoiBtNN2XPSa6p429egbsISYCAhbhl3ILSpl1GKMkwvjsspYrLmW4XkxEP5MlAk/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-color: rgba(0, 0, 0, 0); border-width: 27px 76px 55px 76px; border-style: inset; } .tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed { position: absolute; top: 0; width: 100%; height: 100%; background-color: #ddd; } @media (max-width: 500px) { .tb_video_wrap_macbook { border-width: 20px 62px 40px 62px; } @media all and (max-width: 400px) { .tb_video_wrap_macbook { border: none !important; } }

Bước 2 : Nhúng video của bạn từ Youtube cào Blog bằng code dưới đây :

<div class="tb_outer_wrap"> <div class="tb_video_wrap_macbook"><iframe width="560" height="315" src="https://www.youtube.com/embed/6bnUdWKrfd4?rel=0&theme=dark&controls=1&showinfo=0&autohide=0" frameborder="0" allowfullscreen=""></iframe> </div></div>

Thay id : 6bnUdWKrfd4 bằng Id video của bạn nhé < Id này trong bước 2 >
Các bạn có thể thay đổi kích thước khung tùy ý của bạn ,khi đổi kích thước của khung thì bạn cũng phải đổi kích thước cảu video sao cho phù hợp và khớp với khung nhé

Như thế là xong rồi đấy .
Các bạn thấy khung hình này thế nào rất đẹp phải không .
Thấy hay thì hãy share cho mọi người nhé
Có thắc mắc gì bạn hãy để lại comment nhé
Chúc cá bạn thành công.

Demo cho các bạn :

Read More

Hướng Dẫn Tạo Điểm Nhấn Riêng Biệt Cho Nhận Xét Của Tác Giả

Hướng Dẫn Tạo Điểm Nhấn Riêng Biệt Cho Nhận Xét Của Tác Giả

Blog giờ đây đã trở nên rất phổ biến được rất nhiều bạn trẻ sử dụng vì nó hoàn toàn free và thân thiện <vì nó là con của Google nên trong quá trình seo cũng được ưu ái hơn > .Có rất nhiều tiện ích hay và.thủ thuật hay cho blogsport mà mình muốn chia sẻ với các bạn .Một trong số đó hôm nay mình sẽ chia sẻ  với các bạn đó là tạo điểm nhấn riêng biệt cho tác giả blog .

Điểm nhấn riêng biệt cho tác giả hay theo thuật ngữ của dân IT là "Nhận Xét của Quản Trị viên " là một cách giúp cho người đọc có thể nhận biết ngay ( Phân Biệt ) được admin-Người quản trị Blog nhanh nhất và nó còn tạo nên phong cách riêng cho mỗi quản trị viên .

Demo :

Xem thêm : 

• Thêm biểu tượng cảm xúc giống Facebook cho blog
• Hướng Dẫn tạo Sitemap cho blogsport
• Hướng dẫn chèn khung comment vào blog 

Chúng Ta bắt đầu thực hiện nhé :

Đầu tiên các bạn truy cập Blog >> Mẫu >> Chỉnh sửa HTML >> Ctrl F tìm </head>  và sau đó chèn đoạn Code phía dưới vào trên thẻ  </head> Và Lưu Mẫu 

<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* windows2it.com */ .comment-form { overflow:hidden; } .comments h3 { line-height:normal; text-transform:uppercase; color:#333; font-weight:bold; margin:0 0 20px 0; font-size:14px; padding:0 0 0 0; } h4#comment-post-message { display:none; margin:0 0 0 0; } .comments{ clear:both; margin-top:10px; margin-bottom:0 } .comments .comments-content{ font-size:13px; margin-bottom:8px } .comments .comments-content .comment-thread ol{ text-align:left; margin:13px 0; padding:0 } .comments .avatar-image-container { background:#fff; border:1px solid #DDD; overflow:hidden; padding:6px; } .comments .comment-block{ position:relative; background:#fff; padding:15px; margin-left:60px; border-left:3px solid #ddd; border-top:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD; } .comments .comment-block:before { content:""; width:0px; height:0px; position:absolute; right:100%; top:14px; border-width:10px; border-style:solid; border-color:transparent #DDD transparent transparent; display:block; } .comments .comments-content .comment-replies{ margin:8px 0; margin-left:60px } .comments .comments-content .comment-thread:empty{ display:none } .comments .comment-replybox-single { background:#f0f0f0; padding:0; margin:8px 0; margin-left:60px } .comments .comment-replybox-thread { background:#f0f0f0; margin:8px 0 0 0; padding:0; } .comments .comments-content .comment{ margin-bottom:6px; padding:0 } .comments .comments-content .comment:first-child { padding:0; margin:0 } .comments .comments-content .comment:last-child { padding:0; margin:0 } .comments .comment-thread.inline-thread .comment, .comments .comment-thread.inline-thread .comment:last-child { margin:0px 0px 5px 30% } .comment .comment-thread.inline-thread .comment:nth-child(6) { margin:0px 0px 5px 25%; } .comment .comment-thread.inline-thread .comment:nth-child(5) { margin:0px 0px 5px 20%; } .comment .comment-thread.inline-thread .comment:nth-child(4) { margin:0px 0px 5px 15%; } .comment .comment-thread.inline-thread .comment:nth-child(3) { margin:0px 0px 5px 10%; } .comment .comment-thread.inline-thread .comment:nth-child(2) { margin:0px 0px 5px 5%; } .comment .comment-thread.inline-thread .comment:nth-child(1) { margin:0px 0px 5px 0; } .comments .comments-content .comment-thread{ margin:0; padding:0 } .comments .comments-content .inline-thread{ background:#fff; border:1px solid #DDD; padding:15px; margin:0 } .comments .comments-content .icon.blog-author { display:inline; } .comments .comments-content .icon.blog-author:after { content: "Admin"; background: #FC5555; color: #fff; font-size: 11px; padding: 2px 5px; } .comment-header { text-transform:uppercase; font-size:12px; } .comments .comments-content .datetime { margin-left: 6px; } .comments .comments-content .datetime a { color:#888; } .comments .comment .comment-actions a { display:inline-block; color:#333; font-weight:bold; font-size:10px; line-height:15px; margin:4px 8px 0 0; } .comments .continue a { color:#333; display:inline-block; font-size:10px; } .comments .comment .comment-actions a:hover, .comments .continue a:hover{ text-decoration:underline; } .pesan-komentar { } .pesan-komentar p { line-height:normal; margin:0 0; } .pesan-komentar:before { } .fotleft{float:left} .fotright{float:right;text-align:right;} </style> </b:if>

Các bạn lưu Ý : Đoạn Code : <Đoạn code này mình đã để cách dòng ở giữa Đoạn Code trên >

{content: &quot;Admin&quot;;   Các bạn có thể thay chữ Admin bằng chữ gì mà bạn thích
background: #FC5555;           Màu nền của chữ Admin 
color: #fff;        Mã của chữ Admin 
font-size: 11px;     Độ lớn của chữ Admin 
padding: 2px 5px;}    Lần lượt là chiều cao và chiều rộng của màu nền 

Các bạn có thể thay đổi theo ý các bạn

Như thế là xong .Hãy Test và kiểm tra thành quả nhé .
Có thắc mắc gì các bạn hãy để lain comment nhé.
Thấy hay thì chia sẻ với mọi người nhé và hãy thăm blog của mình để xem nhiều bài viết hay nhé.
Chúc các bạn thành công
Cảm ơn các bạn
Tìm Kiếm : Thủ Thuật Blog ,seo blog ,code hay cho blog .

Read More

Thêm Biểu Tượng Cảm Xúc Giống Facebook cho blog

Thêm Biểu Tượng Cảm Xúc Giống Facebook cho blogsport

Những trạng thái cảm xúc được thể hiện sinh động qua các Icon 

HIện nay facebook mới được cập nhập thêm chức năng hiển thị cảm xúc của người xem về các bài đăng mà họ đọc được ,Không chỉ đơn thuần là có nút LIKE như ngày trước giờ đây mọi người có thể thể hiện nhiều trạng thái cảm xúc khác nhau như Buồn cười ,vui vẻ ,Yêu thích ,ngạc nhiên,buồn ,Tức giận ....Làm cho người sử dụng trở nên thích thú hơn tránh cảm giác nhàm chán .Các bạn có muốn mọi người cũng có thể thể hiện những cảm xúc khác nhau như vậy về các bài viết trên Blog,website của mình không ? - Nó tăng thẩm mĩ và sự thích thú cho người đọc khi ghé thăm qua blog ,web của bạn đấy tạo nên sự tương tác giữa người xem và bài đăng,

Hôm nay mình sẽ hướng dẫn các bạn thêm biểu tượng cảm xúc vào Blog ,Website.

Code hay cho blogsport

DEMO ICON 

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

Bước 1 : Các bạn truy cập vào trang WWW.VICOMi.COM   Và Chọn GET IT NOW !

                        Giao Diện Trang Chủ VICOMI

Bước 2 : Các bạn điền đầy đủ thông tin vào các ô                                                                             

    Sau đó chọn Proceed to step 2

Bước 3 : Chon Icon mà bạn thích  Sau đó chọn DONE và họ sẽ cho ta Code : Bạn chỉ cần copy code và đặ vào nơi mà bạn muốn hiển thị .

Một Số Mẫu Icon mà Vicomi cung cấp : Khá đa dạng : 

Code mẫu (Các bạn có thể dùng luôn code này )

Các bạn chỉ cần đặt Code vào nơi mà bạn muốn hiển thị những biểu tượng cảm xúc này

<div id="vc-feelback-main" data-access-token="cf61a3762a9b4c6809734e28da63a2ba" data-display-type="4"></div><script> (function() { var v = document.createElement('script'); v.async = true; v.src = "http://assets-prod.vicomi.com/vicomi.js"; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(v, s); })(); </script>

Các bạn thấy sao ? các mẫu icon khá đẹp phải không ? 

Các bạn hãy lựa chọn cho mình những mẫu Icon mình thích và áp dụng ngay cho Blog ,web của mình nhé .Và còn rất nhiều code hay tối ưu cho blog của bạn như Thêm khung cho các đoạn trích dẫn < giống như khung mình chèn code phía trên > Hay  Tạo Playlist nhạc cho blog  Nó sẽ làm cho blog của bạn trở nên thân thiện và đẹp hơn .

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

Có thắc mắc gì hãy để lại comment nhé .

                        

Read More

Hướng dẫn tạo nút Follow,G+ góc phải Blog , Website

Hướng dẫn tạo nút Follow, G+ ở góc phải Cho Blogsport, Web,..

Thủ Thuật Blogsport

Blog giờ đây đã trở nên phổ biến và được nhiều người sử dụng để kinh doanh.Cùng với đó có vô vàn những tiện ích hay cho blogsport trên mạng như cho blog từ đơn điệu trở nên chuyên nghiệp hơn rất nhiều Và Hôm nay mình xin Chia sẻ với các bạn code cho blog ,code tạo nút follow đẹp cho blog,website ....tăng tính thẩm mĩ ,tiện ích cho blog,website .

DEMO : Tạo nút follow < code blog hay >

Chúng ta hãy cùng tạo nút Follow,+,Facebook góc phải Blog

Bước 1 : Các bạn thêm đoạn code dưới đây vào trước thẻ đóng ]]></b:skin>

Ai biết về CSS thì có thể tự mình sửa lại theo ý bạn nhé.

.social-buttons{position:fixed;bottom:25%;width:45px;z-index:9999} .button-left{left:0} .button-right{right:0} .social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#e72828;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBSObu053aileHSy5YFol8IL94spxLru2R47Ry7Wty2rzOwhRHOw0XNxUmo4TfdmDjswbU4PzEsJxhQpZSXPNzMIN7Ll91WgPN-tYwHzPgwOqEPuqMG5Y0rMAhr3Qf2I2vmHVdicLgpcWp/s1600/mas-icons.png)} .button-left #facebook-btn span{background-position:right 10px} .button-left #twitter-btn span{background-position:right -35px} .button-left #google-btn span{background-position:right -127px} .button-left #rss-btn span{background-position:right -80px} .button-right #facebook-btn span{background-position:12px 10px} .button-right #twitter-btn span{background-position:11px -35px} .button-right #google-btn span{background-position:10px -127px} .button-right #rss-btn span{background-position:11px -80px} .social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998} .social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2} .social-buttons #google-btn:hover .social-icon{background-color:#DB4A39} .social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F} .social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638} .social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B} .social-buttons a:hover .social-text{display:block} .button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px} .button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0} .button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px} .button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px} .social-buttons .social-text{color:#FFF} .button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px} .button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}

Bước 2 :Thêm đoạn code dưới đây vào phía dưới thẻ   ]]></b:skin>

Bạn chú ý : Nếu code blog của bạn có đoạn code màu đỏ như sau :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
 <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>  
<script>

Thì các bạn xóa đi nhé Vì trong đoạn code dưới đã có rồi tránh việc trùng lặp dẫn đến việc không thành công .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/> <script> $(window).load(function(){ $('.social-buttons .social-icon').mouseenter(function(){ $(this).stop(); $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){}); }); $('.social-buttons .social-icon').mouseleave(function(){ $(this).stop(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); }); </script>

Bước 3 : Thêm đoạn code ở khung phía dưới vào trước thẻ </body>

<!-- share social --><div class='social-buttons button-right hidden-phone hidden-tablet'><a class='itemsocial' href='#' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Facebook</span></span></a><a class='itemsocial' href='#' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Twitter</span></span></a><a class='itemsocial' href='#' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Google</span></span></a><a class='itemsocial' href='#' id='pinterest-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Pinterest</span></span></a><a class='itemsocial' href='#' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Youtube</span></span></a><a class='itemsocial' href='#' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow RSS</span></span></a></div>

Như vậy là xong các bạn hãy lưu lại và ra xem thành quả nhé .
Chúc các bạn thành công .
Và còn rất nhiều thủ thuật hay khác cho blogsport như Cách Chèn Thêm Khung Comment Facebook Vào Blog hay Tạo hiệu ứng trỏ chuột Cực đẹp cho Blog Các bạn hãy tự khám phá nhé .
Key: Thủ thuật blog,kiến thức seo,code hay cho blog 

Read More

Top 3 Website thiết kế Logo online đẹp và miễn phí

Top 3 Website thiết kế Logo online đẹp và miễn phí 

1.COOLTEXT

Đầu tiên phải kể tới cooltext ,website cho phép bạn tạo ra logo trực tuyến một cách nhanh chóng và hoàn toàn free .WEB cung cấp cho bạn rất nhiều hiệu ứng và các phông chữ 3D tuyệt đẹp người dùng có thể thoải mái sáng tạo logo với phong cách riêng cho bản thân .Dễ sử dụng và giao diện thân thiện là những gì bạn sẽ cảm nhận được khi sử dụng cooltext .

Để lưu lại sản phẩm thì bạn có thể đăng kí một tài khoản miễn phí ngay trên WEBSITE

Dưới đây là một số mẫu Logo của COOLTEXT

2.FLAMINGTEXT

Tiếp theo là flamingtext .Về cách sử dụng thì website này không có gì khác nhiều so với cooltext ở trên  cho nên việc sử dụng của bạn cũng trở nên rất  đơn giản và dễ dàng .VỚi kho logo mẫu vô cùng lớn bạn có thể thoải mái lựa chọn cho mình những mẫu phù hợp để sáng tạo nên những logo độc và lạ cho bản thân .

Hãy đăng kí một tài khoản online để sử dụng vì nó hoàn toàn free 

Hãy tự trải nghiệm nhé 

Một số mẫu logo : 

3.LOGOEASE 

Cuối cùng là Logoease. So với 2 website trước thì website này có phần phức tạp hơn một chút nhưng đến với logoease  thì bạn sẽ được trải nghiệm nhiều tính năng thú vị hơn .ĐIều đặc biệt là bạn có thể chèn hình ảnh vào logo hay các hình khối mà website cung cấp sẵn .Bạn có thể tạo ra những logo rất độc và lạ theo cá tính .

Hãy sử dụng và cảm nhận nhé :

Đó là 3 website tạo logo online mà mình muốn giới thiệu cho các bạn .

Mình đã sử dụng và thấy rất thú vị .

Các bạn hãy sử dụng và cảm nhận nhé .

Read More

Hướng dẫn Tạo playlist nhạc cho Blogspot

Tạo playlist nhạc cho Blogspot

Bạn muốn tạo một danh sách nhạc hay và muốn chia sẻ trên blog của mình cho mọi người cùng thưởng thức và làm cho blog bạn thú vị hơn .Bây giờ mình sẽ hướng dẫn các bạn tạo một playlist nhạc cực đẹp cho blog .Đây là một Flash Mp3 player dùng file xml tạo list nhạc :

DEMO : 

Các bạn thấy nó khá đẹp phải  không ?

 Để tạo playlist nhạc các bạn làm như sau :

Bước 1 : Các bạn download Mp3 Flash Player TẠI ĐÂY: 

hoặc truy cập link
" https://docs.google.com/file/d/0B3dG7nf_AK5mMjlBZjdsMDBKOG8/ "

Bước 2 :  2File  player.swf + playlist.xml sẽ xuất hiện sau khi các bạn giải nén 

Muốn thêm nhạc vào playlist thì  ta sửa file playlist.xml bằng Notepad >> trong file xml này ta sẽ thấy các đoạn code có dạng :

<song location = "URL nhạc " 
         cover = "URL ảnh hiển thị " 
         title = "Tên  bài hát"/>

Trong đó:

• URL bài nhạc: không phải link nhạc từ các trang zingmp3 và nhaccuatui nhé Nếu chưa có link trực tiếp hãy upload file nhạc của bạn lên Google Drive để lấy link nhạc.
• URL ảnh đại diện : ảnh đại diện của bài hát Kích thước ảnh  phải là 150x150 pixel.
• Tựa đề bài hát : Đó là  tên của bài hát sẽ hiển thị trên trình phát nhạc của bạn.Ngôn ngữ tùy bạn chọn
• Muốn thêm bao nhiêu bài hát cũng được bạn chỉ cần chèn thêm đoạn mã ở trên là ok 
• Sau đó các bạn save lại.

Bước 3: Bạn phài upload 2 file này lên bộ lưu trữ nào đó mà có hỗ trợ direct link. Ở đây mình dùng  GOOGLE DRIVE.  Sau khi upload lên google drive bạn hãy :

1- Đăng nhập (login) vào Blog
2- Bạn Chọn Bố cục
3-Bạn Chọn Thêm tiện ích => Chọn HTML/Javarscipt sau đó  dán đoạn code bên dưới vào.

<object data="player.swf?autostart=true&amp;playlist=playlist.xml" height="26" type="application/x-shockwave-flash" width="48" wmode="transparent"><param name="movie" value="player.swf?autostart=true&playlist=playlist.xml"/></object>

Trong đó:

• Thay: playlist.xml bằng link của file danh sách nhạc xml mà các bạn đã tạo ra  và upload ở bước 3
• Thay player.swf thành link flash mà bạn đã upload ở bước trên.
• Height="26" là chiều cao của trình phát nhạc.
• Width="48" là chiều rộng của trình phát nhạc.
• autostart=true Là tự động chơi nhạc khi khách truy cập trang của bạn.Bạn không muốn tự chơi nhạc thì hãy sửa true thành false.

Đoạn code trên bạn tạo thành bài đăng cũng được

Như thế là xong Các bước  tạo playlist nhạc cho blog

HÃy xem kết quả -Thật tuyệt phải không ?

Read More

Code tạo khung cho các đoạn trích dẫn ,ghi chú ,code ...cho blog

Hướng dẫn tạo khung cho các đoạn trích dẫn, ghi chú,code cho blogspot

Khi viết blog sẽ có những điều chú ý ,trích dẫn hay những đoạn code mà bạn muốn chia sẻ để người đọc có thể thấy nội dung đó một cách rõ ràng không rối mắt thì bạn cần tạo khung cho nó .Việc tạo khung không chỉ để người đọc thấy nội dung cần tìm nhanh nhất nó còn tạo nên vẻ đẹp, vẻ chuyên nghiệp cho trang của bạn .Từ đó nó sẽ quyết định việc người đọc có muốn đọc bài viết của bạn hay không .

Dưới đây mình sẽ hướng dẫn các bạn tạo khung :

Khung mẫu :
Đây là khung mẫu

Để tạo khung trên các bạn chỉ cần tạo bài viết mới >>HTML >>>copy đoạn Code dưới đây vào :

<form name="MyTextBoxForm">
<input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all" />
<textarea cols="60" name="MyTextBox" rows="4" style="background: rgb(238, 238, 238); border: 1px dashed rgb(160, 196, 234); color: #464646; height: 68px; margin: 2px; width: 662px;" wrap="on">
Đây là nội dung hiển thị 
</textarea> </form>


Một số thông số của khung :
<Các bạn thay đổi cho phù hợp >

• Cols : Là chiều dài của khung
• Rows : Là số hàng khung hiển thị
• Border : Độ dày đường viền khung
• Wrap : Cho phép thanh cuộn nếu nội dung quá dài so với số hàng của khung         

            - On : Cuộn theo chiều lên xuống        
            - Off : Cuộn trái - phải

Như thế là xong .Hãy áp dụng cho blog để tạo nên bài viết đẹp và chuẩn nhé .
Chúc các bạn thành công !!!

Read More

Hướng dẫn tạo Sitemap cho blogspot

Hướng dẫn tạo sitemap cho blog 

Tạo sitemap là bước khá quan trọng để google có thể index bài viết của bạn nhanh nhất -điều này cực cần thiết cho việc seo blog của bạn .Vậy tại sao các bạn không thực hiện ngay bây giờ .

Có thể các bạn đã biết

Blogspot Có 2 Dạng Sitemap, 

Thứ Nhất Là Loại Sitemap Dùng Để Submit Lên Google Webmaster Tools (Sitemap Dành Cho Googlebots), cái này làm cho bot của google có thể tìm ra blog của bạn 

Thứ Hai Là Loại Sitemap.Html Dành Cho Người Dùng.

Để Tạo Sitemap Cho Googlebots, Bạn Chỉ Cần Vào Google Webmaster Tools
Làm theo các bước

 B1. Đăng nhập vào Google Webmaster Tools với tài khoản Google của bạn.

 B2. Tại tab bên trái bảng điều khiển >=> Tối ưu hóa (hoặc thu thập dữ liệu) >=> Sơ đồ trang web (Xem hình dưới) để cài site map.

 B3.Bấm nút Thêm/Kiểm tra sơ đồ trang web góc trái (nút màu đỏ)

 B4.Một của sổ Popup xuất hiện bạn dán đoạn code lấy theo RSS của Google vào:

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

Sau đó bấm chọn gửi sơ đồ trang web

Như thế là bạn đã tạo sitemap blogspot cho google xong rồi
Các bạn hãy tạo 1 trang sơ đồ thân thiên :
Đề làm được điều đó các bạn hãy tạo một trang mới trong Blog của mình và đặt cho nó một cái tên như sitemap hay sơ đồ trang....
Sau đó các bạn chuyển sang chế độ HTML và chèn đoạn code :

<script src='https://my-server-film.googlecode.com/files/tohaitrieu.net-sitemap.js'> </script> <script style='text/javascript'> var numposts = 999; var showpostthumbnails = true; var displayseparator = true; </script> <script src="http://kienthucseoo.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>

Thay http://kienthucseoo.blogspot.com/ bằng link trang web của bạn



Lưu lại và kiểm tra kết quả.
Các bạn hãy chờ sau vài h bài đăng của các bạn sẽ được index
Hãy áp dụng ngay để tối ưu seo cho blog của bạn

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

Read More

Hướng dẫn chèn khung comment facebook vào blog

Hướng Dẫn Tạo Comment Facebook Cho Blogspot

Chèn khung comment vào Blogspot

Facebook là cộng đồng mạng lớn nhất thế giới với hàng tỉ tài khoản sống 

Để tạo nên sự chuyên nghiệp và tiện ích cho blog mình xin giới thiệu với các bạn cách chèn khung comment facebook vào blog :

Như vậy  thì khách truy cập có thể để lại nhận xét[Cảm nhận về bài viết ] để ta biết và phát triển blog hơn 

Comment của khách cũng là một cách giúp ta seo blog ....Thể hiện sự quan tâm của mọi người đến blog .

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

Bước 1: Các bạn vào Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

Bước 2: Ctrl + F tìm tới thẻ đóng </head> và sao chép code dưới đây ngay bên trên nó:

 <script type='text/javascript'>

//<![CDATA[

var purl= location.href;

var fb_href = purl.substring(0,purl.indexOf(".html")+5);

var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="650"></div>';

//]]>

</script>

Trong đó:

data-num-post="5":          đây chính là số bình luận hiển thị ra

width="650":                    đây là độ rộng của khung comment.Các bạn thay đổi tùy ý 

Bước 3: Bạn tìm tới <body> và dán đoạn code dưới đây ngay dưới nó:

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bước 4: Bạn tìm tới đoạn: <b:include data='post' name='post'/> và dán đoạn code dưới đây ngay bên dưới nó"

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

Bước 5: Lưu mẫu lại và xem kết quả

Note: Bạn hoàn toàn có thể tìm với vị trí mà bạn muốn để comment Facebook theo ý bạn bằng cách tìm tới khu vực <DIV> của nó và dán vào.
Hãy tạo sự thân thiện cho blog của bạn .
Bạn có muốn tạo hiệu ửng trỏ chuột đẹp cho blog 
Xem thêm : Thủ thuật hay cho blog 
Chúc các bạn thành công...!!!

Read More

Tạo hiệu ứng trỏ chuột cực đẹp cho blog

Hướng dẫn tạo hiệu ứng trỏ chuột cực đẹp 

Để giúp cho blog trở lên sinh động ,đẹp hơn cùng với đó để thỏa mãn sự tò mò  với những đoạn code thú vị của các bạn Hôm nay mình xin giới thiệu với các bạn một số hiệu ứng trỏ chuột cực đẹp .

Kho hiệu ứng trỏ chuột đẹp 

HÃy lựa chọn cho mình một mẫu phù hợp nhé .

Hiệu ứng Bồ Câu Bay

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 1500; POSITION: absolute; TOP: 0; HEIGHT: 1000">
<embed src=" http://www.geocities.jp/nhacnen_loit...4/bocaubay.swf " width="700" height="1000" wmode="transparent" align="left">
</DIV>

Hiệu ứng 3 Ngôi Sao

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/3ngoisao.swf" width="750" height="922" wmode="transparent" align="right">
</DIV>

Hiệu ứng Bướm Bay Và Pháo Hoa

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 1500; POSITION: absolute; TOP: 0; HEIGHT: 1000">
<embed src=" http://www.geocities.jp/nhacnen_loit...yvaphaohoa.swf " width="700" height="1000" wmode="transparent" align="left">
</DIV>

Hiệu ứng Chòm Sao Sáng

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">

<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/sao.swf" width="750" height="922" wmode="transparent" align="right">

</DIV>

Hiệu ứng Những Trái Bóng Đung Đưa

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/nhungtraibong.swf" width="750" height="922" wmode="transparent" align="right"> </DIV>

Hiệu ứng Sao Thập Cẩm Đủ Màu

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/SaoThapCamDuMau.swf" width="750" height="922" wmode="transparent" align="right">
</DIV>

Hiệu ứng Sao Rơi

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/saroi.swf" width="750" height="922" wmode="transparent" align="right">
</DIV>

Hiệu ứng Bướm Trắng Bay

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">

<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/BuomTrangBay.swf" width="750" height="922" wmode="transparent" align="right">

</DIV>

Hiệu ứng Tim Hồng Bay Lên

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 1500; POSITION: absolute; TOP: 0; HEIGHT: 1000">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/timhong.swf" width="700" height="1000" wmode="transparent" align="left">
</DIV>

Hiệu ứng Cá Bơi Lội Tung Tăng

<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/caboiloi.swf" width="750" height="922" wmode="transparent" align="right">
</DIV>

Hiệu ứng Tuyết Rơi Và Sao Bay
<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/tuyetsao.swf" width="750" height="922" wmode="transparent" align="right">
</DIV>



Hiệu ứng Dàn Sao Đung Đưa
<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/saodungdua.swf" width="750" height="922" wmode="transparent" align="right">
</DIV>

Hiệu ứng Đôi Bướm Xanh Bay
<DIV id="Layer1" style="Z-INDEX: 1; LEFT: 0; WIDTH: 700; POSITION: absolute; TOP: 0; HEIGHT: 622">
<embed src=" http://www.geocities.jp/nhacnen_loithinhcau4/buomxanh.swf" width="750" height="922" wmode="transparent" align="right">
</DIV>

Và Còn rất ngiều hiệu ứng đẹp cho các bạn tự khám phá :

   Bước 1: Các bạn truy cập vào http://www.totallyfreecursors.com/
   Bước 2:tìm và click vào một hình trỏ chuột mà bạn cảm thấy thích
   Bước 3:trong cửa sổ hiện ra,bạn coppy hết mã code HTML
   Bước 4:các bạn quay về blog của mình
Sau đó vào Mẫu --->chỉnh sửa HTML--->bấm vào cái bảng và ấn  CTRL+F và điền <body> ấn enter rồi dán cái mã code coppy vừa nãy sau chữ <body>

Như thế là xong
Hãy xem blog để xem kết quả nhé
Chúc các bạn thành công !!!

Read More