Thêm Mạng xã hội Bookmarking tự động vào blog của bạn
Đăng bởi Ngân Giang |
Bạn có thấy tiện ích tự động chia sẻ ẩn dấu trang xã hội trên nhiều blog và các trang web. Tiện ích này rất khác so với các nút đánh dấu trang xã hội khác có sẵn. Đồ họa trông rất phong cách và khác nhau. Nút của tiện ích này có tác dụng tự động ẩn khi di chuột vào nó. Ở đây trong bài viết này, tôi sẽ giải thích làm thế nào bạn có thể thêm tiện ích Chia sẻ này cho bloggẻ sau mỗi bài viết.
Bước # 1:
Đăng nhập vào Blogger -> Layout -> Edit HTML và chọn đánh dấu vào hộp Expand Widget Templates
Sau đó, tìm ( nhấn Ctrl + F) đoạn mã này trong các mẫu:
Và ngay lập tức dán đoạn mã dưới này ngay trước nó :
Bạn có thấy tiện ích tự động chia sẻ ẩn dấu trang xã hội trên nhiều blog và các trang web. Tiện ích này rất khác so với các nút đánh dấu trang xã hội khác có sẵn. Đồ họa trông rất phong cách và khác nhau. Nút của tiện ích này có tác dụng tự động ẩn khi di chuột vào nó. Ở đây trong bài viết này, tôi sẽ giải thích làm thế nào bạn có thể thêm tiện ích Chia sẻ này cho bloggẻ sau mỗi bài viết.
Bước # 1:
Đăng nhập vào Blogger -> Layout -> Edit HTML và chọn đánh dấu vào hộp Expand Widget Templates
Sau đó, tìm ( nhấn Ctrl + F) đoạn mã này trong các mẫu:
</head>
<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpv32CggEhUoClFq4Kv3w4y_6owIg4p6fHRBTRUm-6YlcLtAXy0ZPQivg4PfRQRSEOFBeESZxE0L-o7vwgfA1OQkfnIz6_lExENuqC7_eY-yuBusc5ZGlf23a1BEtY36UeSjkLOS0EfmHS/
sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpv32CggEhUoClFq4Kv3w4y_6owIg4p6fHRBTRUm-6YlcLtAXy0ZPQivg4PfRQRSEOFBeESZxE0L-o7vwgfA1OQkfnIz6_lExENuqC7_eY-yuBusc5ZGlf23a1BEtY36UeSjkLOS0EfmHS/
sharingsexy.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBSJJzDbtVd4Z8c185cac6XkJBJ6gm_nz3Mq5oik_ca6sPgsanVdnh1Qno0LWm4koYJpUsQZ-GL4kfXPZwV77564c2pDVxjmzNfwB9z49P5fexIyJVKAE4uZEHXM71GdIPCdqrYQZLUokm/
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>
<!--HIDDEN-BOOKMARKS-STOPS-http://bdlab.blogspot.com-->
Bước 2:
Tìm (nhấn CTRL + F) đoạn mã này trong các mẫu:
<data:post.body/>
Và ngay lập tức dán đoạn mã dưới này DƯỚI / SAU nó :
<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://feeds2.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ạn tất nhiên có thể loại bỏ bất kỳ mã nút, nếu bạn không muốn để hiển thị nó.
Bây giờ Nhấp vào Save Template
Bây giờ Nhấp vào Save Template
Nguồn tham khảo: bdlab.blogspot.com
Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..
0 Comments:
Đăng nhận xét