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

Thứ Hai, 13 tháng 7, 2015

Thêm và quản lý comment facebook cho WordPress Blogger

Thêm và quản lý comment facebook cho WordPress Blogger
Cách Thêm và quản lý comment facebook cho WordPress Blogspot website . Chèn khung Comment Facebook cho WordPress  Blogspot .Hướng dẫn Cách thêm comment facebook và quản lý comment cho Blogspot WordPress  .Làm sao để có thể quản lý được comment facebook trên web blogspot của mình (xóa comment của người khác, và nhận thông báo khi có comment mới )

Vấn đề thêm comment facebook và quản lý comment facebook trên website blogspot bạn làm chủ là vấn đề mà admin nào cũng mong muốn nhất là các website làm shop, hay cần chăm sóc khách hàng. Việc thêm comment và quản lý được comment của khách hàng trên web của bạn sẽ giúp ích rất nhiều vì bạn có thể tương tác với khách hàng ngay và toàn quyền quyết định các comment trên web của bạn

Ưu điểm là gì ?

- Điều đầu tiên phải nó đó là giúp ích cho web bạn tăng độ chia sẻ và tương tác với khách hàng khi thêm comment vào web
- Bạn sẽ biết được comment nào comment mới nhất , được comment tại bài viết nào
- Bạn có toàn quyền như ẩn hay xóa comment spam hay vô văn hóa nào đó khỏi website của bạn

Nhược điểm ?

- Bạn không được thông báo khi có comment mới mà thường phài thủ công truy cập vào trang quản lý comment thường xuyên để xem và quản lý

Read more »

Thứ Ba, 9 tháng 6, 2015

Cách Code để Blogspot hiển thị tốt trên di động -Mobile

Cách Code để  Blogspot hiển thị tốt trên di động -Mobile

Cách Code để  Blogspot hiển thị tốt trên di động -Mobile. Code hiển thì di động cho blogspot. Làm gì để blogspot hiển thị tốt trên di động.Code Responsive Blogspot. Code blogsger để hiển thị tốt trên moblie

Hiện nay công nghệ phát triển rất nhiều các thiết bị di động hiện đại cấu hình khủng được đưa ra thị trường chính vì vậy nhu cầu lướt web trên nhiều nền tảng khác nhau khiến các web site cũng như blogspot cũng cần thay đổi để làm sao để hiển thị một cách tốt nhất trên các thiết bị này

Qua bài viết này mình xin chia sẻ với các bạn một chút ít kiến thức để các bạn có thể hiểu thêm cũng như tìm hiểu sâu hơn về thiết kế web blog di động.Có thể nói đây là một kiến thức nâng cao có thể là khá khó áp dụng nếu bạn không giỏi về code

Tại sao chúng ta phải thiết kế website blog hiển thị tốt cho di động ?

  • Thiết kế Responsive Blogspot  giúp blog bạn SEO tốt hơn, nhìn chuyên nghiệp hơn
  • Thiết kế Responsive Blogspot  nó sẽ tự điều chỉnh theo mọi kích thước như trên Smartphone, Tablet hoặc các thiết bị khác để người dùng dễ dùng hơn 
  • Thiết kế Responsive giảm tốc độ tải trang web đó có nghĩa là hiệu suất tổng thể của bạn sẽ tăng lên.
  • Designs Responsive cũng tăng Thu nhập của bạn và bạn có thể sử dụng đơn vị quảng cáo adsense đáp ứng cho tối đa hóa thu nhập của bạn.

Chuyển đổi của bạn Blogger của bạn hiển thị tốt trên Mobile

- Trước khi tiếp tục với quá trình này đảm bảo rằng nó đòi hỏi kiến thức cơ bản về HTML5 và CSS3
- Sao lưu code lại để lại 1 bản gốc nếu bạn sửa sai, nên nghịch qua các blog demo để không gây ảnh hưởng gì nhiều

Cách thực hiện

- Điều đầu tiên đăng nhập blog vào phẩn sủa code, mình khuyến khích các bạn tải về rồi sửa bằng phần mềm chuyên dụng code web như notepad ++, Adobe Dreamweaver ....

- Vào code tìm lấy thể <head> rồi thêm đoan code này vào dưới nó

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

- Tìm hể <body> rồi sửa nó thành <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

HIỂN THỊ MOBILE CHO WIDGET

- Code định nghĩa thông thường của 1 widget

<b:widget id='ID-type' locked='true' title='Widget-Title'/>

- Để hiển thị trên di động các bạn cần sửa nó thành

<b:widget id='ID-type' locked='true' mobile='yes' title='Widget-Title'/>

Một số tùy biến bạn có thẻ quan tâm

  • mobile='yes' ==> cho phép hiển thị mobile
  • mobile='no' ==> ko cho phép hiển thị trên mobile
  • mobile='only' ==> chỉ được hiển thị trên mobile

- Để hiển thị tốt trên các thiết bị khác nhau bạn cần thêm code CSS sau:

