Khi vào môt blog, đọc hết bài viết bỗng có hộp thoại nhỏ xuất hiện ra bên cạnh màn hình chứa các bài viết hay, đọc nhiều. Mình thấy rất hay nên tìm cách tạo ra hộp thoại y như vậy.Và hôm nay mình sẽ hướng dẫn mọi người làm. :)

Mục Đích

• Tạo khung nhỏ bên cạnh màn hình
• Nhắc mọi người xem bài mới nhất
• Có hiệu ứng thu nhỏ đọc đáo thu hút người xem

  

Thực Hiện

CSS/* Widget Recommended Content */
#slidebox{background:#fff;width:100%;max-width:355px;height:255px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.slidebox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.slidebox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#slidebox-close,a#slidebox-close{margin-right:15px}
.slidebox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.slidebox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.slidebox-container >div{border:none;margin:3px 0;padding:10px 0}
.slidebox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-145px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

JS$(window).scroll(function() {
  $("#slidebox").css($(this).scrollTop() > 400 ? {
    right: "0px"
  } : {
    right: "-360px"
  })
}), $(document).ready(function() {
  var i = $("#slidebox"),
    s = $("#slidebox-close"),
    o = $("#slidebox-minimize"),
    l = $("#slidebox-maximize");
  l.hide(), s.click(function() {
    i.css({
      right: "-350px"
    }), i.fadeOut("slow")
  }), o.click(function() {
    i.toggleClass("hide"), $(this).hide(), l.show()
  }), l.click(function() {
    i.toggleClass("hide"), $(this).hide(), o.show()
  })
});

HTML<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='slidebox'>
    <div class='slidebox-title slidebox-www'>
      <span style='float:left;margin:0 15px;'>Recommended Content</span>
        <span><a href='javascript:void(0);' id='slidebox-close' title='close'>&#x00D7;</a></span>
        <span><a href='javascript:void(0);' id='slidebox-minimize' title='minimize'>&#x2212;</a></span>
        <span><a href='javascript:void(0);' id='slidebox-maximize' title='maximize'>&#x2b;</a></span>
    </div>
    <div class='slidebox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 3,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://googledrive.com/host/0B2azLwPqznxqVXhHam5KYVlFYXM' type='text/javascript'/>         
</div>
</div>
</b:if>

Nâng Cao

Lời Kết