Chuẩn hóa giao diện website từ Template mẫu

Hello, anh em! Trong bài viết này Ryan sẽ cùng mọi người hoàn thành nốt công việc kế tiếp sau khi chúng ta đã tải giao diện lên website thành công.

Với những anh em vẫn chưa biết cách làm thế nào để cài một giao diện mới cho Blogger thì anh em nên quay lại bài hướng dẫn Tải và cài đặt template cho Blogspot của mình để xem và thực hành.

Nội dung bài viết

1.Cài đặt Logo cho Blogger
2.Cài đặt Widget cần thiết cho Web
2.1 Search Box (Thanh công cụ tìm kiếm)
2.2 Newsletter form (Hộp đăng ký nhận thông báo)
2.3 Social Media (Icon mạng xã hội)
3.Cài đặt các tính năng khác cho Web
3.1 Thêm khung tác giả ở cuối mỗi bài viết
3.2 Thêm Breadcrumbs chuẩn SEO cho web
3.3 Thêm nút chia sẻ mạng xã hội cho web
3.4 Thay đổi style cho Label Cloud
4.Tổng kết

Còn ở trong khuôn khổ bài viết này, chúng ta sẽ cùng nhau hoàn thiện giao diện website dựa trên template mà chúng ta đã tải về trước đó.

Ok! Không làm mất thời gian của anh em nữa chúng ta bắt tay vào công việc chính luôn nào.

Cài đặt Logo cho Blogger

Đầu tiên, chúng ta sẽ quay trở lại thư mục mà chúng ta giải nén lần trước, tại đây anh em sẽ nhìn thấy 2 File và 1 Folder.

Trong đó, có 1 file là Template có định dạng .xml, 1 file là file ảnh Logo và 1 Folder Document chứa tài nguyên. Tạm thời chúng ta sẽ không cần chú ý đến Folder, mà ta chỉ làm việc với file ảnh.

Anh em ghi nhớ địa chỉ lưu của File ảnh để lát nữa chúng ta tìm cho dễ. Bây giờ chúng ta đăng nhập vào Blogger và ngay tại giao diện quản trị anh em chọn vào tab "Bố cục"

Ở bảng bố cục bên phải anh em tìm đến Box có tên là "blog-title" sau đó nhấp vào "Chỉnh sửa" để bắt đầu thêm Logo vào cho website.

Sau khi nhấp vào "Chỉnh sửa" ngay lập tức một hộp Popup sẽ hiện ra, đây là công cụ để chúng ta có thể tùy chình phần Tiêu đề, mô tả và chèn thêm logo vào cho web.

Tại đây chúng ta sẽ tiếp tục nhấn vào nút "Chọn tệp" để tải ảnh lên "Từ máy tính của bạn", ta tìm đến địa chỉ lưu thư mục giải nén ban nãy mở nó ra và chọn đến file ảnh có sẵn bên trong thư mục để upload lên bằng cách nhấn vào "Open".

Anh em chờ 1 chút cho file được hệ thống load lên hoàn tất thì nhấn vào nút "Lưu" nằm ở phía trái góc dưới cùng.

Như vậy là chúng ta đã upload logo cho website thành công, giờ anh em mình quay trở lại website và xem như thế nào nhé!

Lưu ý: Nếu anh em không thích sử dụng Logo của mình anh em có thể tự chọn cho mình 1 logo khác, điều này là không bắt buộc nên anh em cứ thoải mái mà lựa chọn. Tuy nhiên, anh em chỉ nên chọn ảnh có kích thích bằng hoặc nhỏ hơn kích thước file ảnh Logo đã được gửi sẵn trong thư mục BS3 (chọn ảnh ≤ 344x125)

Cài đặt Widget cần thiết cho Web

Ok! Xong phần Logo rồi. Giờ anh em mình chèn tiếp các widget vào cho web để tăng thêm sự chuyên nghiệp nào ^^.

Thêm các Widget vào web rất đơn giản, công việc của chúng ta chỉ là copy và paste. Làm luôn thôi anh em, let's go!

