Pro page

12
Nhận xét

[ Yêu cầu ] Tạo bookmark Sharing is sexy !

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Tuấn P.H.A (www.kenh78.com)
[FD's BlOg] - Với thủ thuật này, các bạn sẽ có 1 thanh bookmark với hiệu ứng động nho nhỏ khi rê chuột vào icon đó. Đây là 1 plugin được viết cho wordpress bởi Josh Jones và nó được fix lại để dùng cho blogger.



Hình ảnh minh họa:

☼ Các bước thực hiện :
1. vào bố cục
2. vào chỉnh sửa code HMTL
3. chọn mở rộng mẫu tiện ích
4. chèn đoạn code CSS bên dưới vào sau dòng code ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
</style>

5. Bước kế tiếp là xác định vị trí đặt của bookmark, các bạn có thể tùy chỉnh lại vị trí này nếu muốn, ví dụ đặt ngay sau dòng code <data:post.body/> hoặc đặt nó ở dưới cùng của post footer..., ở đây mình sẽ đặt nó ở trên cùng của post footer.

- tìm đoạn code như bên dưới:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

- chèn ngay sau nó đoạn code sau:

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

- điều chỉnh lại code màu xanh.
6. Cuối cùng là save template.

Một lưu ý nhỏ, tiện ích sẽ hiển thị tốt với phần main có độ rộng trên 540px.
Author Josh Jones
Chúc các bạn thành công.


Enter your mail address:

12

17/7/
7/09
03:54
Blogger

Bóc tem lúc gần sáng cho tut hay của anh Dũng :D thanks anh nhiều lắm

17/7/
7/09
04:39
share4vnn.tk 2

thủ thuật này mình biết lâu rùi :D

17/7/
7/09
09:19
fandung 3

vậy hả Thuấn, anh cũng thế :D, cái thủ thuật này anh test ở blog test anh lâu rồi, cũng tính post lên lâu rồi, nhưng lo test mấy cái khác nên quên. Nay bạn Tuấn P.H.A yêu cầu nên anh post lên luôn :D

17/7/
7/09
10:21
phattrien@so 4

Thuan - share4vn che^ blog anh xau, fan dung cho ys kien ve mat tham my di, de anh co "hang dong' thich dang' de tra loi Thuan nhe.

^_^

17/7/
7/09
10:25
Phan Dũng 5

chài, Thuấn chê blog anh xấu à , hiện tại em cũng chưa có ý kiến nào hay cho anh cả :D, sau này có ý tưởng em sẽ góp ý.

Bây giờ em trả lời yêu cầu muốn túi bụi luôn :(

17/7/
7/09
11:45
Tuấn Nguyễn 6

thanks anh dũng em đã làm được chủng bị cho vào trang kenh78.com :D

17/7/
7/09
17:27
share4vnn.tk 7

em thấy sao nói thậy thui..thực sự là em thấy nội dung blog của bác phattrienso phong phú thế mà nhìn cái theme của bác xấu quá

17/7/
7/09
20:27
fandung 8

@Thuấn : thì đó cũng là ý kiến của em, :D thì anh cũng đâu có nói gì đâu.

15/7/
7/10
20:17
Khách (ẩn danh) 9

của mình bị hiên ra như này là hỏng cái ảnh nào hả bạn : http://cA2.upanh.com/10.39.14177280.KUX0/hoiloi.png

30/8/
8/11
05:51
6 mét vuông 10

your feedburner id trên là gì vậy anh? em gà nên không biết

5/2/1
2/12
22:37
Nam3T 11

sao ảnh die hết vậy hả anh

10/1/
1/13
10:31
Unknown 12

Mình làm đúng các bước rồi mà không hiện là sao FD nhỉ http://www.hudgroup.com.vn



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons

Newer Posts Older Posts Home