@media screen and (max-width : 1280px) {
/* ------------ CSS tùy chỉnh cho PC ------------*/
}
@media screen and (max-width : 1024px) {
/* ------------ CSS tùy chỉnh cho iPad ------------*/
}
@media screen and (max-width : 768px) {
/* ------------ CSS tùy chỉnh cho iPad nhỏ ------------*/
}
@media screen and (max-width : 640px) {
/* ------------ CSS tuỳ chỉnh cho iPhone ------------*/
}
@media screen and (max-width : 480px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động đời cao ------------*/
}
@media screen and (max-width : 320px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động thường ------------*/
}

- Mình xin lấy ví dụ khi các bạn thêm các thuộc tính CSS vaf0c cho tưng phần để hiển thị phù hợp

@media screen and (max-width: ****px) 
{
#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }
}

Một số lưu ý khi đặt các thuộc tính cho css

1. Luôn luôn sử dụng trong % vì dùng px . Ví dụ như Width: 50%;

2. Luôn luôn sử dụng em  thay cho px như . Ví dụ như 10em thay vì 10px.

3. Margin: auto; cũng cần được khuyến khích sử dụng

4. Display:none để ẩn bất kỳ phần cụ thể.

Tối ưu Description Keyword Tittle toàn diện cho blogspot

Tối ưu thẻ meta Description - Keyword - Tittle toàn diện cho blogspot. Tối ưu chuẩn SEO các thẻ Meta Title Blogspot,Tối ưu META Description trong Blogger Blogspot. Tối ưu meta Description - Keyword - Tittle cho trang label, 404,trang tìm kiếm.

Chào mọi người lâu lắm rồi mình mới viết bài về thủ thuật blogspot kể từ ngày blog bittuot phiên bản đầu tiên ra đi. Do chán nản quá nên mất cảm hứng viết bài nhưng giờ mình có lẽ mình sẽ tiếp tục con đường đam mê và chia se những kiến thức về SEO blog của mình hy vọng những ai thích và yêu quý mình sẽ đọc

Bài viết này chắc có thẻ nhiều người biết rồi mình không nhớ chia sẻ chưa nữa và cũng có thể nhiều người chưa biết. Mình xin nói qua về điều bạn sẽ nhận được khi tối ưu thẻ meta Description - Keyword - Tittle qua cách mình chia sẻ

  • Bạn sẽ tối ưu được title trang chủ + bài viết + trang Label + trang tìm kiếm + trang 404 + trang Page theo ý thích của mình
  • Và tât nhiên Description - Keyword cũng dược tối ưu trên các trang : trang chủ + bài viết + trang Label + trang tìm kiếm + trang 404 + trang Page



Tối ưu thẻ meta Description - Keyword - Tittle toàn diện cho blogspot

- Lưu ý: Các bạn cần cân nhắc khi sửa vì có thể làm thay đổi lại title Description cũ của những blog có tuổi đời rồi. Cách này của mình thuộc dạng auto tự động viết vì vậy các bạn không cần viết khi đăng bài viết,trước khi sửa nên lưu lại code cũ nếu có vấn để lỗi gì còn khôi phục lại được . Các bạn khí thay đổi cũng nên viết lại title cũng như Description  như cũ để tránh ảnh hưởng tới thư hạng từ khóa đã đứng top

- Cách làm: Bạn đăng nhập Blogspot ==> Mẫu (Template) =>> Chỉnh sửa HTML rồi bắt đầu thêm các đoạn code dưới đây lên trên đoạn code  <b:skin><![CDATA[

(Các bạn có thể down code về rồi sửa bằng Notepad ++. Nhớ là sao lưu lấy 1 bản gốc để tránh tình trạng code sai ko khôi phục lại được)

Chú ý: Nếu không thành công các bạn thử xóa hết code nằm trong đoạn <b:include data='blog' name='all-head-content'/> ........  <b:skin><![CDATA[   rồi copy đoạn code dưới đây vào trong nó nhé. Nhưng xóa thì các bạn nên để lại các link css,

- Nếu không có cái dòng này thì các bạn thêm vào rồi copy code như dưới ảnh <b:include data='blog' name='all-head-content'/>


- Code các bạn cần copy vào thay đổi ,mình copy toàn bộ phẩn code của blog mình từ <head> cho đến <![CDATA[/* để các bạn dễ sửa dễ hiểu. Các bạn cần quan tâm tới phần chữ màu thôi nhé
  • Chữ màu đỏ là phần các bạn phải sửa lại cho phù hợp
  • Chữ màu cam là phần chú thích các bạn có thể xóa đi hay để cả cũng được
  • Các bạn có thể thêm bớt túy ý nếu các bạn hiểu được vấn đề, và sáng tạo thêm với code này


<head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='1381242482126904' property='fb:app_id'/>
<b:include data='blog' name='all-head-content'/>
 <!-- Tối ưu Title - Meta Description - Meta Keywords cho trang chủ --> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <title>
      Bít Tuốt Blog - Blog tổng hợp
    </title>
    <meta content='Bít Tuốt Blog - Blog chia sẻ thông tin tổng hợp về làm đẹp, mẹo vặt,thử thuật hay,chia sẻ các cách nấu ăn ngon...Bít Tuốt Blog nơi chia sẻ những thông tin hữu ích nhất.' name='description'/>
    <meta content='bít tuốt blog,thu thuat hay,kinh nghiem hot,bit tuot blog' name='keywords'/>
  </b:if>

 <!-- Viết Title cho trang 404 --> 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Bài viết này không tồn tại | Bít tuốt blog</title> 
</b:if>

<!-- Viết Title cho trang tìm kiếm --> 
<b:if cond='data:blog.searchQuery'>
<title>Từ khóa tìm kiếm cho :: <data:blog.searchQuery/> tại Bít Tuốt Blog</title>
</b:if> 

<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang lưu trữ --> 
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<title>Danh mục bài viết <data:blog.pageName/> | Bít Tốt Blog</title>
<!-- Meta Description Archive Page --> 
<meta expr:content='&quot;Danh mục bài viết &quot; + data:blog.pageName + &quot; theo tháng .Tìm hiểu thêm vui lòng truy cập bittuotblog.blogspot.com&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/>
<b:else/>
<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang Page --> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- Meta Title Pages --> 
<title><data:blog.pageName/> | Bít tuốt blog</title> 
<!-- Meta Description Pages --> 
<meta expr:content='data:blog.pageName + &quot;. Click để đọc thêm về &quot; + data:blog.pageName + &quot; Tìm hiểu thêm vui lòng truy cập bittuotblog.blogspot.com&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/>
<b:else/>
<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang Label -->
<!-- Meta TittleLabel Page --> 
<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/> :: Danh sách các bài viết về <data:blog.pageName/></title>
<!-- Meta Description Label Page --> 
<meta expr:content='data:blog.pageName + &quot; - Tổng hợp các bài viết về: &quot; + data:blog.pageName + &quot;. Cùng đón đọc các bài viết về &quot;+ data:blog.pageName + &quot; tại Bít Tuốt Blog&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/>
</b:if>
</b:if>
</b:if>  
<!-- Tối ưu Title - Meta Description - Meta Keywords cho trang bài viết -->
 <!-- Meta TittleLabel Page --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title>
      <data:blog.pageName/>
    </title>
  </b:if>
  <!-- Meta Description Label Page --> 
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName + &quot;- &quot; + &quot;Click ngay để biết thêm chi tiết về &quot; + &quot;: &quot; + data:blog.pageName + &quot; tại Bít Tuốt Blog&quot;' name='Description'/>
    <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='Keywords'/>
  </b:if>
  
  <!-- Meta Title Label Page -->
 <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptkhozEHpAoAD-nnJ8BcGuiNwFNyOUkwWtkQbNHdKBR1HQ8um1_YHHFt6IkOW6g_NpxjhTpYVGujUnym9Ud7TSji7d3Xi6vPXMQg4Fjb1Vd9JdEpOxtKOrPu75NlG2jiANbW9NMvc_vI/s1600/favicon-image.png' rel='shortcut icon'/>  
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'/>
 <b:skin>
<![CDATA[/*

- Nhìn nó hơi rối mắt như và có thể nhiều bạn không hiểu hay khó hiểu . Ai không hiểu thì vui lòng để lại comment phía dưới mình sẽ giúp đỡ nhé

Chúc các bạn thành công !

Nguồn bài viết tại Bít Tuốt Blog - bittuotblog.blogspot.com

Thứ Ba, 2 tháng 6, 2015

Share News blogger template: Magazine blogger templates free

Share News blogger template: Magazine blogger templates free

Share News blogger template: Magazine blogger templates free 2015.Magzima Responsive Magazine Blogger Template Free Download.Share Magzima Blogger Template Free .Magzima Responsive Blogger Template Free Download.Magzima Magazine Blogger Template




Demo       Download

Pass : bittemplates


Share News blogger template: Magazine blogger templates free


  • Template name: Magzima Responsive Magazine Blogger Template
  • Platform: Blogger/Blogspot 
  • Release date: jan 2014
  • Author: Uong Jowo 
  • License: Creative Commons Attribution 3.0 
  • Instructions: How to install a Blogger Template
Features:

  • Nicely structured and completely widgetized homepage
  • Mobile responsive layout
  • Background image and color options are easy customisable 
  • Automatic author photo updates, 2 sliders, ticker, carousel, video posts and more...

Share News blogger template: Magazine blogger templates free

Share News blogger template: Magazine blogger templates free


Share News blogger template: Aeromeo blogger templates free

Share News blogger template: Aeromeo bloggger templates free

Share News blogger template: Aeromeo bloggger templates free. News blogger template 2015, news blogger template free download.Share Aeromeo Blogger Template Free Download.Aeromeo Responsive Magazine Blogger Template.Aeromeo Blogger Template Download - Blogger Templates

Demo       Download

Pass  : bittemplates

Share News blogger template: Aeromeo blogger templates free


  • Flatform Type : Blogger
  • Template Name : Aeromeo Responsive Magazine Blogger Template
  • Intructions : Tutorial Install Blogger Template
  • Author Name : Uong Jowo
  • Design Url : www.uongjowo.blogspot.com
  • Description: Aeromeo Responsive Magazine Blogger Template is an awesome Magazine Blogger Template, Flat UI and fully responsive (try resizing your browser), Clean and nice. It’s ideal for Articles, News, and blogging Insya Allah... It’s 3 columns, responsive design, also with some of features: Widgets post Content included , News Ticker, Owl Carousel, Live Tiles Metro and more.




Share News blogger template: Aeromeo blogger templates free

Chủ Nhật, 12 tháng 4, 2015

Code quảng cáo góc phải góc trái màn hình bật tắt được

Code quảng cáo góc phải góc trái màn hình bật tắt được
Code quảng cáo góc phải góc trái màn hình bật tắt được. Code quảng cáo góc dưới màn hình web có thể bật tắt được,cách chèn khung quảng cáo góc trái, góc phải cho website,Code chèn popup quảng cáo ở góc phải - góc trái web blogspot.Cách chèn khung quảng cáo ở góc phải màn hình cho website - Blogspot có thể tắt mở quảng cáo

Sau đây Bít Tuốt Blog xin chia sẻ với các bạn : Code quảng cáo góc phải góc trái màn hình bật tắt được. Các bạn có thể sử dụng để đặt quảng cáo tùy thích. Nhưng đặt code adsense thì cẩn thận nhé vì đặt lâu và web bạn hiển thị trên di động tốt rất dễ dính cảnh báo nhé

Code quảng cáo góc phải màn hình bật tắt được

1. Cách chỉnh sửa code

  • http://bittuotblog.blogspot.com/ :  Link fanpage của bạn
  • width=250 : Chiều rộng khung
  • height=200: Chiều cao khung
  • Phần link ảnh tronng phần <img src="...." /> các bạn thay bằng link ảnh của các bạn nhé

2. Cách chèn code

- Các bạn vào code thêm đoạn code sau lên trên thẻ đóng </body> .
-  Nếu ở blogspot thì các bạn vào Bố Cục thêm 1 cái widget HTML/Javascipt rồi copy đoạn code đó nhấn lưu là được. Đối với wordpress các bạn cũng là tương tự vào phần giao diện => Widget ==> Thêm phần Văn bản rồi copy code vao thôi, nếu ko biết làm thì Các bạn vào code thêm đoạn code sau lên trên thẻ đóng </body> .

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <a href="http://bittuotblog.blogspot.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4cfHQilLmbJB4Z1BB62CaFpXeymegPsW3chZTbUcKcGYjnph74d9gDMafT_ZF3S3U-tFci4ADysUI26ovjhIdaz2lvWQTG8nWIdTtdSQ1kcWhxm3-e3Flsp-fZkBL_u3hDo5T-Kitjc/s1600/idc.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>


Code quảng cáo góc trái màn hình bật tắt được

1. Cách chỉnh sửa code

  • http://bittuotblog.blogspot.com/ :  Link fanpage của bạn
  • width=250 : Chiều rộng khung
  • height=200: Chiều cao khung
  • Phần link ảnh tronng phần <img src="...." /> các bạn thay bằng link ảnh của các bạn nhé
2. Cách chèn code

- Các bạn vào code thêm đoạn code sau lên trên thẻ đóng </body> .
-  Nếu ở blogspot thì các bạn vào Bố Cục thêm 1 cái widget HTML/Javascipt rồi copy đoạn code đó nhấn lưu là được. Đối với wordpress các bạn cũng là tương tự vào phần giao diện => Widget ==> Thêm phần Văn bản rồi copy code vao thôi, nếu ko biết làm thì Các bạn vào code thêm đoạn code sau lên trên thẻ đóng </body> .

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
     <a href="http://bittuot.blogspot.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4cfHQilLmbJB4Z1BB62CaFpXeymegPsW3chZTbUcKcGYjnph74d9gDMafT_ZF3S3U-tFci4ADysUI26ovjhIdaz2lvWQTG8nWIdTtdSQ1kcWhxm3-e3Flsp-fZkBL_u3hDo5T-Kitjc/s1600/idc.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Thứ Ba, 9 tháng 12, 2014

Cách khắc phục lỗi menu web lỗi css trên Chrome

Cách khắc phục lỗi menu web lỗi css trên Chrome. Khắc phục lỗi menu web bỗng nhiên lỗi hiển thị trên Chrome . Khắc phục lỗi css làm menu web hiển thị lệch lỗi trên Chrome

Vừa qua trình duyệt nổi tiếng Chrome của Google được cho là dính phải một số lỗi hiển thị css khiến cho phần lớn các menu hiển thị bị lỗi 1 là bị mất chữ hai là không hiển thị cùng 1 dòng thẳng.Sau khi tìm hiểu, thì lỗi này chỉ xuất hiện trên bản cập nhật số 39, cụ thể là bản 39.0.2171.65 không rõ là do đâu nữa. Sau đâu mình xin giúp các bạn khắc phục một cách đơn giản nhất dưới đây


Cách khắc phục lỗi menu web lỗi css trên Chrome

Lỗi hiển thị menu thông thường các bạn có thể xem chi tiết ở phía dưới. Thông thường chữ sẽ bị nhảy thành 2 dòng đôi khi bị mất chữ

Cách khắc phục lỗi menu web lỗi css trên Chrome

Cách khắc phục khá đơn giản bạn chỉ cần tìm đến các class/id css bị lỗi hiển thị trong file css. Thông thường sẽ là class/id của menu

- Để khắc phục bạn chỉ cần Thêm đoạn thuộc tính css sau vào class/id đang bị lỗi:

white-space: nowrap;

-  Save css lại.

Đơn giản như vậy người dùng của bạn sẽ chẳng phải khó chịu khi vào một trang web toàn lỗi css nhìn không bắt mắt nữa.

Thứ Hai, 17 tháng 3, 2014

Code khung quảng cáo góc phải góc trái màn hình blogspot web


Code khung quảng cáo góc phải góc trái màn hình blogspot web. Sau đây Bít Tuốt xin hướng dẫn các bạn cách chèn khung quảng cáo góc phải góc trái màn hình blogspot web blogspot có thể tắt mở được

Code chèn khung quảng cáo góc phải màn hình

Chú ý các bạn thay các mục sau cho hợp lý
http://bittuot.blogspot.com/ :  Link fanpage của bạn
width=250 : Chiều rộng khung
height=200: Chiều cao khung
- Phần link ảnh tronng phần <img src="...." /> các bạn thay bằng link ảnh của các bạn nhé

1. Chèn trên blogspot

Bước 1: Đăng nhập blogspot ==> Bố Cục ==> Thêm tiện ích ==>  HTML/Javascript rồi copy đoạn code dưới đây vào

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <a href="http://bittuot.blogspot.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4cfHQilLmbJB4Z1BB62CaFpXeymegPsW3chZTbUcKcGYjnph74d9gDMafT_ZF3S3U-tFci4ADysUI26ovjhIdaz2lvWQTG8nWIdTtdSQ1kcWhxm3-e3Flsp-fZkBL_u3hDo5T-Kitjc/s1600/idc.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

2. Đối với website 

Bạn thêm đoạn code sau lên trên thẻ đóng </body>

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
 <a href="http://bittuot.blogspot.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4cfHQilLmbJB4Z1BB62CaFpXeymegPsW3chZTbUcKcGYjnph74d9gDMafT_ZF3S3U-tFci4ADysUI26ovjhIdaz2lvWQTG8nWIdTtdSQ1kcWhxm3-e3Flsp-fZkBL_u3hDo5T-Kitjc/s1600/idc.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Code chèn khung quảng cáo ở góc trái màn hình

Chú ý các bạn thay các mục sau cho hợp lý
http://bittuot.blogspot.com/ :  Link fanpage của bạn
width=250 : Chiều rộng khung
height=200: Chiều cao khung
- Phần link ảnh tronng phần <img src="...." /> các bạn thay bằng link ảnh của các bạn nhé

1. Đối với Blogspot:

Bước 1: Đăng nhập blogspot ==> Bố Cục ==> Thêm tiện ích ==>  HTML/Javascript rồi copy đoạn code dưới đây vào

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
     <a href="http://bittuot.blogspot.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4cfHQilLmbJB4Z1BB62CaFpXeymegPsW3chZTbUcKcGYjnph74d9gDMafT_ZF3S3U-tFci4ADysUI26ovjhIdaz2lvWQTG8nWIdTtdSQ1kcWhxm3-e3Flsp-fZkBL_u3hDo5T-Kitjc/s1600/idc.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>


2. Đối với website

Bạn thêm đoạn code sau lên trên thẻ đóng </body>

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
   <a href="http://bittuot.blogspot.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4cfHQilLmbJB4Z1BB62CaFpXeymegPsW3chZTbUcKcGYjnph74d9gDMafT_ZF3S3U-tFci4ADysUI26ovjhIdaz2lvWQTG8nWIdTtdSQ1kcWhxm3-e3Flsp-fZkBL_u3hDo5T-Kitjc/s1600/idc.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Chúc các bạn thành công !


Chủ Nhật, 16 tháng 3, 2014

Cách tối ưu thẻ H1 cho tiêu đề bài viết blogspot

Cách tối ưu thẻ H1 cho tiêu đề bài viết blogspot
Cách tối ưu thẻ H1 cho tiêu đề bài viết blogspot. Cách cho tiêu đề bài viết vào thẻ H1 làm sao cho tiêu đề bài viết vào thẻ H1 để tối ưu cho seo

Sau đây Bít Tuốt xin hướng dẫn các bạn Cách tối ưu thẻ H1 cho tiêu đề bài viết blogspot để blog bạn có thể Onpage chuẩn SEO hơn

Cách tối ưu thẻ H1 cho tiêu đề bài viết blogspot

- Thường để tối ưu seo cho 1 bài viết thì tiêu đề bài viết mọi người thường để trong thẻ h1. Có 1 điều bất cập là khi mọi người down template trên mạng về dùng thì thường tiêu đề bài viết thường để trong thẻ h3 vì vậy để chuyển nó về thẻ h1 chúng ta cân làm như sau:

Bước 1: Đăng nhập Blog ==> Chỉnh sửa HTML (Chú ý các bạn nên down code về để tránh trường hợp trong quá trình lỗi code còn có bản gốc. Các bạn có thể down về rồ chỉnh sửa bằng Notepad++ )

Các bạn tìm đoạn code sau :

<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Và sửa nó thành:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

Bước 2: Chỉnh sửa CSS cho thẻ <h1> (bạn có thể thay h3 thành h1 )

Bạn tìm các đoạn này

.post h3 {…}
.post h3 a, .post h3 a:visited {…}
.post h3 a:hover {…}
và sửa thành :

.post h1, .post h3 {…}
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited {…}
.post h1 a:hover, .post h3 a:hover {…}

Chúc các bạn thành công ! Mọi thắc mắc vui lòng comment phía dưới để được giúp đỡ

Bài viết đưuọc viết bởi bittuotblog.blogspot.com/ bittuotblog.blogspot.com/2014/03/toi-uu-h1-cho-tieu-de-bai-viet-blogspot.html

Thứ Bảy, 15 tháng 3, 2014

Cách tạo thêm các loại Bài Viết Liên Quan cho blogspot

Cách tạo thêm các loại Bài Viết Liên Quan cho blogspot

Cách tạo thêm các loại Bài Viết Liên Quan cho blogspot. Cách thêm bài viết liên quan có ảnh cho blogsspot. Cách thêm bài viết liên quan theo nhiều nhãn cho blogspot.Related Post Blogspot

Chào các bạn hiện nay blog cũ của mình hiện vẫn đang bị google bắt giữ có lẽ google nó không còn yêu mình nữa do blog có chứa nội dung mà nó cho là nhạy cảm nên các kết quả tìm kiếm trên google từ blog bittuot.blpogspot.com đó hiện tìm khá khó vì vậy bây giờ mình chuyển qua đây để viết ,chia sẻ những thứ hay ho mà mình biết được cho những ai cần.

Thôi không nói nhiều chúng ta đi vào vấn đề ngay nhé. Mình xin chia sẻ với các bạn một số loại Bài Viết Liên Quan cho blogspot mà mình biết được. Đọc thấy hữu ích đừng quên nhấn LIKE nhé. Ai copy bài xin ghi nguồn giúp . Xin cảm ơn !

Bài viết liên quan hiện bài mới nhất dạng đơn giản nhất

Cách thực hiện

Bước 1- Đăng nhập vào Blog ==> Vào Mẫu ==> Chọn Chỉnh sử HTML (Edit HTML)

Khuyên các bạn nên down trực tiếp tất cả code blogspot về rồi chỉnh sửa bằng notepad ++ cho dễ nhé (chú ý sao lưu giữ lấy 1 bản để làm bản gốc để tránh trường hợp bị sai code ko phôi phục lại dc)

Rồi dán đoạn code bên dưới vào trước(trên) thẻ </head>
(Các bạn có thể down toàn bộ code về rồi dùng Notepad ++ để chỉnh sửa cho dễ nhớ sao lưu 1 bản để phòng bị lỗi code)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=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(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=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]=time[a]}}titles=c;urls=b;time=e}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);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>

Bước 2 - Tìm một trong 4 đoạn code như bên dưới:

Đoạn 1: <div class='post-footer'> thường là chèn vào đoạn này nếu ko được các bạn thử chèn thử lần lượt vào các đoạn dưới xem sao
Đoạn 2: <div class='post-footer-line post-footer-line-1'>
Đoạn 3: <div class='post-footer-line post-footer-line-2'>
Đoạn 4: <div class='post-footer-line post-footer-line-3'>

- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha). Vì vậy bạn cứ thêm lần lượt vào từng đoạn rồi up lên thử xem có hiển thị được không,nếu ko dc thì xóa đi rồi thêm vào đoạn code tiếp theo đên khi nào thấy hiển thi thì dừng

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b>Bài viết liên quan:</b>
        <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=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
    </div>
</b:if>

Chú ý:
  • var max_post = 5; Số bài viết hiển thị của tiện ích

Cách tạo : Bài viết liên quan theo nhiều nhãn blogspot

Bài viết liên quan theo nhiều nhãn blogspot
Ảnh Demo

Cách thực hiện

Bước 1- Đăng nhập vào Blog ==> Vào Mẫu ==> Chọn Chỉnh sử HTML (Edit HTML)

Khuyên các bạn nên down trực tiếp tất cả code blogspot về rồi chỉnh sửa bằng notepad ++ cho dễ nhé (chú ý sao lưu giữ lấy 1 bản để làm bản gốc để tránh trường hợp bị sai code ko phôi phục lại dc)

Bước 2 - Tìm một trong 4 đoạn code như bên dưới:

Đoạn 1: <div class='post-footer'>
Đoạn 2: <div class='post-footer-line post-footer-line-1'>
Đoạn 3: <div class='post-footer-line post-footer-line-2'>
Đoạn 4: <div class='post-footer-line post-footer-line-3'>


- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha). Vì vậy bạn cứ thêm lần lượt vào từng đoạn rồi up lên thử xem có hiển thị được không,nếu ko dc thì xóa đi rồi thêm vào đoạn code tiếp theo đên khi nào thấy hiển thi thì dừng

<!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;bittuot.blogspot.com&quot;;maxNumberOfPostsPerLabel = 6;maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</div>
</b:if><br/><!-- /related post -->

Chú ý:
  • Bạn sẽ phải thay đổi cho phù hợp với cách sắp xếp hiển thị bài viết liên quan theo nhãn phù hợp
  • Thay bittuot.blogspot.com bằng địa chỉ blog của bạn, lưu ý không có "/"  ở cuối và http://ở đầu. (ví dụ link blog bạn là http://bittuot.blogspot.com/   thì bạn chỉ lấy bittuot.blogspot.com và thay vào đó thôi )
  • maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label). Ở code trên là mình để là 6
  • maxNumberOfLabels là số nhãn (label) sẽ được hiển thị. Ở code trên là mình để là 3

Cách tạo : Bài viết liên quan cũ và mới cho blogspot


Bài viết liên quan cũ và mới cho blogspot

Cách thực hiện

Bước 1- Đăng nhập vào Blog ==> Vào Mẫu ==> Chọn Chỉnh sử HTML (Edit HTML)

Khuyên các bạn nên down trực tiếp tất cả code blogspot về rồi chỉnh sửa bằng notepad ++ cho dễ nhé (chú ý sao lưu giữ lấy 1 bản để làm bản gốc để tránh trường hợp bị sai code ko phôi phục lại dc)

Rồi dán đoạn code bên dưới vào trước thẻ ]]></b:skin>:
(Các bạn có thể down toàn bộ code về rồi dùng Notepad ++ để chỉnh sửa cho dễ nhớ sao lưu 1 bản để phòng bị lỗi code)

#related-posts-block ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbS4ychVKxkDPyHdunXNsQB9mPHeMoAM8xe1NDLCpfm1y4seaGyWbkGrY9CgIAaOrGykqMWC4yUlMBEDRiFYsbfX2dvuK-UA4cvbdTRLUIHGydAFvoXQJOEccW_oywGeMnV_DMP098gU/s1600/bg_other_bittuot-blogpot.jpg) repeat-x;margin:0px 0 0 0;padding:6px 0 0 0;list-style:none}
#related-posts-block li{margin:0 0 0 8px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSN5Xp0j60ctzTc2YzFG4ha6Bovd93RxgWtMSGNOK7GaOkdOpn4TjExG4t9R-yaJ1-6T3J2FdsszhMIktYnYUnRTsxPbhFHR6TaWGYwTKpIvJ1Rnl8ns09svukXsJ_27dGbXPNavb90-Y/s1600/li_bittuotblog-blogspot-com.png) 0 5px no-repeat;padding-left:15px}
#related-posts-block{line-height:1.5;margin:0 0;font-size:11px;color:#7c7b7b}
#related-posts-loading-text{font-size:12px;text-align:center;color:#002c28}
#related-newest-href{margin:10px 0 2px}#related-newest-title{font-size:12px;margin:5px 0 0 0;color:#033947}
#related-posts-block #related-newest-href a{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#002c28}
#related-posts-block #related-newest-href a:hover{color:#00f}#related-older-href{margin:10px 0 2px}
#related-older-title{font-size:12px;margin:5px 0 0 0;color:#033947}
#related-posts-block #related-older-href a{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#002c28}
#related-posts-block #related-older-href a:hover{color:#00f}
#related-posts-block > div {float: left;width: 48%;}




Bước 2 - Tìm một trong 4 đoạn code như bên dưới:

Đoạn 1: <div class='post-footer'>
Đoạn 2: <div class='post-footer-line post-footer-line-1'>
Đoạn 3: <div class='post-footer-line post-footer-line-2'>
Đoạn 4: <div class='post-footer-line post-footer-line-3'>


- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha). Vì vậy bạn cứ thêm lần lượt vào từng đoạn rồi up lên thử xem có hiển thị được không,nếu ko dc thì xóa đi rồi thêm vào đoạn code tiếp theo đên khi nào thấy hiển thi thì dừng

<script type='text/javascript'>
//<![CDATA[
var showdate = true;
var max_post = 8;
//]]>
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>

<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'><div id='related-posts-loading-text'>Loading...<br/><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigb5ctOuXRuKcyCb6iDUBHA5vqLVcPqOu1H1vsaWyjvpuLycIeiJjfHGgDZdQhN5-mKR-uAdA6bKWa0llb6YY6YPhsehcrIc8iZMopiDMMH1GF31c2y1Pd0l4O0WtVyqx56L0PaljmhRSM/'/></div><div id='related-newest-href'><div id='related-newest-title'/></div><div id='related-older-href'><div id='related-older-title'/></div></div></b:if>

<script type="text/javascript">
    //<![CDATA[
function format(ptime){ 
 return ptime.substr(0,19);
}

function formatdate(d){
 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 var m = parseInt(d.substring(5,7),10);
 for(var j=0; j<month.length;j++){
  if(m==month[j]){
   m = month2[j]; break;
  }
 }
 return d.substring(8,10) + "-" + m + "-" + d.substring(0,4);
}

function getRelatedNewestLinks(json){
 var entry = json.feed.entry;
 if(entry){
  for(var k=0;k<entry.length;k++){
   var li = document.createElement("li");
   if(showdate){
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) +'</i>';
   }
   else {
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
   }
   if(!checkRelaxLinks("related-newest-href",entry[k].link[4].href)){
    document.getElementById("related-newest-href-ul1").appendChild(li);
    document.getElementById("related-newest-title").innerHTML = "<b>Các bài viết mới cùng chủ đề</b> ";
                                
   }
  }
 } else {
  document.getElementById("related-older-title").innerHTML = "<b>Không có bài viết mới nào cùng chủ đề</b>";
 }
}

function getRelatedOlderLinks(json){
 var entry = json.feed.entry;
 if(entry){
  for(var k=0;k<entry.length;k++){
   var li = document.createElement("li");
   if(showdate){
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) + '</i>';
   }
   else {
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
   }
   if(!checkRelaxLinks("related-older-href",entry[k].link[4].href)){
    document.getElementById("related-older-href-ul2").appendChild(li);
    document.getElementById("related-older-title").innerHTML = "<b>Các bài viết cũ cùng chủ đề </b>";
   }
  }
 } else {
  document.getElementById("related-older-title").innerHTML = "<b>Không có bài viết cũ nào cùng chủ đề</b>";
 }
        document.getElementById("related-posts-loading-text").style.display = "none";
}

function createRelatedJson(min_or_max,cRJ_label,fcn_callback,cRJ_max){
 var script = document.createElement("script");
 script.src = "/feeds/posts/summary/-/"+escape(cRJ_label)+"?orderby=published&max-results="+cRJ_max+"&published-"+min_or_max+"="+escape(format(document.getElementById("post-timestamp-for-related").innerHTML))+"&alt=json-in-script&callback="+fcn_callback;
 script.type = "text/javascript";
 document.getElementsByTagName("head")[0].appendChild(script);

}

function checkRelaxLinks(cid,clink){
 var check = false;
 var u = document.getElementById(cid);
 var a = u.getElementsByTagName("a");
 for(var i=0;i<a.length;i++){
  if(a[i].href==clink){
   check = true;
   break;
  }
 }
 var url = location.href.split(".html")[0]+".html";
 if(clink==url) check = true;
 return check;


function createRP(){
 var postLabel = document.getElementById("post-labels-for-related").innerHTML.split(',');
 var max_ = Math.round(max_post/postLabel.length);
 var ul1 = document.createElement('ul');
 ul1.id = 'related-newest-href-ul1';
 document.getElementById('related-newest-href').appendChild(ul1);
 for(var i=0; i<postLabel.length;i++){
   createRelatedJson("min",postLabel[i],"getRelatedNewestLinks",max_);
 }
 var ul2 = document.createElement('ul');
 ul2.id = 'related-older-href-ul2';
 document.getElementById('related-older-href').appendChild(ul2);
 for(var j=0; j<postLabel.length;j++){
   createRelatedJson("max",postLabel[j],"getRelatedOlderLinks",max_);
 }
        
}
createRP();
    //]]>
</script>

Chú ý:
  • var showdate = true; Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False
  • var max_post = 8; Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích
Cách tạo: Bài viết liên quan có ảnh hiển thị hàng dọc blogspot


Bài viết liên quan có ảnh hiển thị hàng dọc blogspot

Cách thực hiện

Bước 1- Đăng nhập vào Blog ==> Vào Mẫu ==> Chọn Chỉnh sử HTML (Edit HTML)

Khuyên các bạn nên down trực tiếp tất cả code blogspot về rồi chỉnh sửa bằng notepad ++ cho dễ nhé (chú ý sao lưu giữ lấy 1 bản để làm bản gốc để tránh trường hợp bị sai code ko phôi phục lại dc)

Rồi dán đoạn code bên dưới vào trước thẻ ]]></b:skin>:
(Các bạn có thể down toàn bộ code về rồi dùng Notepad ++ để chỉnh sửa cho dễ nhớ sao lưu 1 bản để phòng bị lỗi code)
#related-posts{float:left}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts ul li:hover img{width:42px;height:42px;padding:0}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{margin:0;font-size:16px}

Bước 2 - Tìm một trong 4 đoạn code như bên dưới:

Đoạn 1: <div class='post-footer'> thường là chèn vào đoạn này nếu ko được các bạn thử chèn thử lần lượt vào các đoạn dưới xem sao
Đoạn 2: <div class='post-footer-line post-footer-line-1'>
Đoạn 3: <div class='post-footer-line post-footer-line-2'>
Đoạn 4: <div class='post-footer-line post-footer-line-3'>

- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha). Vì vậy bạn cứ thêm lần lượt vào từng đoạn rồi up lên thử xem có hiển thị được không,nếu ko dc thì xóa đi rồi thêm vào đoạn code tiếp theo đên khi nào thấy hiển thi thì dừng

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có Bài viết liên quan</h2>';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/AVvXsEjd2Gj9V2Ehw85VPYVQtiNzmC5ac80xBflheEVs1hX6VL7HF3NB25XmJlNDvM630Hyis4prn9mXqz8QetHkWsk9I5Q4yJTQTZO0PqJvZEEB06eMj39uExtb0LAvXhWs_KuBWMLM2EB1qNsS/'};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="nofollow">'+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=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>

Chú ý:
  • var max_post = 6; Số bài viết hiển thị của tiện ích
Còn nhiều nữa mình sẽ cập nhật dần dần

Chúc các bạn thành công !

Ai có gì thắc mắc xin coment phí dưới nhé !