Responsive mạng xã hội dưới bài viết với hiệu ứng overlay

By Unknown

Thứ Sáu, 17 tháng 10, 2014

Chèn mạng xã hội dưới bài viết cho blogger mình đả giới thiệu 2 bài trước nhưng bài này mình css thêm chức năng responsive và hiệu ứng overlay đẹp.

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

• Hướng dẫn chèn nút mạng xã hội dưới bài viết cho blogger chuẩn HTML5
• Chèn nút Share, Like, G+, Tweet cho blogspot với hiệu ứng đẹp

Responsive mạng xã hội dưới bài viết với hiệu ứng overlay

Hiệu ứng overlay đẹp khá chuyên nghiệp cộng thêm chức năng responsive các nút Share, Like, G+, Tweet, Linkedin, Pinterest, Print làm cho blog của bạn đẹp hơn rất nhiều và làm cho người đọc có cái nhìn khác về template của bạn.

Không dài dòng văn tự chúng ta tiến hành nào ! Để chèn mạng xã hội dưới bài viết cho blogger chúng ta cần 1 đoạn CSS và 1 đoạn HTML vào vị trí nó muốn xuất hiện

Responsive CSS mạng xã hội

.sharing-post{margin:20px 0;overflow: hidden;}
.entry-social{overflow: hidden;}
.entry-social a{display: block;padding:0px;color: #FFFFFF !important;font-weight: 300;font-size:12px;}
.entry-social div{float: left;margin-right: 5px;width:95px;background-color: #ccc;margin-top:5px;transition:all .4s ease-in-out;position:relative}
.entry-social .title-sharing-post{padding:0 7px;width:130px;height:30px;line-height:30px;font-size:20px;font-family: ';Trebuchet MS';, sans-serif;font-weight:400;text-transform:uppercase;border-bottom:4px solid #333}
.entry-social .fb{background-color: #324b81;padding: 0 7px;width:130px;height:34px;line-height:34px;}
.entry-social .twitter,.entry-social .gplus{padding: 0 7px;height:34px;line-height:34px;}
.entry-social .twitter{background-color: #01A7dE;}
.entry-social .gplus{background-color: #BA3227;}
.entry-social .linkedin{background-color: #136F9B;padding: 0 7px;;height:34px;line-height:34px;}
.entry-social div.pinterest{width:109px;height:34px;line-height:34px;}
.entry-social div.pinterest img{margin-top:-1px;vertical-align:middle}
.entry-social .pinterest a{background-color: #B01C23;padding:0 7px}
.entry-social div.printblog{width:35px;height:30px;border-bottom:4px solid #333}
.entry-social .printblog a{padding: 7px 7px 4px 9px;transition:all 0.4s ease-in-out}
.entry-social .printblog a:hover{background-color: #333;}
.slide-share{background:#ccc;z-index:2;left:0;top:0;right:0;bottom:0;position:absolute;text-align:center;line-height:7px;color:#333;transition:all 0.4s ease-in-out;height:30px;cursor:pointer}
.entry-social .fb:hover .slide-share,.entry-social .twitter:hover .slide-share,.entry-social .gplus:hover .slide-share,.entry-social .linkedin:hover .slide-share,.entry-social .pinterest:hover .slide-share{left:140px;opacity:0}

Các bạn vào chỉnh sửa template rồi thêm đoạn CSS trên vào trước thẻ ]]></b:skin>

Đoạn HTML chèn dưới bài viết

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharing-post'>
<div class='entry-social'>
<div class='title-sharing-post'>Share This:</div>
<div class='fb'>
<span class='slide-share'>
<p>Facebook</p>
</span>
<span style='position:absolute;top:-7px;'>
<span class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</span>
  </div>
<div class='twitter'>
<span class='slide-share'>
<p>Twitter</p>
</span>
<span style='position:absolute;top:5px;'>
<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>
</span>
  </div>
<div class='gplus'>
<span class='slide-share'>
<p>Google+</p>
</span>
<span style='position:absolute;top:5px;'>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>  
</span>
  </div>
<div class='linkedin'>
<span class='slide-share'>
<p>Linkedin</p>
</span>
<span style='position:absolute;top:7px;'>
<script expr:data-url='data:post.url' type='IN/Share'></script>
</span>
  </div>
<div class='pinterest'>
<span class='slide-share'>
<p>Pinterest</p>
</span>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Pin It'><img alt='pinit' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIntEpGn06gCwiXmfolMhzumK-K5hxVAxZPFLpP5OKSeYWFR8wmt3tC-lbn0YEdE3C5kyUuiQRqfvVIgBY73nI7doA-aocumTA0w5zcXUDUzcFkHOqrlKqpgMXUNseg4pjWPBw3ONUOav/s1600/PinExt.png' title='Pin It' width='43'/></a>
</div>
<div class='printblog'>
<a href='javascript:print(document)' title='Print This Blog'><img alt='print' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFq6wF12LtrprOd5ROqTRbw1TaGF4IO8r_zdsMSrib9BNPGy9b-PsoY6LWJz3W6rbTUJOeRq5KG3S-jtzhOt8anCbR0x1upGT_CebI218-USHeq1N9PRbyIfBTHR4ekF-mp-egQPXfx2O/s1600/iconprinter.png' title='Print This Page' width='16'/></a>
</div>
</div>
</div>
  <div style='clear:both'/>
</b:if>

Sau khi chèn CSS xong các bạn tìm đến thẻ  <data:post.body/> sau đó chèn code trên vào dưới thẻ <data:post.body/> hoặc tìm đến <div class='post-footer-line post-footer-line-1'> thứ 2 nó nằm trong thẻ này <b:includable id='post' var='post'>...</b:includable> sau đó chèn code vào dưới thẻ <div class='post-footer-line post-footer-line-1'> tùy theo bạn chọn vị trí hiển thị nút chia sẻ mạng xã hội.

Công việc cuối cùng của bạn lưu lại và xem kết quả.

Code kompiajaib

Tag : Chia sẻ, CSS, HTML5