You are not connected. Please login or register

Diễn Đàn Hỗ Trợ FM  » Advanced Search

Chuyển đến trang : 1, 2, 3, 4, 5, 6  Next

Tìm thấy 90 mục

CÁCH LÀM

Hi hi, giải thích hơi khó hiểu tí Smile)
Chèn code sau đây vào cuối Viewtopic_body
Code:
<script>
//<![CDATA[
if (!(_userdata["session_logged_in"] = 0)) {$(".postbody a").removeAttr("href");}
//]]>
</script>


GIẢI THÍCH

- Thay .postbody thành selector của bài viết Smile)
- _userdata["session_logged_in"] = 0 : Xác định bạn đã đăng nhập hay chưa, nếu _userdata["session_logged_in"] = 1 thì bạn đã đăng nhập và ngược lại
- .removeAttr("href") : lệnh xóa href của link
VD :
Code:
<a href="/dmcl" class="dmcln">KCUF</div>

Code:
$("a.dmcln").removeAttr("href")

Khi đó, lệnh .removeAttr("href") sẽ gỡ bỏ attribute href /dmcl

Tags: #Code #link
Search in: Code Forumotion  Chủ đề: [Code] Ngăn click vào link ở bài viết khi chưa đăng nhập  Trả lời: 2  Xem: 1364

jquery LazyLoad dùng để làm gì


jquery LazyLoad nhằm làm trễ việc load ảnh trong trang web. Ảnh nằm bên ngoài khung hình sẽ không load lên cho đến khi người dùng cuộn trang web tới nó. Sử dụng Lazy Load ở những trang web dài với nhiều hình ảnh sẻ giúp trang được tải nhanh hơn, trong một số trường hợp còn giúp giảm tải cho máy chủ web cải thiện tốc độ trải trang của bạn đáng kể với website sử dụng nhiều hình ảnh.



Cách sử dụng jqueryLazyLoad


Các bạn sử dụng code dưới cho vào sau <head> là được. cho nó load trước.

Code:
(function(a) {
    a.fn.lazyload = function(b) {
        var c = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",
            container: window
        };
        if (b) {
            a.extend(c, b)
        }
        var d = this;
        if ("scroll" == c.event) {
            a(c.container).bind("scroll", function(b) {
                var e = 0;
                d.each(function() {
                    if (a.abovethetop(this, c) || a.leftofbegin(this, c)) {} else if (!a.belowthefold(this, c) && !a.rightoffold(this, c)) {
                        a(this).trigger("appear")
                    } else {
                        if (e++ > c.failurelimit) {
                            return false
                        }
                    }
                });
                var f = a.grep(d, function(a) {
                    return !a.loaded
                });
                d = a(f)
            })
        }
        this.each(function() {
            var b = this;
            if (undefined == a(b).attr("original")) {
                a(b).attr("original", a(b).attr("src"))
            }
            if ("scroll" != c.event || undefined == a(b).attr("src") || c.placeholder == a(b).attr("src") || a.abovethetop(b, c) || a.leftofbegin(b, c) || a.belowthefold(b, c) || a.rightoffold(b, c)) {
                if (c.placeholder) {
                    a(b).attr("src", c.placeholder)
                } else {
                    a(b).removeAttr("src")
                }
                b.loaded = false
            } else {
                b.loaded = true
            }
            a(b).one("appear", function() {
                if (!this.loaded) {
                    a("<img />").bind("load", function() {
                        a(b).hide().attr("src", a(b).attr("original"))[c.effect](c.effectspeed);
                        b.loaded = true
                    }).attr("src", a(b).attr("original"))
                }
            });
            if ("scroll" != c.event) {
                a(b).bind(c.event, function(c) {
                    if (!b.loaded) {
                        a(b).trigger("appear")
                    }
                })
            }
        });
        a(c.container).trigger(c.event);
        return this
    };
    a.belowthefold = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).height() + a(window).scrollTop()
        } else {
            var d = a(c.container).offset().top + a(c.container).height()
        }
        return d <= a(b).offset().top - c.threshold
    };
    a.rightoffold = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).width() + a(window).scrollLeft()
        } else {
            var d = a(c.container).offset().left + a(c.container).width()
        }
        return d <= a(b).offset().left - c.threshold
    };
    a.abovethetop = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).scrollTop()
        } else {
            var d = a(c.container).offset().top
        }
        return d >= a(b).offset().top + c.threshold + a(b).height()
    };
    a.leftofbegin = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).scrollLeft()
        } else {
            var d = a(c.container).offset().left
        }
        return d >= a(b).offset().left + c.threshold + a(b).width()
    };
    a.extend(a.expr[":"], {
        "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
    })
})(jQuery);
$(function() {
    $("img").lazyload({
        placeholder: "http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",
        effect: "fadeIn",
        threshold: "-50"
    })
});


