Blog Vn Chia sẻ: Viết Blog
Showing posts with label Viết Blog. Show all posts
Showing posts with label Viết Blog. Show all posts

CÁCH TẠO NHÃN BÀI ĐĂNG GẦN ĐÂY HAY BÀI ĐĂNG MỚI NHẤT (LABEL)

 

TẠO NHÃN (LABEL) BÀI ĐĂNG GẦN ĐÂY

HAY BÀI ĐĂNG MỚI NHẤT


Bài viết trước mình vừa giới thiệu: Hiển thị bài đăng theo Nhãn hay label, khi thực hiện theo hướng dẫn tạo tiện ích bài đăng gần nhất bạn phải đọc và thực hiện theo bài trước. 

Tạo Nhãn (Label) Bài đăng gần đây hay Bài đăng mới nhất thật sự rất khó đối vớ Blogger do mẫu của Bloger không có. Nhưng với bài viết mà Blog Vn Chia sẻ thực hiện sẽ giúp cho thiết kế bài đăng gần đây thật dể.

Sau khi thực hiện các bước trên như bài viết trước: HIỂN THỊ BÀI VIẾT THEO LABEL TRONG BLOGSPOT – CODE. Tại bước 3, chỉ cần thêm code vào HTML / Javascript past đoạn code bên dưới vào và lưu lại như tạo các nhãn khác

 

<! -- Bài đăng theo nhãn -->

<script type='text/javascript'>var numposts = 20;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>

<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

=> Ở đây có chút thay đổi ở đoạn Cript cần xóa: /-/LABEL

Và sẽ có dạng như bên dưới:

 

<! -- Bài đăng gần đây -->

<script type='text/javascript'>var numposts = 20;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

 


Ảnh sau khi thêm tiện ích bài đăng gần nhất hay mới nhất


Tạm kết: với bài viết mà Blog chia sẽ, hy vọng sẽ giúp Blogger thực hiện thiết kế blog theo mình thật ưng ý.

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


 * Đọc thêm:


Hiển thị bài đăng theo Nhãn hay label.

- Điều dưỡng nội tập 1

Điều dưỡng nội tập 2.

- Phác đồ điều trị bệnh tim mạch năm 2018

Share:

CÁCH HIỂN THỊ BÀI VIẾT THEO LABEL - CODE - SCRIPT TRONG BLOGSPOT

 

HIỂN THỊ BÀI VIẾT THEO LABEL TRONG BLOGSPOT 

(CODE  - SCRIPT)

 

Để thực hiện thành công Blog hiển thị bài viết theo nhãn hay Label. Blog Vn Chia sẻ phải tìm rất nhiều bài viết, đọc bài viết, thực hành, xem lại trang Blog theo yêu cầu chưa. Đúng là rất khó khăn cho người viết blog mà tự thiết kế Blog cho bản thân mình. Rất may là sau khi thử rất nhiều bài viết hướng dẫn trên các trang, mình tìm được bài hướng dẫn khá đơn giản và thành công. Chúng ta bắt đầu thực hiện theo mình chắc chắn sẽ thành công. 

Khi bắt đầu viết Blog thì chắc hẳn bạn đã từng tìm hiểu về code trên blog bài này mình sẽ không giới thiệu chi tiết. Mục tiêu là xoáy sâu vào tạo nhãn bài viết.

 

Hướng dẫn tạo các Nhãn bài viết (Widget) hiển thị bài viết mới Nhãn (Label).

 

- Đăng nhập Blogger -> vào Mẫu -> Chỉnh sửa HTML

- Sao lưu lại code trước khi thực hiện.

 

Bước 1: chèn Code trước thẻ ]]></b:skin>

Thực hiện: Nhấn Ctrl + F: Tìm->]]></b:skin> chèn Code trước thẻ này (]]></b:skin>). 

 

<!-- Star Bài viết theo Label - Code 1 -->

img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}


<!-- End Bài viết theo Label - Code 1 -->

 

 

Bước 2:  chèn code trước </head>

Thực hiện: NhấCtrl + FTìm </head> chèn Code trước thẻ này (</head>)

 


<!-- Star Bài viết theo Label - Code 2 -->

 

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="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/AVvXsEgZUiqRRBm0CxD0QPgdhw26GaapM1TGqEEioZawmkbRxwAkk1vwxitktG6bPCjhptLSlrVAY3q9xAw6wzNfrEkPxP71HSfXUL1mSX37habpss3OG3QlJlgRs90KtFHvXafwlHl8wkLBEvVN/';}
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]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";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> 


