Seo nhãn (Label) trên Widget chuẩn của Blogger

Mặc định, để tạo nhãn Label theo chương mục trên Blogger, mình thường hay sử dụng thiết kế chuẩn của nó. Blogger là một ứng dụng thiết kế Web của Google, luôn luôn có sẳn các thiết kế chuẩn. Nhiều tiện ích được phát triển và tích hợp ở đây. Trên nền tảng Layout, có sẳn cả một giao diện để thiết kế bố cục cho một Website mà bạn đã từng thấy, có nghĩa là bạn muốn Add Widget thêm các tiện ích hiển thị, chỉ cần Click chuột vào đó và chọn lựa.

Tuy nhiên, Blogger chỉ cung ứng những thứ đủ xài, không tốn phí nên chúng ta cần phải tùy biến nhiều thứ lắm, để chúng trở thành cái của riêng ta. Widget Label cũng vậy, trông rất đơn điệu, làm hoài cũng chán. Ở phần thiết kế Template, vào Edit Html, bạn có thể tùy biến được rất nhiều trên chính Source code của nó.

Để hiểu thêm nhiều về cách thiết kế Web trên nền tảng Blogger, bạn có thể vào tham khảo bài: 

• Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
• Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

Nếu như các bạn đã biết rồi, có thể vào thẳng vấn đề trong Blogger với các bước như sau:

- Layout: Phải có sẳn Widget Label, nếu không có phải chịu khó chọn Add Widget (thêm tiện ích), và chọn tên Widget Label để thêm vào.

- Template: Bạn vào Edit Html(Chỉnh sữa mẫu). Nhấn Ctrl+F tìm thẻ: </b:skin> và chép dán Source dưới đây lên phía trên nó: (Tùy kiểu mà bạn muốn)

Kiểu 1:

.Label a {
    padding-left: 20px;
    background: #000;
    padding: 0 10px;
    color: #fff!important;
    border-radius: 70px;
    -moz-border-radius: 70px;
    height: 27px;
    line-height: 32px;
    text-transform: uppercase;
    text-decoration: none;
    border: none !important;
    -webkit-transition: all .3s ease-in-out !important;
    t: 20pxt: 20px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 10px;
}
.Label a:hover {
    color: #000 !important;
    background: #ff0;
}

Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. Mình cũng đã làm như thế. Có thể các bạn vào phần demo dưới để xem thử nhé.!

http://ketbancungkhanhnguyen5.blogspot.com/









Kiểu 2:



.widget li, .BlogArchive #ArchiveList ul.flat li{  list-style: none;
  padding: .25em 0;
  margin: 0;
  text-indent: 0;}
.label-size {
float: left;
font-size: 13px;
}
.list-label-widget-content ul,
.list-label-widget-content li {
list-style: none outide none;
}
.list-label-widget-content li a {
background: #F3F3F3;
color: #525252;
border: 1px solid #E2E2E2;
border-radius: 3px;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 153px;
}
.list-label-widget-content li span {
color: orangered;
background: #F3F3F3;
border-radius: 3px;
min-width: 40px;
float: right;
padding: 6px;
margin-bottom: 5px;
text-align: center;
border: 1px solid #E2E2E2;
}
.list-label-widget-content li span:first-child {
background: #F3F3F3;
border: 1px solid #E2E2E2;
border-radius: 3px;
border-right: 10px solid;
border-left: 10px solid;
width: 113px !important;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 250px;
}
.list-label-widget-content li a:hover,
#footer-nav .list-label-widget-content li a:hover {
background: orangered;
color: #fff;
}
.cloud-label-widget-content .label-size {
font-size: 100%;
float: left;
}
.cloud-label-widget-content .label-size a {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #FD4326;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
}
.cloud-label-widget-content .label-size span {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.cloud-label-widget-content .label-size span:first-child,
.cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background: #FD4326;
color: #FFF;
}

Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 






http://ketbancungkhanhnguyen7.blogspot.com/









Kiểu 3:
- Thêm đoạn css sau trên ]]></b:skin>



