Tạo nổi Bar Facebook & nhiều nút chia sẻ khác (Style 3)

Đăng bởi Admin | 30/10/13 | 0 nhận xét

Đây là một trong những vật dụng chia sẻ xã hội mất rất nhiều thời gian của tôi trong thiết kế nó. Bạn đã thấy xu hướng của các nút số chia sẻ nổi trên các blog phổ biến. Các biểu tượng truyền thống được thay thế bằng nút tự động truy cập tăng lên được cập nhật trong vài giây. Chúng tôi tạo ra các phiên bản khác nhau của các thanh này áp dụng cả hai hiệu ứng Jquery và CSS3 phong cách nhưng tiện ích này là khác nhau vì nó có chứa tùy chỉnh twitter, Pinterest và một nút Email. Các dịch vụ như AddThis và ShareThis đều làm một công việc tuyệt vời, nhưng họ vẫn cần phải làm việc trên một số cuộc xung đột tích hợp các plugin của họ. Chúng tôi đã thử nghiệm các widget trên trình duyệt như IE7 +, Firefox, Chrome vv và tìm thấy nó làm việc tốt không có vấn đề tương thích hoặc xung đột thiết kế.

Thêm nổi Bar cho Blogger:

Đi vào Blogger> Mẫu
Sao lưu mẫu của bạn
Nhấp vào Chỉnh sửa HTML
Bấm Proceed
Sau đó Click vào Expand Widget Templates
Tìm kiếm:

<b:includable id='post' var='post'>

7. Ngay bên dưới dán đoạn mã sau:

<b:includable id='post' var='post'>

7. Just below it paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FsgxpkJ6XIgwNuukzAEuMOWB0okFdIpC5YWYny9upQao7_TS4l7p72Glt5YOjRwJg93MMNGyD76ZK9UHO437v5RwFJBYoQ7uRZR0Rq0OjSvT2soOI2-KmLsoJLrg160mS7hpZh12HC_/s400/gc_social_sprite.gif') no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FsgxpkJ6XIgwNuukzAEuMOWB0okFdIpC5YWYny9upQao7_TS4l7p72Glt5YOjRwJg93MMNGyD76ZK9UHO437v5RwFJBYoQ7uRZR0Rq0OjSvT2soOI2-KmLsoJLrg160mS7hpZh12HC_/s400/gc_social_sprite.gif') !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
   margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
   background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
   color:#FF0505;
   background-color:#fbf8f8 !important;
}

.mbt_social_floating .st_pinterest_vcount .stBubble{
   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-tlmpx_pqNnPGhbuKW7usmoS2Ioq0mD7RkmIUtt2D3PpvfTCNRLW3iPtkvtixF98EiXlUwQwzwAPgUhCzDshfbcXVRQw2Nw4A_vsITqmtl8vd2OvglokF_E0JeQFMrUOCUSfkMPOjal3/s400/bubble_arrow_pinterest.png') !important;
}

.st_pinterest_vcount{
   margin-bottom: 0px;
   display: block;
}

</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='mybloggertricks'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: "MY BLOGGER TRICKS",
ui_header_color: "#ffffff",
     ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://thuthuatvitinhaz.blogspot.com/2013/10/tao-noi-bar-facebook-nhieu-nut-chia-se.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Chỉ cần thay thế mybloggertricks với Tên truy nhập twitter của bạn.

8. Lưu mẫu của bạn. Vậy là xong !
Hãy tải lại trang để xem thành quả nha !

Bước không bắt buộc:

Nếu trong trường hợp nút facebook không làm việc, hãy thêm mã Javascript SDK này chỉ dưới thẻ <body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Chúc bạn thành công !...

Bạn có thể tham khảo thêm các mẫu khác:

Tạo các nút Google +1, Facebook, Twitter nổi cho blog

Thêm nút chia sẻ Facebook, Tweet và G+ nổi trên blog (Style 2)

Nguồn: mybloggertricks.com

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

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

30/10/13