Search Box (Thanh công cụ tìm kiếm)

Widget đầu tiên Ryan muốn cùng anh em thêm vào đó là Search Box. Để thêm widget này anh em ta lại quay trở về thư mục giải nén và giờ ta mở Folder Document ra.

Sau khi mở Folder ra xong anh em sẽ thấy có rất nhiều file có định dạng là .txt. Anh em đừng hoang mang, cứ làm theo mình là được.

Tại đây anh em di chuyển chuột đến File có tên "Widget search form", mọi người nhấp chuột phải vào File sau đó chọn vào dòng chữ "Open with", chọn tiếp "Notepad" và nhấn "Ok" để mở File .txt.

Tiếp theo anh em nhấn tổ hợp phím Ctrl + A và Ctrl + C để copy toàn bộ những gì có trong File, chút nữa chúng ta sẽ cần dùng tới.

Giờ chúng ta quay trở lại giao diện quản trị của Blogger và vào lại tab "Bố cục" sau đó ở phần bố cục bên phải anh em tìm đến Box có tên "sidebar", chúng ta chọn vào ô "Thêm tiện ích".

Lúc này sẽ có 1 hộp tiện ích Popup hiện ra, mọi người tìm tới mục có tên "HTML/ Java Script" và nhấp vào dấu "+" để thêm tiện ích vào box "sidebar"

Sau khi nhấp vào dấu "+" một hộp tiện ích "HTML/ Java Script" sẽ xuất hiện, lúc này anh em Paste toàn bộ đoạn code mà ta vừa copy ở file .txt vào ô "Nội dung" và nhấn vào "Lưu" để hoàn tất việc thêm Search Box vào thanh Sidebar trên web!

Đơn giản quá đúng không! Giờ anh em mình quay trở lại web để xem thành quả như thế nào nào :))

Demo

Ok! Chúng ta làm tương tự như trên cho 2 File Widget kế tiếp "Widget Newsletter form" và "Widget Social buttons", ở 2 widget này mình sẽ đặt tên cho dễ dàng quản lý nhé!

Newsletter form (Hộp đăng ký nhận thông báo)

Tương tự như widget Search form, mọi người cũng mở file .txt có tên "Widget-Newsletter-form" và copy toàn bộ đoạn code chứa trong đó.

Sau đó quay trở lại giao diện quản trị của Blogger, đi đến phần "Bố cục", tìm box "sidebar" nhấn vào "Thêm tiện ích HTML/ Java script" và Paste toàn bộ code vào phần nội dung.

Chúng ta sẽ đặt tên cho Widget ngay mục "Tiêu đề" như hình sau đó nhấn "Lưu" để hoàn tất.

Demo

Lưu ý: Đối với Widget này, có 2 đoạn code anh em cần phải thay thế bằng mã feedburner trong Blog của anh em để đảm bảo Widget hoạt động chính xác.

Đoạn 1: http://feedburner.google.com/fb/a/mailverify?uri=Terocket

Đoạn 2: <input type="hidden" value="Terocket" name="uri" />

Ở 2 đoạn code này anh em thay thế "Terocket" thành mã feed burner của anh em vào.Làm thế nào để xác định được mã Feedburner của website Blogger?

Rất đơn giản anh em cứ làm y hình là được :)). Đầu tiên thêm một tiện ích mới có tên là "Theo dõi qua Email"

Sau khi hộp tiện ích mở ra, anh em chú ý vào đoạn mã mình tô đậm nằm ở cuối của đường link http://feeds.feedburner.com/Mã feedburner, đấy chình là mã Feedburner của anh em.

Giờ anh em chỉ việc copy đoạn mã này và Paste vào thay thế đoạn mã "Terocket" và "Lưu" lại là được.

Còn tiện ích mới này anh em nhấn vào "Hủy" để chọn không thêm tiện ích vào web.

Social Media (Icon mạng xã hội)