.Label ul{margin:0!important;padding:0!important;list-style-type:none!important}
.Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important}
.Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none}
.Label ul li a:hover{color:#fff!important;text-decoration:none}
.Label ul li a:hover:after{background:#ff4e47}
.Label ul li a:before{content:'';position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent}
.Label ul li a:after{content:'';position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px}
.Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}

CHỈNH SỬA WIDGET LABEL

- Nếu Widget Label trong Blogger của bạn chỉ có mỗi một, bạn mở Template kiễm tra thử sẽ thấy nó có tên duy nhất là Label1 và không có bất kỳ một Widget nào khác có tên Label.
- Tìm đoạn code sau trong widget Label1 bên trong Template:

<b:loop values='data:labels' var='label'>
  <li>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </li>
</b:loop>

Thay thế đoạn code vừa tìm thành đoạn code dưới đây:


<b:loop index='i' values='data:labels' var='label'>
  <b:if cond='data:i &lt; 5'>
    <li><a expr:href='data:label.url' rel='tag'><data:label.name/><b:if cond='data:showFreqNumbers'><span><data:label.count/></span></b:if></a></li>
  </b:if>
</b:loop>

Con số 5 màu đỏ ở trên là số tên nhãn mà bạn muốn xuất hiện.
Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 






http://ketbancungkhanhnguyen8.blogspot.com/




Từ những Code trên, bạn có thể tùy biến thữ dược rất nhiều hình dạng khác nhau, mà bạn có thể vọc cho biết. Mình chỉ sưu tầm được cái nào thì chia sẽ cái đó. Chúc các bạn nhiều may mắn.




Người viết: Nguyễn Đạt Khánh.

Read More

Thủ thuật Code: Tự động ẩn hiện thanh Navbar của Blogger

Trước khi vào bài viết, nếu chưa hiểu gì về Blogger, bạn có thể vào đây để tham khảo thêm tài liệu hướng dẫn nhé. 

• Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
• Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

Những tác giả của các bài viết nầy tuy không phải do mình viết, nhưng đều là các bậc lão tiền bối đi trước, có nhiều kinh nghiệm. Nghề của mình tuy là IT Networking Computer - trình độ Trung cấp thôi, nhưng lĩnh vực nầy mình vẫn phải học hỏi, phải tôn  trọng.

Khi thiết kế Blog, Blogger mặc định có một thanh Navbar trên cùng của blog bao gồm các menu như: Biểu tượng truy cập Blogger, khung tìm kiếm, nút chia sẽ Google+ và các liên kết chia sẽ khác, nút chuyển qua Blog tiếp theo ,các điều khiển đăng nhập và đăng xuất Blogger Dashboard, … .
Để dấu nó đi bạn chỉ cần đặt đoạn code dưới đây vào trước thẻ </head>.

<style type="text/css">
#navbar-iframe {height:0px; visibility:hidden; display:none; }
</style>

Tuy nhiên bạn có thể làm cho thanh Navbar ẩn hiện bằng một nút Ẩn/Hiện Navbar bởi vì về một phương diện nào đó, thanh Navbar của Blogger cũng có ích đấy.
Trong hình dưới đây, có các bước trình tự như sau:

• Đăng nhập vào Blogger Dashboard/ Chọn tiếp vào Chủ đề (Template) ở hướng mũi tên đầu bên trái hình, trỏ qua trái.
• Chọn tiếp chỉnh sữa Html (Edit Html).
• Nhấn Ctrl+F mở khung Search (vị trí hiện ra ở con trỏ chỉ về bên phải)
• Nhập vào khung Search dòng chữ </head> và nhấn phím Enter.
• Chép code trên khung Code phía trên vào phía trên vệt tô màu vàng trên hàng chữ </head> vừa tìm được, giống như khung chữ nhật viền trên hình.

Một điều thú vị hơn, nếu như các bạn muốn cho hiển thị nút Ẩn/Hiện Navbar, bạn hãy làm theo các bước sau:

Để làm được điều này, trước tiên bạn cần đặt thêm đoạn code dưới đây vào trước thẻ </head>.

Có thể giữ lại đoạn Code ở đầu bài hay không, đều có động thái của nó mỗi khi ứng dụng Blogger được Loading. Việc đó là tùy ở các bạn bố trí.

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{nav.style.visibility="visible";
nav.style.display="block";}
else
{nav.style.visibility="hidden";
nav.style.display="none";}
}
</script>
<style type="text/css">
#navbar-iframe {visibility: hidden; display: none;}
</style>

Tiếp theo bạn đặt đoạn code dưới đây vào vị trí cần hiển thị nút Ẩn/Hiện Navbar, có thể đặt trong một tiện ích HTML/JavaScript hoặc ở thanh Menu trên cùng của Blog.

<span style="cursor:pointer;" onclick="ShowHideNav();">
Ẩn / Hiện Navbar
<a style="visibility:hidden;">
</a></span>

Bạn có thể thay dòng Ẩn / Hiện Navbar bằng một liên kết hình ảnh với cú pháp như sau:

<img src="URL_hình ảnh"/>.

Để biết thêm chi tiết về cách thiết kế cú pháp thẻ <img>, bạn có thể xem thêm bài: Những Code Thông Dụng Cho Blogspot

