[Code] Tạo button Live Preview và Giá sản phẩm ở sidebar blogger

avatar

blogger59
178
27
blogger
An toàn
cập nhật
Thành viên quen thuộc
Thành viên quen thuộc

Bài viết :
59
Points :
178
Like :
27
blogger
An toàn
cập nhật

Hướng dẫn tạo button Live Preview và Giá sản phẩm ở sidebar




Demo online:

Mình lướt face thấy có bạn hỏi cái này trên idntheme cũng chẳng biết gọi nó là gì. thui thì đặt bừa cái tên là button Live Preview và Giá sản phẩm ở sidebar vậy Smile)

Code đơn giản thôi. nhưng nếu bạn nào thích học hỏi thì có thể áp dụng được nhiều thứ. nhất là làm web bán hàng. có thể tùy biến lại rất hay.

Bước 1: Bạn vào bên slide cho code này vào chỗ cần hiện.


Code:
<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>

Thích thì cho vào bên slide : cái này tùy tem mà cho nhé. mình ko hướng dẫn chi tiết. bạn nào ko biết tý gì về code post tem nên thì mình thêm vào cho :)

Bước 2: cho code button vào bài viết


Nghĩa là cái này khi bạn đăng bài thì để ở chế độ HTML rùi copy cuối cùng. rùi sửa link cho phù hợp nhé

Code:
<div style="display: none;">
    <div id="Theme-details">



        <div id="store-style"><a class="storebutton but1" href="http://www.hotrofm.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.hotrofm.net/" rel="nofollow" target="_blank">Free Download</a>
        </div>


    </div>
</div>

Thường thì cho cuối bài viết. Đến phần này các bạn tự sửa html +css cho phù hợp site của mình nhé.
Tags: #code #blogger
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...