Phần này hơi khác 1 chút, anh em làm theo Ryan để tránh bị lỗi. Sau khi mở File .txt bằng Notepad mọi người cần để ý mục note dưới cùng /*Thêm đoạn code...*/ phần này anh em không copy chung với đoạn code bên trên mà sẽ copy sau nhé!

Ok! Giờ anh em copy phần code bên trên để paste vào tiện ích "HTML/ Java Script" và "Lưu" lại.

chèn code social media follow 1 vào blog

Sau khi hoàn thành xong anh em quay lại file Notepad và copy đoạn code cuối.

Giờ ta trở lại giao diện quản trị của Blogger, đi đến Tab "Chủ đề", chọn tiếp vào dấu "..." và tiếp tục đến phần "Chỉnh sửa HTML"

Ngay tại giao diện "Chỉnh sửa" của theme anh em chọn vào Ctrl + F và gõ </head> để tìm kiếm thẻ đóng head.

chèn code social media follow 2 vào blog

Sau khi tìm thấy thẻ ta Paste đoạn code vừa copy lên phía trên nó. Sau đó chúng ta lưu lại.

chèn code social media follow 2 vào blog 1

Xong giờ mọi người quay lại website và xem kết quả thôi :v

Trông xịn xò ra phết rồi :)). Ngoài ra, anh em còn có thể thay đổi vị trí các Box để trông thuận mắt hơn bằng cách di chuyển các Box lên xuống trong phần "sidebar".

Demo

Lưu ý: Anh em nhớ bổ sung đường link mạng xã hội của anh em vào đoạn <a href="Link social"...></a> để các icon hoạt động, anh em mà không bổ sung thì mấy icon này nó chỉ dùng trưng cho đẹp thôi :))

Cài đặt các tính năng khác cho Web

Ok! Giờ chúng ta đến công đoạn cuối cùng là bổ sung các tính năng còn thiếu cho Website. Bao gồm khung tác giả, thanh trạng thái breadcrumbs, nút chia sẻ mạng xã hội và thay đổi Style cho nhãn để trông bắt mắt hơn. Anh em mình bắt đầu luôn thôi!

Trước khi thêm các tính năng này anh em cần bổ sung 1 vài bài viết + thêm nhãn demo cho web trước! Nếu bạn chưa biết cách thêm nhãn, thì nên tham khảo qua bài viết những tính năng từ cơ bản đến nâng cao trong Blogger mình đã có hướng dẫn

Thêm khung tác giả ở cuối mỗi bài viết

Tương tự như thêm Widget anh em mở file "Author-box-for-Posts" bằng Notepad và thực hiện như sau:

Bước 1: Anh em quay trở lại giao diện quản trị của Blogger, đi đến tab "Chủ đề", chọn vào "Chỉnh sửa HTML"

Bước 2: Tại giao diện chỉnh sửa của theme, anh em nhấn phím Ctrl + F và tìm kiếm đoạn code sau

<data:post.body/>

Sau đó copy và paste đoạn code sau bên dưới nó

<!-- Author Box --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='authorboxwrap'> 
<div class='authorboxfull'> 
<div class='avatar-container'> 
<a href=''> 
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/> 
</a> 
</div> 
<div class='author_description_container'> 
<h4>Author: <a href='#' rel='author'><data:post.author/></a></h4> 
<p> <data:post.authorAboutMe/> </p> 
<div class='authorsocial'> 
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a> 
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> 
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a> 
<div class='clr'/> 
</div> 
</div> 
</div> 
</div> 
<div style='clear:both'/> 
</b:if> 
<!-- End Author Box -->

Bước 3: Anh em tiếp tục tìm kiếm đoạn code

]]></b:skin>

Bước 4: Sau đó copy và thêm đoạn code này phía trên nó

