Hiển thị các bài đăng có nhãn thủ thuật blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn thủ thuật blog. Hiển thị tất cả bài đăng

Tạo trang bắt lỗi 404 - Blogger

Lukaku 23:36 Add Comment

Link demo: demo
Hướng dẫn tạo:

Các bạn thêm vào trước thẻ */]]></b:skin>  đoạn css sau:
/* CSS Custom Error Page */
#oopss {background:#eee;text-align:center;margin-bottom:50px;font-weight:400;font-size:30px;font-family:&#39;Roboto Condensed&#39;,sans-serif;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;}
#error-text {top:30%;position:relative;font-size:30px;color:#666;}
#error-text a{color:#666;}
#error-text p {margin:0!important;}
#error-text span {color:#aaa;font-size:120px;font-weight:700;letter-spacing:0.1em;}
#error-text a.back {display:inline-block;margin:20px auto;background:#4db2ec;color:#fff;padding:10px 20px;font-size:20px;font-weight:700;line-height:normal;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.2s ease-out;}
#error-text a.back:hover {opacity:.9;}
#error-text a.back:active {-webkit-transform:scale(0.95);-moz-transform:scale(0.95);transform:scale(0.95);opacity:1;}
/* CSS Error Page Responsive */

Thêm vào sau thẻ <body đoạn code sau:
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<div id='error-text'>
  <span>404</span>
  <p>Page Not Found</p>
  <p>Back to</p>
  <p><a class='back' href='/'><data:blog.title/></a></p>
</div>
</div>
</b:if>

Cách hiển thị ảnh Blogspot dù bị VNPT chặn

Lukaku 20:59 Add Comment
Như các bạn đã biết, hiện Blogspot ở Việt Nam chúng ta đang bị nhà mạng VNPT chặn truy cập, vì có nhiều thành phần chống đối nhà nước sử dụng Blogspot làm công cụ để phát tán tin tức xấu. Điều này làm ảnh hưởng đến cả những Blogger chân chính như chúng ta, điều này rõ ràng là không đáng xảy ra.

Vậy phải có cách gì đó cho chúng ta có thể tồn tại chứ, không thể cứ nhìn trang web mỗi lần bị chặn lại sụt giảm 30% lượt view như vậy được! Nhiều bạn có thể đã biết, để tránh bị VNPT chặn thì đầu tiên là nên trỏ tên miền về cho Blog, cái này mình không nói đến nữa, vì nó chính xác hoàn toàn rồi.

Nhưng... trỏ tên miền xong thì chưa đủ, vì những hình ảnh trên web chúng ta đều có đuôi .blogspot.com, chính vì thế, cũng bị nhà mạng VNPT chặn nốt. Vào trang web mà ảnh thì chẳng có cái nào, xem bài viết ảnh toàn lỗi, vậy nếu là bạn bạn có out ngay cho khỏe không? Câu trả lời là có!

Cách hiển thị ảnh Blogspot dù bị VNPT chặn

Chính vì thế, mình viết bài hướng dẫn này, giúp các bạn hiển thị ảnh trên Blogspot cho dù VNPT có chặn hay không! Cách này rất đơn giản, không cần phải sử dụng bất kỳ trang upload ảnh nào khác!

Vậy cách hiển thị ảnh Blogspot dù bị VNPT chặn làm thế nào?

Blogspot, mặc định nó có 1 công cụ upload ảnh, tuy rằng, các bạn khi kiểm tra HTML của nó, thì ảnh có đuôi là .blogspot.com. Tuy nhiên, không phải, trang web lưu ảnh của chúng ta upload lên là Picasa chứ không phải Blogspot, nhiệm vụ của Blogspot chỉ là đổi đường link ảnh mà thôi :)

- Sau khi upload ảnh, viết bài đầy đủ rồi, thì đừng public vội, hãy chuyển sang tab html:
Cách hiển thị ảnh Blogspot dù bị VNPT chặn
- Tìm hết những đường link ảnh mà bạn đã upload, và thay toàn bộ phần này:

1.bp.blogspot.com
2.bp.blogspot.com
3.bp.blogspot.com
4.bp.blogspot.com

thành lh3.ggpht.com  hoặc lh3.googleusercontent.com --->> Chú ý: lh3, các bạn có thể thay số 3 thành 3-6 đều được nhé, hiện các subdomain này đều đang được Picasa sử dụng :)

- Và giờ thì bạn đã có thể public bài viết, những đường link ảnh đã được chuyển về đúng dạng của nó, và tất nhiên là sẽ hiển thị ảnh dù VNPT có chặn hay không, vì VNPT chỉ chặn blogspot.com thôi ^_^

Nguồn: 
tranbadat.info

widget bài viết ngẫu nhiên (Random post)

Lukaku 20:56 Add Comment
Với widget bài viết ngẫu nhiên (Random post), sẽ giúp tăng tỉ lệ giúp người xem đến 1 liên kết khác trong blogspot của bạn, đồng nghĩa là tăng lượt view, thời gian view và giảm tỉ lệ thoát cho web của bạn. Chỉ cần bạn đặt widget bài viết ngẫu nhiên này ở thanh siderbar của mình, nếu một độc giả thấy được đúng nội dung họ quan tâm, thì click thôi! :) Nó thật hữu ích! ^_^

widget bài viết ngẫu nhiên (Random post)