DEMO trên trang địa chỉ sau mà bạn có thể vào xem:

http://ketbancungkhanhnguyen4.blogspot.com/

Trên đây chỉ là thủ thuật nhỏ mà mình tìm được. Bình thường thì các bạn vào Blogger Layout để tắt hiển thị Navbar hoặc vào Blogger Template,  tìm đoạn code trỏ về Navbar để xóa luôn hẳn cả. 

Ở trên Blog Dx - https://dxoan.blogspot.cfffom- còn có một cách nầy nữa: cho phép ẩn hiện khi rê trỏ chuột vào vùng vị trí của nó.
Source Code như sau:(Bạn chép nó vào trước thẻ đóng: </b:skin>)

#navbar-iframe {
height:5px;
}
/* IE7, IE8, IE6 */
#navbar-iframe {  height/*\**/: 30px\9; }
#navbar-iframe:hover {height:40px; !important;}

Mời các bạn thử qua công việc Hướng dẫn thiết kế Template Blogger nếu chưa biết, để làm cho bằng được một Web site ưng ý. Đây là một công việc kỹ thuật giúp các bạn có thể tự tin để tạo dựng cho mình một Web/Blog vào đời.

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

Người viết: Nguyễn Đạt Khánh

Read More

Cách tạo hộp thông tin của Page Facebook vào Web/blogger

Fanpage Facebook  ngày càng trở nên như một thương hiệu làm ăn phát triển. Chỉ cần bỏ ra $35/ tháng cho công việc quảng bá công việc, bạn có thể thu lại nhiều lợi nhuận từ lượng khách hàng truy cập facebook.

Để kết nối thuận tiện với Website/Blogger để tăng sự chú ý vào công việc trên fanPage, không chỉ ngoài những cái Like thân thiện mà còn ở những dòng tin nhắn, cùng những sự kiện và thông tin để giúp bạn và khách hàng tiếp cận mau mắn.

Dưới đây là hình dạng, kiểu cách của hộp giao tiếp Fanpage Facebook được nhúng trên Website/Blogger mà mình đã làm từ Source code tìm kiếm cách đây vài bữa.

Phần Source Code nầy, mình sử dụng trong thiết kế Web site bằng Blogger Dashboard của Google, tất nhiên là bạn phải biết và đã có sẳn một Google Account.
Việc trước tiên, bạn vào phần Blogger Dashbooard.
Vào bố cục (Layout) sau đó thêm một tiện ích mới, dán code sau và thay đổi địa chỉ Page của bạn là được. Sau đó nhấn Lưu lại nhé.

<center><div class='widget-content'>
<div class="fb-page" 
data-href="https://www.facebook.com/khanhnguyenblogger/" 
data-tabs="messages, timeline, events"
data-small-header="true" 
data-adapt-container-width="true" 
data-hide-cover="false" 
data-show-facepile="false"
data-height="320">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/khanhnguyenblogger/"><a href="https://www.facebook.com/khanhnguyenblogger/">Facebook</a></blockquote></div></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></div></center>

Chú ý:
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

• Hộp thử Test Html/JavaScript

Bạn có thể thay thử một số tham số truy vấn có giá trị True/False và tham số biến data-height để biết thêm hiệu ứng để có một lựa chọn thiết kế phù hợp, bắt mắt.
Thay màu đỏ thành link Fanpage của bạn. Nhớ là FanPage nầy phải có, nếu chưa có tiền mua, bạn cứ thử tự tạo đi, đến phần đăng ký Bank Account thì đừng khai báo bậy vào là được. FanPage của mình cũng làm như vậy đó, chẳng có chết gì đâu, cứ xem như không có tiền thì để vậy chơi thôi, cho biết.
Bạn chép địa chỉ dưới vào thanh địa chỉ và cho chạy thử nhé, hộp thông tin của fage Facebook nằm dưới cuối chân trang đó.

http://tinhockhanhdat21.blogspot.com/

Bạn cứ thử, chỉ cần có gan, chẳng chết ai đâu, nó cho Demo thử nghiệm mà. Chúc các bạn thành công.

Người viết: Nguyễn Đạt Khánh

Read More

Tạo nút Button thu gọn và xem nội dung bài viết

Hình trên có đoạn nội dung khá dài và chứa cả hình, để làm gọn lại mình chỉ cần dùng đoạn code nhỏ dưới đây thôi. Nhớ rằng đoạn nào cần ẩn, bạn đặt cho đúng như cú pháp trên Source Code nhé.

