How to add an auto image hover all social sharing buttons for blogspot (blogger)

Style #1:Go to the tourial
Style #2 Go to the tourial

 Tạo sự kiện trực tiếp phát trên Youtube

Đoạn video dưới đây sẽ hướng dẫn bạn cách truyền hình trực tiếp một sự kiện trên kênh youtube

Google vừa cho biết rằng họ sẽ mở tính năng truyền hình trực tiếp (Live Stream) dành cho bất kì tài khoản YouTube nào có hơn 100 người theo dõi (subscriber). Nó sẽ giúp các cá nhân, công ty nhỏ truyền trực tiếp một sự kiện nào đó, không thua kém những gì mà các nhà sản xuất nội dung lớn có thể làm được. Động thái này diễn ra chỉ 3 tháng sau khi YouTube hạ giới hạn Live Stream xuống còn 1000 người theo dõi. Google nói rằng tính năng này sẽ dần dần được cập nhất đến tất cả người dùng có đủ điều kiện nói trên trong vòng vài tuần tới. Nếu đang sở hữu hơn 100 subcriber, bạn có thể truy cập thử vào trang Account Features để xem có nút "Enable YouTube Live" hay không, nếu chưa thì bạn có thể thử lại sau.

Xem các video đang truyền hình trực tiếp tại: youtube.com/live


 

TIN HỌC SÓC NÂU
Bảo trì máy tính doanh nghiệp an toàn.
Website: http://suamaytinh.net

Cách Kết Nối Tài Khoản Youtube với Facebook và Twitter

Với cách làm này, video của bạn trên Youtube sẽ tự động chia sẻ lên Facebook và Twitter, mỗi khi bạn upload video mới.

Cách tạo album/Gallary ảnh đẹp trên blog hoặc website

Dưới đây là tổng hợp các kiểu Album và Gallary ảnh cho blog/website

Với những kiểu Chúng tôi giới thiệu giới đây, Quý vị sẽ có những Album/Gallary/Slideshow ảnh chuyên nghiệp cho blog/website của mình.

1. Tạo Album hình tròn

2. Album kiểu co giãn rất đẹp

3. Album hình tam giác

4. Thư viện ảnh động cho blog/website

5. Album/gallary ảnh hình vuông

7. Slideshow tuyệt đẹp nữa ở đây

Tiện ích Nút Chia sẻ (social share) ẩn hiện khi rê chuột vào hình ảnh.

Mô tả: Tiện ích này sẽ giúp người xem chia sẻ nội trung trên trang blog/website của bạn cách dễ dàng, vì nút chia sẻ (social sharing) sẽ tự động xuất hiện khi rê chuột vào hình ảnh bất kỳ, hoặc bôi đen văn bản...

Demo: Rê chuột vào hình ảnh bên dưới để xem demo

Bước 1: Vào trang: http://www.markerly.com/gtc#gr8

Bước 2: Chọn và tùy chỉnh màu sắc cho tiện ích.
Trong đó: Click chọn là "on" và không chọn là "off", hi cái này thì dễ rồi, ai cũng biết phải không!

Bước 3: Điền email của bạn vào khung và nhấn nút "GET THE CODE"

Bước 4: Copy đoạn code hiển thị và dán vào trước thẻ </body> trong template và lưu lại. Như thế là bạn đã có thể chèn thêm được tiện ích nút chia sẻ tự động vào blog/website rồi đó.

Giao diện trang Markly

Code làm cho thanh menu nav trượt khi chạm top

Mô tả: Đoạn code này sẽ làm cho thanh menu đầu trang (menu nav tự động trượt theo blog/website khi chạm top (đầu trang), hay nói cách khác là: code làm cho thanh menu đầu trang trượt theo blog/website khi chạm top.

Demo

Cách thêm CSS và JS để làm cho thanh menu đầu trang (menu nav) trượt khi chạm top:

Bước 1: Thêm đoạn code CSS dưới đây vào trước thẻ ]]></b:skin>
#navigation{height:50px;width:100%;max-width:1080px;position:relative;display:block;background:transparent}#navigation.fixed{position:fixed; top:-4px;z-index:9999}

