Chèn nút Share, Like, G+, Tweet cho blogspot với hiệu ứng đẹp |
Ở bài viết này Tuấn Phan hướng dẫn chèn nút Share, Like, G+, Tweet dưới bài viết cho blogger/blogspot với hiệu ứng CSS3 đẹp mắt cho template của bạn.
Chèn nút Share, Like, G+, Tweet cho blogspot với hiệu ứng đẹp
Với hiệu ứng đóng mở khi chúng ta re chuột vào biểu tượng Share, Like, G+, Tweet rất đẹp làm cho template blog bạn cá tính hơn.Cách tiến hành chèn Share, Like, G+, Tweet dưới bài viết:
Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn Mẫu
Bước 3: Chỉnh sửa HTML >> Nhấn Ctrl+F tìm đến thẻ ]]></b:skin> thêm đoạn CSS bên dưới trước nó
CSS3 Share, Like, G+, Tweet
/* CSS Slide Share Button */ #button-count-share{float:none;width:100%;overflow:hidden;background:rgba(12, 12, 12, 0.35);text-align:center;margin:15px auto;padding:0;padding-top:7px;padding-bottom:2px;} #button-count-share span{float:none;position:relative;font-size:13px;color:#fff;margin:12px} .button-share{background:#f9f9f9;position:relative;display:inline-block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-shadow:inset 0 0 5px rgba(0,0,0,0.1);} .slide-share{z-index:2;display:inline-block;height:40px;line-height:40px;left:0;position:absolute;width:140px;margin:0 auto} .slide-share p{font-family:'Roboto';font-weight:700;color:#fff;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0 auto} .button-share .slide-share{transition:all 0.4s ease-in-out} .facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1} .twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute} .google #___plusone_0{width:90px!important;top:10px;right:10px;position:absolute;display:block;z-index:1} .facebook .slide-share{background:#3b5998} .twitter .slide-share{background:#4099ff} .google .slide-share{background:#E41B17} .facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:140px;opacity:0.6;}Sau khi chèn CSS xong chúng ta tìm đến thẻ <div class='post-footer'> thứ 2 và chèn đoạn Code bên dưới dưới nó
Code Share, Like, G+, Tweet cho blogspot
<div id='button-count-share'> <div class='facebook button-share'> <div class='slide-share'> <p>Share</p> </div> <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/> </div> <div class='facebook button-share'> <div class='slide-share'> <p>Like</p> </div> <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/> </div> <div class='google button-share'> <div class='slide-share'> <p>G+</p> </div> <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/> <script type='text/javascript'> window.___gcfg = {lang: 'id'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div class='twitter button-share'> <div class='slide-share'> <p>Tweet</p> </div> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a> <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div class='clear'/> </div>Tiếp tục chúng ta tìm đến thẻ </body> chèn đoạn JS bên dưới trên nó
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <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/vi_VN/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </b:if>Bước 4 : Lưu lại và xem kết quả
Chúc các bạn thành công
0 Nhận Xét:
Post a Comment