<! -- End Bài viết theo Label - Code 1 -->

 

Bước 3: thêm code vào HTML / Javascript

Thực hiện: vào Bloger - > Bố cục -> Đặt tên hiển thị-> chép code bên dưới vào chổ nội dung -> lưu lại.


<! -- Star Bài viết theo Label - Code 3 -->

<script type='text/javascript'>var numposts = 20;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>

<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

<! -- End Bài viết theo Label - Code 3 -->




Lưu ý: Với Bloger thể tùy biến hiển thị bằng cách thay đổi giá trị cụ thể như bên dưới:

- Đặt tên theo nhãn muốn hiển thị

- numposts = 20: Số lượng bài viết sẽ hiển thị

- numchars = 150Số kí tự của mỗi bài viết được hiển thị.

- LABEL: Tên các bài viết sẽ được hiển thị theo nhãn bạn cần hiện.

 

Có thể thực hiện thay đổi đổi giá trị để đạt mẫu ưng ý nhất nhé!

 


Ảnh hoàn thành sau khi thêm tiện ích


 

Tạm kết: với bài viết mà Blog chia sẽ, hy vọng sẽ giúp Blogger thực hiện thiết kế blog theo mình thật ưng ý.

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

 

 * Đọc thêm:


Tạo Nhãn (Label) Bài đăng gần đây hay Bài đăng mới.

- Điều dưỡng nội tập 1

Điều dưỡng nội tập 2.

- Phác đồ điều trị bệnh tim mạch năm 2018

Share:

Cách tạo nút Lên đầu trang (Back to top) cho Blogspot

 

Tạo nút Lên đầu trang (Back to top) cho Blogspot

 

Với Blogpost là nền tảng được miễn phí của Google, bạn có thể tạo blog theo tùy thích. Khi đã có Blog để viết bài đăng trên đó, bạn thấy Blog mình vẫn còn thiếu “Nút quay lên đầu trang” khi đọc đến giữa hay cuối bài viết. Việc tạo nút khá dể dàng, với mình vẫn chưa biết thực hiện. Sau khi tra trên Google và đã thực hiện được, minh xin chia sẻ để các bạn thực hiện cho Blogpost của mình.

 Nút lên đầu trang hay nút Button "Back to Top" rất hữu ích với blogpost. Người đọc không cần phải rê chuột có thể lên đầu trang nhanh chóng. Hãy cùng Blog cách tạo button "Back to Top" cho Blogspot.




Hướng dẫn tạo nút Lên đầu trang (Back to top) cho Blogspot

 

Bước 1:

- Đăng nhập vào trang quản lý Blogger.com -> Chủ đề -> Chỉnh sửa HTML -> Copy toàn bộ code của HTML chép vào Word của bạn để lưu. Khi cần Backup lại trang blog trước khi thực hiện nếu bị lỗi.

- Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head>. Để tìm thẻ này bạn nhấn Ctrl + F rồi nhập vào -> Enter


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


Bước 2: Bạn Copy code bên dưới thêm vào trước thẻ </body> (ở gần cuối trang code). Tìm thẻ </body> tương tự như trên.  


<style type='text/css'>
/* Sonar Effect */
@-webkit-keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
@keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
/* To top */
.vikkatotop{visibility:hidden;z-index:2;background:rgba(52, 152, 219, 0.75);color:#fff;font-size:1.6rem;width:55px;height:55px;line-height:52px;text-align:center;position:fixed;bottom:40px;right:40px;cursor:pointer;-webkit-transform:translateZ(0) scale(0.0) rotate(360deg);transform:translateZ(0) scale(0.0) rotate(360deg);border-radius:100%;opacity:.9;transition:all .4s}
.vikkatotop:hover{background:#3498db;color:#fff;opacity:1}
.vikkatotop.arlniainf{visibility:visible;cursor:pointer;opacity:1;-webkit-transform:translateZ(0) scale(1.0) rotate(0deg);transform:translateZ(0) scale(1.0) rotate(0deg);transition:all .4s;}
.vikkatotop::before{content:'';display:inline-block;position:absolute;width:100%;height:100%;border-radius:100%;top:0;left:0}
.vikkatotop:hover::before{-webkit-animation:sonar-effect 1s ease-in-out .1s infinite;animation:sonar-effect 1s ease-in-out .1s infinite}
.vikkatotop{bottom:20px;right:20px;}
</style>
<div class='vikkatotop hider'>
<i class='fa fa-angle-up'></i>
</div>
<script type='text/javascript'>
//<![CDATA[
// Back to top button
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$(".vikkatotop").addClass('arlniainf'):$(".vikkatotop").removeClass('arlniainf')}),$(".vikkatotop").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});
//]]>
</script>

 

