• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo Bookmarks ở cuối bài viết

9
17/01/2011

SexyBookmarks là một plugin như một menu gồm nhiều icon đại diện cho các trang mạng xã hội được đặt ở cuối mỗi bài viết giúp cho phép người đọc dễ dàng đưa bài viết của bạn lên các trang mạng xã hội phổ biến nhất một cách tự động.

Bài viết này giới thiệu cách cài đặt một vài kiểu Bookmarks ở cuối bài viết Blogger.

Kiểu 1 như hình minh họa bên dưới.



Cách cài đặt như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code bên dưới vào sau dòng ]]></b:skin>.

<style type='text/css'>
div.sexy-bookmarks{height:54px;background:url('http://img191.imageshack.us/img191/8540/sharingsexys.png') no-repeat left bottom;position:relative;width:540px}
div.sexy-bookmarks span.sexy-rightside{width:17px;height:54px;background:url('http://img191.imageshack.us/img191/8540/sharingsexys.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://img72.imageshack.us/img72/6690/sexyspriter.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>

Bước 2. Đặt đoạn code bên dưới vào trước dòng <div class='post-footer'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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://feeds.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>
</b:if>

Trong đoạn code trên bạn cần thay YOUR-FEEDBURNER-ID bằng id của trang Feedburner cho blog của bạn đã tạo tại Feedburner.com.

Lưu Template là OK.

Kiểu 2 theo hình minh họa bên dưới.



Để làm được như vậy, bạn cần đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Đặt đoạn code bên dưới vào trước dòng <div class='post-footer'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;margin-top:20px; '>
<div style='width:225px; float:left;'>
<img alt='Bookmark and Share' src='http://img266.imageshack.us/img266/7343/sharebutton.png' title='Bookmark and Share'/>
</div>
<div style='width:65px; float:left;'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='width:65px; float:left;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'username_twitter_của bạn';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<div style='width:65px; float:left;'>
<a class='DiggThisButton DiggMedium'></a></div>
<div style='width:65px; float:left;'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'></script></div>
<div style='width:65px; float:left;'>
<a class='google-buzz-button' data-button-style='normal-count' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
</div>
<div style='clear: both;'></div>
</b:if>

Trong đoạn code trên bạn cần thay username_twitter của bạn.

Tiếp theo, đặt đoạn code sau đây vào trước thẻ </body>.

<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>

Đoạn code này giúp cho nút Digg có tác dụng.

Lưu Template là OK.

Xin chúc mừng, bạn là khách có lời bình số 9 may mắn. Bạn đã nhận được lời chúc phúc chân thành từ tác giả bài viết

{9 bình luậnAdd yours ?}

18:35:00, 17 thg 1, 2011

Thanks bác nhé , cảm ơn đã viết giùm mình cái tut này , với lại làm sao để cho link liên kết của blog tớ không bị underline , mà khi đụng vào nó mới underline

Reply
19:17:00, 17 thg 1, 2011

Mà mình muốn để cái bookmark share này ngoài cái khung thông tin tác giả của tớ thì làm sao nhỉ cậu qua xem đi rồi biết

Reply
19:38:00, 17 thg 1, 2011

Cậu đọc bài k kỹ rồi. Tớ bảo đặt code trước dòng <div class='post-footer'> mà cậu đặt sau dòng đó cho nên nó vọt vào cái khung định dạng post-footer là đúng rồi. :13)

Reply
20:34:00, 17 thg 1, 2011

, với lại làm sao để cho link liên kết của blog tớ không bị underline , mà khi đụng vào nó mới underline

Reply
08:25:00, 18 thg 1, 2011

Để làm được như vậy. Tìm đoạn code sau đây trong Template của cậu:

/* global link attributes */
a {color: #0033ff; text-decoration:;}
a:hover {color: #0033ff; text-decoration:;}
a:visited {color: #0033ff; text-decoration:;}

Và thay nó bằng đoạn code bên dưới.

a {color: #0033ff; text-decoration:none}
a:hover {color: #0033ff; text-decoration:underline}
a:visited {color: #667C26; text-decoration:none}

:mj

Reply
15:51:00, 1 thg 4, 2011

cái này bị lỗi host ảnh rồi !

Reply
16:29:00, 1 thg 4, 2011

Imageshack.us giới hạn băng thông, chưa có thời gian chỉnh lại link ảnh

Reply
10:56:00, 5 thg 9, 2011

cập nhật lại ảnh trên Imageshack đi bác Hà ơi

Reply
13:55:00, 9 thg 3, 2016

Face Xinh VN - Chia sẻ những thông tin hot và nóng nhất hiện nay về truyện, khám phá, sock - lạ, share thêm nick facebook độc

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn