Làm thế nào để Thêm jQuery Social Bookmarking cho blog?[kì3]

Xem ảnh:

Các bước thực hiện:
Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn Thiết kế, sau đó chọn Chỉnh sửa HTML.
Bước 2: Chọn Mở rộng mẫu tiện ích, kéo xuống tìm dòng sau ]]></b:skin>
 Hãy coppy code dưới đây rồi dán trước dòng đó.

/* SosialBookmark
*/

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

Bước 3: Kéo xuống tìm dòng sau tiếp theo: </head>

Bước 4: Coppy đoạn code sau rồi dán trước dòng vừa tìm được.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 10- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();
});
</script>

Tiếp tục tìm dòng sau: <data:post.body/> , rồi dán vào trước dòng đó đoạn code sau:

<ul class='sharebox' id='sharebox'>

<li><img alt='Share this' src='http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat1-1.png'/></li>

<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat2.png'/></a></li>

<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat3-1.png'/></a></li>

<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat4.png'/></a></li>

<li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat5.png'/></a></li>

<li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat6.png'/></a></li>

</ul>

Hoàn thành xong,nhấm save rồi ra xem kết quả.
Một vài chú ý:
Để đảm bảo cho việc hiển thị tốt các code cũng như chạy ổn định các file js thì có vài điều sau:

• Nếu ai có host riêng thì nên download file js về  rồi úp lên host riêng của mình, tránh dùng chung.vì file js đôi lúc  có sự cố xảy ra làm không hiển thị được CODE.
• Nên chọn một số trang web úp ảnh nhu PHOTOBUCKET,UPANH,...để lưu ảnh khi trong code có ảnh để tiện sử dụng.

Nếu đây là bài viết hữu ích, xin vui lòng coppy code dưới để liên kết tới trang này từ trang web hoặc blog của bạn

<a href="http://khothuthuat.blogspot.com/2010/09/lam-nao-e-them-jquery-social.html">Làm thế nào để Thêm jQuery Social Bookmarking cho blog?[kì3]</a>

In Bài Đăng