Wednesday, July 22, 2015

 Hiển thị bài viết gần đây kèm theo hình ảnh cho bài viết theo nhãn đang được các bạn quan tâm để trang chí cho blog của mình thêm chuyên nghiệp. Bài viết này minh văn sẽ hướng dẫn cho các bạn làm thế nào để hiển thị bài viết gần đây theo nhãn với hình ảnh thu nhỏ.

Để thêm bài viêt gần đây theo nhãn các bạn làm như sau.


Thêm bài viết gần đây theo nhãn có hình ảnh thu nhỏ.

 Bước 1: từ Blogger Dashboard vào Template chọn Edit HTML


Bước 2. Tìm đoạn mã  ]]> </ B: skin> bằng cách nhấn ctrl +F 

Sau đó dán đoạn mã phía dưới lên trước thẻ ]]> </ b: skin> :

* Hiển thị bài viết liên quan theo nhãn có hình ảnh thu nhỏ--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {

float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{

list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}

#label_with_thumbs strong {padding-left:0px; }
Step 3. Bạn tìm thẻ : </head> và thêm lên trên thẻ </head>  đoạn script bên dưới:
 <script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_rlq43vTmFlXHiVBFzcecqXQFHWxuPOaYlco_xvgYhEXO5iy4oKYEzL7zV2xd0Aytb0iLEqwHQt7j4LCiaT1Q_TPQRl6rQAeF4xl9Dt1gIBLM4DkmFJxGhblhVdetP3plqCa4Nx59p4/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
Thêm đoạn script dưới vào trước thẻ </body>  để tương thích với mọi độ phân giải:
 <script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);             
</script>
Xong rồi chúng ta lưu lại

Step 4. Tới Layout - click thêm Add a Gadget



blogger layout, add a gadget

Step 5. Chọn đoạn HTML/Javascript widget và dán đoạn mã phía dưới vào:

 <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>


 var numposts ← Số bài viết muốn hiển thị 
var showpostthumbnails ← Show/hide ảnh thu nhỏ 
var displaymore ← Show or hide link đọc tiếp
var displayseparator ← Show/hide separator 
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates 
var showpostsummary ← Show or not the posts summaries 
var numchars ← Number of posts characters (here you have to change the 100 value)

Bài viết liên quan:

  • Tích hợp All in One SEO Pack vào Blog Như bạn biết rằng All in One SEO Pack là một Plugin tốt nhất cho WordPress, nhưng bạn đã nghe về All in One SEO Pack cho Blogger  năm 2015.  Hôm nay tôi hướng dẫn các bạn thêm plugin này vào … Read More
  • 9 tag blockquote đẹp dùng trong Blogspot Bạn đã biết tác dụng của tag blockquote trong html chưa? Đây là một trong những tag html quan trọng giúp bạn định dạng văn bản chuyên nghiệp hơn trong hệ thống blog của mình và đặc biệt giúp blog của bạn thể hiện rõ những … Read More
  • Hướng dẫn cài đặt gắn tên miền vào cho blogspot Bài viết hướng dẫn gắn tên miền vào cho blogspot, cài đặt tên miền riêng vào cho blogspot giúp cho trang blogspot uy tín hơn, chuyên nghiệp hơn và có được một thương hiệu riêng cho mình Đây là bài viết&n… Read More
  • Hiện thị đúng hình ảnh Blog trên facebook Hiện thị đúng hình ảnh Blog của bạn trên facebook. Có bao giờ bạn thử share bài viết từ Blog của mình lên mạng nhưng hình ảnh kèm theo không như mong muốn hoặc không có không? Vấn đề luôn luôn tìm thấy với chia sẻ URL … Read More
  • Các thẻ điều kiện if else trong blogspot Thẻ điều kiện trong blogspot là thành phần giúp bạn có thể tùy chỉnh cho widget hiển thị ở những trang nhất định như trang chủ, trang tĩnh, trang bài viết, trang lưu trữ, trang chứa url bất kỳ...Nếu bạn sử dụng linh hoạ… Read More

Văn Phòng

Nơi chia sẻ cho bạn kiến thức về lĩnh vực Văn Phòng cơ bản nhất bao gồm Word, Excel, PowerPoint...

Mã Nguồn Website

Nơi chia sẻ cho bạn kiến thức về lĩnh vực Mã Nguồn Mở Website thông dụng nhất bao gồm Blog, Wordpress,Joomla,OSClass, NukeViệt...

Thủ Thuật SEO

Nơi chia sẻ cho bạn kiến thức về lĩnh vực SEO cơ bản nhất bao gồm Mạng xã hội, Blog, Website, Google...

Kiếm Tiền Online

Nơi chia sẻ cho bạn kiến thức về lĩnh vực Kiếm Tiền Online cơ bản nhất bao gồm Tiếp thị liên kết, đặt quảng cáo, viết blog, website...

Bài mới

Internet

Nơi chia sẻ cho bạn kiến thức cơ bản về lĩnh vực Internet như; Mạng xã hội, Blog, Website...

Tin Công Nghệ

Cập nhập tin tức mới nhất về lĩnh vực công nghệ như; Điện thoại, Máy tính...
  • Dế Lumia 2016 sẽ dùng Snapdragon 820?
    Theo những nguồn tin mới nhất thì Microsoft đang tích cực thử nghiệm chip Snapdragon 820 cho các thiết bị di động ra mắt vào năm 2016. Sau khi trình làng Lumia 950 và 950 XL, Microsoft...
  • Cấu hình desktop cho người dùng gia đình
    Mặc dù hiện nay laptop rất phổ biến, nhưng nếu bạn muốn cấu hình máy tốt hơn, mạnh mẽ hơn, dễ dàng nâng cấp và dễ kiểm soát con cái khi chúng sử dụng máy tính cho việc học tập, vui chơi giải trí...
  • Sony chuẩn bị ra mắt máy ảnh cảm biến 50 megapixel
    Theo thông tin được đăng tải từ SonyAlphaRumors, Sony hiện tại đang bí mật phát triển máy ảnh mới với công nghệ cảm biến hình ảnh có độ phân giải lên đến 50 megapixel. Bên cạnh đó, thế...