Fading Follow Widget phong cách WikiHow cho Blogger

Fading Follow Widget WikiHow Styled

Khi truy cập trang WikiHow cuộn xuống cuối trang bạn sẽ thấy một widget pops out tự động. Hôm nay Iris Tips sẽ mang widget này vào Blogger của bạn, biến tấu một chút thay vì mời bạn trở thành tác giả viết bài sẽ trở thành Social Like Box của Google+ và Facebook.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS vào trước thẻ ]]></b:skin>

#scrollwig{bottom:-300px;opacity:0.99;position:fixed;right:-510px;width:275px;z-index:4}#getwidget{bottom:0;color:#323232;float:right;font-size:.65rem;position:absolute;right:85px}#scroll_content{border:5px solid #FFF;border-radius:150px 150px 0 150px;box-shadow:-3px 3px 4px #BFBFBF;margin-bottom:0}#follow{background-color:#FFF;border:15px groove #F8DA39;border-bottom:none;border-radius:150px 150px 0 150px;border-right:none;font-size:.9em;height:185px;margin-bottom:0;padding:40px;text-align:center}.text{margin:0}.para1{color:#47401A;font-family:oswald;font-size:1.9rem;font-weight:400;letter-spacing:1px;margin:0;padding-bottom:.1em}.para2{font-size:.8rem;margin:0 0 0 -9%;width:120%}.fbfollow{color:#3B5998;font-size:1.3rem;font-weight:700}.googlefollow{color:#D34836;font-size:1.3rem;font-weight:700}

HTML & Javascript

2Tìm đến thẻ <footer> hoặc <div id="footer"> và dán đoạn code bên dưới vào trước thẻ đó.

<script>
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1500) {
$('#scrollwig').fadeIn();}
else {
$('#scrollwig').fadeOut();
  }
});
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="scrollwig" class="sliderbox_06" style="display:none;right: 0px; bottom: 0px;">
<div id="scroll_content">
<div id="follow">
<div class="text">
<p class="para1">Follow Us On</p>
<p class='para2'><span class='googlefollow'>Google+</span> &amp; <span class='fbfollow'>Facebook</span></p>
<br/>
</div>
<div class='g+' style='position:relative;left:5px;float:left'>
<div class="g-follow" data-annotation="vertical-bubble" data-height="20" data-href="https://plus.google.com/b/101485071107768481012" data-rel="author"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='fb' style='float:right;position:relative;right:-10px'>
<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>
<div class="fb-follow" data-href="https://www.facebook.com/IrisTipsBlog" data-colorscheme="light" data-layout="box_count" data-show-faces="false"></div>
</div>
</div>
</div>
</div>
</b:if>
<div class='clr'/>

Chỉnh sửa: Link Google+ và Facebook cho phù hợp với website của bạn.
Note: Do Codepen không hỗ trợ Facebook nên trong trang Demo bạn sẽ không thấy Facebook like box.

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm