Tích hợp Google Translate vào Blogger

18:27 |

(Tích hợp Google Translate vào Blogspot)

- Khi xây dựng Website, Blog bất kỳ ai cũng mong muốn Website có số lượng truy cập lớn, được nhiều người biết đến không chỉ ở 1 quốc gia mà còn trên toàn thế giới. Để người xem trên toàn thế giới có thể đọc và hiểu nội dung trên Website, Website đó phải được hỗ trợ nhiều ngôn ngữ giống như các tập đoàn đa quốc gia. Tuy nhiên việc này tương đối khó đối với các cá nhân hoặc những doanh nghiệp nhỏ và vừa do chi phí biên tập, chỉnh sửa nội dung theo từng ngôn ngữ rất lớn. 


Vậy có cách nào để người xem có thể dễ dàng xem nội dung Website bằng ngôn ngữ bản địa của họ không? Các bạn đừng lo lắng nữa vì hiện nay Google Translate đã cho phép tích hợp vào Website hoặc Blog rồi. Google Translate cho phép dịch tự động nội dung sang hơn 60 ngôn ngữ, và đây chính là yếu tố thuận lợi để Website của bạn tiếp cận được với người xem toàn cầu một cách nhanh chóng và dễ dàng. 

Sau đây Kênh phần mềm việt xin giới thiệu với mọi người các bước thực hiện.

B1: Đăng nhập vào tải khoản Google của bạn. Truy cập địa chỉ web 

B2: Kích nút Add to your Website now


B3: Nhập địa chỉ Webiste, ngôn ngữ mặc định và kích nút Next
B4: Bây giờ bạn sẽ phải chọn các thiết lập plugin


+ Mục Translation languages
- All languages: Có thể dịch tất các ngôn ngữ Google hỗ trợ
- Specific languages: Chọn đích danh 1 ngôn ngữ cho phép dịch.
+ Mục Display mode: Lựa chọn các kiểu hiển thị
+ Mục Advanced
Automatically display translation banner to users speaking languages other than the language of your page: Tự động hiển thị thanh công cụ dịch cho người sử dụng không dùng ngôn ngữ mặc định như trang web của bạn
Your page contains content in multiple languages: Trang của bạn chứa nội dung trong nhiều ngôn ngữ
Track translation traffic using Google Analytics: Theo dõi sử dụng trong Google Analytics

B5: Kích nút Get Code sau khi đã lựa chọn xong các thông số.


B6: Copy Code vào Blog
+ Đăng nhập vào Blogger
+ Chọn Menu Mẫu (Template)
+ Tìm đến đoạn Code sau </head>
+ Copy đoạn code 1 bạn dán trước thẻ </head>
+ Copy đoạn code 2  dán nó ở vị trí mà bạn muốn hiển thị công cụ dịch.
+ Kích nút Lưu mẫu

Như vậy là bạn đã tích hợp xong tiện ích Google Translate vào Blog rồi đó.

Tin học văn phòng
Read more…

Chèn Banner flash cho blogger

18:25 |

(Thêm Banner flash cho blogger)

- Flash là một công nghệ rất hấp dẫn để thêm các tương tác và đồ họa vào một trang web. Để Website thú vị, sinh động và gây ấn tượng với người xem, chủ sở hữu thường yêu cầu những đơn vị xây dựng Web hoặc tự mình đưa các Flash vào Banner thay thế những bức ảnh tĩnh. Những hiệu ứng tuyệt vời do Flash mang lại có thể cuốn hút và tạo thiện cảm đối với người xem.

Vậy còn trong Blog ta có thể chèn Flash vào Header được không? Chắc chắn là được rồi. Dưới đây là các bước để đưa Flash vào Blog.

B1: Chuẩn bị File Flash
Trước tiên, bạn cần phải tạo ra một hình ảnh động Flash với các công cụ hỗ trợ như: Sothink SWF Quicker, Aleo Flash Intro Banner Maker, Portable Flash Effect Maker Pro, Flash Album Creator, Flash Video Studio….

B2: Upload file Flash lên Hosting
Khi đã có file Flash bạn phải tải nó lên máy chủ web của riêng bạn, hoặc một máy chủ  miễn phí nào đó vì Blogger không cho phép bạn tải lên bất kỳ tập tin SWF. Trong trường hợp này, chúng tôi đặt  tập tin SWF ở https://sites.google.com và địa chỉ của các tập tin SWF sẽ là: 
https://sites.google.com/site/thuthuattinhocviet/home/gioi-thieu/Banner.swf

B3: Đăng nhập vào Blogger
B4: Chọn Menu Mẫu (Template)
B5: Tìm đến đoạn Code sau

Code 1
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>             <b:widget id='Header1' locked='true' title='Thủ thuật tin học (Header)' type='Header'>               <b:includable id='main'>

Đối với thuộc tính Title sẽ khác nhau đối với mỗi Blog, đây chính là tên Blog khi tạo mới.

B6: Chèn Code2 sau dòng
<b:includable id='main'>

Code 2
<embed align='middle' allowscriptaccess='none' height='262' src='https://sites.google.com/site/thuthuattinhocviet/home/gioi-thieu/Banner.swf' type='application/x-shockwave-flash' width='940'/>

Trong đó:
https://sites.google.com/site/thuthuattinhocviet/home/gioi-thieu/Banner.swf chính là đường dẫn lưu trữ file SWF.
Bạn có thể điều chỉnh chiều cao và chiều rộng theo kích thước flash.

Sau khi chèn đoạn Code2, đoạn Code 1 bây giờ có dạng.
 <b:widget id='Header1' locked='true' title='Thủ thuật tin học (Header)' type='Header'>
              <b:includable id='main'>
 <embed align='middle' allowscriptaccess='none' height='262' src='https://sites.google.com/site/thuthuattinhocviet/home/gioi-thieu/Banner.swf' type='application/x-shockwave-flash' width='940'/>

B7: Lưu mẫu

Ấn F5 để tải lại Blog, bạn sẽ nhìn thấy Banner Flash đã được chèn vào Blog.
Lưu ý nếu bạn muốn sử dụng một hình ảnh động Flash khác nhau, bạn cần phải thay đổi đường dẫn  của các tập tin SWF, chiều cao và chiều rộng.

Tin học văn phòng
Read more…

Thêm bài viết liên quan cùng chuyên mục vào Blogger

18:24 |

(Thêm bài viết liên quan cùng chủ đề)

- Bài viết liên quan cùng chuyên mục hay sản phẩm liên quan cùng loại đã quá quen thuộc đối với các Website tin tức và Website TMĐT. Tiện ích bài viết liên quan này giúp người xem cảm thấy thân thiện, dễ dàng tìm kiếm và xem thông tin đang quan tâm. Đây chính là một trong những yếu tố thu hút độc giả ở lại Website lâu hơn, ghé thăm Website hàng ngày.


Còn với Blog thì sao? Liệu có thể tích hợp tiện ích này vào được không? Ta hoàn toàn có thể tích hợp tiện ích này vào Blog của mình. Nào chúng ta cùng nhau thực hiện nhé.

- B1: Đăng nhập vào Blog
- B2: Vào Menu Mẫu (Template)\Chỉnh sửa HTML (Edit HTML)
B3: Ấn tổ hợp phím Ctrl + F và tìm thẻ </b:skin>
B4: Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

/*****************************************
     Related Posts CSS
******************************************/
#related-posts {
    float:none;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:15px;
    padding-left:5px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5tx_W7pS_z9RNiK8szUbEShSfmjSgND5-saJNaG4T3c5OTyNLaBijEX7tZJVnlK61_F2ZKCs7EQp5eEmySOKbfr5py4j3ToK5vcYM8CN5JmNk28fBlix3MUeJEpDn2GzxjX7B4kZgFk/s1600/post-bottom-bg.png) repeat-x scroll top left transparent !important;
    clear:both;
    display:block;
}
#related-posts{float:left}

#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}

#related-posts h3{
    font-size: 12px;
    font-weight: bold;
    color: black;
    margin-bottom: 0.5em;
    margin-top: 0em;
    padding-top: 0em;
}
#related-posts h4{
    font-size: 12px;
    font-weight: bold;
    color: #004175;
    padding-top: 0em;
}

#related-posts a:hover{
    color:blue;
}

#related-posts ul{
    list-style-type:none;
    margin:0 0 0 8px;
    padding:0px;
    text-decoration:none;
    font-size:12px;
    color:#000000;
}

#related-posts ul li{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHIlii29w2fUpCYz6alHggQ7albBuPSAbDi_19eWS0UjdIQRwxe4RGxzkIog9Y5iud1aOOnbae_K_ehIqNCSQ8-qjxz9uro0V7NCBDm41O6j6l0x0hPGr-Un4urqMuhoksfAmFCBDfS2_/s6-no/li-dot.png) no-repeat scroll left center transparent;
    display:block;
    list-style-type:none;
    margin-bottom: 6px;
    padding-left: 20px;
    padding-top:0px;
    font-size:12px;
}

B5: Ấn tổ hợp phím Ctrl + F và tìm thẻ <div class='post-footer'>
Chú ý: Bạn có thể tìm thấy nó hai lần, dừng lại ở thẻ thứ hai
Dán đoạn code bên dưới vào sau thẻ <div class='post-footer'>

<!-- Bat dau bai viet lien quan -->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div style='clear:both'/>
          <div id='related-posts'>
              <script type='text/javascript'>
               var ry='<h4>Bài viết liên quan</h4>';rn='<h4>Không có bài viết liên quan</h4>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';
               </script>
               <script type='text/javascript'>
                 //<![CDATA[
                  var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGASzNSklONKstI0SbtLslNpZn4rFWfLQUyXSAz4YQS1EB3h7T4tUqW8lp7TuauNdLEORHn0zYxSX0hJLwt5RP1jzeqNNbQkAOaC7OM0SVf-Wl2E24vGmD13iDP8HaGEczOGPGJPf38zv/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="dofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
 //]]>
</script>
<b:loop values='data:post.labels' var='label'>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
      var maxresults=10;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');
</script>
 </div>
<div style='clear:both'/>
</b:if>
<!-- Ket thuc bai viet lien quan -->

Lưu ý:
max-results = 5: Số lượng bài viết mà bạn muốn được hiển thị

-B6: Bấm Lưu mẫu để hoàn thành

Tin học văn phòng
Read more…

Thêm thanh điều hướng (Breadcrumb) vào Blogger

20:08 |

(Thanh điều hướng Breadcrumb trong Blogger)

- Thanh điều hướng là một tiện ích rất thông dụng và hữu ích, nó giúp người xem có thể theo dõi vị trí và biết mình đang ở đâu trên Website. Thanh điều hướng giống như việc để lại dấu vết trên một quãng đường mà bạn đã đi qua, nhờ đó bạn rất dễ dàng quay lại một vị trí nào đó trên quãng đường này. Thanh điều hướng thường được sử dụng để hiển thị đường dẫn chuyên mục bài viết trên các Website tin tức hay loại, lĩnh vực sản phẩm trên các trang mua bán hoặc TMĐT.


Chính những lợi thế lớn mà thanh điều hướng mang lại, hôm nay Kênh phần mềm việt sẽ giới thiệu với các bạn cách để thêm thanh điều hướng vào một Blog.

B1: Đăng nhập vào Blogger
B2: Chọn Menu Mẫu (Template)\Chỉnh sửa HTML (Edit HTML)
B3: Tìm (Ctrl+F) đến đoạn Code sau
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>

Và đoạn mã này được gọi là Đoạn mã 1

B4: Vô hiệu hóa đoạn mã 1, như vậy đoạn mã 1 của bạn sẽ là:
<!-- Start status message
<b:include data='top' name='status-message'/>
End status message-->
<data:defaultAdStart/>

B5: Thêm đoạn Code phía dưới:
<b:include data='posts' name='breadcrumb'/>

Vào dưới  đoạn code đã được vô hiệu hóa và ta sẽ có đoạn Code mới như sau:
<!-- Start status message
<b:include data='top' name='status-message'/>
End status message-->
<b:include data='posts' name='breadcrumb'/>
<data:defaultAdStart/>

B6: Tìm (Ctrl+F) đến đoạn Code sau
<b:includable id='main' var='top'>

Thêm đoạn code màu đỏ phía dưới vào phía trên dòng <b:includable id='main' var='top'> ta sẽ có Đoạn mã phía dưới.
              <b:includable id='breadcrumb' var='posts'>
                  <b:if cond='data:blog.homepageUrl == data:blog.url'>
                    <!-- Neu dang o trang chu -->
                    <b:else/>
                    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <!-- breadcrumb for the post page -->
                      <a href='http://www.kenhphanmemviet.blogspot.com'/>
                      <p class='breadcrumbs'>
                        <span class='post-navigation'>
                          <a expr:href='data:blog.homepageUrl' rel='tag'>Kênh phần mềm việt </a>
                          <b:loop values='data:posts' var='post'>
                            <b:if cond='data:post.labels'>
                              <b:loop values='data:post.labels' var='label'>
                                <b:if cond='data:label.isLast == &quot;true&quot;'>
                                  <a expr:href='data:label.url' rel='tag'>
                                    <data:label.name/>
                                  </a>
                                </b:if>
                              </b:loop>
                              <b:else/>
                              Chưa xác định
                            </b:if>
                            <span>
                              <data:post.title/>
                            </span>
                          </b:loop>
                        </span>
                      </p>
                      <b:else/>
                      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                        <!-- breadcrumb for the label archive page and search pages.. -->
                        <p class='breadcrumbs'>
                          <span class='post-labels post-navigation'>
                            <a expr:href='data:blog.homepageUrl'>
                              Kênh phần mềm việt
                            </a>
                            <span>
                              <!-- Neu dang phan luu tru -->
                               Bài viết của:
                               <data:blog.pageName/>
                            </span>
                          </span>
                        </p>
                        <b:else/>
                        <b:if cond='data:blog.pageType == &quot;index&quot;'>
                          <p class='breadcrumbs'>
                            <span class='post-labels post-navigation'>
                              <b:if cond='data:blog.pageName == &quot;&quot;'>
                                <a expr:href='data:blog.homepageUrl'>
                                  Kênh phần mềm việt
                                </a>
                                <span>
                                  Tất cả bài viết
                                </span>
                                <b:else/>
                                <a expr:href='data:blog.homepageUrl'>
                                  Kênh phần mềm việt
                                </a>
                                <span>
               <!-- Neu dang chuyen muc -->
                                  Bài viết chuyên mục:
                                  <data:blog.pageName/>
                                </span>
                              </b:if>
                            </span>
                          </p>
                        </b:if>
                      </b:if>
                    </b:if>
                  </b:if>
                </b:includable>
    <b:includable id='main' var='top'>

B7: Tìm (Ctrl+F) đến đoạn Code sau ]]></b:skin> và thêm trước nó đoạn mã code phía dưới:

/*****************************************
     BREADCRUMB
******************************************/
.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
   line-height: 1.4em;
 }
.post-navigation > a {
    border: 1px solid #016DB5;
    border-radius: 8px 8px 8px 8px;
    color: #003399;
    padding: 4px 15px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.post-navigation > a:hover {
    border: 1px solid #016DB5;
    border-radius: 8px 8px 8px 8px;
    color: #FF9900;
    padding: 4px 15px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 10px;
   font-weight:bold;
}

B8: Kích nút Lưu mẫu

Bây giờ bạn đã thêm thành công thanh điều hướng vào Blog rồi đó.

Tin học văn phòng
Read more…

Thêm nút chia sẻ mạng xã hội dưới tiêu đề bài viết trong Blogger

20:07 |

(Thêm nút chia sẻ mạng xã hội trong Blogger)

-  Hiện nay mạng xã hội là một phương tiện truyền thông có tầm quan trọng rất lớn trong việc quảng bá hình ảnh doanh nghiệp, giới thiệu sản phẩm dịch vụ, thúc đẩy lưu lượng truy cập Web hoặc Blog. Mạng xã hội cho phép người dùng dễ dàng chia sẻ những thông tin hay cho bạn bè, đối tác, người thân giúp doanh nghiệp truyền bá thông tin và tiếp nhận phản hồi cùng lúc. Khác xa với phương pháp truyền thông truyền thống chú trọng cung cấp thông tin một chiều, mạng xã hội với tính năng lan truyền (viral) vừa giúp đưa thông tin về sản phẩm lan nhanh trong cộng đồng vừa cho phép doanh nghiệp có thể “lắng nghe” tiếng nói của khách hàng để có sự điều chỉnh kịp thời cho phù hợp với nhu cầu của họ.

Hiện có rất nhiều mạng xã hội, tuy nhiên mức độ phổ biến và thông dụng phải kể đến Facebook, Google Plus, STUMBLE UPON  và Twitter đó là lý do tại sao trong tiện ích này chỉ có bốn nút chia sẻ xã hội, chủ yếu là người đọc đang sử dụng này bốn mạng xã hội. Widget này sẽ không làm giảm tốc độ tải blog của bạn.
Bạn có thể dễ dàng tùy chỉnh nó bằng cách thay đổi độ rộng, màu sắc, đường viền… . Chúng ta hãy xem làm thế nào để có thể thêm các nút chia sẻ phía dưới mỗi tiêu đề bài viết khi xem chi tiết trong blogger của bạn nhé.

B1: Đăng nhập vào Blogger
B2: Chọn Menu Mẫu (Template)\Chỉnh sửa HTML (Edit HTML)
B3: Ấn tổ hợp phím Ctrl + F và tìm thẻ </b:skin>
B4: Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

/*****************************************
     Social Buttons
******************************************/
    #SocialShareBar {
      float: left;
      border-top: 1px solid #eaeaea;
      border-bottom: 1px solid #eaeaea;
      width: 610px;
      margin-bottom: 20px;
      margin-left: -10px;
      margin-top: 10px;
      position: relative;
      clear:both;
      z-index: 9999;
    }
    .social-heading h5 {
      float: left;
      padding-right: 20px;
      padding-top: 13px;
      text-transform: uppercase;
      font-weight: bold;
      margin: 0px;
      padding-left: 10px;
      font-family: &#39;Lora&#39;,Arial,Helvetica,Geneva,sans-serif;
      font-size: 15px;
      color: #555555;
    }
    .twitter-tweet, .facebook-like, .google-plus, .comment-counter {
      float: left;
      border-left: 1px solid #eaeaea;
      padding-left: 18px;
      padding-top: 15px;
      padding-bottom: 10px;
      width: auto;
      height: 22px;
    }
    .comment-counter a {
      text-decoration: none !important;
    }
    .share-bubble{
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaR4mUUoK0zoeoU9zCpY0NgASFZZxh2l093ADRO8mU0BEi63MdyCnuOdpgFEWtZIAGm_igLeLYTDKT9F5k0rNSt-4X3VxFV3yMOiDZQy0L0WKKgFCVe-CttD9ji8nqLEonZnAKPL51VUO5/s1600/Comments.png) no-repeat;
      height: 22px;
      min-width: 30px;
      float: left;
      margin: 4px 5px 0px 5px;
    }
    .google-plus {
      margin-left: 20px;
    }

B5: Ấn tổ hợp phím Ctrl + F và tìm thẻ <data:post.body/> phía trên là thẻ <b:if cond='data:blog.pageType == &quot;item&quot;'>
- B6: Dán đoạn code bên dưới vào trước thẻ <data:post.body/>
<div style='background:#f5f5f5; border:1px solid #ddd;-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;padding:5px;box-shadow:3px 3px 3px #CCCCCC;'>
        <table border='0'>
            <tr>
                <td>
                    <!-- Twitter -->
                    <a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
                    <b:if cond='data:post.isFirstPost'>
                        <script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
                        </script>
                    </b:if>
                </td>
                <td>
                    <!--Facebook-->
                    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
                </td>
                <td>
                    <div style='margin-right:25px;'>
                        <!-- STUMBLE UPON -->
                        <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
                    </div>
                </td>
                <td>
                    <div style='margin-right:5px;'>
                        <!-- GOOGLEPLUS -->
                        <g:plusone expr:href='data:post.url' size='medium'/>
                    </div>
                </td>
                <td>
                    <!-- AddThis Button BEGIN -->
                    <div class='addthis_toolbox addthis_default_style '>
                        <a class='addthis_counter addthis_pill_style'/>
                    </div>
                    <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;My Tutorials Cafe&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; }
                    </script>
                    <!-- AddThis Button END -->
                </td>
            </tr>
        </table>
    </div>

B7: Kích nút Lưu mẫu

Kích nút refresh trên trình duyệt và truy cập bất kỳ bài  viết nào trên Blog của bạn để xem các nút mạng xã hội sẽ xuất hiện dưới tiêu đề bài viết.

Tin học văn phòng
Read more…

Tùy chỉnh các liên kết chuyển trang trong Blogger

20:06 |

(Thủ thuật Blogger)

- Khi người sử dụng xem chi tiết một bài viết hoặc vào xem danh sách các bài viết một chuyên mục nào đó, ở cuối Blog là các liên kết đến trang trước / sau của bài viết. Khi người truy cập kích chuột vào các liên kết, Blog sẽ tự động chuyển tới danh sách các bài viết trước đây của bạn hoặc bài tiếp theo hoặc trang chủ. Tuy nhiên mặc định các liên kết này chỉ là các liên kết thường, trông rất đơn điệu.Vậy có cách nào để thay thế những liên kết này bằng những hình ảnh trông đẹp và sinh động và chuyên nghiệp hơn không?

Trước khi chỉnh sửa

Sau khi chỉnh sửa

Hôm nay Kênh phần mềm việt sẽ hướng dẫn cách để thay đổi các liên kết đến trang trước, trang sau, trang chủ bằng những hình ảnh  tùy ý.

B1: Đăng nhập vào Blogger
B2: Chọn Menu Mẫu (Template)\Chỉnh sửa HTML (Edit HTML)
B3: Ấn tổ hợp phím Ctrl + F và tìm thẻ <b:includable id='nextprev'>

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
        <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
            <data:newerPageTitle/>
          </a>
        </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
        <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
            <data:olderPageTitle/>
          </a>
        </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'>
        <data:homeMsg/>
    </a>
  </div>
  <div class='clear'/>
</b:includable>

Bây giờ chúng ta sẽ thay thế các dòng chữ màu đỏ bằng các nội dung hoặc hình ảnh mong muốn.

1. Để thêm hình ảnh bên cạnh văn bản liên kết
Để đặt hình ảnh bên cạnh các liên kết văn bản, thêm thẻ <img src="Đường dẫn Ảnh"/> trước hoặc sau các thẻ <data:olderPageTitle/>, <data:newerPageTitle/>, <data:homeMsg/>

<b:includable id='nextprev'>
    <div class='blog-pager' id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
        <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
            <img src="Đường dẫn Ảnh" /><br />
            Trang trước
          </a>
        </span>
      </b:if>
      <b:if cond='data:olderPageUrl'>
        <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
            <img src="Đường dẫn Ảnh" /><br />
            Trang sau
          </a>
        </span>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
        <img src="Đường dẫn Ảnh" /><br />
        Trang chủ
      </a>
    </div>
    <div class='clear'/>
</b:includable>

Sau khi chỉnh sửa ta sẽ có kết quả như hình ảnh dưới


2. Thay thế các liên kết bằng hình ảnh
Nếu bạn không muốn liên kết văn bản xuất hiện mà chỉ muốn sử dụng hình ảnh, ta thay thế các thẻ <data:olderPageTitle/> , <data:newerPageTitle/> và <data:homeMsg/> bằng các thẻ <img src="Đường dẫn Ảnh"/>

<b:includable id='nextprev'>
    <div class='blog-pager' id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
        <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
            <img src="Đường dẫn Ảnh"/>
          </a>
        </span>
      </b:if>
      <b:if cond='data:olderPageUrl'>
        <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
            <img src="Đường dẫn Ảnh"/>
          </a>
        </span>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
        <img src="Đường dẫn Ảnh"/>
      </a>
    </div>
    <div class='clear'/>
</b:includable>

Sau khi chỉnh sửa ta sẽ có kết quả như hình ảnh dưới


Tin học văn phòng
Read more…

Chèn Banner hình ảnh cho blogger

20:05 |

(Thêm Banner hình ảnh cho blogger)

- Banner là một thành phần rất quan trọng đối với 1 Website, Blog, ứng dụng Web… Banner thể hiện được mục tiêu và hướng đi của trang Web và nó thu hút, lôi cuốn sự chú ý của người xem. Khi người xem truy cập vào 1 địa chỉ Web nào đó, 2 thành phần mà người xem thường quan tâm đầu tiên đó là Logo và Banner. 

Đối với các Website hay Blog, thường có 2 cách để đặt Banner, đó là sử dụng thuộc tính background-image:url trong CSS hoặc thiết lập trên giao diện Web của người quản trị.

Hôm nay, Kênh phần mềm sẽ giới thiệu với các bạn 2 cách để đưa Banner quảng cáo hoặc hình ảnh vào Header của blog.

1. SỬ DỤNG CSS
B1: Đăng nhập vào blogger,
B2: Chọn Trình bày > Mẫu > Chỉnh sửa HTML
B3: Các bạn kiếm dòng dưới đây

Đoạn mã 1:
#header-wrapper {
width:940px;
margin:0 auto 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

B4: Thêm đường dẫn ảnh Banner
Thêm dòng này
background-image:url('địa chỉ');
vào sau dòng
margin:0 auto 10px;

Như vậy đoạn mã 1 của bạn sẽ là:
#header-wrapper {
width:940px;
margin:0 auto 10px;
background-image:url('địa chỉ');
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

Trong đó địa chỉ bạn điền đường dẫn đầy đủ của banner. VD bạn có 1 banner tại địa chỉ: http://1.bp.blogspot.com/-oHe-C9BE524/UorCTf6r-HI/AAAAAAAAAww/JdaQxtxRFuM/s1600/Banner_CustomSoftware.png thì đoạn mã sẽ là:

#header-wrapper {
width:940px;
margin:0 auto 10px;
background-image:url('http://1.bp.blogspot.com/-oHe-C9BE524/UorCTf6r-HI/AAAAAAAAAww/JdaQxtxRFuM/s1600/Banner_CustomSoftware.png');
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

B5: Lưu lại các thay đổi.

2. SỬ DỤNG GIAO DIỆN QUẢN TRỊ ADMIN
- B1: Đăng nhập vào Blogger
- B2: Kích chọn Menu Bố cục (Layout), kích nút Edit tại mục Header


- B3: Hộp thoại xuất hiện


- Lựa chọn hình ảnh từ máy tính hoặc từ 1 địa chỉ Internet
- Lựa chọn Thay cho tiêu đề và mô tả (Instead of title and description) tại mục Vị trí 

- B4: Kích nút Lưu

Ấn F5 để tải lại Blog, bạn sẽ nhìn thấy Banner đã được chèn vào Blog.

Tin học văn phòng
Read more…

Chèn Video Youtube vào Blogspot

03:31 |

(Chèn Video Youtube vào Blogger)

- Nhân dịp ngày 20-11, bạn có làm một Video để  bày tỏ những nỗi niềm biết ơn, tình cảm yêu quý dành cho thầy cô. Với mong muốn chia sẻ Video này đến bạn bè, và với những thao tác đơn giản bạn đã đưa thành công Video này lên trang Youtube. Ngoài trang Youtube, bạn cũng muốn chèn Video này vào một bài viết trong Blog, nhưng bạn vẫn chưa biết cách thực hiện. Hôm nay Tôi sẽ hướng dẫn Bạn làm công việc này nhé và tùy biến một cách hiệu quả việc chèn Video Youtube vào Blog nhé.

- B1: Vào trang Youtube.com
- B2: Tìm kiếm Video cần chèn nếu đã có, hoặc tải lên nếu chưa tồn tại trên trang Youtube
- B3: Kích xem chi tiết Video, chọn Tab Chia sẻ (Share)\Nhúng (Embed)


- B4: Copy toàn bộ đoạn Code tại vùng màu vàng và đoạn Code có dạng

<iframe width="640" height="360" src="//www.youtube.com/embed/9DWqSXJ6zDg" frameborder="0" allowfullscreen></iframe>

- B5: Vào trang quản trị Blog, tạo bài viết mới hoặc chỉnh sửa bài viết cần chèn Video
- B6: Chuyển màn hình soạn thảo bài viết sang chế độ HTML


- B7: Dán toàn bộ đoạn Code vào màn hình soạn thảo
- B8: Kích nút Cập nhật để lưu bài viết

Tới đây xem như việc chèn VideoClip của YouTube  vào bài viết  đã thành công rồi đó.

Video Demo



Tuy nhiên ngoài cú pháp chèn Video ở trên chúng ta cũng có thể thêm các tham số khác vào  để tăng thêm sự hấp dẫn cho trang Blog.  Và dưới đây là một số các tham số khi thực hiện chèn Video

- start=20:  bỏ qua 20 giây đầu tiên của Video. Nếu muốn bỏ qua nhiều/ít hơn thì chỉ cần thế số 20 thành số giây bạn muốn.

Đoạn Code sẽ có dạng như sau:
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/9DWqSXJ6zDg?start=20" width="640"></iframe>

- &rel=0: Không xuất hiện các Video khác khi kết thúc xem Video hiện tại

Đoạn Code sẽ có dạng như sau:
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/9DWqSXJ6zDg?rel=0" width="640"></iframe>

- &autoplay=1: Tự động chạy Video

Đoạn Code sẽ có dạng như sau:
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/EXLGWIhgCx4?autoplay=1" width="640"></iframe>

- &loop=1&amp;playlist=Mã Video: Tự  động phát lại (replay) sau khi chạy xong

Đoạn Code sẽ có dạng như sau:
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/9DWqSXJ6zDg?loop=1&playlist= 9DWqSXJ6zDg" width="640"></iframe>


Đây là cú pháp tổng hợp khi chèn Video, cú pháp này sẽ thực hiện các công việc: Không xuất hiện các Video khác khi kết thúc xem Video hiện tại, Tự động chạy Video, Tự  động phát lại (replay) sau khi chạy xong.

<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/9DWqSXJ6zDg?rel=0&autoplay=1&loop=1&playlist=9DWqSXJ6zDg" width="640"></iframe>

Cuối cùng bạn hãy xem lại bài viết vừa chèn Video và thưởng thức thành quả tuyệt vời của mình đi nào.

Tin học văn phòng
Read more…

Tích hợp Google Analytics vào Blog, Website

18:31 |
(Cài đặt Google Analytics vào Blog) -  Google Analytics là một trong những công cụ tuyệt với mà bất cứ các Webmaster đều phải sử dụng đặc biệt là các SEOER. Google Analytics giúp bạn thống kê, phân tích từ khóa mà họ tìm kiếm tới blog, Website, họ tới từ đâu, khoảng thời gian truy cập nhiều nhất, số thời gian lưu lại để tra cứu tìm kiếm thông tin. Với những số liệu thống kê phong phú và giá trị về lượng truy cập, từ khóa, thời gian Google Analytics là một dịch vụ miễn phí tốt nhất, cho kết quả đảm bảo với độ tin cậy cao.
Hôm nay Kênh phần mềm việt xin giới thiệu với mọi người cách tích hợp Google Analytics vào Website hoặc Blog, dưới đây là các bước thực hiện.

- B1: Đăng ký
1. Đăng nhập tài khoản Gmail theo địa chỉ http://gmail.com. Nếu chưa có bạn phải đăng ký một tài khoản Gmail.
2. Truy cập vào trang chủ của Google Analytics theo địa chỉ: http://www.google.com/analytics


3. Kích nút Đăng nhập, nhập địa chỉ Email và Password


4. Kích nút Đăng ký
Màn hình đăng ký google analytics xuất hiện, lựa chọn hình thức theo dõi là Trang web, phương pháp theo dõi là Universal Analytics BETA hay Analytics cổ điển.


- Kéo xuống dưới và điền các thông tin của cho địa chỉ Website cần theo dõi.


5. Bấm vào nút Nhận Id theo dõi, hộp thoại điều khoản sử dụng của Google xuất hiện, kích nút Tôi chấp nhận.
6. Google sẽ trả về cho bạn một đoạn mã và ID theo dõi, đoạn mã này sẽ được sử dụng trong Website còn ID theo dõi sẻ được sử dụng cho Blog

Bước 2 – Đặt GA Tracking Code vào Website và ID theo dõi cho Blog

1. Website
- Mở file mặc định chạy của Website
- Copy đoạn mã Google đã trả về trong quá trình đăng ký lúc trước vào vào trước thẻ </head>


2. Blog
- Đăng nhập vào tài khoản Blogger
- Kích Menu Cài đặt\Khác
- Nhập ID theo dõi Google đã trả về trong quá trình đăng ký lúc trước vào 


- Kích nút Lưu cài đặt

Sau khi cài đặt xong bạn sẽ chưa thể nhìn thấy các con số thống kê trong Google Analytics, thông thường phải mất khoảng từ 1-3 ngày Webmaster mới có thể khai thác được các thông tin từ công cụ tuyệt với này. Hi vọng các bạn sẽ khai thác hết tất cả các tính năng của Google Analytics đã hỗ trợ từ đó giúp cho bạn có 1 cái nhìn tổng quan về sự hoạt động cũng như phát triển của website, từ đó giúp bạn xây dựng một kế hoạch làm SEO tốt nhất cho webiste của mình.

Tin học văn phòng
Read more…

Thêm tài khoản quản trị vào Blogger

07:59 |
(Bổ xung tài khoản quản trị trong Blogspot) - Bạn đã mất nhiều thời gian để tạo, biên tập nội dung và quảng bá Blog nhưng vì một lý do nào đó tài khoản Gmail bị khóa không thể đăng nhập được. Chắc hẳn bạn sẽ buồn và thất vọng nếu tài khoản Gmail của bạn bị khóa, và thật tai hại bởi rất nhiều thông tin khác đã mất đi như: Mail, bạn bè, ảnh…

Hôm nay mình xin chia sẻ cách thêm một hoặc nhiều tài khoản quản trị Blog để trong trường hợp một tài khoản bị khóa còn có các tài khoản khác chăm sóc Blog.

- B1: Đăng nhập vào Blog
- B2: Vào Menu Cài đặt (Settings)\Cơ bản (Basic)


- B3: Kích nút Thêm tác giả, nhập vào địa chỉ Email hoặc chọn từ danh sách liên hệ.
- B4: Kích nút Mời tác giả
- B5: Kiểm tra Email được mời và kích nút Chấp nhận lời mời


Sau khi Email được mời chấp nhận trong Danh sách tác giả Blog sẽ xuất hiện tên của người đó. Có 2 quyền hạn đối với phần tác giả này đó là: Tác giả và Quản trị viên. Nếu là Tác giả chỉ có quyền quản trị các bài viết, còn đối với quyền Quản trị viên sẽ có toàn quyền quản trị Blog. Có thể thay đổi quyền hạn một tác giả bằng cách lựa chọn giá trị trong danh sách thả xuống ở cuối danh sách.


Như vậy bây giờ ta đã thêm được tài khoản khác để cùng quản trị Blog rồi đó, đối với những tài khoản nào có quyền Quản trị viên thì quyền quản trị ngang nhau.

Tin học văn phòng
Read more…

Chèn quảng cáo ở góc phải Blogger hoặc Website

07:40 |
(Chèn quảng cáo góc phải màn hình cho Website) - Ngày nay quảng cáo trực tuyến hay tiếp thị trực tuyến không còn xa lạ với nhiều người, đặc biệt quảng cáo trực tuyến đã trở thành một trong những công cụ quan trọng hàng đầu trong thời kì Internet. Trong khi khủng hoảng kinh tế khiến hầu hết các hoạt động kinh doanh ngưng trệ vì chi phí tăng cao khiến giá bán sản phẩm tăng theo, doanh số bán hàng giảm thì quảng cáo trực tuyến vẫn được ưu tiên đầu tư và không ngừng mở rộng phạm vi ảnh hưởng.

Hiện có nhiều hình thức quảng cáo trực tuyến như: Đặt Banner trên Website, SEO, SEM, Google Adwords… Ngoài các hình thức quảng cáo trên thì hình thức quảng cáo bằng Popup ở góc phải hoặc trái màn hình cũng được nhiều doanh nghiệp sử dụng. Với cách quảng cáo này sẽ gây sự chú ý cho người xem, từ đó sẽ mang lại những cơ hội lớn cho việc bán hàng.


Hôm nay Kênh phần mềm việt sẽ giới thiệu với mọi người cách chèn quảng cáo ở góc phải của Blogger hoặc Website, nội dung quảng cáo có thể là ảnh hoặc Text.

1. Đối với Blogger
- B1: Đăng nhập vào Blogger
- B2: Kích chọn Menu Bố cục (Layout)
- B3: Kích Thêm tiện ích\ HTML/Javascript
- B4: Nhập toàn bộ đoạn Code phía dưới vào màn hình Nội dung


- B5: Kích nút Lưu

2. Đối với Website
- B1: Mở file mặc định chạy của Website
- B2: Thêm đoạn code 1  lên phía trên thẻ đóng </body>
- B3: Lưu File

Sau khi chèn đoạn Code 1 vào Blogger hoặc Website, mỗi khi người xem truy cập trang Web của bạn, một cửa sổ quảng cáo ấn tượng sẽ xuất hiện ở góc bên phải của màn hình. Người xem có thể ẩn, tắt hoặc bật màn hình quảng cáo này.

Tin học văn phòng
Read more…

Thêm bộ nút Like của Facebook - Google Plus - Tweet vào blogspot

02:56 |
Trong các bài viết gần đây, thấy có khá nhiều bạn hỏi làm thế nào để thêm bộ nút chia sẻ mạng xã hội dạng nằm ngang bao gồm: Facebook, Google +, Tweet giống trong template tin tức Congly, nên hôm nay mình sẽ hướng dẫn các bạn cách add nó vào blogspot :-)

Thêm bộ nút Like của Facebook - Google Plus - Tweet vào blogspot


Cách thêm bộ nút chia sẻ mạng xã hội


Bước 1: Đăng nhập vào trang quản trị blog
- Vào "Mẫu" -> "Chỉnh sửa HTML".
- Thêm đoạn đoạn scripts sau vào trước thẻ </head>.
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fb7b814b14ef7b' type='text/javascript'/>

Bước 2: Tích hợp bộ nút chia sẻ vào Widget
- Vào "Bố cục" -> "Thêm tiện ích mới" tại vị trí bạn mong muốn.
- Chọn tiện ích HTML/JAVASCRIPTS.
- Thêm đoạn code sau vào nội dung của tiện ích:
<div class='addthis_toolbox addthis_default_style' style='padding:10px 2px'>
<a class='addthis_button_google_plusone' g:plusone:size='tall' style='padding-right:10px'/>
<a class='addthis_button_facebook_like' fb:like:layout='box_count' style='padding-right:10px'/>
<a class='addthis_button_tweet' style='padding-right:10px' tw:count='vertical'/>
<a class="addthis_counter"></a>
</div>

Bước 3: Lưu lại và xem kết quả :-)
Read more…

Tạo playlist nghe nhạc trên đầu blog

17:51 |
Tạo playlist nghe nhạc trên đầu blog
Hôm nay, Cuộc sống muôn màu xin hướng dẫn một tiện ích khá đơn giản của bên thứ 3 hỗ trợ cho blogspot, website, giúp bạn dễ dàng thêm trình nghe nhạc vào blog của mình.
Read more »
Read more…

Hộp nhận xét mới có avatar đơn giản cho blogspot

20:59 |
Hộp nhận xét mới có avatar đơn giản cho blogspot
Chỉ với 2 bước, bạn sẽ có ngay tiện ích nhận xét mới kèm avatar khá đơn giản  và nhẹ cho trang blogspot của mình. Một tiện ích không thể thiếu cho các blog cá nhân, giúp ta dễ dàng theo dõi các lượt bình luận của khách truy cập mà không cần phải vào trang quản trị Blooger.
Read more »
Read more…

[Congly Version 2] Template tin tức giao diện chuyên nghiệp cho blogspot

07:12 |
Template tin tức giao diện chuyên nghiệp cho blogspot
Như đã giới thiệu ở bài Giao diện cho blogspot - Congly template (Version 1), ở bản này, ngoài các tiện ích và thay đổi, mình đã thay đổi và chỉnh sửa lại nhiều thứ, cũng như fix lỗi. Cảm ơn sự góp ý nhiệt tình của các bạn để template này ngày càng hoàn thiện hơn.
Read more »
Read more…

Thêm comment app Facebook cho blogspot (Mới)

18:34 |
Ở bài trước, mình đã hướng dẫn các bạn cách thêm bình luận facebook cho blogspot khá đơn giản, không cần phải xác thực tài khoản hay tạo App. Nhưng bất tiện ở chỗ bạn không thể quản lý bình luận của bạn đọc.

Bài viết này, mình sẽ hướng dẫn các bạn cách thêm bình luận Facebook vào blog quản lý bằng App.

Ưu điểm: Dễ dàng tiếp nhận cũng như quản lý tất cả các bình luận.

Giao diện quản lý bình luận của Facebook APP
Giao diện quản lý bình luận của Facebook APP

Cách chèn bình luận Facebook vào blogger và quản lý bằng APP


Lưu ý: Để tạo app, tài khoản người dùng tại facebook của bạn phải được veryfi (xác thực), thông thường là qua mạng di động, các mạng như mobi hay vina... các bạn xác nhận bình thường, riêng mạng Viettel các bạn làm theo hướng dẫn:
Cách xác nhận tài khoản facebook qua mạng Viettel

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Bước 1: Đăng ký app trên facebook
- Truy cập vào địa chỉ: https://developers.facebook.com/
- Tạo app mới như trong hình.

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Bước 2: Đặt tên cho app (Ứng dụng)

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Nhập mã bảo vệ như trong hình sau khi chọn "Tạo ứng dụng"

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Bước 3: Thiết lập ứng dụng vừa tạo tại Facebook

Thêm comment app Facebook cho blogspot (Mới)

Chèn khung nhận xét vào blogspot


Bước 4: Đăng nhập vào blogger, vào "Mẫu" -&gt; "Chỉnh sửa HTML"

- Thêm đoạn sau vào thẻ <html...
xmlns:fb='https://www.facebook.com/2008/fbml
- Đoạn sau vào trước thẻ </head>
<meta content='Mã ứng dụng' property='fb:app_id'/>
Thay thế Mã ứng dụng của app mà bạn đã tạo như trong hình tại bước 3.

Bước 5: Thêm đoạn mã bên dưới vào trước thẻ </body>
<div id='fb-root'/>
    <script>
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
        fjs.parentNode.insertBefore(js, fjs);
      }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Bước 6: Thêm đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="540"></div>';
//]]>
</script>
Lưu ý:
- data-num-posts="5: Số nhận xét được hiển thị.
- data-width="600: Độ rộng của khung bình luận.

Bước 7: Chèn khung nhận xét facebook vào vị trí thích hợp trong blogspot

Thông thường ta sẽ chèn ngay phía bên dưới bài viết. Tìm một trong các đoạn code sau:
<b:include data='post' name='post'/>
Thêm đoạn code sau vào bên dưới đoạn vừa tìm được:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
Lưu ý: Để xem và quản lý các bình luận, ta vào https://developers.facebook.com/tools/comments, chọn app vừa tạo.
Read more…

Thêm Meta Description và Keyword tự động vào từng bài viết cho Blogspot

05:35 |
Thêm Meta Description và Keyword tự động vào từng bài viết cho Blogspot
Hiện nay Seo - Marketing online đã quá quen thuộc với mọi người rồi, và việc tối ưu onpage cho blog là một công đoạn hết sức quan trọng, dạo quanh một vài trang thấy các bạn có hỏi, nên hôm nay mình xin hướng dẫn các bạn thêm mô tả (Meta Description) và thẻ Meta keyword cho từng bài viết trong blogspot.
Read more »
Read more…

Cách thêm bình luận (comment) Facebook từng bài đăng cho Blogspot

23:09 |
Hiện là mạng xã hội toàn cầu lớn nhất hiện nay, có thể nói là nhà nhà Facebook, người người Facebook, chính vì vậy việc thêm bình luận (comment) của Facebook cho blogspot là rất cần thiết, vừa tạo được nơi bình luận, chém gió cho mọi người, vừa dễ đưa bài viết tới người đọc bởi hiệu ứng lan truyền của nó. Hôm nay, Blog Cuộc sống muôn màu xin hướng dẫn cả nhà cách thêm khung chat, comment của Facebook cho từng bài viết vào blogspot.
Read more »
Read more…

Hướng dẫn gắn tên miền vào blogspot và loại bỏ www

09:58 |
Hướng dẫn gắn tên miền vào blogspot và loại bỏ www
Sau khi đã sở hữu được một trang blogspot thì việc cân nhắc mua tên miền riêng để gắn vào blog là một điều hết sức cần thiết, vừa tạo được tính chuyên nghiệp, tên miền ngắn hơn, gọn hơn, khách truy cập dễ nhớ, dễ vào, vừa đề phòng việc blog chẳng may bị xóa. (Điều này cực kỳ quan trọng trong SEO - Marketing Online).
Read more »
Read more…