/* CSS Author Bio Box by MS Design */
.authorboxwrap {
  Font-family:Open Sans;
  background:#fff;
  margin:10px auto 20px;
  padding:20px;
  overflow:hidden;
  border:1px solid #ccc;
}
.avatar-container {
  float:left;
  margin-right:20px;
  border:1px solid silver;
  padding:3px;
}
.avatar-container img {
  width:110px;
  height:auto;
}
.author_description_container h4 {
  font-family:Open Sans;
  font-weight:700;
  font-size:16px;
  display:block;
  margin:0;
  margin-bottom:2px;
}
.author_description_container h4 a {
  color:#ef4824;
}
.author_description_container h4 a:hover {
  color:#404040;
}
.author_description_container p {
  margin:0;
  color:#888;
  font-size:95%;
  margin-bottom:8px;
  font-family:Open Sans;
}
.authorsocial a {
  display:inline-block;
  text-align:center;
  margin-right:10px;
}
.authorsocial a i {
  font-family:Fontawesome;
  width:25px;
  height:25px;
  padding:5px;
  display:block;
  opacity:1;
  border-radius:50%;
  transition:all .3s;
}
.authorsocial a:nth-child(1) i {
  background:#2d609b;
  color:#fff;
}
.authorsocial a:nth-child(2) i {
  background:#19bfe5;
  color:#fff;
}
.authorsocial a:nth-child(3) i {
  background:#eb4026;
  color:#fff;
}
.authorsocial a:hover:nth-child(1) i,
.authorsocial a:hover:nth-child(2) i,
.authorsocial a:hover:nth-child(3) i {
  opacity:0.90;
}

Ok! Giờ anh em lưu mẫu lại và xem kết quả.

Demo

Nhớ bổ sung đường link mạng xã hội của anh em vào đoạn <a href="Linksocial"...></a> để các icon hoạt động, không thì chỉ dùng để trưng thôi đấy

Nếu anh em search thấy có nhiều hơn 1 đoạn <data:post.body/> thì anh em thử từng cái 1 và quay lại web kiểm tra cho đến khi Box tác giả xuất hiện là được nhé!

Thêm Breadcrumbs chuẩn SEO cho web

Ok! Ta tiếp tục bổ sung Breadcrumbs cho website, bằng cách mở file .txt "Code-Breadcrumbs" và thực hiện như sau:

Bước 1: Anh em đi tới phần "Chỉnh sửa HTML" và tìm đoạn code sau

<b:include data='top' name='status-message'/>

Bước 2: Anh em copy và dán đoạn code sau bên dưới nó

<b:include data='posts' name='breadcrumb'/>

Bước 3: Anh em tiếp tục tìm đoạn code

<b:includable id='main' var='top'>

Bước 4: Chúng ta copy và dán đoạn code sau lên trên nó

<b:includable id="breadcrumb" var="posts"> 
<b:if cond="data:blog.homepageUrl == data:blog.url"> 
<!--No breadcrumb on home page--> 
<b:else> 
<b:if cond="data:blog.pageType == &quot;item&quot;">
<!--breadcrumb for the post page--> 
<a href="https://loiryan0202.blogspot.com/"> </a>
<p class="breadcrumbs">
<a href="https://loiryan0202.blogspot.com/"> 
<span class="post-navigation"> </span>
</a>
<a expr:href="data:blog.homepageUrl" rel="tag"> Home &gt;&gt; </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=""> &gt;&gt; </data:label></a> 
</b:if> 
</b:loop> 
<b:else> 
Unlabelled 
</b:else>
</b:if> 
<span> <data:post .title=""> </data:post></span> 
</b:loop> 
</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"> Home </a> 
Archives for <data:blog .pagename=""> </data:blog>
</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"> Home </a> All posts 
<b:else> <a expr:href="data:blog.homepageUrl"> Home </a> 
<span>Posts filed under <data:blog .pagename=""></data:blog></span> 
</b:else>
</b:if> 
</span> 
</p> 
</b:if> 
</b:else>
</b:if> 
</b:else>
</b:if> 
</b:else>
</b:if> 
</b:includable>

Bước 5: Anh em tiếp tục tìm đến đoạn code

]]></b:skin>

Bước 6: Sau đó anh em copy và paste đoạn code sau lên trên nó và lưu mẫu lại.