Vậy làm thế nào để tạo widget bài viết ngẫu nhiên?

- Đầu tiên hãy vào trang quản trị tại blogger.com
- Tiếp tục chọn vào Bố cục (Layout), chọn thêm tiện ích trên thanh sidebar của bạn, và chọn HTML/JavaScript nhé.
- Thêm đoạn code này vào phần nội dung và lưu lại:
<style>
#random-posts img {
    border-radius: 1000px;
    borde:5px solid;
    color:#dddddd;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 3px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);

function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};

function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GZzdXcaBzM0IOpTxcLsoTV3qB3XpnjDu7u8i3RzSLXKiNmRK7-89r7DLqi5Eb77gdkq5EWIDyQTakC1C9D4-RAl4dJEwK2cDlE1OPOPyDioFNCdKFSVnCE4zxHzXsOznIjobbh91BXw/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
- Sau khi lưu lại thì coi như bạn đã hoàn thành, đã có widget bài viết ngẫu nhiên cho blogspot của bạn!

Tuy nhiên, mặc định đoạn code này chỉ hiện title và hình ảnh của bài viết, chứ không có phần trích nội dung của bài viết, nếu bạn muốn có thêm phần trích nội dung thì tìm đến đoạn code này và thay no thành yes nhé:
var randomposts_details = 'no'; . 

Ngoài ra, bạn còn có thể tùy chỉnh số lượng bài viết hiển thị và số ký tự phần trích đoạn nội dung tại đoạn code này:
var randomposts_number = 5;
var randomposts_chars = 110;

Nếu bạn thấy bài viết ổn thì share cho mọi người nhé ^^
                                                                                                                            Nguồn: http://www.tranbadat.info

Tạo đánh giá bằng JS

Lukaku 20:05 Add Comment

JRate

 
 
  • This jquery plugin helps to generate RATING with various features. Download and include this plugin in your html file.

Including it on your page

  • Include jQuery and this plugin on a page.

  •   <script src="jRate.js"></script> 

Basic Usage


  • <div id="jRate"></div>


    $("#jRate").jRate();

Start Color and End Color

 default: startColor: 'yellow'; endColor: 'green'
  • Set your favourite start and end color. By giving value in the form of hex value, rgb value or standard color name. We can use one color format also by giving same start and end color.

  • $("#jRate").jRate({
    startColor: 'cyan',
    endColor: 'blue'
    });

Initial Value

 default: rating: 0
  • We can set the default initial value for rating.

  • $("#jRate").jRate({
    rating: 1
    });

Width and Height

 default: width: 20; height: 20
  • We can customize our own value for width and height.

  • $("#jRate").jRate({
    width: 60,
    height: 60
    });

Shape

 default: shape: 'STAR'
  • We can chooose shape from available list. If you need more shapes, raise feature request in github. Available shapes are STAR, FOOD, TWITTER, BULB, RECTANGLE, CIRCLE, RHOMBUS, TRIANGLE.
  •  
     

  • $("#jRate").jRate({
    shape: 'FOOD'
    });

Width and Height Growth

 default: widthGrowth: 0; heightGrowth: 0
  • Make the shapes from smaller to bigger. We can use growth field to make this happen.

  • $("#jRate").jRate({
    widthGrowth: 0.2,
    heightGrowth: 0.2
    });

Count

 default: count: 5
  • Number of shapes was decided by the count parameter. We can customize own numeric value for it.

  • $("#jRate").jRate({
    count: 10
    });

Background Color

 default: backgroundColor: 'white'
  • Set your favourite background color. By giving value in the form of hex value, rgb value or standard color name.

  • $("#jRate").jRate({
    backgroundColor: 'black'
    });

Gap

 default: shapeGap: 0px
  • We can set our own gap between two shapes. We can customize our own values in it.

  • $("#jRate").jRate({
    shapeGap: '10px'
    });

Opacity

 default: opacity: 1
  • Set opacity value.

  • $("#jRate").jRate({
    opacity: 0.3
    });

Minimum and Maximum Value

 default: min: 0; max: 5
  • Set a desired minimum and maximum value.

  • $("#jRate").jRate({
    min: 10,
    max: 15
    });

Minimum Selected Value

 default: minSelected: 0
  • Set the minimum selected value. Restrict user not able to select minimum this mentioned value.

  • $("#jRate").jRate({
    minSelected: 3
    });

Precision

 default: precision: 0.1
  • Set the precision value.

  • $("#jRate").jRate({
    precision: 0.5
    });

Horizontal

 default: horizontal: true
  • We can set a boolean variable to make horizontal or vertical. And, set a boolean value for reverse.

  • $("#jRate").jRate({
    horizontal: false
    });

Reverse

 default: reverse: false
  • We can set a boolean variable to make reverse or not.

  • $("#jRate").jRate({
    reverse: true
    });

ReadOnly

 default: readOnly: false
  • Set the readonly value.

  • $("#jRate").jRate({
    readOnly: true
    });

onChange

  • Write your own methods to do own action when the rating value change action occurs.

  • $("#jRate").jRate({
    onChange: function(rating) {
    $('#demo-onchange-value').text("Your Rating: "+rating);
    }
    });

onSet

  • Write your own methods to do own action when the rating value click or set action occurs.

  • $("#jRate").jRate({
    onSet: function(rating) {
    $('#demo-onset-value').text("Selected Rating: "+rating);
    }
    });

License