Thứ Hai, 27 tháng 2, 2017

Hướng Dẫn Tạo CODE Nút Share - Xem Phim cho Blogger WEB Phim

Xin chào anh em cũng lâu rồi không chia sẻ gì lên http://CODESEO.net nên hôm nay nhân tiện có 1 số anh em hỏi về vấn đề tạo nút Share và nút Xem Phim cho những website về Phim trên Blogspot nên viết bài này luôn
Cái này thực chất nó chỉ là jquery ẩn hiện nội dung thôi nên rất dễ áp dụng ngay cả với nhiều trường hợp khác
Dưới đây là DEMO hình ảnh trên http://Phim14.Me




Tất cả những CODE sẽ được đặt trong phần nội dung bài viết (ITEM)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Tất cả CODE để ở đây
</b:if>



Chúng ta có đoạn CODE HTML như sau

<div class="nutvideo">
<script>
//<![CDATA[
   urlnow = document.location.href;
document.write('<a href="http://www.facebook.com/sharer.php?u='+urlnow+'"><div class="share_thongtin">SHARE</div></a> <a class="xemvideo" id="xemvideo" onclick=""><div class="xemphim">XEM PHIM</div></a>');
//]]>
</script>
</div>

Về phần CSS của 2 Nút này các bạn có thể tự làm theo ý thích hoặc tham khảo tại http://Phim14.Me nhé. Ở đây mình sẽ viết sẵn ra CSS như này


<style>
.hide {display:none}
.share_thongtin {
    background: #6495ed;
}
.xemphim {
    background: #a52a2a;
}
.share_thongtin:hover a, .xemphim:hover {
    color: red;
}
.share_thongtin:hover, .xemphim:hover {
    opacity: .9;
    color: white!important;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
}
.share_thongtin, .xemphim {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff;
    margin: 10px;
}
</style>

Phần Player ta sẽ bọc trong class .hide ví dụ <div class"video hide">PLAYER Tại Đây</div>

Và quan trọng nhất là jquery điều khiển


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
$(".xemvideo").click(function () {
$('.video').removeClass('hide');
$('.nutvideo').addClass('hide'); 
 });
 });
//]]>
</script>

Mọi thứ chỉ có vậy thôi
Chúc các bạn thành công. Nếu có lòng hãy cho 1 textlink về http://Phim14.Me !