Bài đăng nổi bật

Ford Biên Hòa Đồng Nai - Đại lý mua bán xe giá tốt nhất

Xuất hiện tại Biên Hòa Đồng Nai từ năm 2007 tới nay, hãng xe Ôtô nổi tiếng tới từ Mỹ –  Ford Motor  đã khẳng định được một chỗ đứng trong l...

Thứ Sáu, 3 tháng 3, 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 www.2-tek.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://www.2-tek.net 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://www.2-tek.net !

0 nhận xét

Đăng nhận xét