/* CSS Breadcrumbs */
.breadcrumbs {
  margin:0 0 15px 0;
  font-size:95%;
}
.post-navigation >
  a {
  color:#000;
  position:relative;
  text-decoration:none;
  transition:all 0.2s ease 0s;
}

Ok! Giờ ta có thể quay lại website và kiểm tra xem kết quả.

Demo

Anh em nhớ thay đoạn https://loiryan0202.blogspot.com thành địa chỉ trang blog của anh em nhé!

Thêm nút chia sẻ mạng xã hội cho web

Giờ chúng ta sẽ bổ sung thêm tính năng chia sẻ bài viết cho Blogger, tính năng chia sẻ này ở Blog mặc định cũng đã sẵn có nhưng nó rất xấu và không được chuyên nghiệp.

Do đó, anh em tụi mình sẽ bổ sung 1 công cụ chia sẻ ngon hơn để website của chúng ta thêm phần hiện đại. Ok! Bắt đầu nào.

Anh em mở file .txt "Share-Buttons-for-Posts" ra và thực hiện như sau

Bước 1: Ở phần "Chỉnh sửa HTML" anh em tìm đến đoạn code

</head>

Bước 2: Sau đó ta copy và paste đoạn code lên trên nó

<!-- Share Buttons --> 
<script type='text/javascript'>
//<![CDATA[//CSS Readyfunction 
loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]></script>

Bước 3: Ta tiếp tục tìm đến đoạn code

]]></b:skin>

Bước 4: Copy và paste đoạn code sau lên trên nó

/* Share Button */
.post-footer {
  margin-top:30px;
}
.share-post,
.multiauthor-box {
  margin-bottom:50px;
}
.share-post ul {
  padding:0;
  margin:0;
  text-align:center;
}
.share-post li {
  list-style:none;
  display:inline-block;
  margin-right:10px;
  padding:0;
  font-weight:700;
  text-transform:uppercase;
}
.share-post li:first-child {
  font-size:16px;
  color:#22a1c4;
}
.share-post li a {
  display:block;
  text-align:center;
}
.share-post span {
  display:none;
}
.share-post li a i {
  display:block;
  color:#fff;
  width:40px;
  height:40px;
  line-height:40px;
  font-size:18px;
  border-radius:40px;
  font-weight:normal;
  transition:all .3s;
}
.share-post {
  margin-bottom:0;
  border-top:1px solid #eff0f0;
  border-bottom:1px solid #eff0f0;
  line-height:52px;
  min-height:52px;
  margin-left:-30px;
  margin-right:-30px;
}
.share-post li a i.fa.fa-facebook {
  background:#3b5998;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-twitter {
  background:#19bfe5;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-google-plus {
  background:#d64136;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-linkedin {
  background:#006699;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-pinterest {
  background:#cb2027;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-facebook:hover {
  background:#fff;
  color:#3b5998;
  border:1px solid #4666aa;
}
.share-post li a i.fa.fa-twitter:hover {
  background:#fff;
  color:#19bfe5;
  border:1px solid #2acef4;
}
.share-post li a i.fa.fa-google-plus:hover {
  background:#fff;
  color:#d64136;
  border:1px solid #e95247;
}
.share-post li a i.fa.fa-linkedin:hover {
  background:#fff;
  color:#006699;
  border:1px solid #017ab6;
}
.share-post li a i.fa.fa-pinterest:hover {
  background:#fff;
  color:#cb2027;
  border:1px solid #e33239;
}

Bước 5: Tiếp tục tìm đến đoạn code

<data:post.body/>

Bước 6: Copy và paste đoạn code sau bên dưới nó

<!-- Share post -->
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a>
</li>
</ul>
</div>
<!-- End share post -->

Ok! Giờ anh em lưu mẫu và trở lại website để xem thành quả.

Demo

Thay đổi style cho Label Cloud

Chúc mừng anh em nào đã đi đến bước này cùng mình. Chắc chắn giờ trang web của mọi người đã giống với web demo 80% rồi, phần cuối này chỉ là 1 phần nhỏ mà Ryan muốn bonus thêm để web của chúng ta trở nên pro hơn trong mắt khách hàng.

