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

  • blogger

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




    Demo online:
    https://jsfiddle.net/vietkanpy/430615nn/

    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

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết