Sửa lỗi ảnh blogspot không hiển thị do bị chặn

Xin chào các bạn !

Lâu quá không viết bài chia sẻ, nay có thông tin này thấy cần thiết nên mình viết bài này chia sẻ cùng mọi người. Mình đã bỏ tên miền cũ bta.name.vn và dự định chỉ dùng tên miền mặc định truonganhblog.blogspot.com. Tuy nhiên khá đau đầu là đúng lúc các nhà mạng ráo riết chặn Blogspot. Trên máy tính thì có thể đổi DNS các kiểu chứ điện thoại thì rất khó và rồi mình quyết định mua tên miền truonganh.info hiện tại đây. Khi đã đổi sang tên miền tùy chỉnh rồi, việc truy cập đã được thông suốt, tốc độ được cải thiện, duy chỉ có ...KHÔNG HIỆN ẢNH :( 

Nguyên nhân:
Hiện tại thì nhà mạng VNPT đang chặn blogspot. Cụ thể là tất cả các website, blog sử dụng đuôi tên miền dạng .blogspot.com , .blogspot.in ... đều không thể truy cập . Lý do bị chặn thì chắc hẳn các bạn cũng biết, mình cũng có đề cập trước đây ở bài cấu hình tên miền.
Vì vậy mà tất cả các ảnh có dạng http://3.bp.blogspot.com/..,  http://4.bp.blogspot.com/ ... sẽ đều bị chặn và không thể hiển thị.

Cách để ảnh trên blogspot hiển thị lại?

Có 2 cách để thực hiện, đó là thủ công và tự động:

1. Cách thay link ảnh thủ công :

- Các bạn vào Chỉnh sửa tất cả các bài viết hiện có trên Blog của các bạn

- Chuyển sang tab soạn thảo bằng HTML

- Ctrl+F để tìm link ảnh, từ khóa ví dụ ".bp.blogspot.com"

Thay thế (2/3/4).bp.blogspot thành lh4.ggpht ( hoặc lh3.googleusercontent )

Như vậy là được.

2. Tự động thay link ảnh cho cả blog

Mình sẽ dùng hàm replace trong jQuery để thay thế hoàn toàn những link ảnh về dạng lh4.ggpht
Các bạn chèn đoạn mã này vào trước thẻ </body> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(/\/[0-9]+(\.bp\.blogspot)?/, "/lh4.ggpht")) });
//]]>
</script>

Đoạn code màu đỏ nếu các bạn đã có thư viện jquery thì không cần thêm nữa nhé !
Chúc các bạn thành công !
Mời các bạn xem thử Video thực hành sửa lỗi nhé :) (Lần đầu thu nên không được hoàn hảo lắm :D)

©Truong Anh Blog - www.truonganh.info

Read More

Thay đổi số kí tự mô tả bài viết tại trang chủ Blogger

Auto Readmore? Một khái niệm đã quá quen thuộc đối với người dùng Blogger, nó cũng đã từng trở thành một chủ đề hot được khá nhiều người quan tâm. Bạn hiểu đơn giản  Auto Readmore có tác dụng tự động nhận biết hình ảnh bài viết, quy định số lượng kí tự mô tả, xem chi tiết,...Hôm nay mình sẽ giới thiệu các bạn cách làm một phần trong nó, đó là "Thay đổi số kí tự mô tả bài viết tại trang chủ Blogger", đây cũng là một vấn đề mà rất nhiều bạn đã hỏi mình.

Trên các blog website có khá nhiều bài viết về Auto Readmore, tuy nhiên mình nhận thấy vẫn còn nhiều đặc điểm chưa phù hợp như file JS nặng ảnh hưởng lớn tới tốc độ tải trang, làm méo hình ảnh,...làm cho mọi người khó hình dung ra được cách làm. Bài viết hôm nay chỉ là cách để thay đổi số kí tự mô tả cho bài viết tại trang chủ, chính là một phần trong Auto Readmore với code khá đơn giản!

Các bước thực hiện

1. Thêm đoạn code sau lên trên thẻ đóng </head>

<script type='text/javascript'>//<![CDATA[

function removeHtmlTag(strx, chop) {

    if (strx.indexOf("<") != -1) {

        var s = strx.split("<");

        for (var i = 0; i < s.length; i++) {

            if (s[i].indexOf(">") != -1) {

                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);

            }

        }

        strx = s.join("");

    }

    chop = (chop < strx.length - 1) ? chop : strx.length - 2;

    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;

    strx = strx.substring(0, chop - 1);

    return strx + '...';

}

function createSummary(pID) {

    var div = document.getElementById(pID);

    var summ = 100;

    var summary = '<div><p>' + removeHtmlTag(div.innerHTML, summ) + '</div></p>';

    div.innerHTML = summary;

}

//]]></script>

Lưu ý: 100 là số kí tự bài viết, bạn có thể thay đổi theo ý muốn của mình.

2. Các bạn tìm đoạn code sau: <data:post.snippet/>. Tìm khéo nhé!

Thay đoạn code đó bằng đoạn code sau:

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'> createSummary(&quot;summary<data:post.id/>&quot;);</script>

Vậy là ok, bạn lưu lại và kiểm tra kết quả nhé!

Lời kết

Một đoạn code khá đơn giản giúp bạn có thể thay đổi số kí tự mô tả bài viết trên trang chủ mà không hề ảnh hưởng nhiều tới tốc độ tải trang. Nghe đâu, nó còn có lợi cho SEO, các bạn thử tìm hiểu nhé, mình chưa có nhiều kinh nghiệm trong chuyện này. 

Nguồn ViệtMMO - http://www.dongviet.info/

Bạn có thể xem thêm các bài:

• Những Code Thông Dụng Cho Blogspot
• Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot
• Code tạo hình nền và chia cột cho bài viết Blog
• Thủ thuật tạo chữ chuyển  động cho Blogspot
• Hướng Dẫn Thiết Kế Template Blogger

Read More

Đánh dấu comment tác giả cho Thread comment mặc định Blogspot

Bạn muốn tạo sự riêng biệt cho những comment của bạn - tác giả blog? Thao tác dưới đây sẽ giúp bạn đánh dấu Comment của tác giả trong Thread comment mặc định của Blogpsot.

Comment tác giả

Các bước thực hiện

Các bạn vào Bảng quản trị Blogger→Mẫu→Thêm đoạn code sau trước thẻ đóng ]]></b:skin