Còn với website hiện tại anh em đã sẵn sàng kiếm tiền với Blogger rồi ^^. Giờ hoàn thành nốt phần còn lại thôi!

Ok! Chúng ta mở file .txt "Style-Labels-Cloud" ra và thực hiện các bước như sau:

Bước 1: Chúng ta quay lại phần giao diện "Chỉnh sửa HTML" và tìm đến đoạn code

]]></b:skin>

Bước 2: Ta copy và paste đoạn code sau lên bên trên đoạn code mà ta vừa tìm thấy

/* cloud label */
.label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
  font-size:100%;
  filter:alpha(100);
  opacity:10;
}
.cloud-label-widget-content {
  text-align:left;
}
.label-size {
  background:#0dd7b4;
  display:block;
  float:left;
  margin:0 3px 3px 0;
  color:#ffffff;
  font-size:11px;
  text-transform:uppercase;
}
.label-size a,
.label-size span {
  display:inline-block;
  color:#ffffff !important;
  padding:6px 8px;
  font-weight:bold;
}
.label-size:hover {
  background:#333333;
}
.label-count {
  white-space:nowrap;
  padding-right:3px;
  margin-left:-3px;
  background:#333333;
  color:#fff !important;
}
.label-size {
  line-height:1.2;
}

Bước 3: Anh em lưu mẫu và trở lại website để xem thành quả thôi. Quá đơn giản :))

Demo

Tổng kết

Yeah! Vậy là Ryan và anh em đã hoàn thành xong thao tác chuẩn hóa Template để tạo ra 1 website chuyên nghiệp.

Nếu anh em để ý thì vẫn còn 1 lỗi nhỏ ở website đó chính là phần bài viết liên quan, các thumbnails không được hiển thị đúng.

Trong bài viết lần tới mình sẽ hướng dẫn anh em cách xóa bỏ biểu tượng chỉnh sửa và thêm tiện ích related posts cho website, nên anh em đừng lo lắng cứ yên tâm bắt tay vào việc tạo ra những bài viết đầu tiên đăng lên blog của anh em đi nhé!

Và đừng quên đăng ký hòm thư để nhận được thông báo sớm về các bài viết của mình ♪(´▽｀). Hẹn gặp lại anh em, bái bai!

Tài liệu tham khảo:

How do I creat a Blogger Feed? - Google Support

Chuẩn hóa giao diện website từ Template mẫu

Cài đặt Logo cho Blogger

Cài đặt Widget cần thiết cho Web

Search Box (Thanh công cụ tìm kiếm)

Newsletter form (Hộp đăng ký nhận thông báo)

Social Media (Icon mạng xã hội)

Cài đặt các tính năng khác cho Web

Thêm khung tác giả ở cuối mỗi bài viết

Thêm Breadcrumbs chuẩn SEO cho web

Thêm nút chia sẻ mạng xã hội cho web

Thay đổi style cho Label Cloud

Tổng kết

Lợi Ryan

Đăng nhận xét

0 Nhận xét

Hot trong tuần

Giới thiệu

High Performance

Đối tác

Mạng xã hội

Công cụ

Chuẩn hóa giao diện website từ Template mẫu

Cài đặt Logo cho Blogger

Cài đặt Widget cần thiết cho Web

Search Box (Thanh công cụ tìm kiếm)

Newsletter form (Hộp đăng ký nhận thông báo)

Xem thêm

Social Media (Icon mạng xã hội)

Cài đặt các tính năng khác cho Web

Thêm khung tác giả ở cuối mỗi bài viết

Thêm Breadcrumbs chuẩn SEO cho web

Thêm nút chia sẻ mạng xã hội cho web

Thay đổi style cho Label Cloud

Tổng kết

Lợi Ryan

Đăng nhận xét

0 Nhận xét

Hot trong tuần

Giới thiệu

High Performance

Đối tác

Mạng xã hội

Công cụ