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>
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 == "item"'>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>
</b:if>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + 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 == "item"'>
<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>
<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>
(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.
{ 0 comments... read them below or add one }
Post a Comment