Bước 2: Thêm đoạn code JS dưới đây vào trước thẻ </body> trong template
<script>function handleScroll(){if(window.XMLHttpRequest){var offset=window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop;document.getElementById(&#39;navigation&#39;).className=(offset&gt;104?&#39;fixed&#39;:&#39;&#39;)}}if(window.addEventListener){window.addEventListener(&#39;scroll&#39;,handleScroll,false)}else{window.attachEvent(&#39;onscroll&#39;,handleScroll)}    </script>

Bước 3: Tìm đến đoạn code chứa menu của bạn và thêm đoạn code như sau:
 <div id='navigation'> nội dung menu của bạn </div>

Trong đó:
#navigation.fixed: là giá trị mà thanh menu ngang sẽ nhận khi chạm top
#navigation: là giá trị mà thanh menu ngang sẽ nhận khi chưa chạm top
Bạn có thể chỉnh sửa giá trị phù hợp với giao diện blog/website của bạn.
Chúc bạn thành công.

Tạo tiện ích ẩn hiện khi cuộn trang

Làm cho tiện ích ẩn hiện và trượt theo blog/website khi cuộn trang.

Mô tả: Tiện ích sẽ xuất hiện và trượt theo blog/website khi cuộn trang đến một vị trí nhất định nào đó (ví dụ: khi cuộn trang đên khoảng 1500px, thì tiện ích sẽ xuất hiện và trượt theo blog/website... )

Demo

Demo: Cuộn xuống cuối trang để xem trên weblog của Chúng tôi.

Sau đây là  code để tạo hiệu ứng Sticky  cho widget mà bạn muốn

B1. Tạo một Tiện ích, và điền bất kỳ nôi dung nào bạn muốn hiển thị, và lưu lại.
B2. Xác định ID của tiện ích vừa tạo. (trong ví dụ này, chúng tôi muốn tiện ích có ID là HTML5 ẩn hiện và trượt theo blog/website)
B3. Thêm đoạn code sao vào trước thẻ ]]></b:skin> 
#HTML5{width:335px;position:fixed;top:50px;z-index:9;background-color:#FFF;box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);display:none;}
B4. Thêm đoạn code tiếp theo vào trước thẻ </body>
$(document).scroll(function(){var y=$(this).scrollTop();if(y&gt;1750){$(&#39;#HTML5&#39;).fadeIn()}else{$(&#39;#HTML5&#39;).fadeOut()}});</script>

Lưu Template và thế là xong

Cách tạo menu trượt bên phải blog/website

Chọn thêm 1 widget mới, và thêm đoạn code dưới đây vào:

demo

Cách tạo thanh menu trượt nằm bên trên blog hoặc website

Ở bài trước, chúng tôi có giới thiệu cách tạo thanh menu cố định ở cuối trang blog; Bài này sẽ hướng dẫn các bạn Cách tạo thanh menu trượt nằm bên trên blog hoặc website, hay còn gọi là menu cố định đầu trang blog, hoặc là menu trượt cố định ở đầu trang blog..

Hướng dẫn tạo thanh Drop Menu cố định ở đầu blog.

Post By: Võ Quốc An On: 21-03-2012 33 comments

Hôm trước mình đã hướng dẫn tạo thanh menu cố định ở đầu blog nhưng với thủ thuật trên thì nó chỉ đơn giản là một menu từ linklist. Hôm nay mình sẽ phát triển thủ thuật này lên 1 tí theo lời nhờ của iG4VN thêm hiệu ứng drop cho thanh menu này.

Xem Demo

1. Vào template chèn đoạn css sau phía trên thẻ ]]></b:skin>

#topmenu-outer{z-index:30; height:20px;width:100%;background:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}
#topmenu{width:990px;margin:auto;}
#topmenu1{width:790px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px;    text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu {    list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;    position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto;    position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px;    }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px;    line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0;    float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}

2. Tiếp tục chèn đoạn code sau vào bên dưới thẻ mở <body...> (dấu ... có thể khác nhau hoặc không có tùy blog)

<div id='topmenu-outer'>
<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML31' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm thủ thuật ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm thủ thuật ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm thủ thuật ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='www.voquocan.com'/>
</form></div>
<div style='clear:both'/>
</div>
</div>

3. Save template lại rồi về mục Phần tử trang bạn sẽ thấy xuất hiện một tiện ích HTML mới ở đầu blog. Bạn chèn đoạn code sau vào tiện ích HTML trên:

<ul class="menu">
<li class="drop0"><a href="http://www.voquocan.com">Trang Chủ</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/sitemap.html">Sơ Đồ Blog</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/voquocan.html">About Me</a></li>
<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Danh sách Label</a>
<div class="drop1">
<ul>
<li><a href="http://www.voquocan.com/search/label/Thủ thuật blog?max-results=5">Tất cả thủ thuật</a></li>
<li><a href="http://www.voquocan.com/search/label/Blogger?max-results=5">Blogger</a></li>
<li><a href="http://www.voquocan.com/search/label/Comments?max-results=5">Comments</a></li>
<li><a href="http://www.voquocan.com/search/label/Emoticons?max-results=5">Emoticons (Icons)</a></li>
<li><a href="http://www.voquocan.com/search/label/Bookmark?max-results=5">Bookmark</a></li>
</ul>
</div></li>

<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Bài Viết Xem Nhiều</a>
<div class="drop2">

<div class="col">
<h3>Menu</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Float Menu</a></li>
<li><a href="http://www.voquocan.com/2012/02/drop-menu.html">Drop Menu 1</a></li>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Drop Menu 2</a></li>
</ul>
</div>

<div class="col">
<h3>Template</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/share-template-01.html">Template 01</a></li>
<li><a href="http://www.voquocan.com/2012/03/template.html">HTML</a></li>
<li><a href="http://www.voquocan.com/2012/03/css01.html">CSS</a></li>
</ul>
</div>

<div class="col">
<h3>Comments</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/threaded-comment.html">Comments 6 cấp</a></li>
<li><a href="http://www.voquocan.com/2012/01/mot-giao-dien-khac-cho-threaded.html">Comments 2 cấp</a></li>
<li><a href="http://www.voquocan.com/2011/12/tao-khung-quick-comments-cho-blog-cbox.html">Quick Comments</a></li>
</ul>
</div>

<div class="col">
<h3>Blogger</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/link.html">Liên kết blog</a></li>
<li><a href="http://www.voquocan.com/2011/01/ask.html">Hỏi - Đáp</a></li>
<li><a href="http://www.voquocan.com/2011/12/nhung-ieu-can-luu-y-khi-design-blog.html">Bí Quyết</a></li>
</ul>

</div></div></li></ul>

Save lại là xem như hoàn thành.
4. Thay đổi code:

Đoạn code ở bước 1 là css. Bạn tìm hiểu bài viết này nếu muốn thay đổi về css.
Đoạn code ở bước 2 thay www.voquocan.com thành địa chỉ blog của bạn.
Đoạn code ở bước 3 Trong đoạn code này chú ý 1 tí bạn sẽ thấy có 3 class lớn.
 » drop0: là không drop menu.
 » drop1: là menu drop 1 cột.
 » drop2: là menu drop 2 cột
Bạn thay đổi nội dung cho phù hợp là được.

Nếu có vấn đề gì bạn để lại comments bên dưới mình sẽ hướng dẫn trong thời gian sớm nhất có thể. Chúc bạn thành công!