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 có được không? Tất nhiên là đươc rồi bởi vì được nên mới có bài viết này. 

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

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

1. Đầu tiên các bạn vào Blogger -> Mẫu -> Chỉnh sửa htm, sau đó chèn đoạn CSS sau và trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

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}

2. Sau đó các bạn chèn đoạn javascript sau vào trước thẻ đóng </body>

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()
  })
});

3. Sau đó các bạn tìm dòng <data:post.body/> và chèn đoạn html vào sau hoặc bên phải nó

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>

4. Lưu Mẫu (Save Template) lại
5. Thưởng thức thành quả

Nâng Cao

Lời Kết