<center><div> <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Thu Gọn Lại';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Mở Rộng';  }" style="font-size:16px;background:#23AD1F;color:white; padding: 5px; border-radius:7px;" type="button" value="Mở Rộng" /></div><div><div style="display: none;border:1px solid black;width:580px;max-height:400px;overflow:auto;background:#E8EAE8;text-align:left;padding:10px;">

Nội Dung Cần Ẩn Hiện Để Ở khúc này !!!

</div></div></center>

Dưới đây là ý nghĩa một số vị trí có tô màu để các bạn dễ theo dõi và dễ chĩnh sửa theo ý thích:
     Là dòng chữ hiển thị trên nút (mở rộng/thu gọn)
     Là màu của dòng chữ hiển thị trên nút
     Là màu nền của nút
     Là màu nền của phần nội dung


Muốn nâng cao hơn các bạn dùng mã màu thập lục, di chuyển con trỏ đến khi lấy được màu vừa ý, thì copy mã ở ô HEX và dùng là xong.
Để lấy mã màu Hex, bạn vào Blogger Dashboard, vào mục Chủ đề, chọn Tùy chỉnh. (Những chổ có mũi tên trỏ trong hình) và chọn tiếp phần Nâng cao để lấy mã màu chính xác.

Nội dung như sau, bạn cứ thử Click vào nút Button màu xanh:

Gần đây, đã có rất nhiều người dùng phản ảnh về việc xuất hiện của một phân vùng ẩn Recovery với dung lượng khoảng 450MB trong Disk Management khi cài đặt Windows 10 hay cập nhật lên Windows 10 Anniversary. Vậy có nên lấy lại dung lượng này để cải thiện không gian lưu trữ cho ổ cứng?

Được biết, phân vùng Recovery ẩn này dành cho chức năng Windows Recovery Environment (WinRE) giúp người dùng nhanh chóng khôi phục lại hệ thống về tình trạng lúc mới cài đặt. Tuy nhiên, thường chức năng này rất ít người sử dụng và khá vô dụng, vì thế Techrum sẽ hướng dẫn bạn lấy lại khoảng 450MB dung lượng "vô bổ" ấy để làm tăng thêm không gian lưu trữ.

Đối với những người dùng có dung lượng lưu trữ lên đến hàng TB thì việc này không cần thiết để làm, vì con số 450MB là không nhiều, nhưng đối với những người dùng có dung lượng ít, hoặc những người dùng xài những loại máy hiện đại chỉ có mỗi ổ SSD 128GB hoặc 256GB thì việc lưu trữ là không đủ.

Bài này viết này mình sử dụng Windows 10 Anniversary, mời bạn đọc tham khảo cách tăng 450MB sao khi update Windows 10 hoặc Windows 10 Anniversary theo các bước sau:

1. Khởi chạy Command Promt (CMD) với chế độ Admin: nhấn chuột phải vào nút Start > Command Prompt (Admin).
2. Nhập lệnh Diskpart vào CMD và nhấn phím Enter.
   
3. Chờ vài giây để lệnh Diskpart thực thi. Sau đó, nhập tiếp lệnh List volume để hiển thị danh sách các phân vùng hiện tại trên ổ cứng. Khi đó bạn sẽ thấy được danh sách các phân vùng, bao gồm cả phân vùng Recovery 450MB (hoặc tương đương) với Info là Hidden.
4. Vậy là bạn sẽ biết được phân vùng nào là phân vùng cần xóa (Ở hình, mình có phân vùng 3 và 5). Tiếp theo, download và cài đặt chương trình AOMEI Partition Assistant Standard Edition.
5. Mở chương trình lên, nhấn chuột phải vào phân vùng nào có dung lượng tương đương 450MB. Rồi chọn lệnh Delete Partition (xóa phân vùng).
6. Sau khi xóa, sẽ hiện ra một phân vùng Unallocated. Chuột phải vào phân vùng đó, và chọn Merge Partitions (gộp phân vùng).
7. Chọn phân vùng C: và Unallocated, sau đó nhấp OK.
8. Tiếp theo bấm nút Apply ở phía góc trên bên trái rồi chọn Proceed.
9. Lúc này chương trình sẽ yêu cầu người dùng Restart lại máy tính. Bạn cứ việc chọn Yes và để chương trình thực thi trong vòng 10~15'.
10. Vậy là xong! Theo kết quả (ở đây do mình tìm được 2 phân vùng ẩn nên gộp hết vào) sau khi làm, mình có tổng cộng 119GB. Thật tuyệt vời đúng không?

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

Chúc các bạn thành công với những kiến thức chia sẽ đầy thú vị.
   Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

• Hộp thử Test Html/JavaScript

Người viết: Nguyễn Đạt Khánh

Read More