Thứ Năm, 29 tháng 8, 2013

Cách tạo tab phần nhận xét cho blogspot - Khung Comment dạng tab

Cách tạo tab phần nhận xét cho blogspot - Comment dạng tab

Cách tạo tab phần nhận xét cho blogspot - Comment dạng tab. Tạo tab nhận xét facebook cho blogspot.Tạo tab nhận xét Google cho blogspot.Hướng dẫn cách tạo tab phần nhận xét cho blogspot. Code tạo tab phần nhận xét cho blogspot. Cách tạo khung comment dưới dạng tab cho blogspot

Đọc thêm »

Thêm Social Bookmark động cho blogspot, Website

Social Bookmark - Mạng lưới truyền thông luôn là những điều quan trọng để Website, Blog có được nguồn Traffic lớn. Bạn đọc yêu thích Blog của bạn có thể dễ dàng chia sẻ bài viết Blog, Website của bạn để bạn bè cùng biết tới...

Social Bookmark

Hướng dẫn thủ thuật (trên Blogspot, với Website mã nguồn khác các bạn dán code tương tự)
1. Vào bảng điều khiển Blogspot -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl +F) tìm tới thẻ đóng </head> và dán code dưới đây trên nó
Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='javascript'>
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){menuYloc =
parseInt($(name).css("top").substring(0,$(name).css
("top").indexOf("px")))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px";$(name).animate({top:offset},{duration:1000,queue:false});});});
#floatMenu {
position:absolute;top:150px;float:left;width:45px;}
#floatMenu ul {list-style: none;}
#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}
#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}
</style>

3. (Ctrl + F) tìm tới </body> và dán code dưới đây trên nó

<div id="floatMenu">
<ul>
<li><a href="http://facebook.com/itviet360" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3aD5rzpF3hVMxVkWDUAn8yuc3rtVO_00xU_malB10VSko6GNuyPwzFnFj6hotGHmzXF0AuX9c2t4kHX_yCSH47y-778jUPitCfWKC1vWtVH2jAotzw0gNsHuQyRiK-j1v4IlDFs97h9o/s1600/btrix-facebook.png" style="margin-bottom: 3px;" title="Follow Me On Facebook" /></a></li>
<li><a href="http://twitter.com/phongvu18nd" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7n7iINN7WdMFbhbBdroHTGusFHA1sFDcMUBbHOb2GffyCbr4vp-yWFNp-kDR1AABR1InQZ1iZXNWQyY9EWUlg_HvklPtLTM4OKocP_JMDNHkoH5d2yp4LNAU8OHO_af0HzDaJJCwpEyc/s1600/btrix-twitter.png" style="margin-bottom: 3px;" title="Follow Me On Twitter" /></a></li>
<li><a href="https://plus.google.com/117290973503680239179" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisn4gPL4qKVGHdtsIglncJWnXUGCQEaeB3Qn6L7GJualRK1zT8y7jw6Qo2cSbFnc3L-F3nHB4WIxq9Bq55o47uHD3WGReODX1MTw9Al06XY_3QgjhmqIk9OSYbyRjUyRluQNAC5S-JSuQ/s1600/btrix-googleplus.png" style="margin-bottom: 3px;" title="Add Me your Circle" /></a></li>
</ul>
</div>

Trong đó:
Các giá trị bôi vàng là những giá trị riêng của bạn
- Bạn cũng có thể thêm nhiều hơn Social Bookmark với việc thêm đoạn mã màu xanh

Tạo nút chia sẻ trượt dọc cho blogspot

Chia sẻ liên kết là 1 điều cần thiết trên mỗi Blog và Website. các bạn có nhiều lựa chọn cho chia sẻ liên kết, Like qua FB, G+ link cho mình...

Like Facebook, G+ Google


Hướng dẫn thủ thuật trên blogspot. Đối với Website các bạn cũng chỉ cần thêm tương tự.
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (HTML/Javascript)
2. Dán code dưới đây vào tiện ích vừa thêm

