Thêm widgets Button Live Preview và Giá sản phẩm ở Sidebar

Chắc hẳn khi bạn tải template ở nhiều trang lớn hoặc bạn có thể tới idntheme để thấy được widgets này.

Công dụng của nó bạn có thể dùng nó để áp dụng cho web bán hàng hoặc share và bán Template.

Để làm được vậy đầu tiên bạn copy đoạn code phía dưới:

<b:if cond='data:blog.pageType == "item"'>
<a name="details"></a>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 $('a[name="details"]').before($("#Theme-details").html()), $("#Theme-details").html("")
});
//]]>
</script>
<style>
/* CSS Store Style */
#store-style {
    background: #f6f8f9;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin: 0 0 20px 0
}
#store-style .storebutton {
    display: block;
    position: relative;
    background: #0eb1f0;
    color: #fff;
    font-weight: 700;
    border-radius: 3px;
    text-align: center;
    margin: 0;
    transition: all .4s ease-in-out
}
.rio-ss {
    overflow: hidden;
    line-height: normal
}
.idb {
    line-height: 1.5;
}
#store-style .storebutton:hover {
    background: #0d9ed7;
    color: #fff;
}
.but1,
.but2 {
    padding: 14px
}
.storelist {
    background: #fff;
    display: block;
    padding: 10px 5px;
    margin: 0 0 5px 0;
    width: 100%;
    float: left;
    color: #6c7c87;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all .6s
}
.storelist:before {
    content: "\f14a";
    font-family: FontAwesome;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 5px;
    margin: 0 5px 0 0;
    transition: all .6s
}
.storelist:hover:before {
    color: #f39c12;
}
#sidebar-idwrapper {
    padding: 20px;
    width: 35%;
    float: right;
    word-wrap: break-word;
    overflow: hidden;
}
#main-wrapper {
    width: 50%;
    float: left;
    margin: 0;
    padding: 5px 2px;
    word-wrap: break-word;
    background: #f6f8f9;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 20px;
     margin-top:20px;
}
</style>
</b:if>

Bạn dán vào chỗ cần hiện đơn giản nhất là bạn vào bố cục và thêm html mới sau đó dán đoạn code này và lưu lại.
Để code này hoạt động:
Mỗi khi bạn viết bài bạn chuyển qua tab HTML và thêm code sau:

<div style="display: none;">
    <div id="Theme-details">
        <div id="store-style"><a class="storebutton but1" href="http://www.startruongit.net/" rel="nofollow" target="_blank">Live Preview</a>
            <br />
            <div class="rio-ss idb">See it live with all the features that exist, both on the homepage and the page posts.</div>
        </div>
        <div id="store-style"><a class="storebutton but1 free" href="http://www.startruongit.net/" rel="nofollow" target="_blank">Free Download</a>
        </div>
    </div>
</div>

Bạn có thể sửa css và html để phù hợp với web của bạn.
Nếu có vướng mắc chỗ nào bạn có thể để lại bình luận mình sẽ hướng dẫn.

Nguồn: hotrofm.net

Download Here