code trên của mình là tất cả các ảnh sẽ được thêm hiệu ứng lazyload. bạn có thể tùy chỉnh lại ở phần cuối jquery  $("img").lazyload({ phần này lựa chọn class hoặc id mà bạn muốn load . ( Nhiều người đôi khi chỉ muốn lazyload một vùng nhất định
Tags: #code #jquery-lazyload

Làm đẹp URL Label cho Blogspot / Blogger

Thủ thuật làm đẹp url cho label của Blogspot / Blogger nhằm tối ưu hơn tên label ở dạng không dấu chuyển thành có dấu mà thôi. còn các bạn nào đã đặt label có dấu rùi thì chắc không cần đến chức năng này.



Code:

<script type='text/javascript'>
//<![CDATA[
$(".class, #id").each(function() {
 var text = $(this).text();
 text = text.replace("demo-label-1", "Demo Label 1");
 text = text.replace("demo-label-2", "Demo Label 2");
 $(this).text(text);
});
//]]>
</script>


Code:
.class và #id

Là tên của class và id chứa tên Label của bạn.

Code:
demo-label-1, demo-label-1

Là tên Label trong bài viết của bạn.

Code:
Demo Label 1, Demo Label 1

Là tên Label mà bạn muốn hiển thị trên Blog.

Muốn thêm các label khác chỉ việc thêm dòng này

Code:
text = text.replace("demo-label-1", "Demo Label 1");


Thường các blogger đều có sẵn kho jquery . nếu các bạn nào chưa có thì phải thêm cái này

Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>


Bài viết tham khảo từ toicode.com
Tags: #code #blogger #code-blogger
Search in: Code Blogger  Chủ đề: [Blogger] Làm đẹp URL Label cho Blogspot / Blogger  Trả lời: 0  Xem: 1483

Cách đặt adsen quảng cáo vào giữa bài viết


Lợi ích của thủ thuật Cài đặt quảng cáo Adsense ở giữa bài viết là tỷ lệ người dùng click vào quảng cáo ngay ở trong bài viết là cao hơn 60% . Mình cũng không nói thêm nữa và chúng ta bắt đầu làm.



Cách đặt adsen quảng cáo vào giữa bài viết ở blogspot


Đầu tiên các bạn vào chỉnh sửa HTMl sau đó tìm 

Code:
<data:post.body/>


Có thể trong có có nhiều <data:post.body/> thì bạn hay thử lần lượt nhé. Mình sẽ không nói chi tiết vì mỗi tem thiết kế một khác.

Thay code vào đoạn trên

Code:
<div expr:id='"zet1" + data:post.id'/>
<div class='googlezet'>
<!-- Code quảng cáo adsen bạn muộn đặt -->
</div>
<div expr:id='"zet2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("zet1<data:post.id/>");var obj1=document.getElementById("zet2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>


Lưu vào và hưởng thành quá. :)

Cách đặt adsen quảng cáo vào giữa bài viết forumotion


Tương tự như blogger thì ở forumotion chúng ta tìm dòng {postrow.displayed.MESSAGE} ở viewtopic của forumotion và thay bằng code dưới

Code:
<div id='zet1{postrow.displayed.U_POST_ID}'/> </div>
                          
<div class='googlezet'>
<!-- Code quảng cáo adsen bạn muộn đặt -->
</div>      
                          
<div id='zet2{postrow.displayed.U_POST_ID}'><p>{postrow.displayed.MESSAGE}</p></div>
                                  
<script type='text/javascript'>
var obj0 = document.getElementById("zet1{postrow.displayed.U_POST_ID}");
var obj1 = document.getElementById("zet2{postrow.displayed.U_POST_ID}");
var s = obj1.innerHTML;
var t = s.substr(0, s.length / 2);
var r = t.lastIndexOf("<br>");
if (r > 0) {
    obj0.innerHTML = s.substr(0, r);
    obj1.innerHTML = s.substr(r + 4);
}
</script>


Lưu vào.

Không chỉ để hiển thị quảng cáo từ Google Adsense, nhưng người bạn của tôi cũng có thể cài đặt mã quảng cáo hay những nội dung khác như liên kết liên quan đến bài viết, hoặc khác.

Bài viết được tham khảo từ arlinadzgn
Tags: #code #blogger
Demo : hhttp://hoaian.123.st

Hướng dẫn
ACP > DISPLAY > Templates > Quản Lý Tổng Thể > Thêm Code bên dưới vào cuối overall_footer_begin

1. Hiệu ứng bắn pháo hoa
Code:
<script src='http://yourjavascript.com/141525167513/hieuungphaohoa.js' type='text/javascript'/>


2. Nhạc pháo hoa
Code:
<iframe src="http://www.nhaccuatui.com/mh/background/uCxytx9BioUS" width="1" height="1" frameborder="0" allowfullscreen=""></iframe>

Tags: #code
Search in: Code Forumotion  Chủ đề: [Code] Pháo hoa và tiếng pháo cho forum  Trả lời: 0  Xem: 690
Demo : http://chomeo.5forum.net



Hướng dẫn
ACP > DISPLAY > Templates > Quản Lý Tổng Thể > Thêm Code bên dưới vào cuối overall_footer_begin
Code:
  <img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="http://3.bp.blogspot.com/-4Zt-ZB4tols/UsA_qIR0w9I/AAAAAAAAA3w/Ffyy-5OqGec/s320/banner_header.png">




Tags: #code
Search in: Code Forumotion  Chủ đề: [Code] Trang trí Tết bên góc trái cho forum  Trả lời: 3  Xem: 690
DEMO:
 

HƯỚNG DẪN: rất dễ làm (Copy code dưới sau bỏ nó vào hết CSS)
Code:
body.chatbox{background-color:#f3f3f3}#chatbox_members
 .online-users
li{background-image:url(http://i.imgur.com/6A6tt.png);background-position:left;background-repeat:no-repeat;background-size:13%;padding-left:20px}#chatbox_header{background:url(http://i25.servimg.com/u/f25/14/45/99/41/untitl20.jpg)
 repeat-x!important;border-bottom:1px solid
#c9c9c9;border-left:0;border-right:0;border-top:0;margin:0!important}h2.chatbox-title{margin-top:4px}#chatbox_header
 
.chat-title{background:url(http://i25.servimg.com/u/f25/14/45/99/41/112_co11.png)
 
no-repeat;color:transparent;cursor:default;font-size:14px;letter-spacing:-.4em;margin-bottom:-20px;margin-left:-20px}#chatbox_header
 
.chat-title:hover{background:url(http://i25.servimg.com/u/f25/14/45/99/41/112.png)
 
no-repeat;letter-spacing:2.1em}#chatbox_main_options,#chatbox_main_options
 a,#chatbox_main_options span{color:#9a9a9a !importat;font-family:Arial
#000;text-decoration:none;text-shadow:1px 1px 1px
#fff;text-transform:uppercase}#chatbox_main_options
a:hover{color:grey;font-family:Arial
#000;text-decoration:none!important;text-shadow:1px 1px 1px
#b8b8b8;text-transform:uppercase}#chatbox_main_options{-moz-border-radius:0
 0 5px 5px;-moz-box-shadow:0 0 4px #c6c6c6;-webkit-box-shadow:0 0 4px
#c6c6c6;background:url(http://i25.servimg.com/u/f25/14/45/99/41/untitl21.jpg)
 repeat-x;border:1px solid #c9c9c9;border-radius:0 0 5px
5px;box-shadow:0 0 4px
#c6c6c6;float:right;margin-right:50px;margin-top:-10px;padding:2px 3px
1px
5px}#chatbox_main_options:hover{margin-top:-1px}ul#chatbox_main_options
li,ul#chatbox_main_options li,ul#chatbox_main_options li
a,ul#chatbox_main_options li
label{color:#9a9a9a!important;text-shadow:1px 1px 1px
#fff}#chatbox_members{background:url(http://i25.servimg.com/u/f25/14/45/99/41/50347510.png);background-color:#fff;border-right:1px
 solid
#c9c9c9;margin-bottom:-30px}#chatbox_members:hover{background-color:#fcfcfc;border-right:1px
 solid
#b7b7b7}h4.member-title{background:url(http://i25.servimg.com/u/f25/14/45/99/41/untitl23.jpg)
 
repeat-x!important;color:#fff!important;cursor:default;font-family:Arial
 #000;letter-spacing:.5em;margin-top:0;text-shadow:0 0 3px
#000;text-transform:uppercase}#chatbox_members
ul{list-style:none;margin:0}#chatbox_members ul
li{background:url(http://i25.servimg.com/u/f25/14/45/99/41/115.png);border-bottom:1px
 solid #e2e2e2;color:#393939;font-family:Arial
#000;font-size:14px;font-weight:700;margin:0;padding-left:10px}#chatbox_members
 ul
li:hover{background-color:#f4f4f4;background-image:url(http://i25.servimg.com/u/f25/14/45/99/41/114.png);background-position:center
 left;background-repeat:no-repeat}#chatbox_members ul
li:active{background-image:url(http://i25.servimg.com/u/f25/14/45/99/41/213.png)}#chatbox_members
 ul li
a{color:#909090;font-size:12px;text-decoration:none;text-shadow:1px 1px
1px #fff}#chatbox_members ul li
a:hover{color:#393939;text-decoration:none!important}#chatbox{background-image:url(http://www.servimg.com/u/f34/12/24/45/65/map12810.jpg);background-position:center
 
center;background-repeat:no-repeat}.chatbox_row_1,.chatbox_row_2{background-color:transparent!important}.chatbox_row_1:hover,.chatbox_row_2:hover{-moz-border-radius:5px;-moz-box-shadow:0
 0 3px #dcdcdc;-webkit-box-shadow:0 0 4px
#dcdcdc;background:-moz-linear-gradient(top,#ffffff,#f9f9f9);background-color:#fff!important;border:1px
 solid #c9c9c9;border-radius:5px;box-shadow:0 0 3px
#dcdcdc;margin:5px}.date-and-time{color:#c3c3c3!important;font-size:9px!important;font-style:italic!important;letter-spacing:-.1em!important}.user-msg{color:#8c8c8c!important;font-family:Georgia!important}.user-msg
 
a:hover{color:#000!important;text-decoration:none!important}#chatbox_messenger_form{-moz-border-radius:5px
 5px 0 0;-moz-box-shadow:0 0 4px #c6c6c6;-webkit-box-shadow:0 0 4px
#d4d4d4;background:-moz-linear-gradient(top,#ffffff,#e2e2e2)!important;background-color:#fff;border-bottom:0;border-left:1px
 solid #c9c9c9;border-radius:5px 5px 0 0;border-right:1px solid
#c9c9c9;border-top:1px solid #c9c9c9;bottom:0;box-shadow:0 0 4px
#c6c6c6;float:none!important;height:30px;left:0;margin-left:auto;margin-right:auto;position:fixed;right:0;width:650px;z-index:999}#chatbox_messenger_form:hover{border-left:1px
 solid #a7a7a7;border-right:1px solid #a7a7a7;border-top:1px solid
#a7a7a7}#divbold,#divcolor,#divitalic,#divsmilies,#divstrike,#divunderline{-moz-border-radius:3px;background:url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg)
 repeat-x;background-color:#fff;border:1px solid
#c9c9c9;border-radius:3px}#divbold:hover,#divcolor:hover,#divitalic:hover,#divsmilies:hover,#divstrike:hover,#divunderline:hover{background:url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg)
 repeat-x;border:1px solid
#a2a2a2}#divbold:active,#divcolor:active,#divitalic:active,#divsmilies:active,#divstrike:active,#divunderline:active{background:url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg)
 repeat-x}label
input#message{-moz-border-radius:3px;background-color:#fff;border:1px
solid #c9c9c9;border-radius:3px;font-size:12px;height:17px}label
input#message:hover{background-color:#f5f5f5;border:1px solid
#b2b2b2}label input#message:focus{background-color:#e0fdff;border:1px
solid
#a4a4a4}input#submit_button{-moz-border-radius:3px;background:url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg)
 repeat-x;background-color:#fff;border:1px solid
#c9c9c9;border-radius:3px;color:#929292;cursor:pointer;font-family:Arial
 
#000;font-size:12px;padding-left:2px;padding-right:2px;text-transform:uppercase}input#submit_button:hover{background:url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg)
 repeat-x;border:1px solid
#a2a2a2;color:#2c2c2c}input#submit_button:active{background:url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg)
 
repeat-x}.right{padding-top:4px!important}#chatbox_footer{border:0!important}.score{padding-top:20px}.pnsmall{font-size:10px;font-style:italic;margin-top:-5px}.tipsy{font-size:10px;padding:5px;position:absolute;z-index:999}.tipsy-inner{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-radius:3px;color:#FFF;max-width:200px;padding:5px
 8px 4px;text-align:center}.tipsy-arrow{border:5px dashed
#000;height:0;line-height:0;position:absolute;width:0}.tipsy-arrow-n{border-bottom-color:#000}.tipsy-arrow-s{border-top-color:#000}.tipsy-arrow-e{border-left-color:#000}.tipsy-arrow-w{border-right-color:#000}.tipsy-n
 
.tipsy-arrow{border-bottom-style:solid;border-left-color:transparent;border-right-color:transparent;border-top:none;left:50%;margin-left:-5px;top:0}.tipsy-nw
 
.tipsy-arrow{border-bottom-style:solid;border-left-color:transparent;border-right-color:transparent;border-top:none;left:10px;top:0}.tipsy-ne
 
.tipsy-arrow{border-bottom-style:solid;border-left-color:transparent;border-right-color:transparent;border-top:none;right:10px;top:0}.tipsy-s
 
.tipsy-arrow{border-bottom:none;border-left-color:transparent;border-right-color:transparent;border-top-style:solid;bottom:0;left:50%;margin-left:-5px}.tipsy-sw
 
.tipsy-arrow{border-bottom:none;border-left-color:transparent;border-right-color:transparent;border-top-style:solid;bottom:0;left:10px}.tipsy-se
 
.tipsy-arrow{border-bottom:none;border-left-color:transparent;border-right-color:transparent;border-top-style:solid;bottom:0;right:10px}.tipsy-e
 
.tipsy-arrow{border-bottom-color:transparent;border-left-style:solid;border-right:none;border-top-color:transparent;margin-top:-5px;right:0;top:50%}.tipsy-w
 
.tipsy-arrow{border-bottom-color:transparent;border-left:none;border-right-style:solid;border-top-color:transparent;left:0;margin-top:-5px;top:50%}.warning2{-moz-border-radius:10px;-moz-box-shadow:1px
 1px 10px red;-webkit-border-radius:10px;-webkit-box-shadow:1px 1px 10px
 
red;background-color:transparent;background-image:url(http://i47.servimg.com/u/f47/16/97/26/79/error10.png);background-position:10px
 center;background-repeat:no-repeat;border:1px
solid;border-color:red;border-radius:10px;box-shadow:1px 1px 10px
red;color:red;font-family:Lobster;font-size:15px;font-style:normal;font-weight:400;margin:10px
 auto;padding:15px 10px 15px
70px;width:90%}.lock2{-moz-border-radius:10px;-moz-box-shadow:1px 1px
10px blue;-webkit-border-radius:10px;-webkit-box-shadow:1px 1px 10px
blue;background-color:transparent;background-image:url(http://i47.servimg.com/u/f47/16/97/26/79/lock10.png);background-position:10px
 center;background-repeat:no-repeat;border:1px
solid;border-color:blue;border-radius:10px;box-shadow:1px 1px 10px
blue;color:blue;font-family:Lobster;font-size:15px;font-style:normal;font-weight:400;margin:10px
 auto;padding:15px 10px 15px
70px;width:90%}.yes2{-moz-border-radius:10px;-moz-box-shadow:1px 1px
10px green;-webkit-border-radius:10px;-webkit-box-shadow:1px 1px 10px
green;background-color:transparent;background-image:url(http://i47.servimg.com/u/f47/16/97/26/79/accept11.png);background-position:10px
 center;background-repeat:no-repeat;border:1px
solid;border-color:green;border-radius:10px;box-shadow:1px 1px 10px
green;color:green;font-family:Lobster;font-size:15px;font-style:normal;font-weight:400;margin:10px
 auto;padding:15px 10px 15px
70px;width:90%}.tag2{-moz-border-radius:10px;-moz-box-shadow:1px 1px
10px orange;-webkit-border-radius:10px;-webkit-box-shadow:1px 1px 10px
orange;background-color:transparent;background-image:url(http://i47.servimg.com/u/f47/16/97/26/79/link_a10.png);background-position:10px
 center;background-repeat:no-repeat;border:1px
solid;border-color:orange;border-radius:10px;box-shadow:1px 1px 10px
orange;color:orange;font-family:Lobster;font-size:15px;font-style:normal;font-weight:400;margin:10px
 auto;padding:15px 10px 15px
70px;width:90%}.move2{-moz-border-radius:10px;-moz-box-shadow:1px 1px
10px #4b0082;-webkit-border-radius:10px;-webkit-box-shadow:1px 1px 10px
#4b0082;background-color:transparent;background-image:url(http://i47.servimg.com/u/f47/16/97/26/79/page_w10.png);background-position:10px
 center;background-repeat:no-repeat;border:1px
solid;border-color:#4b0082;border-radius:10px;box-shadow:1px 1px 10px
#4b0082;color:#4b0082;font-family:Lobster;font-size:15px;font-style:normal;font-weight:400;margin:10px
 auto;padding:15px 10px 15px
70px;width:90%}.ban2{-moz-border-radius:10px;-moz-box-shadow:1px 1px
10px #000;-webkit-border-radius:10px;-webkit-box-shadow:1px 1px 10px
#000;background-color:transparent;background-image:url(http://i47.servimg.com/u/f47/16/97/26/79/set_se10.png);background-position:10px
 center;background-repeat:no-repeat;border:1px
solid;border-color:#000;border-radius:10px;box-shadow:1px 1px 10px
#000;color:#000;font-family:Lobster;font-size:15px;font-style:normal;font-weight:400;margin:10px
 auto;padding:15px 10px 15px
70px;width:90%}.tum2{-moz-border-radius:10px;-moz-box-shadow:1px 1px
10px #a52a2a;-webkit-border-radius:10px;-webkit-box-shadow:1px 1px 10px
#a52a2a;background-color:transparent;background-image:url(http://i47.servimg.com/u/f47/16/97/26/79/thumb_10.png);background-position:10px
 center;background-repeat:no-repeat;border:1px
solid;border-color:#a52a2a;border-radius:10px;box-shadow:1px 1px 10px
#a52a2a;color:#a52a2a;font-family:Lobster;font-size:15px;font-style:normal;font-weight:400;margin:10px
 auto;padding:15px 10px 15px
70px;width:90%}.chienthan{background:#000;border-radius:0 0 2px
2px;height:4px}.chatbox_row_1{background-color:transparent;padding:4px}.chatbox_row_2{background-color:transparent;padding:4px}#chatbox_members
 
.member-title{background-color:#000;background-image:none;color:#FCD424;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;padding:.5em
 .25em;text-align:center}

NGUỒN -> CLICK VÀO ĐÂY


Tags: #Code #chatbox-đẹp-forumotion
Search in: Code Forumotion  Chủ đề: [Code] Làm đẹp chatbox mặc định cho Forumotion !  Trả lời: 6  Xem: 1073

Trong bài viết này là 1 số Codes và Tuts được share tại hotrofm.net , nếu còn thiếu các bạn cmt bên dưới để mình bổ sung nhé !


1 : Đầu tiên là chắc chắn cần có Skin, bạn có thể lấy 1 Skin tại đây : Click


2 : Latest topic ( có rất nhiều bạn có thể chọn 1 cái theo ý thích của mình )

Latest topic vietdesigner full version
Topx Style đơn giản nhưng màu mè ( ver 1.5 )
Topx advanced statistics latest
Topx style đơn giản nhưng màu mè
Latest topic devs
Topx dạng tab của Vngame
Last Online & Quảng Cáo bên phải Forum
Topx vxf.vn full version
Topx xdavn Full version
Last dạng tab invision
Topx style xenforo
Topx dvanced statistics latest classic PunBB
- update...

3 : Codes ( Click vào demo để xem demo )

- Chatbox hotrofm đang dùng - Demo
- Đặt avatar của bạn ở một nơi nhất đinh - Demo
bảng thông báo đơn giản đẹp - Demo
Tiền tố Forumotion - Demo
hoa mai rơi khắp forum - Demo
Việt hóa trang lý lịch Forumotion - Demo
- Xem ảnh với fancybox + login + thông báo tin nhắn - Demo
Bảng đăng nhập đóng mở có nút đăng ký cho Forumotion - Demo
Đăng nhập nhanh trên toolbar FM đã được việt hóa  - Demo
Link youtube tự động chuyển thành video - Demo
Đăng nhập tự động sau khi đăng ký
đăng nhập mới xem được code
Css chuyển toàn bộ bbcode sang font awesome
CSS việt hóa cho các button cực đơn giản mà nhẹ
Hiệu ứng đẹp hiển thị khi rê chuột vào liên kết trong diễn đàn
Ẩn chữ số bài và số % trên Last Topic bằng Javascript
- Việt hóa URL theo tiêu đề bài viết cho Forumotion
Khung thông báo đẹp
Khung thống kê cho PunBB
BQT Trực tuyến - Staff Online Widget
Đóng mở danh mục dành cho Punbb và Phpbb3
Hiển thị số thành viên đang truy cập ảo cho Forumotion
Trích dẫn nhanh trượt xuống không chuyển trang
Hiện tooltip hashtags khi rê vào tên thành viên toàn forum
Giới thiệu Ban quản trị 
Tự động đóng khung các liên kết trong bài viết
Nút đóng mở thanh chat với fanpage facebook
Button reply ảnh GIF
Chatbox cho invision
Js vô hiệu hoá ký tự đặc biệt phần đăng ký
Kiểm tra tài khoản khi đăng ký
Tự động đăng nhập sau khi đăng ký xong cho Forumotion
Xóa bình luận thông qua ajax không chuyển trang
Sửa lỗi font chữ bị nhỏ khi copy bài viết từ một trang web khác
Khung Sceditor cool ( part 2 )
Recommended Content cùng chuyên mục
Quảng cáo sau bài viết thứ nhất
Chuyển link theo phong cách xenforo
Khung hashtags posting_body
Huân chương theo số bài viết
Việt hóa thanh toolbar Forumotion
Hiện nhiều tab quảng cáo khi click chuột lần đầu tiên vào diễn đàn
Css respoonsive mobile img forumotion hotrofm.net
code dấu tick như hotrofm
Tự động thay thế các ảnh bị hư bằng một ảnh khác
Avatar drop - style phutu.vn ( ver Punbb)
Đổi font chữ cho từng Nickname
Thanh nav đơn giản
Rút gọn liên kết dài trong bài viết
Giới hạn số ký tự tối thiểu khi gửi bài viết trong diễn đàn
Đóng mở box
Tạo icon riêng cho từng box
Code popup login style ForumUS
Frame bbcode forumotion
bbcode nhúng video từ vbox7.com forumotion
code thay đổi button quote ở mobile
Thay Úp ảnh mặc định thành úp ảnh Imgur
bbcode embe jsfiddle in website forumotion
bbcode up ảnh imgur thay thế code tinypic forumotion
bbcode up file lên driver google bằng google app scrip
bbcode thông báo notification hide forumotion
bbcode phân trang trong bài viết
Notifications thông báo khi có trả lời bài viết và nhắn tin riêng
Gửi bài mới và bình luận bỏ qua trang trung gian (không chuyển hướng)
Đóng khung chữ ký ĐẸP cho Forumotion
chọn toàn bộ Code cho Forumotion
jquery Tạo Prefix ( tiêu ngữ )
Bảng đăng nhập và đăng ký nhanh popup 2 trong 1
Bảng đăng ký, đăng nhập, tìm kiếm, đăng xuất nhanh trượt xuống
Thay Background liên tục
Xóa topic không chuyển trang
Tự động chèn nguồn trang sau copy
Thông báo hiện ra khi bạn vô tình tắt trình duyệt lúc đang soạn bài viết
Khung khuyến cáo ở nơi comment bài viết
Thay đổi màu thanh cuộn cho Web, Forum
News Sticker với CSS3 Thuần dành cho forumotion
Tạo nút hỏi trước khi Thoát khỏi diễn đàn
Giới hạn lần xem cho khách
tùy chọn thêm cho hashtags
bbcode nút demo và dowload cực đẹp với font awesome
Ruồi và nhện bò khắp diễn đàn
Lên top bằng tên lửa style VBB
Viewtopic_body đẹp dạng tin tức
- updates....


Tạm thời up như vậy nhé ! sẽ sắp sếp lại sau


Tags: #code #tuts #html-page #forumotion #lasttopic #thủ-thuật #hướng-dẫn
Search in: Code Forumotion  Chủ đề: [Code] Tổng hợp Codes và Tuts cho forumotion tại hotrofm.net  Trả lời: 5  Xem: 1784
DEMO

Hướng Dẫn Làm:
Vào Viewtopic_Body tìm:
Code:
{postrow.displayed.SIGNATURE}

Thay bằng:
Code:
<div align="center">
<fieldset class="signature"><legend class="signtop"><b>Chữ Ký</b></legend>
{postrow.displayed.SIGNATURE}</fieldset></div>

Bỏ cái này vào CSS:
Code:
.signature
{
font-size:12px;
margin-top:20px;
padding:10px;
float:center;
vertical-align:bottom;
border:1px dashed #5ED7FF;
width: auto;
}
.signtop
{
font-size:12px;
padding:3px 10px 3px 10px;
margin-bottom:10px;
border:1px solid #38ABFF;
background-color:#38ABFF;
color: #FFFFFF
}

Nguồn: Lop12c7
Tags: #Code #đóng-khung-chữ-ký-đẹp-cho-forumotion
Search in: Code Forumotion  Chủ đề: [Code] Đóng khung chữ ký ĐẸP cho Forumotion !  Trả lời: 3  Xem: 1170
Hướng dẫn tạo Rich Snippets đánh giá 5 sao động vào blogspot. Chèn đánh giá 5 sao vào Blogger, Cách chèn đánh giá 5 sao cho bài viết Blogspot.



Rich Snippets đánh giá 5 sao là gì?


Có nhiều loại Rich Snippets khác nhau, trong đó Rich Snippets đánh giá 5 là đoạn thông tin hiển thị đánh giá 5 sao (5 điểm), xếp hạng 1 trang web (trang, bài viết của website) nhằm làm tăng độ nổi bật trên kết quả tìm kiếm

Cách chèn đánh giá 5 sao cho bài viết Blogspot


Hiện tại có 2 cách phổ biến để chèn đánh giá 5 sao cho bài viết Blogspot.

Cách 1: Chèn 1 Rich Snippets cố vào mã HMTL của template. Ưu điểm là đơn giản, chỉ làm 1 lần nhưng điểm đánh giá và lượt đánh lại giống hệt nhau. Dễ bị Google cho ra đảo vì bị coi là “Fake Rich Snippets” hay “Spam in Rich Snippets”. Những vi phạm của bạn có thể bị người khác báo cáo qua Report spam in rich snippets.

Cách 2: Chèn vào từng bài viết. Ưu và nhược điểm thì ngược lại với cách 1. Điểm đánh giá và lượt đánh khác nhau theo ý muốn, nhìn có vẻ thật hơn nhưng lại khá tốn công sức

Tạo Rich Snippets đánh giá 5 sao động vào blogspot là gì?


Tức là 1 giải pháp chèn Rich Snippets đánh giá 5 sao vào blogspot với điểm số dựa vào độ dài của thẻ title và meta description của page. Giải pháp này khắc phục được nhược điểm của 2 cách làm ở trên. Tất nhiên, do đặc thù của blogspot nên nó không thể “động” như plugin kk Star Ratings của WordPress được mọi người nhé.

Bước 1: Vào Blogger -> Cài đặt ->Tùy chọn tìm kiếm -> Bật mô tả tìm kiếm sang Có. Mục đích là để mình có thể định nghĩa thẻ meta description (Mô tả tìm kiếm) khi post bài.

Bước 2: Vào Blogger – chỉnh sửa HTML , tìm đến thẻ <b:includable id=’post’ var=’post’> và chèn đoạn code dưới đây vào trước hoặc sau <data:post.body/> (nội dung bài viết)

Code:
<div itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating' style='color:#3B5998;font-size:13px;'>Điểm <span id='csdreviewValue' itemprop='ratingValue'>4.6</span>/5 dựa vào <span id='csdreviewCount' itemprop='reviewCount'>87</span> đánh giá</div>
<span id='csdratingpercent' style='display: block; width: 65px; height: 13px; background: url(https://1.bp.blogspot.com/-H77E0v75Pu0/WDvD_PK5htI/AAAAAAAAUyc/62DswWzezfkeCK_WDDs-sQWCw4tKuwkfQCLcB/s1600/star-rating-sprite.png) 0 0;'>
</span>
<script type='text/javascript'>
//<![CDATA[
function  csdGetMetaContentByName(name)
{
   var info = document.getElementsByTagName('meta');
  try{
    return [].filter.call(info, function (val) {
        if(val.name.toLowerCase().trim() === name.toLowerCase().trim() ) return val;
    })[0].content;
  }
    catch(err) {
return '';
   }
}
function CSDCreateVote()
{
var csdReviewCountPlus = 10;
var csdtitlePost = document.title.trim();
var csddescription =  csdGetMetaContentByName('description');
if(csddescription=='')
{
  csddescription = csdtitlePost;
}
var csdtitleLen = (csdtitlePost.length==0?160:csdtitlePost.length);
var csddescriptionLen = (csddescription.length==0?200:csddescription.length);
var csdReviewCount = csdtitleLen + csdReviewCountPlus;
var csdPoint = (csdtitleLen%5) +1;
var csdX = (csddescriptionLen/10);
var csdDecimal = parseFloat((csdX - Math.floor(csdX)).toFixed(1));
csdPoint = parseFloat((csdPoint<=3?4:csdPoint));
if(csdPoint==5){
}
else
{
csdPoint += csdDecimal;
}
 //alert(csdPoint);
 if(document.getElementById('csdreviewCount'))
  {
    
    document.getElementById('csdreviewCount').innerHTML = csdReviewCount;
    document.getElementById('csdreviewValue').innerHTML = csdPoint;
     var csdpercent = (csdPoint/5).toFixed(2)*100;
    // alert(csdpercent);
   document.getElementById('csdratingpercent').innerHTML = '<span style="display: block; width: '+ csdpercent +'%; height: 13px; background: url(https://1.bp.blogspot.com/-H77E0v75Pu0/WDvD_PK5htI/AAAAAAAAUyc/62DswWzezfkeCK_WDDs-sQWCw4tKuwkfQCLcB/s1600/star-rating-sprite.png) 0 -13px;"></span>';

  }
}
window.onload = function(){
   CSDCreateVote();
}
//]]>
 </script>


Nguồn : 
Code:
http://chamnhe.com/

Tags: #code #blogger
Search in: Code Blogger  Chủ đề: [Code] Thêm tự động 5 sao Rich Snippets blogspot - blogger  Trả lời: 3  Xem: 2514

Meta seo blogger - blogspot description keywords


Bước 1: Đăng nhập vào blog, sau đó vào mục Template > Edit HTML.

Bước 2: Trong phần <head></head> copy code dưới vào đó. rùi sửa lại tiêu đề vs des, key cho phù hợp với site của các bạn

Code:
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>

<!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>  
<b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if>
<b:if cond='data:blog.pageType == "archive"'><meta content='noindex,nofollow' name='robots'/></b:if>
<b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if>

<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

<!-- Facebook Scrape Tag -->
<meta content='1147991938592467' property='fb:app_id'/>
<meta content='https://www.facebook.com/tencuaban' property='article:author'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='vi_VN' property='og:locale'/>
<meta content='website' property='og:type'/>
<meta content='Hỗ trợ fm' property='og:title'/>
<meta content='Hỗ trợ fm' property='og:description'/>
<meta content='http://www.hotrofm.net/' property='og:url'/>
<meta content='Tên của bạn' property='og:site_name'/>
  <meta content='https://www.facebook.com/hotrofmnet-1147991938592467/' property='article:publisher'/>
<meta content='https://imgfast.net/users/3713/30/06/42/avatars/gallery/avatar10.png' property='og:image'/>
</b:if>


Bước 3: Lưu template lại và chuyển sang bước 4

Bước 4: Vào mục Settings > Search preferences.

Trong phần Meta tags bấm Edit mục Description > tick chọn Yes và điền mô tả dành cho trang của vào đây. Cuối cùng nhấn Save changes.



Thiết lập description cho blogspot

Bước 5: Hướng dẫn đăng bài

Bạn đăng bài thì bên cạnh có cài đặt như sau


Như hình bạn có thể viết dc chuyên mục (label) . tùy chỉnh dc url , viết thêm mô tả của bài viết đó
Tags: #code #blogger #meta-seo
Search in: Code Blogger  Chủ đề: [Code] Meta seo blogger - blogspot description keywords  Trả lời: 0  Xem: 1289

Tab responsive tabs custom tab activate


Demo desktop




Demo mobile


Code:

<div class='accord' id='About'><div>
<ul class='resp-tabs-list'>
<li><i class="fa fa-info-circle"></i> Giới thiệu</li>
<li><i class="fa fa-share-square-o"></i> Kênh Mạng Xã Hội</li>
<li><i class="fa fa-user-plus"></i> Hợp Tác Cùng QHMusic</li>
</ul>

<div class='resp-tabs-container'>
<div>
<p><b><a href="#" target="_blank">Domain.net</a> là một dự án mở rộng của kênh youtube <b><a href="#" target="_blank">QH MUSIC</a></b> trong năm 2016, một kênh chuyên về <b><i><a href="#" target="_blank">Nhạc DJ, Nonstop, Việt Mix</a></i></b> hàng đầu tại Việt Nam.<br />
Tại đây sẽ cập nhật những thông tin cũng như video mới nhất của kênh, hy vọng sẽ mang đến những phút giây thư giãn thoải mái nhất đến với các bạn.<br />
Ủng hộ kênh bằng cách <b><i>LIKE, SHARE &amp; ĐĂNG KÝ</i></b> kênh nhé...<a href="#">đọc tiếp</a></b></p>
</div>
<div>
<p>
The transition had been so sudden and so unexpected that it left me for a moment forgetful of aught else than my strange metamorphosis. My first thought was, is this then death! Have I indeed passed over forever into that other life! But I could not well believe this, as I could feel my heart pounding against my ribs from the exertion of my efforts to release myself.
</p>
</div>
<div>
<p>
Hiện tại QHMUSIC.NET đang trong giai đoạn hoạt động thử nghiệm, vì vậy chúng tôi chưa triển khai các chương trình hợp tác tại trang website, rất cảm ơn bạn đã quan tâm, hy vọng một ngày nào đó không xa chúng ta sẽ cùng được làm việc với nhau.
</p>
</div>

<style>
 .resp-vtabs{
    min-height: 250px;
}
.resp-tabs-list li {
display: inline-block;
padding: 13px 15px;
margin: 0;
list-style: none;
cursor: pointer;
float: left;
}
.resp-tabs-container {
background-color: #FFFFFF;
clear: left;
color: #8e8e8e;
font: normal normal 14px Open Sans;
margin-top: -4px;
line-height: 27px;
padding: 0px;
}
.resp-tab-item {
color: #6e6e6e;
font: normal 600 13px Open Sans;
letter-spacing: 1px;
padding-right: 56px;
text-align: right;
text-transform: uppercase;
}
h2.resp-accordion {
cursor: pointer;
padding: 5px;
display: none;
}
.resp-tabs-container {
text-align: left;
}
.resp-tab-content {
display: none;
padding: 0px 0px 0px 28px;
}
.resp-tab-active {
border-bottom: none;
margin-bottom: -1px !important;
}
.resp-tab-item.resp-tab-active {
color: #189ca0;
}
.resp-tab-active {
border-bottom: none;
background-color: #EEEEEE;
color: #5F5F5F;
}
.resp-content-active, .resp-accordion-active {
display: block;
}
.resp-tab-content {
border: 1px solid #c1c1c1;
}
h2.resp-accordion {
font-size: 13px;
border: 1px solid #c1c1c1;
border-top: 0px solid #c1c1c1;
margin: 0px;
padding: 10px 15px;
}
h2.resp-tab-active {
margin-bottom: 0px !important;
padding: 10px 15px !important;
}
h2.resp-tab-title:last-child {
border-bottom: 12px solid #c1c1c1 !important;
background: blue;
}
/*-----------Vertical tabs-----------*/
.resp-vtabs ul.resp-tabs-list {
float: left;
width: 25%;
}
.resp-vtabs .resp-tabs-list li {
display: block;
padding: 15px 50px 15px 15px !important;
margin: 0;
cursor: pointer;
float: none;
}
.resp-vtabs .resp-tabs-container {
padding: 0px;
background-color: #fff;
float: left;
width: 70%;
border-radius: 4px;
clear: none;
}

.resp-vtabs .resp-tab-content {
border: none;
}
.resp-vtabs li.resp-tab-active {
border-right: none;
background-color: #f1f1f1;
position: relative;
z-index: 1;
margin-right: -1px !important;
}
.resp-arrow {
width: 0;
height: 0;
float: right;
margin-top: 3px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #8C8C8C;
position: relative;
top: 4px;
}
h2.resp-tab-active span.resp-arrow {
border: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid #E3E3E3;
}
/*-----------Accordion styles-----------*/
h2.resp-tab-active {
background: #474747 !important;
border-color: #434343;
color: #e8e8e8;
}
.resp-easy-accordion  h2.resp-accordion {
display: block;
}
.resp-easy-accordion .resp-tab-content {
border: 1px solid #c1c1c1;
}
.resp-easy-accordion .resp-tab-content:last-child {
border-bottom: 1px solid #c1c1c1 !important;
}
.resp-jfit {
width: 100%;
margin: 0px;
}
.resp-tab-content-active {
display: block;
}
h2.resp-accordion:first-child {
border-top: 1px solid #C1C1C1 !important;
}
/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
ul.resp-tabs-list {
display: none;
}
h2.resp-accordion {
display: block;
font-family: Roboto;
}
.resp-vtabs .resp-tab-content {
border: 1px solid #C1C1C1;
}
.resp-vtabs .resp-tabs-container {
border: none;
float: none;
width: 100%;
min-height: initial;
clear: none;
}
.resp-accordion-closed {
display:none !important;
}
.resp-vtabs .resp-tab-content:last-child {
border-bottom: 1px solid #c1c1c1 !important;
}
.resp-tabs-container .resp-accordion {
font-size: 14px;
}
h2.resp-accordion {
padding: 10px 28px;
}
h2.resp-tab-active {
padding: 10px 28px !important;
}
.resp-tab-content p {
padding: 20px 20px 20px 0;
}
}
@media only screen and (max-width: 720px) {
.services {
width: 100%;
}
.contact1.section {
width: 100%;
max-width: none;
}
.clearme {
width: 50%;
}
.title1 {
font-size: 38px;
}
}
</style>

<script type='text/javascript'>
//<![CDATA[
// Easy Responsive Tabs Plugin
// Author: Samson.Onna <Email : samson3d@gmail.com>
(function ($) {
    $.fn.extend({
        easyResponsiveTabs: function (options) {
            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                type: 'default', //default, vertical, accordion;
                width: 'auto',
                fit: true,
                closed: false,
                activate: function(){}
            }
            //Variables
            var options = $.extend(defaults, options);            
            var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
            var hash = window.location.hash;
            var historyApi = !!(window.history && history.replaceState);
            
            //Events
            $(this).bind('tabactivate', function(e, currentTab) {
                if(typeof options.activate === 'function') {
                    options.activate.call(currentTab, e)
                }
            });

            //Main function
            this.each(function () {
                var $respTabs = $(this);
                var $respTabsList = $respTabs.find('ul.resp-tabs-list');
                var respTabsId = $respTabs.attr('id');
                $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
                $respTabs.css({
                    'display': 'block',
                    'width': jwidth
                });

                $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
                jtab_options();
                //Properties Function
                function jtab_options() {
                    if (jtype == vtabs) {
                        $respTabs.addClass('resp-vtabs');
                    }
                    if (jfit == true) {
                        $respTabs.css({ width: '100%', margin: '0px' });
                    }
                    if (jtype == accord) {
                        $respTabs.addClass('resp-easy-accordion');
                        $respTabs.find('.resp-tabs-list').css('display', 'none');
                    }
                }

                //Assigning the h2 markup to accordion title
                var $tabItemh2;
                $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");

                var itemCount = 0;
                $respTabs.find('.resp-accordion').each(function () {
                    $tabItemh2 = $(this);
                    var $tabItem = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')');
                    var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')');
                    $accItem.append($tabItem.html());
                    $accItem.data($tabItem.data());
                    $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
                    itemCount++;
                });

                //Assigning the 'aria-controls' to Tab items
                var count = 0,
                    $tabContent;
                $respTabs.find('.resp-tab-item').each(function () {
                    $tabItem = $(this);
                    $tabItem.attr('aria-controls', 'tab_item-' + (count));
                    $tabItem.attr('role', 'tab');

                    //Assigning the 'aria-labelledby' attr to tab-content
                    var tabcount = 0;
                    $respTabs.find('.resp-tab-content').each(function () {
                        $tabContent = $(this);
                        $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
                        tabcount++;
                    });
                    count++;
                });
                
                // Show correct content area
                var tabNum = 0;
                if(hash!='') {
                    var matches = hash.match(new RegExp(respTabsId+"([0-9]+)"));
                    if (matches!==null && matches.length===2) {
                        tabNum = parseInt(matches[1],10)-1;
                        if (tabNum > count) {
                            tabNum = 0;
                        }
                    }
                }

                //Active correct tab
                $($respTabs.find('.resp-tab-item')[tabNum]).addClass('resp-tab-active');

                //keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode
                if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {                  
                    $($respTabs.find('.resp-accordion')[tabNum]).addClass('resp-tab-active');
                    $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active').attr('style', 'display:block');
                }
                //assign proper classes for when tabs mode is activated before making a selection in accordion mode
                else {
                    $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active resp-accordion-closed')
                }

                //Tab Click action function
                $respTabs.find("[role=tab]").each(function () {
                  
                    var $currentTab = $(this);
                    $currentTab.click(function () {
                        
                        var $currentTab = $(this);
                        var $tabAria = $currentTab.attr('aria-controls');

                        if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
                            $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
                            $currentTab.removeClass('resp-tab-active');
                            return false;
                        }
                        if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
                            $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');

                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
                        } else {
                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
                            $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
                        }
                        //Trigger tab activation event
                        $currentTab.trigger('tabactivate', $currentTab);
                        
                        //Update Browser History
                        if(historyApi) {
                            var currentHash = window.location.hash;
                            var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
                            if (currentHash!="") {
                                var re = new RegExp(respTabsId+"[0-9]+");
                                if (currentHash.match(re)!=null) {                                    
                                    newHash = currentHash.replace(re,newHash);
                                }
                                else {
                                    newHash = currentHash+"|"+newHash;
                                }
                            }
                            else {
                                newHash = '#'+newHash;
                            }
                            
                            history.replaceState(null,null,newHash);
                        }
                    });
                    
                });
                
                //Window resize function                  
                $(window).resize(function () {
                    $respTabs.find('.resp-accordion-closed').removeAttr('style');
                });
            });
        }
    });
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$('#About').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
//]]>
</script>




Ai chưa có thư viện jquery thì cho cái này thêm vào 


Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>

Tags: #code #forumotion #blogger
Search in: Tips/Tool Bootstrap  Chủ đề: [Code] Tab responsive tabs custom tab activate  Trả lời: 0  Xem: 618

sticky nav menu - cố định menu khi cuộn chuột xuống




Nhìn demo có thể thấy khi cuộn chuột xuống thì menu cố định ở trên.

Đầu tiên các bạn cho code menu của các bạn bao quanh bởi <sticknav>



Ví dụ như này là menu của hotrofm

Code:

<sticknav>
(Để code menu của các bạn ở đây) ( của hotrofm sẽ là <nav>.....</nav>)
</sticknav>



Tiếp theo cho code này vào head hoặc footer.

Code:

<style type="text/css">
sticknav {
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var aboveHeight = 400;
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
        $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>


Trong code scrip trên có đoạn var aboveHeight = 400; nghĩa là khi cross chuột quá 400 thì nó thực hiện sticknav .

Thanh thành var aboveHeight = $('header').outerHeight(); Nếu khi cross quá head sẽ thực hiện

Thanh thành var aboveHeight = $('body').innerHeight(); Nếu khi cross đến body hoặc tùy cái gì mà mình thích

code có thể phù hợp với 1 số style và không hợp với 1 số style. vì vậy ai dùng thì chỉnh lại css cho hợp lý theo ý mình.
Tags: #code #forumotion #blogger
Search in: Tips/Tool Bootstrap  Chủ đề: [Code] sticky nav menu - cố định menu khi cuộn chuột xuống  Trả lời: 0  Xem: 1355

Code Thay đổi nền background chuyển đổi liên tục


Demo:


Cách 1 : sử dụng query


Code Thay đổi nền background chuyển đổi liên tục này của 1 bạn trên facebook nhờ hỏi. mình chôm luôn về cho nhanh. đỡ phải viết lại :)

Code:
<script type="text/javascript">
//<![CDATA[
var colors = new Array([62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);
var step = 0;
var colorIndices = [0, 1, 2, 3];
var gradientSpeed = 0.002;  
function updateGradient() {
            if ($ === undefined) return;
            var c0_0 = colors[colorIndices[0]];
            var c0_1 = colors[colorIndices[1]];
            var c1_0 = colors[colorIndices[2]];
            var c1_1 = colors[colorIndices[3]];
            var istep = 1 - step;
            var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
            var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
            var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
            var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
            var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
            var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
            var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
            var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
            $('body').css({
                background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
            }).css({
                background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
            });
            step += gradientSpeed;
            if (step >= 1) {
                step %= 1;
                colorIndices[0] = colorIndices[1];
                colorIndices[2] = colorIndices[3];
                colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
                colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
            }
        }
setInterval(updateGradient, 10);
//]]>
</script>  



Cách 2 sử dụng css


Code này sưu tầm dc. mình cũng ko nhớ nguồn gốc nữa. bạn nào nhớ thì comment để mình thêm vào nhé

Code:
body {
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
    -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}/* change background */
@keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
    20% { background-color: #6bd57e; color: #6bd57e; }
    40% { background-color: #ff6f6f; color: #ff6f6f; }
    60% { background-color: #57cff4; color: #57cff4; }
    80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
    20% { background-color: #6bd57e; color: #6bd57e; }
    40% { background-color: #ff6f6f; color: #ff6f6f; }
    60% { background-color: #57cff4; color: #57cff4; }
    80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
    20% { background-color: #6bd57e; color: #6bd57e; }
    40% { background-color: #ff6f6f; color: #ff6f6f; }
    60% { background-color: #57cff4; color: #57cff4; }
    80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
    20% { background-color: #6bd57e; color: #6bd57e; }
    40% { background-color: #ff6f6f; color: #ff6f6f; }
    60% { background-color: #57cff4; color: #57cff4; }
    80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}

Tags: #code
Search in: Tips/Tool Bootstrap  Chủ đề: [Code] Thay đổi nền background chuyển đổi liên tục  Trả lời: 0  Xem: 696

Code Notifications thông báo khi có trả lời bài viết và nhắn tin riêng



Để cho nhẹ mình sử dụng thanh Toolbar của forumotion vì vây các bạn phải bật nó lên




Sau đó cho code dưới đây vào vị trí cần hiện. Thường thì mình tạo menu bên phải cho nó vào cho nó giống xenforo :)

Code:
<div class="notihotrofm"></div>                                                
<script type="text/javascript">
 //<![CDATA[          
$(document).ready(function(){
$("#fa_notifications").appendTo(".notihotrofm");
$("#notif_list").appendTo(".notehotrofm");                                                                                                                                                                              
});
$(function() {
    $("#fa_notifications")
        .click(function() {
            $('#notif_list').toggle();
        });
})
  
//]]>
</script>
<style type="text/css">
#notif_list {
    font-size: 11px;
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    border: 1px solid #333333;
    border-top: 0px solid #FFFFFF;
    z-index: 10000;
}
#notif_list:before {
    content: url(https://i18.servimg.com/u/f18/18/21/41/30/arrow11.png);
    position: absolute;
    right: 10%;
    top: -10px;
}  
#notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 25px!important;
    right: 0px !important;
    left: initial !important;
}  
#fa_notifications{
    float: right;
}  
#notif_list li {
    padding: 5px;
}
#fa_toolbar {
    display: none;
}
</style>

Tags: #code #forumotion

Tìm thấy 90 mục

Chuyển đến trang : 1, 2, 3, 4, 5, 6  Next

Về Đầu Trang