<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box_mmoforfun {
position: fixed;
top: 38%;
right: 0;
border: 0px solid #00EE00;
padding: 3px 3px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #F0FFFF;
width: 55px;
min-height: 290px;
}
.sharing_box_mmoforfun .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:45px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_mmoforfun'>
<div style='text-align:center; margin-top:5px'>


</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:0px'>
<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:0px'>
<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:0px'>
<!-- 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:0px'>
<!-- 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="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>

Trong đó các giá trị bôi vàng là giá trị các bạn thay đổi theo ý muốn. TOP là giá trị cao thấp của cả khung chia sẻ
.

Tạo nút ẩn hiện nội dung cho blogspot


Tuy code này trên mạng đã share rất nhiêu, Hôm nay mmo4fun share lại cho các bạn tham khảo. Chỉ với 1 dòng lệnh kết hợp với các thẻ div là bạn có thể tạo 1 button cho phép ẩn hiện nội dung của bạn khi click vào nó. Các bạn xem Demo bên dưới bài đăng:

Code 1:
<div>
<div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Xem" /></div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}</div>
</div>
</div>

Nếu như bài đăng quá dài, nếu muốn ẩn , thì phải kéo lên trên để thực hiện thao tác nhấn nút Ẩn , gây phiền phức. Để xử lý tình trạng gây khó khăn cho người đọc, Các bạn có thể dùng code dưới đây.
Code 2:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 0px;">
Spoiler: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" style="font-size: 10px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Xem" /></div>
<div>
<div style="display: none;">{Phần nội dung bị ẩn}</div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" style="font-size: 10px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Ẩn" /></div>
</div>



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

Cách tạo tab nhiều tiện ích - widget cho blogspot

Cách tạo tab nhiều tiện ích - widget cho blogspot
Cách tạo tab nhiều tiện ích - widget cho blogspot - Code tạo tab nhiều tiện ích - widget cho blogspot. Hướng dẫn cách tạo tab nhiều tiện ích - widget cho blogspot.

Đây là cách giúp bạn có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog? Điều này rất cần thiết vì nó sẽ ảnh hưởng đến tốc độ load trang. Và một trong những cách tiết kiệm đó, bạn có thể làm theo hướng dẫn bên dưới. Thủ thuật blogspot này tạo Tabs với nhiều tiện ích, cùng với hiệu ứng bằng JQuery.

Phần này để chỉnh sửa và thêm vào tốt đòi hỏi các bạn phải biết qua code chút

Đọc thêm »

Bài viết liên quan mới nhất - cũ hơn cùng label - chủ đề cho blogspot

Bài viết liên quan mới nhất - cũ hơn cùng label - chủ đề cho blogger.Bài viết liên quan mới cũ cùng chủ đề cho blogger.Tạo bài viết mới hơn và cũ hơn cùng chủ đề chp blogspot.Hướng dẫn cách thêm bài viết liên quan mới nhất - cũ hơn cùng label - chủ đề- nhãn cho blogspot

Điểm đặc biệt của tiện ích này là chia thành 2 cột. Bài viết liên quan giúp độc giả khi truy cập blog của bạn tiện theo dõi các chủ đề của bạn hơn thông qua danh sách các bài viết cũ và mới có cùng chủ đề.

Nguồn bài viết từ : namkna.blogspot.com - Một blog khá hay các bạn có thể ghé qua

Bài viết liên quan mới nhất - cũ hơn cùng label - chủ đề cho blogspot
Ảnh minh họa: Bài viết liên quan mới nhất - cũ hơn cùng label - chủ đề cho blogspot

Đọc thêm »

Video hướng dẫn cách chơi và lên đồ cho Hecarim - LMHT

Video hướng dẫn cách chơi và lên đồ cho Hecarim - LMHT

Video hướng dẫn cách chơi và lên đồ cho Hecarim - LMHT. Cách chơi Hecarim trong LMHT. Cách lên đồ cho Hecarim trong liên minh huyền thoại. Video hướng dẫn cách chơi và lên đồ cho Hecarim - LMHT của top LOL. Cách ép đồ cho Hecarim - LMHT. Hướng dẫn cách chơi và lên đồ mạnh nhất cho Hecarim

Đọc thêm »