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

Template TungChem ver 01

Lukaku 18:07 13 Comments

Tặng các bạn một template blogspot mà TungChem.com cũng đang sử dụng. Có thể nói đây là lần đầu tiên TungChem.com chia sẻ template blogspot, chắc có thể sẽ thiếu sót cái gì đó, mong mọi người góp ý. :)
Trước tiên nói về nguồn gốc thì Template này được Edit bởi Tùng Chèm Blog. Template có rất nhiều tính năng hữu ích đặc biệt nhất có thể kể đến là khả năng SEO rất tốt. Cũng như ở tiêu đề có viết thì template này hỗ trợ cả Responsive tức là nó có khả năng tùy chỉnh theo từng kích thước màn hình khác nhau giúp người đọc có thể xem dễ dàng trên nhiều thiết bị và dĩ nhiên là thân thiện với thiết bị di động. Ngoài ra còn khá nhiều tính năng phải chờ bạn khám phá. Bây giờ chúng ta cùng cài đặt thôi!
Vui lòng để lại comments mình sẽ gửi qua mail!

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>

Template Blogspot - Craper - Phong cách lưới - Responsive

Lukaku 21:03 Add Comment
Craper là một template blogspot với giao diện sáng,  phong cách lưới và tối giản trong cách bố trí bài viết. Đây là một template với thiết kế hoàn toàn responsive để có thể tương thích với bất cứ kích thước màn hình nào, như màn hình PC, laptop, tablet hay smartphone. Craper cũng đã được tối ưu hóa SEO.

Template Blogspot - Craper - Phong cách lưới - Responsive
Craper là một lựa chọn lý tưởng cho các trang web phong cách gallery, danh mục,  nhiếp ảnh, thiết kế mỹ thuật và các trang web cá nhân.

Thông tin khác về Template Craper cho Blogspot:

  • Thiết kế dạng lưới, tất cả nội dung nằm ở trang chủ
  • Hộp tìm kiếm nổi bật
  • Thiết kế đơn giản và tối ưu
  • Giao diện 2 cột
  • Các vị trí banner quảng cáo đã có sẵn
  • Tối ưu hóa SEO
  • Thiết kế hoàn toàn Responsive
  • Bài viết phổ biến
  • Sử dụng HTML5 và CSS3 mới nhất
  • Các button theo dõi mạng xã hội
  • Sidebar bên phải
  • Không có Footer
  • Điều hướng trang
  • Hệ thống bình luận G+
  • Thanh menu ở top và xổ xuống
  • Tác giải bài viết kèm hình ảnh
  • Tương thích với các trình duyệt phổ biến
  • Lý tưởng cho các trang web gallery, danh mục, thiết kế mỹ thuật và trang web cá nhân
  • Màu chủ đạo: Trắng và ánh sáng màu xanh
Live Demo Download

                                                                                                                                                 Nguồn: tranbadat.info

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