Thứ Hai, 16 tháng 7, 2012

Thanh chia sẻ nằm ngang pro cho blog

Ở thủ thuật lần trước, Tanchau123 đã hướng dẫn các bạn tạo  "Nút share nằm ngang cho blog". Lần này mình sẽ hướng dẫn tạo một thanh chia sẽ nằm ngang giúp chia sẽ bài đăng lên các mạng xã hội nổi tiếng như Yahoo, Facebook, Twitter, Google,... Điểm đặc biệt là thanh chia sẽ lần này sẽ kèm theo tiện ích "gởi bài đăng qua email" và "đăng ký feed" nhận bài đăng.


Bắt đầu thủ thuật: 
1. Đăng nhập blogger.
2. Vào Thiết Kế => Chỉnh sửa HTML (Mở rộng mẫu tiện ích).
3. Thêm code sau vào trước thẻ ]]></b:skin> 
div.shr-bookmarks{border-top:1px solid #DDD;width:580px;margin:30px 0 10px;padding-top:10px;clear:both}
div.shr-bookmarks-expand{height:32px;overflow:hidden}
div.shr-bookmarks ul.socials{background:transparent none;float:left;border:0 none;width:100%;margin:0;padding:0;outline:0 none}
div.shr-bookmarks ul.socials li{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5XLzy10yGZxsOAFX55-aP8aYrUzqH8ke9520RWmARfW9FkXTu6msTiG5whQB4WB5Gdje33nko1SPI46tT6OiZtvcw8EoIXEae7hK-WOB-OdzHXKjWSbWwwj1DTPdlkcqr3iZxCrrMt4/s600/shr.png);background-repeat:no-repeat;background-color:transparent;float:left;border:0 none;width:60px;height:29px;margin:3px 0px 0px -2px;padding:0;display:inline;list-style-type:none;cursor:pointer;outline:0 none;clear:none}
div.shr-bookmarks ul.socials li:before,div.shr-bookmarks ul.socials li:after,div.shr-bookmarks ul.socials li a:before,div.shr-bookmarks ul.socials li a:after{content:''}
div.shr-bookmarks ul.socials a,div.shr-bookmarks ul.socials a:hover{display:block;background-color:transparent;border:0 none;width:60px;height:29px;text-decoration:none;text-indent:-9999px}
div.shr-bookmarks ul.socials a:hover,div.shr-bookmarks ul.socials li:hover{background-color:transparent;border:0 none;outline:0 none}
li.shr-yahoomail{background-position:0px bottom}
li.shr-yahoomail:hover{background-position:0px top}
li.shr-googlebookmarks{background-position:-60px bottom}
li.shr-googlebookmarks:hover{background-position:-60px top}
li.shr-facebook{background-position:-120px bottom}
li.shr-facebook:hover{background-position:-120px top}
li.shr-twitter{background-position:-180px bottom}
li.shr-twitter:hover{background-position:-180px top}
li.shr-googleplus{background-position:-240px bottom}
li.shr-googleplus:hover{background-position:-240px top}
li.shr-technorati{background-position:-300px bottom}
li.shr-technorati:hover{background-position:-300px top}
li.shr-digg{background-position:-360px bottom}
li.shr-digg:hover{background-position:-360px top}
li.shr-delicious{background-position:-420px bottom}
li.shr-delicious:hover{background-position:-420px top}
li.shr-mail{background-position:-480px bottom}
li.shr-mail:hover{background-position:-480px top}
li.shr-comfeed{background-position:-540px bottom}
li.shr-comfeed:hover{background-position:-540px top}
4. Tìm dòng <div class='post-header-line-1'/> và thêm toàn bộ code sau bên dưới:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shr-bookmarks shr-bookmarks-expand'>
<ul class='socials'>
<li class='shr-yahoomail'><a expr:href='&quot;ymsgr:im?+&amp;msg=&quot; + data:post.url' rel='nofollow' title='Sent Yahoo! Messenger'/></li>
<li class='shr-facebook'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'/></li>
<li class='shr-twitter'><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Twitter'/></li>
<li class='shr-googleplus'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Google Plus'/></li>
<li class='shr-technorati'><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Technorati'/></li>
<li class='shr-digg'><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Digg'/></li>
<li class='shr-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Delicious'/></li>
<li class='shr-googlebookmarks'><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Google Bookmarks'/></li>
<li class='shr-mail'><a expr:href='&quot;http://www.blogger.com/email-post.g?blogID=&quot; + data:top.id + &quot;&amp;postID=&quot; + data:post.id' rel='nofollow' target='_blank' title='Sent email'/></li>
<li class='shr-comfeed'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' target='_blank' title='Subscribe for more'/></li>
</ul>
<div class='clear'/>
</div>
</b:if>

5. Lưu lại và thưởng thức.
Chúc các bạn thành công !!!

Không có nhận xét nào:

Đăng nhận xét