.comments .comments-content .icon.blog-author{font:bold 13px Segoe UI;position:absolute;width:55px;height:20px;display:block;top:15px;margin-left:90px;border-radius:3px;background:#0f8528;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.comments .comments-content .icon.blog-author::before{content:"Admin";position:absolute;text-shadow:0 1px 0 rgba(0,0,0,0.5);color:white;top:2px;left:8px}

Lưu ý: "Phương trình chỉ có nghiệm đúng" với Thread comment mặc định - khung comment 2 cấp. Nói vui vậy chứ, bạn chỉ có thể áp dụng với khung comment mặc định nhé. Với các khung comment phân cấp đều đi kèm đánh dấu comment tác giả trước đó.Nguồn ViệtMMO - http://www.dongviet.info/

Read More

Cách xóa bỏ hoàn toàn CSS mặc định trên Blogger

Cách xóa bỏ CSS mặc định trong Blogspot - Mặc định khi sử dụng Blogger, ngoài việc sử dụng CSS tùy chỉnh do bạn đặt, blog còn sử dụng CSS mặc định của Blogger mà bạn không hề hay biết nếu bạn không để ý. Tuy nhiên, CSS mặc định của Blogger khiến blog của bạn gặp một số lỗi như W3C,...Vậy nên mình sẽ hướng dẫn các bạn xóa bỏ hoàn toàn CSS mặc định của Blogger.

Cách xóa bỏ hoàn toàn CSS mặc định trên Blogger

Các bước thực hiện

Mặc định Blogger trang bị cho blog của bạn hai File CSS sau:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4245775164278706291&zx=7177e59e-74fa-412c-9fa2-d5b82e0ee894' />

Với việc sử dụng CSS như vậy sẽ gây một số lỗi W3C và lỗi khi check Google Speed Test. Đó là lỗi các bạn gặp phải khi chưa tối ưu cho Blogspot của mình.
Các bước thực hiện đơn giản sau đây sẽ giúp bạn khắc phục điều này.
Bước 1: Tìm thẻ <b:skin><![CDATA[ Thay thế nó thành:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
<b:skin><![CDATA[

Bước 2: Tìm thẻ </body> và sửa thành

&lt;!--</body>--&gt;&lt;/body&gt;

Câu hỏi các bạn đặt ra là gì?

Một câu hỏi của rất nhiều bạn: "Tại sao sau khi xóa bỏ CSS mặc định thì một số tiện ích trên Blogger không chạy?" Hi thì mình chỉ trả lời đơn giản là bạn đã xóa bỏ CSS của chúng, việc hiển thị sẽ không còn diễn ra như bình thường nữa.

Để khắc phục điều này, bạn cần thêm "khéo léo" CSS mặc định của Blogger trở lại.

Bước 1: Vào https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css và copy toàn bộ code.

Bước 2: Đặt vào giữa đoạn code mà Bước 1 ở trên bạn đã làm, cụ thể:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
<b:skin><![CDATA[ Đặt bên dưới thẻ này nhé! 

Sau khi Lưu mẫu, các bạn thử kiểm tra tốc độ load tại đây nhé!

https://developers.google.com/speed/pagespeed/insights/ 

Cách thiết lập lại hoàn toàn CSS

Nếu bạn làm các bước như ở trên thì chưa thể thiết lập mọi giá trị CSS trên Blogger về 0, các sau đây sẽ giúp bạn làm được điều đó. Thêm đoạn CSS sau vào blog của bạn:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,adnav,adheader{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,adnav,adheader{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}  

Lưu lại và chỉnh sửa blog cho phù hợp. 

Nguồn VietMMO

Read More

Thêm mô tả cho widget label của blogger

ới thủ thuật này đằng sau tên mỗi label sẽ xuất hiện một mô tả do amin của blog đặt. Thủ thuật này không thích hợp với kiểu label clouds mà chỉ thích hợp với label dạng danh sách. Các bạn có thể xem Demo bên dưới:

http://namkna-test.blogspot.com/2013/02/demo-them-o-ta-cho-nhan.html

Đây là hình minh họa của thủ thuật.

Bước 1: Thêm một tiện ích Label

Bạn có thể bỏ qua bước này nếu trong blog của bạn đã có label

1- Đăng nhập vào blog

2- Chọn Bố cục (Layout)

3- Chọn Thêm tiện ích (Add widget)

4- Chọn Nhãn (Label).

5- Tùy chọn cấu hình như hình dưới. (Nhớ chọn dạng hiển thị Danh sách)

6- Bấm lưu lại:

Bước 2: Tùy biến label

1- Vào Mẫu (Template)

2- Chọn chỉnh sửa HTML (Edit HTML)

3- Tìm đoạn mã dạng như sau:

<b:widget id='Label5' locked='false' title='Nhãn' type='Label'/>

Trong trường hợp bài viết này đây là Label5 blog của bạn có thể là Label1, Label2, Label3,...., nếu label khác thì đoạn nền màu cam phía sau bạn cũng phải đổi lại cho đúng lablel nha.

- Thay thế nó thành đoạn code bên dưới:

<b:widget id='Label5' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
<!-- Label Description Start -->
<b:if cond='data:label.name == "Tên nhãn 1"'>
<span class="labeldesc"> - Đây là mô tả nhãn 1</span>
</b:if>
<b:if cond='data:label.name == "Tên nhãn 2"'>
<span class="labeldesc"> - Đây là mô tả nhãn 2</span>
</b:if>
<b:if cond='data:label.name == "Tên nhãn 3"'>
<span class="labeldesc"> - Đây là mô tả nhãn 3</span>
</b:if>
<!-- Label Description End-->
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Bước 3: Tùy chỉnh label

- Thay: Tên nhãn 1,2,3,..n thành tên nhãn blog của bạn.

- Thay: Đây là mô tả nhãn 1,2,3,...n thành mô tả tương ứng với mỗi nhãn.

- Để thêm một nhãn mới có mô tả bạn chỉ cần thêm đoạn mã sau vào trước dòng màu vàng:

<b:if cond='data:label.name == "Tên nhãn n"'>
<span class="labeldesc"> - Đây là mô tả nhãn n</span>
</b:if>

4- Lưu mẫu lại và xem kết quả.
Nguồn Terocket

Read More

Chia widget Label ở footer thành nhiều cột cho blogspot.

Với các blogger có quá nhiều nhãn  thì việc kích hoạt (Displaying) tất cả các nhãn trong thanh bên (sidebar) không phải là một lựa chọn hoàn hảo vì nó sẽ mất quá nhiều diện tích của sidebar. Vậy giải pháp đặt ra là nên đặt tiện ích này ở đâu và làm thế nào để tiện ích này trong bắt mắt gọn nhẹ hơn mà vẫn đầy dủ các nhãn của bạn. Thủ thuật này namkna sẽ liệt kê tên các nhãn theo thứ tự bảng chữ cái và chia thành 5 cột đặt ở dưới chân trang blog (phần footer). cho độc giả đễ tìm kiếm các nhãn này.

Bạn có thể xem demo hoặc hình minh họa bên dưới:

VIEW DEMO

Thủ thuật này được namkna dựa trên ý tưởng của Ipietoon và Myherro . Bạn chỉ cần thực hiện một vài bước đơn giản để áp dụng tiện ích này cho blog.

» Thêm Like, Subscription box vào blogspot của bạn!

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn Chỉnh sửa HTML (Edit HTML)

4. Tìm kiếm thẻ ]]></b:skin> . Và dán code bên dưới vào trước thẻ vừa tìm được.

/*Start Category Wrapper Css*/
#category-wrapper {
width:900px;
clear:both;
margin:0 auto 10px;
padding-top:15px;
line-height: 1.6em;
text-align:left;
border-bottom:0px solid #efefef;
}

.cat {
color: #000000;
line-height: 1.5em;
}

.cat ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 8px;
}
.cat ul li {
float:left;
width:18%;
list-style-type: none;
margin: 0 0 5px;
padding-left: 12px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZaX6v7WcxyDY-EkqyzSbApG_aHlmGXnoByr1uJqnbFj4OLvOrvZ9ZJO5Momy8TSNDqCaqAKchliVIL4JtaTe7_u8Vg2HPoT2KTRUvReCvhOX7KTVqvJ7-eUWUFBmcOH-6RpWQYTsTfkUP/s1600/bullet-suyb-namkna-blogspot-com-0001.gif) no-repeat left center;
}

.cat .widget {
border-bottom:0px dotted #ddd;
margin:0 .5em 1.5em .5em;
padding:0 0 1.5em;
}
/* End Category Wrapper Css Info @ http://namkna.blogspot.com/ */

Tùy chỉnh CSS.

• Width 900px; là chiều rộng tổng của các cột.
• width:18%; chiều rộng của từng cột nhỏ. Ở đây mình dùng số tương đối. Nếu muốn chia thành 4 cột bạn sửa thành 23%, và để chia thành 3 cột sửa thành 31%. 
• Link ảnh màu xanh là link ảnh icon trước mỗi nhãn. bạn có thể thay đổi thành link ảnh khác nếu bạn muốn,

5. Tìm mã HTML sau đây:

<div id='footer-wrapper'>

Lưu ý: thẻ bên dướicó thể khác nhau với mỗi blog, tùy vào người thiết kế) .nếu bạn không tìm thấy vui lòng comment địa chỉ blog của bạn ở cuối bài viết này mình sẽ hướng dẫn cụ thể
Với mẫu simple của blogger bạn có thể chèn ngay trước thẻ <footer> hoặc<div class='footer-outer'>.

- Dán đoạn mã bên dưới vào trước thẻ vừa tìm được.

<div id='category-wrapper'>
<b:section class='cat' id='cat'>
<b:widget id='Label99' locked='false' title='Categories' type='Label'/>
</b:section>
</div>

6- Lưu mẫu lại và quay lại blog bạn sẽ tháy phần chân blog có 5 cột nhãn
Nguồn Terocket

Read More