Bước 3: Chọn “Lưu” và xem lại Blog của mình để tận thành quả.





Tóm lại: với 3 bước đơn giản chúng ta đã thực hiện được “Nút lên đầu trang” hay nút Button “Back to Top” một cách dể dàng. Hãy thực hiện bạn sẽ thành công.

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



Share:

Tại sao chọn Blogger? Hãy xuất bản đam mê của bạn!

Bạn thích website, bạn muốn có 1 website miễn phí không phải bỏ tiền mua, ...  nhưng bạn biết lập trình, lại không có điều kiện: không có thời gian, chưa học được, lại không muốn bỏ tiền mua, ... Bạn có thể tạo Blog hoàn toàn miễn phí, tự do code lại theo sở thích, viết bài theo sở thích. Viết theo quy định của nhà nước, không gây tổn hại cho cộng đồng và xã hội, bạn có thể kể chuyện, viết văn viết thơ, ... Tóm lại, bạn viết điều tốt đẹp, viết về công nghệ thông tin, ... Ôi! có muôn ngàn đều để viết, nhưng nếu bạn có năng khiếu viết bài có nhiều người đọc, Blog của bạn sẽ được Google trả tiền đấy “Bạn phải chăm chỉ viết bài nhé”!

Dưới đây là 7 lý do bạn chọn Blogger! Hãy xuất bản đam mê của bạn!

1. Xuất bản đam mê của bạn theo cách của bạn: Tạo blog độc đáo và tuyệt đẹp. Thật dễ dàng và miễn phí.

2. Chọn thiết kế hoàn hảo: Tạo blog tuyệt đẹp phù hợp với phong cách của bạn. Chọn từ một tập hợp lựa chọn gồm các mẫu dễ sử dụng – tất cả đều có bố cục linh hoạt và hàng trăm hình nền - hoặc thiết kế điều gì đó mới lạ.

3. Nhận miền miễn phí: Mang lại cho blog của bạn một ngôi nhà hoàn hảo. Nhận miền blogspot.com miễn phí hoặc mua miền tùy chỉnh chỉ với vài nhấp chuột.

4. Kiếm tiền: Được trả tiền cho công việc chăm chỉ của bạn. Google AdSense có thể tự động hiển thị quảng cáo được nhắm mục tiêu có liên quan trên blog của bạn để bạn có thể kiếm thu nhập bằng cách đăng bài về niềm đam mê của mình.

5. Biết rõ người xem của bạn: Tìm hiểu bài đăng nào là bài đăng hay nhất với tính năng phân tích tích hợp của Blogger. Bạn sẽ biết người xem của mình đến từ đâu cũng như điều họ quan tâm. Bạn thậm chí có thể kết nối trực tiếp với blog của mình với Google Analytics để biết chi tiết hơn.

6. Lưu giữ kỉ niệm của bạn: Lưu các khoảnh khắc quan trọng. Blogger cho phép bạn lưu trữ miễn phí an toàn hàng ngàn bài đăng, ảnh và hơn thế nữa với Google.

7. Tham gia cùng hàng triệu người dùng khác: Dù bạn chia sẻ chuyên môn của mình, tin nóng hoặc mọi ý tưởng trong đầu thì bạn luôn có người đồng hành trên Blogger. Đăng ký để khám phá lý do tại sao hàng triệu người đã xuất bản niềm đam mê của mình ở đây.

Như vậy, với 7 lý do trên bạn hãy tham gia viết Blog cùng tôi nhé. Nếu bạn có bài viết hay mà không muốn tạo Blog nhưng muốn chia sẻ với mọi người hãy gửi mai đến mình. Mình sẽ Post lên Blog chia sẻ với mọi người. 

Hãy cùng chúng tôi xuất bản đam mê của bạn!

Cám ơn bạn đọc bài viết!

Share:

BÀI MỚI

BÀI PHỔ BIẾN

MÁY TÍNH

TÀI LIỆU

GIẢI TRÍ

THÔNG TIN THUỐC

ĐĂNG KÝ EMAIL ĐỌC BÀI MỚI

Name

Email *

Message *

Tất cả bài đăng